@extends('layouts.sidebar')

@section('content')
    <form method="GET" action="{{ route('payables.index') }}">
        <div class="container flex flex-wrap items-center gap-4 mx-auto mb-6">

            <!-- Filters Header -->
            <div class="w-full text-lg font-semibold">Filters:</div>
            <div class="flex items-center gap-2">
                <label for="description" class="text-sm font-medium text-gray-700">Particulars:</label>
                <input type="text" name="description" value="{{ request('description') }}"
                    placeholder="Search description..."
                    class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
            </div>
            <!-- Date Filter -->
            <div class="flex items-center gap-2">
                <label for="date" class="text-sm font-medium text-gray-700">Date:</label>
                <input type="date" name="date" value="{{ request('date') }}"
                    class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
            </div>

            <!-- Month Filter -->
            <div class="flex items-center gap-2">
                <label for="month" class="text-sm font-medium text-gray-700">Month:</label>
                <select name="month"
                    class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
                    <option value="">Select Month</option>
                    <option value="01" @if (request('month') == '01') selected @endif>January</option>
                    <option value="02" @if (request('month') == '02') selected @endif>February</option>
                    <option value="03" @if (request('month') == '03') selected @endif>March</option>
                    <option value="04" @if (request('month') == '04') selected @endif>April</option>
                    <option value="05" @if (request('month') == '05') selected @endif>May</option>
                    <option value="06" @if (request('month') == '06') selected @endif>June</option>
                    <option value="07" @if (request('month') == '07') selected @endif>July</option>
                    <option value="08" @if (request('month') == '08') selected @endif>August</option>
                    <option value="09" @if (request('month') == '09') selected @endif>September</option>
                    <option value="10" @if (request('month') == '10') selected @endif>October</option>
                    <option value="11" @if (request('month') == '11') selected @endif>November</option>
                    <option value="12" @if (request('month') == '12') selected @endif>December</option>
                </select>
            </div>

            <!-- Year Filter -->
            <div class="flex items-center gap-2">
                <label for="year" class="text-sm font-medium text-gray-700">Year:</label>
                <input type="number" name="year" value="{{ request('year') }}" min="2000" max="{{ now()->year }}"
                    step="1"
                    class="w-24 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
            </div>

            <!-- Type Filter -->
            <div class="flex items-center gap-2">
                <label for="type" class="text-sm font-medium text-gray-700">Type:</label>
                <select name="type"
                    class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
                    <option value="">Select Type</option>
                    <option value="expense" @if (request('type') == 'expense') selected @endif>Expense</option>
                    <option value="check_expense" @if (request('type') == 'check_expense') selected @endif>Check Expense
                    </option>
                </select>
            </div>

            <!-- Include Filter (NEW) -->
            <div class="flex items-center gap-2">
                <label for="include" class="text-sm font-medium text-gray-700">Include:</label>
                <select name="include"
                    class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring focus:ring-blue-300">
                    <option value="all" @if (request('include') == 'all') selected @endif>All</option>
                    <option value="expenses" @if (request('include') == 'expenses') selected @endif>Expenses Only</option>
                    <option value="payroll" @if (request('include') == 'payroll') selected @endif>Payroll Only</option>
                </select>
            </div>

            <!-- Include Payroll Checkbox -->


            <!-- Filter Button -->
            <div class="flex items-center mt-4">
                <button type="submit"
                    class="px-4 py-2 text-sm text-white transition bg-blue-600 rounded-md hover:bg-blue-700">
                    Apply Filters
                </button>
            </div>
        </div>
    </form>
    <div class="container p-6 mx-auto" id="print-section">


        <div class="mb-8 text-center">
            <h1 class="text-3xl font-bold">San Roque Hermanas Inc.</h1>
            <h2 class="mb-2 text-xl font-bold">Expense Report</h2>
            <p class="text-sm text-gray-600">
                MGR BLDG. II, Matina Crossing, Davao City
            </p>
            <p class="text-sm text-gray-600">
                Email: <a href="mailto:srhimgr@yahoo.com" class="text-blue-500">srhimgr@yahoo.com</a> |
                Tel: (082)299-4103 | Cell #: 0910-651-1604 | TIN: 006-040-261
            </p>
            <p class="text-sm text-gray-600">
                Report generated on {{ now()->format('F j, Y') }}.
                @if (request()->has('type') || request()->has('date') || request()->has('month') || request()->has('year'))
                    <br>Filtered by:
                    {{ request('type') ? 'Type: ' . ucfirst(request('type')) : '' }}
                    {{ request('date') ? 'Date: ' . request('date') : '' }}
                    {{ request('month') ? 'Month: ' . request('month') : '' }}
                    {{ request('year') ? 'Year: ' . request('year') : '' }}
                @endif
            </p>
        </div>

        <!-- Filter Form -->



        <!-- JavaScript to Toggle Payroll Fields -->
        <script>
            function togglePayrollFields() {
                let payrollFields = document.getElementById('payroll_fields');
                payrollFields.classList.toggle('hidden');
            }
        </script>

        <div class="flex flex-col justify-center gap-2 md:flex-row">
            <!-- Display Expenses Table (Only if "All" or "Expenses Only" is selected) -->
            @if (request('include') == 'all' || request('include') == 'expenses')
                <div class="overflow-hidden ">
                    <h3 class="mb-2 text-lg font-semibold">Expenses</h3>
                    <table class="w-[50rem] text-center">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Description</th>

                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Amount</th>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Voucher</th>
                                @if (request('include') == 'all' || request('type') == 'check_expense')
                                    <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Bank & Check#</th>
                                @endif
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $totalAmount = 0; @endphp
                            @forelse($expenses as $expense)
                                @php $totalAmount += $expense->expenses_amount; @endphp
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-2 text-sm border-b">{{ $expense->Description }}</td>

                                    <td class="px-4 py-2 text-sm border-b">
                                        {{ number_format($expense->expenses_amount, 2) }}</td>
                                    <td class="px-4 py-2 text-sm border-b">{{ $expense->Voucher }}</td>
                                    @if (request('include') == 'all' || request('type') == 'check_expense')
                                        <td class="px-4 py-2 text-sm border-b">{{ $expense->check_number }}</td>
                                    @endif


                                    <td class="px-4 py-2 text-sm border-b">{{ $expense->remarks ?? '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="py-4 text-sm text-center text-gray-500">No expenses found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot class="bg-gray-200">
                            <tr>
                                <td colspan="1" class="px-4 py-2 text-sm font-bold text-gray-700 border-t">Total</td>
                                <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">
                                    {{ number_format($totalAmount, 2) }}</td>
                                <td colspan="2" class="px-4 py-2 border-t"></td>
                                @if (request('include') == 'all' || request('type') == 'check_expense')
                                    <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">
                                    </td>
                                @endif

                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif

            <!-- Display Payroll Table (Only if "All" or "Payroll Only" is selected) -->
            @if (request('include') == 'all' || request('include') == 'payroll')
                <div class="overflow-hidden">
                    <h3 class="mb-2 text-lg font-semibold">Payroll</h3>
                    <table class="w-[40rem] text-center">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Employee</th>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">SSS Deduction</th>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">PhilHealth Deduction
                                </th>
                                <th class="px-4 py-2 text-xs font-semibold text-gray-700 border-b">Pag-IBIG Deduction</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalSSS = 0;
                                $totalPhilHealth = 0;
                                $totalPagibig = 0;
                            @endphp
                            @forelse($payroll as $pay)
                                @php
                                    $totalSSS += $pay->sss_deduction;
                                    $totalPhilHealth += $pay->philhealth_deduction;
                                    $totalPagibig += $pay->pagibig_deduction;
                                @endphp
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-2 text-sm border-b">{{ $pay->employee->complete_name }}</td>
                                    <td class="px-4 py-2 text-sm border-b">{{ number_format($pay->sss_deduction, 2) }}
                                    </td>
                                    <td class="px-4 py-2 text-sm border-b">
                                        {{ number_format($pay->philhealth_deduction, 2) }}</td>
                                    <td class="px-4 py-2 text-sm border-b">{{ number_format($pay->pagibig_deduction, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-4 text-sm text-center text-gray-500">No payroll records
                                        found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot class="bg-gray-200">
                            <tr>
                                <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">Total</td>
                                <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">
                                    {{ number_format($totalSSS, 2) }}</td>
                                <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">
                                    {{ number_format($totalPhilHealth, 2) }}
                                </td>
                                <td class="px-4 py-2 text-sm font-bold text-gray-700 border-t">
                                    {{ number_format($totalPagibig, 2) }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>

                </div>
            @endif
        </div>


    </div>

    <div class="flex items-center justify-center mb-4">
        <button onclick="printDiv('print-section')" class="px-4 py-2 text-white bg-blue-500 rounded">
            Print
        </button>
    </div>


    <script>
        function printDiv(divId) {
            var printContents = document.getElementById(divId).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
            window.location.reload(); // reload to ensure any dynamic content is restored
        }
    </script>
@endsection