@extends('fronted.layout.main')
@section('adcontent')
    <style>
        .item-category {
            font-size: 1rem;
            font-weight: 500;
        }

        .items {
            height: 80vh;
            overflow: auto;
        }

        #expensesReport thead {
            font-size: 0.9rem;
        }

        #expensesReport tbody {
            font-size: 0.8rem;
        }

        .totalAmount {
            font-size: 1rem;
            font-weight: 600;
        }

        #SalesReportsPdf h6 {
            font-size: 0.6rem;
            font-weight: 500;
            margin: 0;
            text-align: center;

        }

        #SalesReportsPdf h5 {
            font-size: 0.8rem;
            font-weight: 500;
            margin: 0;
        }

        .year-item {
            position: relative;
        }

        .month-list {
            display: none;
            position: absolute;
            left: -100%;
            top: 10%;
            min-width: 100%;
        }

        .year-item:hover .month-list {
            display: block;
        }

        .month-dropdown li:hover {
            background-color: #f0f0f0;
        }
    </style>
    <div class="container-fluid" id="SalesReportsPdf">
        <div class="container">
            <div class="row mt-4 mb-3">
                <div class="col-lg-5">
                    <div class="d-flex justify-content-between align-item center">
                        <div class="card shadow-sm border-0">
                            <div class="card-body py-1 ">
                                <h6 class="">No of Txn</h6>
                                <h5>{{ $totalTransactions }}</h5>
                            </div>
                        </div>
                        <div class="card shadow-sm border-0">
                            <div class="card-body py-1">
                                <h6>Total Sale</h6>
                                <h5><i
                                        class="fa-solid fa-indian-rupee-sign me-1"></i>{{ number_format($totalSalesAmount, 2) }}
                                </h5>
                            </div>
                        </div>
                        <div class="card shadow-sm border-0">
                            <div class="card-body py-1">
                                <h6>Due Balance</h6>
                                <h5><i
                                        class="fa-solid fa-indian-rupee-sign me-1"></i>{{ number_format($totalRemaningAmount, 2) }}
                                </h5>
                            </div>
                        </div>
                        <div class="card shadow-sm border-0">
                            <div class="card-body py-1">
                                <h6>Waved Amount</h6>
                                <h5><i
                                        class="fa-solid fa-indian-rupee-sign me-1"></i>{{ number_format($totalWavedAmount, 2) }}
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <form id="saleDataFilterForm" action="{{ route('sale.report.view') }}" method="GET">
                        <div class="d-flex justify-content-end align-items-center gap-2">
                            <div id="custom-filter" style="display:{{ $filterValue !== 'custom' ? 'none' : 'block' }}"
                                class="filter-custome-range flex-fill">
                                <div class="d-flex gap-1">
                                    <div class="input-group flex-fill">
                                        <label for="startDate" class="input-group-text">Start Date</label>
                                        <input type="date" class="form-control" id="startDateInput"
                                            value="{{ $startDate }}" name="startDate">
                                    </div>
                                    <div class="input-group flex-fill">
                                        <label for="startDate" class="input-group-text">End Date</label>
                                        <input type="date" class="form-control" id="endDateInput"
                                            value="{{ $endDate }}" name="endDate">
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown p-0 m-0 bg-warning w-auto">
                                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="yearDropdown"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    @if ($filterValue !== 'all' && $filterValue !== 'custom')
                                        {{ \Carbon\Carbon::parse($filterValue)->format('F Y') }}
                                    @else
                                        <i class="fa-solid fa-filter me-2"></i> {{ strtoupper($filterValue) }}
                                    @endif
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="yearDropdown">
                                    <li class="dropdown-item" data-year="all">
                                        <button class="dropdown-item filterBtn " type="button" name="selected_month"
                                            value="all">
                                            All
                                        </button>
                                    </li>
                                    <li class="dropdown-item" data-year="custom">
                                        <button class="dropdown-item filterBtn " type="button" name="selected_month"
                                            value="custom">
                                            Custom
                                        </button>
                                    </li>
                                    @foreach ($salesYears as $year => $months)
                                        <li class="year-item" data-year="{{ $year }}">
                                            <a class="dropdown-item" id="year{{ $year }}" href="#"><i
                                                    class="fa-solid fa-caret-left me-3"></i>{{ $year }}</a>
                                            <ul class="dropdown-menu month-list" aria-labelledby="year{{ $year }}">
                                                @foreach ($months as $monthName => $monthValue)
                                                    <li>
                                                        <button class="dropdown-item filterBtn" type="button"
                                                            name="selected_month"
                                                            value="{{ $year }}-{{ str_pad($monthValue, 2, '0', STR_PAD_LEFT) }}-01">
                                                            {{ $monthName }}
                                                        </button>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="cal-auto">
                                <button class="btn btn-warning btn-sm" type="submit" id="filter-record-btn">Filter</button>
                            </div>
                            <div class="col-auto">
                                <button id="salesReportDownloadBtn" type="button" class="btn btn-danger btn-sm"
                                    data-bs-toggle="tooltip" data-bs-placement="top" title="Please Select Filter">
                                    <i class="fa fa-download" aria-hidden="true"></i>
                                    Report
                                </button>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-success btn-sm" id="ShareSalesReportBtn"
                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Please Select Filter">Share</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="container">
                <div class="items border-bottom">
                    <div class="table-responsive">
                        <table id="expensesReport" class="table text-center table-light align-middle">
                            <thead class="align-middle">
                                <th>S No</th>
                                <th>Invoice No</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Room No</th>
                                <th>Item</th>
                                <th>Quantity</th>
                                <th>Amount</th>
                                <th>Total Amount</th>
                                <th>Payments</th>
                                <th>Remaning</th>
                            </thead>
                            <tbody>
                                @forelse ($salesReportsData as $index => $sale)
                                    @php
                                        $rowCount = max(1, count($sale['itemsDetails']));
                                    @endphp
                                    <tr>
                                        <td rowspan="{{ $rowCount }}">{{ $index + 1 }}</td>
                                        <td rowspan="{{ $rowCount }}">{{ $sale['invoiceNo'] }}</td>
                                        <td rowspan="{{ $rowCount }}">{{ $sale['invoiceDate'] }}</td>
                                        <td rowspan="{{ $rowCount }}">{{ $sale['tenantName'] }}</td>
                                        <td rowspan="{{ $rowCount }}">{{ $sale['roomNo'] }}</td>

                                        <!-- First Item Details -->
                                        @if (!empty($sale['itemsDetails']))
                                            <td>{{ $sale['itemsDetails'][0]['name'] ?? '' }}
                                                {{ isset($sale['itemsDetails'][0]['electricityBillDate']) ? \Carbon\Carbon::parse($sale['itemsDetails'][0]['electricityBillDate'])->format('d-M-Y') : '' }}
                                            </td>
                                            <td>{{ $sale['itemsDetails'][0]['quantity'] ?? '' }}</td>
                                            <td><i
                                                    class="fa-solid fa-indian-rupee-sign me-1"></i>{{ number_format(floatval($sale['itemsDetails'][0]['amount']), 2) ?? '' }}
                                            </td>
                                        @else
                                            <td colspan="3">No items available</td>
                                        @endif
                                        <td rowspan="{{ $rowCount }}"> <i
                                                class="fa-solid fa-indian-rupee-sign me-1"></i>
                                            {{ number_format($sale['totalAmount'], 2) }}</td>
                                        <td rowspan="{{ $rowCount }}">
                                            @foreach ($sale['receiveAmounts'] as $receive)
                                                <div class="mb-1">
                                                    <i class="fa-solid fa-indian-rupee-sign me-1"></i>
                                                    {{ number_format($receive['receiveAmount'], 2) }} |
                                                    {{ $receive['paymentMode'] ?? 'N/A' }} |
                                                    {{ \Carbon\Carbon::parse($receive['receiveDate'])->format('d-M-Y') }}
                                                </div>
                                                <hr class="m-1">
                                            @endforeach
                                        </td>
                                        <td rowspan="{{ $rowCount }}"> <i
                                                class="fa-solid fa-indian-rupee-sign me-1"></i>{{ number_format($sale['remaningAmount'], 2) }}
                                        </td>
                                    </tr>

                                    <!-- Additional Rows for Items -->
                                    @if (count($sale['itemsDetails']) > 1)
                                        @foreach (array_slice($sale['itemsDetails'], 1) as $item)
                                            <tr>
                                                <td>{{ $item['name'] ?? '' }}
                                                    {{ isset($item['electricityBillDate']) ? \Carbon\Carbon::parse($item['electricityBillDate'])->format('d-M-Y') : '' }}
                                                </td>
                                                <td>{{ $item['quantity'] ?? '' }}</td>
                                                <td> <i class="fa-solid fa-indian-rupee-sign me-1"></i>
                                                    {{ number_format(floatval($item['amount']), 2) ?? '' }}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="11">No sales data available.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(() => {

                function shareSaleReport() {
                    $("#loader-overlay").show();
                    $.ajax({
                        type: "get",
                        url: "{{ route('AllSales.pdf') }}",
                        data: {
                            'filter': '{{ $filterValue }}',
                            'startDate': '{{ $startDate }}',
                            'endDate': '{{ $endDate }}'
                        },
                        dataType: 'json',
                        success: function(response) {
                            if (response.status && response.data.download_link) {
                                var whatsappLink = "whatsapp://send?text=" + encodeURIComponent(
                                    "👋 Hi Dear,\r\n \r\nYour Sales Report Link is here! 📊🔗 Please click on the link below to download 👇\r\n\r\n" +
                                    response.data.download_link + "\r\n\r\nRegards, \r\n" + response
                                    .data.bussinessData);
                                // Create a temporary link element to trigger the WhatsApp share
                                var link = document.createElement('a');
                                link.href = whatsappLink;
                                link.click();

                            } else {
                                console.log("Download link not available");
                            }
                        },
                        error: function(error) {
                            console.log("An error occurred:", error);
                        },
                        complete: function() {
                            $("#loader-overlay").hide();
                        }
                    });
                }

                $("#salesReportDownloadBtn").on('click', function() {
                    var $this = $(this); // Save reference to button
                    var filterValue = "{{ $filterValue }}";
                    if (filterValue === 'all') {
                        Swal.fire({
                            'icon': 'info',
                            'text': "please select filter first",
                            timer: 3000,
                            timerProgressBar: true,
                        });
                        return;
                    }
                    $this.attr('disabled', false);
                    $("#loader-overlay").show();
                    $.ajax({
                        type: "get",
                        url: "{{ route('AllSales.pdf') }}",
                        data: {
                            'filter': '{{ $filterValue }}',
                            'startDate': '{{ $startDate }}',
                            'endDate': '{{ $endDate }}'
                        },
                        dataType: 'json',
                        success: function(response) {
                            if (response.status && response.data.download_link) {
                                // Create an anchor element for downloading the file
                                var link = document.createElement('a');
                                link.href = response.data.download_link;
                                link.download = response.data
                                    .filename; // Use the filename from the response
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link); // Remove the anchor after clicking
                            } else {
                                console.log("Download link not available");
                            }
                        },
                        error: function(error) {
                            console.log("An error occurred:", error);
                        },
                        complete: function() {
                            $("#loader-overlay").hide();
                            $this.attr('disabled', true);
                        }
                    });
                });


                function WhatsAppNotInstalled(btn) {
                    btn.attr("disabled", false);
                    Swal.fire({
                        icon: 'warning',
                        title: 'WhatsApp Permission',
                        html: 'Our system is support whatsapp desktop please install by give download link here 👇 <br>' +
                            '<a class="btn btn-success btn-sm" href="https://www.whatsapp.com/download" target="_blank">Download Link</a>.' +
                            '<br>if you already install go to setting inside permission and give desktop whatspp permission.',
                        showCloseButton: true,
                    });
                }
                $("#ShareSalesReportBtn").on("click", function() {
                    var btn = $(this);
                    var filterValue = "{{ $filterValue }}";
                    if (filterValue === 'all') {
                        Swal.fire({
                            'icon': 'info',
                            'text': "please select filter first",
                            timer: 3000,
                            timerProgressBar: true
                        })
                        return;
                    }
                    $(this).attr("disabled", true);
                    $.ajax({
                        type: "get",
                        url: "{{ route('check.whatsapp.permission') }}",
                        success: function(response) {
                            response ? setTimeout(function() {
                                btn.attr("disabled", false);
                                shareSaleReport();
                            }, 2000) : WhatsAppNotInstalled(btn);
                        }
                    });
                });

                $(".filterBtn").on('click', function() {
                    const filterValue = $(this).val();
                    const form = $("#saleDataFilterForm");

                    // Remove any existing hidden filter input
                    form.find('input[name="filter"]').remove();

                    // Update the dropdown text
                    $("#yearDropdown").text(filterValue);

                    // Handle custom filter visibility
                    if (filterValue === 'custom') {
                        $("#custom-filter").fadeIn(); // Use fadeIn for smoother UX
                    } else {
                        $("#custom-filter").fadeOut(); // Use fadeOut for consistency
                    }

                    // Append the hidden input for the filter value
                    form.append(`<input type="hidden" name="filter" value="${filterValue}">`);
                });
            })
        </script>
    @endsection