@extends('master.authMaster')

@section('content')
    <div class="col-span-12 lg:col-span-12">
        <div class="flex justify-between mt-5">
            <h2 class="text-lg font-medium mr-auto">
                Monthly Income Report <span id="report-month-year" class="text-gray-600">(November 2025)</span>
            </h2>
        </div>
    </div>

    <!-- BEGIN: Report Filter Form -->
    <div class="intro-y box p-5 mt-5 col-span-12 lg:col-span-12">
        @if (session('success'))
            <div class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9">
                {{ session('success') }}
            </div>
        @elseif (session('error'))
            <div class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6">
                {{ session('error') }}
            </div>
        @endif

        <form id="report-filter-form" class="grid grid-cols-1 md:grid-cols-3 gap-3">
            @csrf
            <div>
                <label for="year" class="form-label">Year</label>
                <select id="year" name="year" class="input w-full border" required>
                    <option value="">Select Year</option>
                    @for ($y = date('Y'); $y >= 2025; $y--)
                        <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endfor
                </select>
            </div>

            <div>
                <label for="month" class="form-label">Month</label>
                <select id="month" name="month" class="input w-full border" required>
                    <option value="">Select Month</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </div>

            {{-- <div>
                <label for="organisation_id" class="form-label">Organisation</label>
                <select id="organisation_id" name="organisation_id" class="input w-full border">
                    <option value="">All Organisations</option>
                    @foreach ($organisations as $organisation)
                        <option value="{{ $organisation->organisation_id }}">
                            {{ $organisation->organisation_name }}
                        </option>
                    @endforeach
                </select>
            </div> --}}

            <div>
                <label for="financial_year" class="form-label">Financial Year</label>
                @php
                    $currentFinancialYear = $accountingYears->where('is_current', true)->first();
                @endphp
                <input type="text" id="financial_year" name="financial_year" class="input w-full border"
                    value="{{ $currentFinancialYear ? $currentFinancialYear->accounting_year_financial : '' }}"
                    readonly>
                <input type="hidden" id="financial_year_id" name="financial_year_id"
                    value="{{ $currentFinancialYear ? $currentFinancialYear->accounting_year_id : '' }}">
            </div>

            <div class="md:col-span-4 flex gap-2">
                <button type="submit" class="button text-white bg-theme-1 shadow-md">
                    Generate Report
                </button>
                <button type="button" id="print-report" class="button text-white bg-theme-9 shadow-md" style="display:none;">
                    Print Report
                </button>
            </div>
        </form>
    </div>
    <!-- END: Report Filter Form -->

    <!-- BEGIN: Report Results -->
    <div id="report-results" class="intro-y box p-5 mt-5 col-span-12 lg:col-span-12" style="display:none;">
        <div class="flex gap-2 items-center mb-4">
            <h3 class="text-lg font-semibold" id="report-title"></h3>
            <div class="text-right">
                <p id="report-period" style="color: #000; font-size: 20px; font-weight: 500;"></p>
            </div>
        </div>

        <!-- Summary Section -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
            <div class="bg-blue-50 p-4 rounded-lg">
                <p class="text-sm text-gray-600">Total Transactions</p>
                <p class="text-2xl font-bold text-blue-600" id="total-count">0</p>
            </div>
            <div class="bg-green-50 p-4 rounded-lg">
                <p class="text-sm text-gray-600">Total Amount</p>
                <p class="text-2xl font-bold text-green-600" id="total-amount">₹ 0.00</p>
            </div>
        </div>

        <!-- Summary by Head -->
        <div class="mb-5">
            <h4 class="text-md font-semibold mb-3">Summary by Income Head</h4>
            <div class="overflow-x-auto">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Income Head</th>
                            <th>Count</th>
                            <th>Total Amount</th>
                        </tr>
                    </thead>
                    <tbody id="summary-by-head">
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Detailed Transactions -->
        <div class="overflow-x-auto scrollbar-hidden">
            <div class="mt-5 table-report table-report--tabulator" id="income-report-table"></div>
        </div>
    </div>
    <!-- END: Report Results -->

    <link href="{{ asset('build/assets/css/tabulator.min.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator_materialize.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>

    <script>
        let reportTable;

        // Function to update month/year display
        function updateMonthYearDisplay() {
            const monthSelect = document.getElementById('month');
            const yearSelect = document.getElementById('year');
            const monthYearDisplay = document.getElementById('report-month-year');

            const monthNames = ['', 'January', 'February', 'March', 'April', 'May', 'June',
                               'July', 'August', 'September', 'October', 'November', 'December'];

            const selectedMonth = monthSelect.value;
            const selectedYear = yearSelect.value;

            if (selectedMonth && selectedYear) {
                monthYearDisplay.textContent = `(${monthNames[selectedMonth]} ${selectedYear})`;
            } else {
                monthYearDisplay.textContent = '(November 2025)';
            }
        }

        // Update display when month or year changes
        document.getElementById('month').addEventListener('change', updateMonthYearDisplay);
        document.getElementById('year').addEventListener('change', updateMonthYearDisplay);

        // Initialize display on page load
        updateMonthYearDisplay();

        document.getElementById('report-filter-form').addEventListener('submit', function(e) {
            e.preventDefault();
            generateReport();
        });

        document.getElementById('print-report').addEventListener('click', function() {
            printReport();
        });

        function generateReport() {
            const formData = new FormData(document.getElementById('report-filter-form'));

            fetch('{{ route("reports.monthly.income.data") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayReport(data);
                } else {
                    alert('Error generating report');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error generating report');
            });
        }

        function displayReport(data) {
            // Show results section
            document.getElementById('report-results').style.display = 'block';
            document.getElementById('print-report').style.display = 'inline-block';

            // Update month/year display
            updateMonthYearDisplay();

            // Update summary
            document.getElementById('report-title').textContent = 'Monthly Income Report';
            document.getElementById('report-period').textContent = data.period.month_name;
            document.getElementById('total-count').textContent = data.summary.total_count;
            document.getElementById('total-amount').textContent = '₹ ' + parseFloat(data.summary.total_amount).toFixed(2);

            // Update summary by head
            const summaryTbody = document.getElementById('summary-by-head');
            summaryTbody.innerHTML = '';
            data.summary.by_head.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.head_name}</td>
                    <td>${item.count}</td>
                    <td>₹ ${parseFloat(item.total_amount).toFixed(2)}</td>
                `;
                summaryTbody.appendChild(row);
            });

            // Initialize/Update table
            if (reportTable) {
                reportTable.setData(data.data);
            } else {
                reportTable = new Tabulator("#income-report-table", {
                    data: data.data,
                    layout: "fitColumns",
                    theme: "bootstrap5",
                    pagination: true,
                    paginationSize: 20,
                    paginationSizeSelector: [10, 20, 50, 100],
                    columns: [
                        {
                            title: "SL",
                            hozAlign: "center",
                            formatter: "rownum",
                            width: 60
                        },
                        {
                            title: "Date",
                            field: "transaction_date",
                            hozAlign: "center",
                            formatter: function(cell) {
                                const value = cell.getValue();
                                if (!value) return "";
                                const date = new Date(value);
                                return date.toLocaleDateString("en-GB", {
                                    day: "2-digit",
                                    month: "2-digit",
                                    year: "numeric"
                                });
                            }
                        },
                        {
                            title: "Organisation",
                            field: "organisation.organisation_name",
                            hozAlign: "left"
                        },
                        {
                            title: "Division",
                            field: "account_type.account_type_Name",
                            hozAlign: "left"
                        },
                        {
                            title: "Income Head",
                            field: "income_head.income_head_name",
                            hozAlign: "left"
                        },
                        {
                            title: "Amount (₹)",
                            field: "transaction_amount",
                            hozAlign: "right",
                            formatter: function(cell) {
                                return '<span style="color:green; font-weight:600;">₹ ' +
                                    parseFloat(cell.getValue()).toFixed(2) + '</span>';
                            }
                        },
                        {
                            title: "Payment Type",
                            field: "payment_type.name",
                            hozAlign: "center"
                        },
                        {
                            title: "Reference",
                            field: "transaction_reference",
                            hozAlign: "left"
                        },
                        {
                            title: "Narration",
                            field: "transaction_narration",
                            hozAlign: "left",
                            width: 200
                        }
                    ]
                });
            }
        }

        function printReport() {
            const formData = new FormData(document.getElementById('report-filter-form'));
            const params = new URLSearchParams(formData);
            window.open('{{ route("reports.monthly.income.print") }}?' + params.toString(), '_blank');
        }
    </script>
@endsection