@extends('layouts.dashboard')

@section('title', 'Reports')

@section('header-title', 'Reports')

@section('content')
<div class="mt-8">
    <div class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white shadow-lg rounded-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">Download Reports</h2>

            <form action="{{ route('reports.generate') }}" method="POST" class="space-y-6">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

    <!-- Report Type -->
    <div>
        <label for="report_type" class="block text-sm font-semibold text-gray-700 mb-2">Report Type</label>
        <select name="report_type" id="report_type"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-3 border"
            required>
            <option value="">Select Report Type</option>
            <option value="payments" {{ ($reportType ?? old('report_type')) == 'payments' ? 'selected' : '' }}>Payments Report</option>
            <option value="visitors" {{ ($reportType ?? old('report_type')) == 'visitors' ? 'selected' : '' }}>Visitors Report</option>
            <option value="members" {{ ($reportType ?? old('report_type')) == 'members' ? 'selected' : '' }}>Members Report</option>
        </select>
    </div>

    <!-- From Date -->
    <div>
        <label for="from_date" class="block text-sm font-semibold text-gray-700 mb-2">From Date</label>
        <input type="date" name="from_date" id="from_date"
            value="{{ $fromDate ? $fromDate->format('Y-m-d') : old('from_date') }}"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-3 border"
            required>
    </div>

    <!-- To Date -->
    <div>
        <label for="to_date" class="block text-sm font-semibold text-gray-700 mb-2">To Date</label>
        <input type="date" name="to_date" id="to_date"
            value="{{ $toDate ? $toDate->format('Y-m-d') : old('to_date') }}"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-3 border"
            required>
    </div>

    <!-- Button (FIXED ALIGNMENT) -->
    <div class="flex items-end">
        <button type="submit"
            class="w-full rounded-lg bg-[#CF2030] px-6 py-3 text-sm font-bold text-white shadow-md hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CF2030] transition-all transform active:scale-95">
            Generate Report
        </button>
    </div>

</div>


            </form>

            @if($results)
            <!-- Report Results -->
            <div class="mt-8">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-900">{{ ucfirst($reportType) }} Report Results ({{ $results->count() }} records)</h3>
                    <form action="{{ route('reports.download') }}" method="POST" class="inline">
                        @csrf
                        <input type="hidden" name="report_type" value="{{ $reportType }}">
                        <input type="hidden" name="from_date" value="{{ $fromDate->format('Y-m-d') }}">
                        <input type="hidden" name="to_date" value="{{ $toDate->format('Y-m-d') }}">
                        <button type="submit" class="rounded-lg bg-green-600 px-4 py-2 text-sm font-bold text-white shadow-md hover:bg-green-700 transition-all transform active:scale-95">
                            Download CSV
                        </button>
                    </form>
                </div>

                <div class="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                @foreach($results->first() as $key => $value)
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{{ $key }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 bg-white">
                            @foreach($results as $row)
                            <tr>
                                @foreach($row as $value)
                                <td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">{{ $value }}</td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set default date range to current month
        const today = new Date();
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        document.getElementById('from_date').valueAsDate = firstDay;
        document.getElementById('to_date').valueAsDate = lastDay;
    });
</script>
@endpush