@extends('layouts.admin')

@section('title', 'Event Participants - ' . $event->title)

@section('content')
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light border-bottom py-2">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="card-title mb-0">
                            <i class="uil uil-users-alt me-2"></i>
                            Event Participants
                        </h5>
                        <small class="text-muted">{{ $event->title }}</small>
                    </div>
                    <div class="col-md-6 text-md-end mt-2 mt-md-0">
                        <a href="{{ route('admin.events.index') }}" class="btn btn-secondary btn-sm">
                            <i class="uil uil-arrow-left me-1"></i> Back to Events
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters Section -->
<div class="row g-2 mb-3">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-body p-3">
                <form id="participants-filter-form">
                    <div class="row g-2 align-items-end">
                        <!-- Date Range -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Date Range</label>
                            <input type="text" class="form-control form-control-sm datetimepicker" id="date_range" name="date_range" placeholder="Select range" data-options='{"mode":"range","dateFormat":"d/m/Y","disableMobile":true}' readonly />
                        </div>

                        <!-- State Filter -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">State</label>
                            <select class="form-select form-select-sm js-choices" id="state_id" name="state_id" data-choices="data-choices">
                                <option value="">All States</option>
                                <optgroup label="STATES">
                                    @foreach($states as $state)
                                        @if($state->is_state == 1)
                                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                                <optgroup label="UNION TERRITORY">
                                    @foreach($states as $state)
                                        @if($state->is_state == 2)
                                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                                <optgroup label="DEPARTMENTS">
                                    @foreach($states as $state)
                                        @if($state->is_state == 3)
                                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            </select>
                        </div>

                        <!-- Category Filter -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Category</label>
                            <select class="form-select form-select-sm js-choices" id="category_id" name="category_id" data-choices="data-choices">
                                <option value="">All Categories</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Payment Status -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Payment Status</label>
                            <select class="form-select form-select-sm" id="payment_status" name="payment_status">
                                <option value="">All</option>
                                <option value="paid">Paid</option>
                                <option value="pending">Pending</option>
                                <option value="failed">Failed</option>
                            </select>
                        </div>

                        <!-- Payment Channel -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Payment Channel</label>
                            <select class="form-select form-select-sm" id="payment_channel" name="payment_channel">
                                <option value="">All</option>
                                <option value="online">Online</option>
                                <option value="offline">Offline</option>
                            </select>
                        </div>

                        <!-- Gender -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Gender</label>
                            <select class="form-select form-select-sm" id="gender" name="gender">
                                <option value="">All</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>

                        <!-- Is Substitute -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Is Substitute</label>
                            <select class="form-select form-select-sm" id="is_substitute" name="is_substitute">
                                <option value="">All</option>
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </div>

                        <!-- Age Range -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small mb-1">Age Range</label>
                            <div class="input-group input-group-sm">
                                <input type="number" class="form-control form-control-sm" id="age_from" name="age_from" placeholder="From" min="1" max="100">
                                <input type="number" class="form-control form-control-sm" id="age_to" name="age_to" placeholder="To" min="1" max="100">
                            </div>
                        </div>

                        <!-- Search -->
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small mb-1">Search</label>
                            <input type="text" class="form-control form-control-sm" id="search" name="search" placeholder="UID/Name/Email/Phone">
                        </div>

                        <!-- Action Buttons -->
                        <div class="col-lg-1 col-md-3 col-sm-6">
                            <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">
                                <i class="uil uil-search"></i>
                            </button>
                        </div>

                        <div class="col-lg-1 col-md-3 col-sm-6">
                            <button type="button" class="btn btn-phoenix-secondary btn-sm w-100" id="reset-filters">
                                <i class="uil uil-redo"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Participants Table -->
<div class="row g-3">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-light border-bottom py-2">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h6 class="mb-0">
                            <span id="total-count">0</span> Participants Found
                        </h6>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <button type="button" class="btn btn-success btn-sm" id="export-participants">
                            <i class="uil uil-export me-1"></i> Export CSV
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body p-0 position-relative">
                <div class="table-responsive" style="max-height: calc(100vh - 400px); overflow-y: auto;">
                    <table class="table table-sm table-hover align-middle mb-0" id="participants-table">
                        <thead class="table-light sticky-top" style="z-index: 10;">
                            <tr>
                                <th style="width: 40px;">#</th>
                                <th style="width: 120px;">UID</th>
                                <th style="width: 180px;">Name</th>
                                <th style="width: 120px;">State</th>
                                <th style="width: 70px;">Gender</th>
                                <th style="width: 60px;">Age</th>
                                <th style="min-width: 250px;">Game Path</th>
                                <th style="width: 90px;">Substitute</th>
                                <th style="width: 140px;">Reg. Date</th>
                                <th style="width: 100px;">Payment</th>
                                <th style="width: 90px;">Amount</th>
                                <th style="width: 100px;">Status</th>
                                <th style="width: 100px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="participants-tbody">
                            <tr>
                                <td colspan="13" class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mb-0 mt-2 text-muted">Loading participants...</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-light border-top py-2">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center gap-2">
                            <label class="mb-0 small">Per Page:</label>
                            <select class="form-select form-select-sm w-auto" id="per-page" style="min-width: 70px;">
                                <option value="12">12</option>
                                <option value="15" selected>15</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <small class="text-muted">
                            Showing <span id="showing-from">0</span> to <span id="showing-to">0</span> of <span id="showing-total">0</span>
                        </small>
                    </div>
                    <div class="col-md-4">
                        <nav aria-label="Participants pagination">
                            <ul class="pagination pagination-sm justify-content-end mb-0" id="pagination-controls">
                                <!-- Pagination will be inserted here by JavaScript -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Participant Details Modal -->
<div class="modal fade" id="participantDetailsModal" tabindex="-1" aria-labelledby="participantDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2 bg-light">
                <h6 class="modal-title" id="participantDetailsModalLabel">
                    <i class="uil uil-user me-2"></i>Participant Details
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="participant-details-content" style="max-height: calc(100vh - 200px); overflow-y: auto;">
                <div class="text-center py-4">
                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mb-0 mt-2 text-muted">Loading details...</p>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .table thead.sticky-top {
        position: sticky;
        top: 0;
        background: #f8f9fa;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(102, 126, 234, 0.05);
    }
    
    .badge-payment-online {
        background-color: #28a745;
        color: white;
    }
    
    .badge-payment-offline {
        background-color: #17a2b8;
        color: white;
    }
    
    .badge-status-paid {
        background-color: #28a745;
        color: white;
    }
    
    .badge-status-pending {
        background-color: #ffc107;
        color: #000;
    }
    
    .badge-status-failed {
        background-color: #dc3545;
        color: white;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Pass event data to JavaScript
    window.EVENT_DATA = {
        id: {{ $event->id }},
        title: "{{ $event->title }}",
        dataUrl: "{{ route('admin.events.participants.data', $event->id) }}",
        exportUrl: "{{ route('admin.events.participants.export', $event->id) }}"
    };
</script>
<script src="/js/pages/admin/event_participants.js?v=1769229975"></script>
@endpush