@extends('backend.layouts.app')

@section('content')
    <h4 class="mb-4">Organization Report</h4>

    <form method="GET" class="row g-3 mb-4">
        <div class="col-md-3">
            <label for="status" class="form-label">Status</label>
            <select name="status" id="status" class="form-select">
                <option value="">-- All --</option>
                <option value="pending" {{ old('status', $status) == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="accept" {{ old('status', $status) == 'accept' ? 'selected' : '' }}>Accept</option>
                <option value="reject" {{ old('status', $status) == 'reject' ? 'selected' : '' }}>Reject</option>
            </select>
        </div>

        <div class="col-md-3">
            <label for="start_date" class="form-label">Registration Start Date</label>
            <input type="date" name="start_date" id="start_date" value="{{ old('start_date', $start_date) }}" class="form-control">
        </div>

        <div class="col-md-3">
            <label for="end_date" class="form-label">Registration End Date</label>
            <input type="date" name="end_date" id="end_date" value="{{ old('end_date', $end_date) }}" class="form-control">
        </div>

        <div class="col-md-3 d-flex align-items-end gap-2">
            <button type="submit" class="btn btn-primary w-100">Filter</button>
            <button type="button" onclick="printReport()" class="btn btn-secondary w-100">
                <i class="fa fa-print"></i> Print
            </button>
        </div>
    </form>

    <div id="printArea">
        {{-- Summary Cards --}}
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card text-white bg-warning p-3">
                    <div>Total Pending</div>
                    <h5>{{ $totalPending }}</h5>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-success p-3">
                    <div>Total Accept</div>
                    <h5>{{ $totalAccept }}</h5>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-danger p-3">
                    <div>Total Reject</div>
                    <h5>{{ $totalReject }}</h5>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Representative Name</th>
                        <th>Organization Name</th>
                        <th>Registration Number</th>
                        <th>Organization Type</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Registration Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($organizers as $key => $org)
                        <tr>
                            <td>{{ $organizers->firstItem() + $key }}</td>
                            <td>{{ $org->full_name }}</td>
                            <td>{{ $org->organization_name }}</td>
                            <td>{{ $org->registration_number }}</td>
                            <td>{{ $org->organization_type }}</td>
                            <td>{{ $org->mobile }}</td>
                            <td>{{ $org->email }}</td>
                            <td>
                                @php
                                    $statusClass = match($org->status) {
                                        'accept' => 'badge bg-success',
                                        'reject' => 'badge bg-danger',
                                        'pending' => 'badge bg-warning text-dark',
                                        default => 'badge bg-secondary',
                                    };
                                @endphp
                                <span class="{{ $statusClass }}">{{ ucfirst($org->status ?? 'pending') }}</span>
                            </td>
                            <td>{{ $org->created_at->format('Y-m-d') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center">No organizations found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if ($organizers instanceof \Illuminate\Pagination\LengthAwarePaginator)
            {{ $organizers->links('backend.layouts.paginate') }}
        @endif
    </div>
@endsection

@push('script')
<script>
    function printReport() {
        const printContent = document.getElementById('printArea').innerHTML;
        const printWindow = window.open('', '', 'height=800,width=1000');
        printWindow.document.write('<html><head><title>Organization Report</title>');
        printWindow.document.write(`
            <style>
                body { font-family: Arial, sans-serif; padding: 20px; }
                h4, h5, div { margin: 0 0 10px 0; }
                .card { border-radius: 5px; padding: 15px; margin-bottom: 15px; }
                .bg-warning { background-color: #ffc107; color: #212529; }
                .bg-success { background-color: #198754; color: white; }
                .bg-danger { background-color: #dc3545; color: white; }
                table { width: 100%; border-collapse: collapse; margin-top: 10px; }
                th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
                .badge { padding: 5px 10px; border-radius: 5px; }
                .bg-success { background-color: #198754; color: white; }
                .bg-danger { background-color: #dc3545; color: white; }
                .bg-warning { background-color: #ffc107; color: #212529; }
            </style>
        `);
        printWindow.document.write('</head><body>');
        printWindow.document.write('<h3>Organization Report</h3>');
        printWindow.document.write(printContent);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }
</script>
@endpush