@extends('layouts.sidebar')

@section('title', 'Payable Reports')

@section('content')
    <div class="container px-4 py-6 mx-auto">
        <div class="mb-6">
            <form action="{{ route('payables.report') }}" method="GET" class="flex justify-center space-x-4">
                <!-- Type Filter -->
                <select id="filterType" name="type"
                    class="text-sm text-gray-600 border-2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    onchange="handleFilterTypeChange()">
                    <option value="">Select Type</option>
                    <option value="Monthly" {{ request('type') == 'Monthly' ? 'selected' : '' }}>Monthly</option>
                    <option value="Quarterly" {{ request('type') == 'Quarterly' ? 'selected' : '' }}>Quarterly</option>
                    <option value="Annual" {{ request('type') == 'Annual' ? 'selected' : '' }}>Annual</option>
                </select>

                <!-- Month Filter -->
                <select id="monthFilter" name="month"
                    class="text-sm text-gray-600 border-2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    style="display: none;">
                    <option value="">Select Month</option>
                    @foreach (range(1, 12) as $month)
                        <option value="{{ $month }}" {{ request('month') == $month ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create()->month($month)->format('F') }}
                        </option>
                    @endforeach
                </select>

                <!-- Year Filter -->
                <select id="yearFilter" name="year"
                    class="text-sm text-gray-600 border-2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                    <option value="">Select Year</option>
                    @foreach (range(date('Y') - 10, date('Y') + 10) as $year)
                        <option value="{{ $year }}" {{ request('year') == $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endforeach
                </select>

                <!-- Quarter Filter -->
                <select id="quarterFilter" name="quarter"
                    class="text-sm text-gray-600 border-2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                    style="display: none;">
                    <option value="">Select Quarter</option>
                    <option value="Q1" {{ request('quarter') == 'Q1' ? 'selected' : '' }}>Q1</option>
                    <option value="Q2" {{ request('quarter') == 'Q2' ? 'selected' : '' }}>Q2</option>
                    <option value="Q3" {{ request('quarter') == 'Q3' ? 'selected' : '' }}>Q3</option>
                    <option value="Q4" {{ request('quarter') == 'Q4' ? 'selected' : '' }}>Q4</option>
                </select>

                <select id="categoryFilter" name="category"
                    class="text-sm text-gray-600 border-2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                    <option value="">Select Category</option>
                    <option value="" disabled selected>Select category</option>
                    <option value="Electric">Electric</option>
                    <option value="Water">Water</option>
                    <option value="PLDT">PLDT</option>
                    <option value="SSS">SSS</option>
                    <option value="PhilHealth">PhilHealth</option>
                    <option value="Pag-IBIG">Pag-IBIG</option>
                    <option value="Sky">Sky</option>
                    <option value="Professional Fee">Professional Fee</option>
                    <option value="Withholding Tax">Withholding Tax</option>
                    <option value="Business Tax">Business Tax</option>
                    <option value="VAT">VAT</option>
                    <option value="Percentage Tax">Percentage Tax</option>
                    <option value="Income Tax">Income Tax</option>
                    <option value="Business Permit">Business Permit</option>
                    <option value="Real Property Tax">Real Property Tax</option>
                    <option value="Others">Others</option>
                </select>
                <button type="submit"
                    class="px-4 py-2 text-sm text-white transition duration-300 bg-green-600 rounded-lg hover:bg-green-700 ">Generate
                    Report</button>
            </form>
        </div>

        <script>
            function handleFilterTypeChange() {
                const type = document.getElementById('filterType').value;
                const monthFilter = document.getElementById('monthFilter');
                const quarterFilter = document.getElementById('quarterFilter');

                if (type === 'Monthly') {
                    monthFilter.style.display = 'inline-block';
                    quarterFilter.style.display = 'none';
                } else if (type === 'Quarterly') {
                    monthFilter.style.display = 'none';
                    quarterFilter.style.display = 'inline-block';
                } else if (type === 'Annual') {
                    monthFilter.style.display = 'none';
                    quarterFilter.style.display = 'none';
                } else {
                    monthFilter.style.display = 'none';
                    quarterFilter.style.display = 'none';
                }
            }

            // Initialize visibility based on the current selection
            document.addEventListener('DOMContentLoaded', handleFilterTypeChange);
        </script>


        <style>
            @media print {
                body * {
                    visibility: hidden;
                }

                .print-content,
                .print-content * {
                    visibility: visible;
                }

                .print-content {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 210mm;
                    /* A4 width */
                    height: 297mm;
                    /* A4 height */
                    padding: 10mm;

                }

                .no-print {
                    display: none;
                }
            }
        </style>

        <div class="max-w-6xl mx-auto mt-12 print-content">
            <div class="mb-8 text-center">
                <h1 class="text-3xl font-bold">RWEB Solution Corp.</h1>
                <h2 class="mb-2 text-xl font-bold">Account Payables Report</h2>
                <p class="text-sm text-gray-600">
                    Airpro BLDG.,Bacaca , Davao City
                </p>
                <p class="text-sm text-gray-600">
                    Email: <a href="mailto:srhimgr@yahoo.com" class="text-blue-500">rweb@solution.com</a> | Tel:
                    (0##)###-#### | Cell #: 0##-###-#### | TIN: ###-###-###
                </p>
                <p class="text-sm text-gray-600">
                    Report generated on {{ now()->format('F j, Y') }}.
                    @if ($type)
                        <br>Type: {{ $type }}
                    @endif
                    @if ($month)
                        <br>Month: {{ \Carbon\Carbon::create()->month($month)->format('F') }}
                    @endif
                    @if ($year)
                        <br>Year: {{ $year }}
                    @endif
                    @if ($quarter)
                        <br>Quarter: {{ $quarter }}
                    @endif
                </p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-center bg-white border border-gray-300">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">ID</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Type</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Category</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Amount</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Date</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">
                        @foreach ($payables as $payable)
                            <tr>
                                <td class="px-4 py-2 border-b border-gray-300">{{ $payable->id }}</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ $payable->type }}</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ $payable->category }}</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ number_format($payable->amount, 2) }}
                                </td>
                                <td class="px-4 py-2 border-b border-gray-300">
                                    {{ $payable->date_of_payable->format('F j, Y') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="px-4 py-2 font-bold text-right border-b border-gray-300">Total Amount:
                            </td>
                            <td class="px-4 py-2 border-b border-gray-300">{{ number_format($totalAmount, 2) }}</td>
                            <td class="px-4 py-2 border-b border-gray-300"></td>
                        </tr>
                        @if ($type === 'Quarterly')
                            <tr>
                                <td colspan="3" class="px-4 py-2 font-bold text-right border-b border-gray-300">Total VAT
                                    (12%):</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ number_format($totalVAT, 2) }}</td>
                                <td class="px-4 py-2 border-b border-gray-300"></td>
                            </tr>
                            <tr>
                                <td colspan="3" class="px-4 py-2 font-bold text-right border-b border-gray-300">Total
                                    Percentage Tax (3%):</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ number_format($totalPercentageTax, 2) }}
                                </td>
                                <td class="px-4 py-2 border-b border-gray-300"></td>
                            </tr>
                        @elseif ($type === 'Monthly')
                            <tr>
                                <td colspan="3" class="px-4 py-2 font-bold text-right border-b border-gray-300">Total
                                    Withholding Tax (5%):</td>
                                <td class="px-4 py-2 border-b border-gray-300">{{ number_format($totalWithholdingTax, 2) }}
                                </td>
                                <td class="px-4 py-2 border-b border-gray-300"></td>
                            </tr>
                        @endif
                    </tfoot>
                </table>
            </div>

            <div class="mt-8 text-center no-print">
                <button onclick="window.print()"
                    class="px-4 py-2 text-white transition duration-300 bg-blue-600 rounded-lg hover:bg-blue-700">Print
                    Report</button>
            </div>
        </div>
    </div>
@endsection