{{-- 
  Register Official Offcanvas
  Simplified registration for event officials (Coach, Manager, etc.)
  Officials register for free — no payment required.
--}}

@push('styles')
<style>
    /* Offcanvas layering */
    #registerOfficialOffcanvas.offcanvas { z-index:1055 !important; }
    #registerOfficialOffcanvas.offcanvas-backdrop { z-index:1050 !important; }
    
    /* Phoenix styling */
    .phoenix-official-offcanvas { 
        border:none; 
        box-shadow:-10px 0 30px rgba(0,0,0,0.1); 
    }
    
    .phoenix-official-offcanvas .offcanvas-header { 
        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); 
        color:#fff; 
        border-bottom:none; 
    }
    
    .phoenix-official-offcanvas .offcanvas-body { 
        padding:1.5rem; 
    }
    
    .phoenix-official-offcanvas .btn-close { 
        filter:invert(1); 
    }
    
    /* Sticky footer */
    #registerOfficialOffcanvas.offcanvas-end { 
        display: flex !important; 
        flex-direction: column !important; 
        height: 100vh !important; 
        max-height: 100vh !important; 
        overflow: hidden !important; 
    }
    
    #registerOfficialOffcanvas .offcanvas-header { 
        flex-shrink: 0; 
    }
    
    #registerOfficialOffcanvas .offcanvas-body { 
        flex: 1 1 auto !important; 
        min-height: 0 !important; 
        overflow-y: auto !important; 
        overflow-x: hidden !important; 
        padding-bottom: 1rem !important; 
    }
    
    #registerOfficialOffcanvas .offcanvas-footer { 
        flex-shrink: 0 !important; 
        position: relative !important; 
        background: #fff !important; 
        z-index: 1000; 
        border-top: 1px solid #e5e7eb;
        padding: 1rem 1.5rem;
    }
    
    /* User info card */
    .official-user-card {
        border-radius: 12px;
        background: linear-gradient(135deg, #f8f9fc, #eef1f8);
        border: 2px solid #667eea;
    }
    
    .official-user-card .user-photo {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }
    
    .official-type-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
    }
    
    /* Registered officials table */
    .officials-table-wrapper {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .officials-table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }
    
    .officials-table thead {
        background: #f1f4f9;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .officials-table tbody tr:hover {
        background: #f8faff;
    }
    
    .officials-table td, .officials-table th {
        padding: 0.5rem;
        vertical-align: middle;
    }
</style>
@endpush

<!-- Official Registration Offcanvas -->
<div class="offcanvas offcanvas-end phoenix-official-offcanvas" 
    tabindex="-1" 
    id="registerOfficialOffcanvas" 
    aria-labelledby="registerOfficialOffcanvasLabel"
    data-bs-backdrop="static" 
    data-bs-keyboard="false"
    style="width: 50vw; max-width: 700px;">
    
    <div class="offcanvas-header">
        <h5 class="offcanvas-title fw-bold" id="registerOfficialOffcanvasLabel">
            <i class="uil uil-award me-2"></i> Register Event Official
        </h5>
        <button type="button" 
            class="btn-close btn-close-white" 
            data-bs-dismiss="offcanvas" 
            aria-label="Close"></button>
    </div>
    
    <div class="offcanvas-body">
        <form id="registerOfficialForm" method="POST" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" name="event_id" value="{{ $event_details->id }}">
            <input type="hidden" name="portal_user_id" id="official_portal_user_id">
            
            {{-- Phase 1: UID Search --}}
            <div class="mb-4">
                <label for="official_search_uid" class="form-label fw-semibold">
                    <i class="uil uil-search me-1"></i> Search Person by UID
                </label>
                <div class="input-group">
                    <input type="text" 
                        id="official_search_uid" 
                        class="form-control form-control-lg" 
                        placeholder="Enter UID (e.g., TN-001-2024)"
                        autocomplete="off">
                    <button type="button" 
                        class="btn btn-primary" 
                        id="official_search_button">
                        <i class="uil uil-search"></i> Search
                    </button>
                </div>
                <small class="text-muted">
                    Enter the UID of the person you want to register as official
                </small>
            </div>

            {{-- Phase 2: User Info Card (Hidden initially) --}}
            <div id="official_user_info_card" class="card official-user-card mb-4" style="display: none;">
                <div class="card-body p-3">
                    <div class="row g-3">
                        <div class="col-auto">
                            <img id="official_user_photo" 
                                src="" 
                                alt="User Photo" 
                                class="rounded-circle user-photo">
                        </div>
                        <div class="col">
                            <h5 id="official_user_name" class="mb-2 fw-bold text-primary"></h5>
                            <div class="row g-2 small">
                                <div class="col-md-6">
                                    <p class="mb-1">
                                        <i class="uil uil-id-card text-muted me-1"></i>
                                        <strong>UID:</strong> <span id="official_user_uid"></span>
                                    </p>
                                    <p class="mb-1">
                                        <i class="uil uil-envelope text-muted me-1"></i>
                                        <strong>Email:</strong> <span id="official_user_email"></span>
                                    </p>
                                    <p class="mb-1">
                                        <i class="uil uil-phone text-muted me-1"></i>
                                        <strong>Mobile:</strong> <span id="official_user_mobile"></span>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1">
                                        <i class="uil uil-calendar-alt text-muted me-1"></i>
                                        <strong>DOB:</strong> <span id="official_user_dob"></span>
                                    </p>
                                    <p class="mb-1">
                                        <i class="uil uil-mars text-muted me-1"></i>
                                        <strong>Gender:</strong> <span id="official_user_gender"></span>
                                    </p>
                                    <p class="mb-1">
                                        <i class="uil uil-user-circle text-muted me-1"></i>
                                        <strong>Type:</strong> 
                                        <span id="official_guard_label" class="badge bg-info"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Phase 3: Official Type Selection --}}
            <div id="official_type_section" style="display: none;">
                <div class="mb-4">
                    <label for="official_type" class="form-label fw-semibold">
                        <i class="uil uil-award me-1"></i> Select Official Type
                    </label>
                    <select class="form-select form-select-lg" 
                        id="official_type" 
                        name="official_type" 
                        required>
                        <option value="">-- Select Official Type --</option>
                        {{-- Options will be populated dynamically with fees --}}
                    </select>
                    <div class="invalid-feedback">
                        Please select official type
                    </div>
                </div>

                {{-- Notes (Optional) --}}
                <div class="mb-4">
                    <label for="official_notes" class="form-label fw-semibold">
                        <i class="uil uil-notes me-1"></i> Notes (Optional)
                    </label>
                    <textarea class="form-control" 
                        id="official_notes" 
                        name="notes" 
                        rows="3" 
                        maxlength="500"
                        placeholder="Add any special notes or remarks..."></textarea>
                    <small class="text-muted">Maximum 500 characters</small>
                </div>
            </div>

            {{-- Phase 6: Registered Officials List --}}
            <div class="mb-3">
                <h6 class="fw-bold mb-3">
                    <i class="uil uil-list-ul me-2"></i>Registered Officials 
                    <span class="badge bg-primary" id="officials_count_badge">0</span>
                    <span class="text-muted small ms-2">
                        / <span id="officials_limit">{{ $event_details->officials_count ?? 0 }}</span> limit
                    </span>
                </h6>
                
                <div class="officials-table-wrapper">
                    <table class="table officials-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>UID</th>
                                <th>Official Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="registered_officials_tbody">
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    <i class="uil uil-info-circle me-1"></i>
                                    No officials registered yet
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
    
    {{-- Sticky Footer with Action Buttons --}}
    <div class="offcanvas-footer">
        <div class="d-flex gap-2">
            <button type="button" 
                class="btn btn-light flex-fill" 
                data-bs-dismiss="offcanvas">
                <i class="uil uil-times me-1"></i> Close
            </button>
            <button type="button" 
                class="btn btn-success flex-fill" 
                id="btn_register_official"
                style="display: none;">
                <i class="uil uil-check-circle me-1"></i> Register
            </button>
        </div>
        <div id="official_limit_warning" class="alert alert-warning mt-2 mb-0 py-2" style="display: none;">
            <i class="uil uil-exclamation-triangle me-1"></i> 
            <strong>Limit Reached:</strong> You have registered the maximum number of officials allowed.
        </div>
    </div>
</div>

@push('scripts')
<script>
const EVENT_ID = {{ $event_details->id }};
const EVENT_NAME = "{{ $event_details->event_name }}";

// Officials module will be loaded from external JS file
$(document).ready(function() {
    console.log('[Official Offcanvas] Initialized');
});
</script>
@endpush