@extends('backend.layouts.app')

@section('content')
    <h4 class="mb-4">Member 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" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="accept" {{ request('status') == 'accept' ? 'selected' : '' }}>Accept</option>
                <option value="reject" {{ request('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" class="form-control"
                value="{{ request('start_date') }}">
        </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" class="form-control" value="{{ request('end_date') }}">
        </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 --}}
        <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 Accepted</div>
                    <h5>{{ $totalAccept }}</h5>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-danger p-3">
                    <div>Total Rejected</div>
                    <h5>{{ $totalReject }}</h5>
                </div>
            </div>
        </div>

        {{-- Members Table --}}
        <div class="table-responsive">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Full Name</th>
                        <th>CPR Number</th>
                        <th>Date of Birth</th>
                        <th>Gender</th>
                        <th>Mobile</th>
                        <th>Status</th>
                        <th>Registration Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($members as $key => $member)
                        <tr>
                            <td>{{ $members->firstItem() + $key }}</td>
                            
                            <td>{{ $member->full_name }}</td>
                            <td>{{ $member->cpr_number }}</td>
                            <td>{{ \Carbon\Carbon::parse($member->dob)->format('Y-m-d') }}</td>
                            <td>{{ ucfirst($member->gender) }}</td>
                            <td>{{ $member->mobile }}</td>
                            <td>
                                @php
                                    $statusClass = match ($member->status) {
                                        'accept' => 'badge bg-success',
                                        'reject' => 'badge bg-danger',
                                        'pending' => 'badge bg-warning text-dark',
                                        default => 'badge bg-secondary',
                                    };
                                @endphp
                                <span class="{{ $statusClass }}">{{ ucfirst($member->status ?? 'pending') }}</span>
                            </td>
                            <td>{{ $member->created_at->format('Y-m-d') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center">No members found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@push('script')
    <script>
        const appUrl = "{{ url('/') }}";

        function printReport() {
            const printArea = document.getElementById('printArea');

            // Fix all images inside printArea to have absolute URLs
            const cloned = printArea.cloneNode(true);
            cloned.querySelectorAll('img').forEach(img => {
                if (img.src.startsWith('/storage')) {
                    img.src = appUrl + img.src;
                }
            });

            const printWindow = window.open('', '', 'height=800,width=1000');
            printWindow.document.write('<html><head><title>Member Report</title>');
            printWindow.document.write(`
            <style>
                body { font-family: Arial, sans-serif; padding: 20px; }
                h4, h5, div { margin-bottom: 10px; }
                .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; }
                img { max-width: 50px; max-height: 50px; object-fit: cover; border-radius: 5px; }
            </style>
        `);
            printWindow.document.write('</head><body>');
            printWindow.document.write('<h3>Member Report</h3>');
            printWindow.document.write(cloned.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    </script>
@endpush