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

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

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

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

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

        .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">
        <div class="container my-4">
            <div class="d-flex justify-content-end gap-2">
                <form id="saleDataFilterForm" action="{{ route('expense.report') }}" 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 ($groupedExpenses 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>
                </form>
                <div class="col-auto">
                    <form action="{{ route('AllExpenses.pdf') }}" id="expenseReportDownloadForm">
                        <input type="date" value="{{ $request->input('startDate', '') }}" name="startDate"
                            id="hiddenStartDataInput" hidden>
                        <input type="date" value = "{{ $request->input('endDate', '') }}" name="endDate"
                            id="hiddenEndDataInput" hidden>
                        <input type="hidden" value="{{ $request->input('filter', '') }}" name="filter">
                        <button type="submit" class="btn btn-danger btn-sm" id="expenceReportDownloadBtn"> <i
                                class="fa fa-download" aria-hidden="true"></i> Report</button>
                    </form>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-success btn-sm" id="ShareExpenseReportBtn">Share</button>
                </div>
            </div>
        </div>
        <div class="container">
            @php
                $totalAmount = 0;
            @endphp
            <div class="items border-bottom">
                @foreach ($reportData as $category)
                    @php
                        $totalAmount += $category['amount'];
                    @endphp
                    <h4 style="background-color:#d9d9d9" class="text-black p-1 item-category">Category Name: <span
                            class="text-black text-capitalize fw-bold">{{ $category['category_name'] }}</span><span
                            class="text-warning text-capitalize fw-bold ms-1"><i
                                class="fa-solid fa-indian-rupee-sign ms-1"></i>{{ number_format($category['amount'], 2) }}</span>
                    </h4>
                    <div class="table-responsive">
                        <table id="expensesReport" class="table text-center table-light">
                            <thead class="align-middle">
                                <tr>
                                    <th>S No</th>
                                    <th>Date</th>
                                    <th>Item Name</th>
                                    <th>Quantity</th>
                                    <th>Rate</th>
                                    <th>Amount</th>
                                    <th>Payment Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($category['details'] as $index => $detail)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $detail['date'] }}</td>
                                        <td>{{ $detail['item_name'] }}</td>
                                        <td>{{ $detail['quantity'] }}</td>
                                        <td>{{ $detail['rate'] }}</td>
                                        <td><i
                                                class="fa-solid fa-indian-rupee-sign mx-1"></i>{{ number_format($detail['amount'], 2) }}
                                        </td>
                                        <td>{{ $detail['payment_type'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>
            <h4 class="totalAmount bg-white p-1">Total Amount
                <span class="text-warning">
                    <i class="fa-solid fa-indian-rupee-sign mx-1"></i> {{ number_format($totalAmount, 2) }}
                </span>
            </h4>
        </div>
    </div>
    <script>
        $(document).ready(() => {
            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,
                });
            }

            function downloadAndSharePdf(startDate, endDate, filter) {
                $("#loader-overlay").show();
                $.ajax({
                    type: "get",
                    url: "{{ route('AllExpensesShare.pdf') }}",
                    data: {
                        'startDate': startDate,
                        'endDate': endDate,
                        'filter': filter
                    },
                    dataType: "json", // Fixed the data type
                    success: function(response) {
                        if (response.status) {
                            // Construct WhatsApp link
                            var whatsappLink = "whatsapp://send?text=" + encodeURIComponent(
                                "👋 Hi Dear,\r\n\r\nYour Expenses 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
                            );

                            // Open WhatsApp link
                            window.location.href = whatsappLink;
                        } else {
                            Swal.fire({
                                icon: 'error',
                                text: 'Unable to generate report.',
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            text: 'Something went wrong!',
                        });
                    },
                    complete: function() {
                        $("#loader-overlay").hide();
                    }
                });
            }

            $("#ShareExpenseReportBtn").on("click", function() {
                var btn = $(this);
                let startDate = '{{ $startDate }}';
                let endDate = '{{ $endDate }}';
                let filter = "{{ $filterValue }}"
                $(this).attr("disabled", true);
                $.ajax({
                    type: "get",
                    url: "{{ route('check.whatsapp.permission') }}",
                    success: function(response) {
                        response ? setTimeout(function() {
                            btn.attr("disabled", false);
                            downloadAndSharePdf(startDate, endDate, filter);
                        }, 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