@extends('layouts.sidebar')

@section('content')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }

            .print-content,
            .print-content * {
                visibility: visible;
                font-size: 10px;
                /* Adjust the font size as needed */
            }

            .print-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                /* A4 width */
                height: 350mm;
                /* A4 height */
                padding: 10mm;
                /* Add padding to simulate margin */
                box-sizing: border-box;
            }

            .print-content table td,
            .print-content table th {
                padding: 2px;
                /* Adjust the padding as needed */
            }
        }
    </style>
    <div class="container px-4 py-6 mx-auto">
        <h1 class="mb-6 text-3xl font-bold text-gray-900">Miscellaneous Fees Report</h1>

        <form action="{{ route('miscellaneous-fees.report') }}" method="GET" class="mb-6">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                <div>
                    <label for="month" class="block mb-1 text-sm font-medium text-gray-700">Month</label>
                    <select id="month" name="month"
                        class="block w-full py-2 pl-3 pr-10 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        @foreach (range(1, 12) as $m)
                            <option value="{{ $m }}"
                                {{ $m == request('month', now()->month) ? 'selected' : '' }}>
                                {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="year" class="block mb-1 text-sm font-medium text-gray-700">Year</label>
                    <select id="year" name="year"
                        class="block w-full py-2 pl-3 pr-10 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        @foreach (range(now()->year - 5, now()->year) as $y)
                            <option value="{{ $y }}" {{ $y == request('year', now()->year) ? 'selected' : '' }}>
                                {{ $y }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit"
                        class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Generate Report
                    </button>
                </div>
            </div>
        </form>
        <div class="print-content">
            <div class="overflow-hidden bg-white shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:px-6">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">
                        Total Miscellaneous Fees for {{ date('F', mktime(0, 0, 0, request('month', now()->month), 1)) }}
                        {{ request('year', now()->year) }}
                    </h3>
                </div>

            </div>

            <div class="mt-8">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="text-center bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                                Property
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">Type
                            </th>

                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                                Amount
                                Paid (PHP)</th>


                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">Date
                            </th>
                        </tr>
                    </thead>
                    @php
                        $total = 0; // Initialize total as an integer
                    @endphp
                    <tbody class="text-center bg-white divide-y divide-gray-200">
                        @foreach ($fees as $fee)
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                    {{ $fee->property->property_name }}
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                    {{ $fee->type }}
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                    {{ number_format($fee->amount, 2) }}
                                </td>
                                @php
                                    $total += $fee->amount; // Add the raw amount to the total
                                @endphp
                                <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                    {{ $fee->formatted_date }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="mt-10 border-t border-gray-200">
                    <div class="grid grid-cols-2 gap-2 px-4 py-5 ml-10 bg-gray-50">
                        <p class="text-sm font-medium text-gray-500">
                            Total Amount
                        </p>
                        <p class="text-sm font-bold text-gray-900">
                            ₱ {{ number_format($total, 2) }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
        <div class="mt-4 text-center">
            <button onclick="window.print()" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                Print Statement
            </button>
        </div>
    </div>
@endsection