@extends('layouts.admin')

@section('title', 'Old User Profiles')

@section('content')
<div class="row g-2 mb-2 align-items-center">
    <div class="col-md-6 col-12">
        <form class="d-flex gap-2 align-items-center" id="application-search-form" autocomplete="off">
            <select class="form-select form-select-sm w-auto js-choices" id="selected_profile" name="selected_profile" style="min-width:130px;">
                <option value="">Profile</option>
                <option value="1">Athlete</option>
                <option value="2">Coach</option>
                <option value="3">Referee</option>
                <option value="4">Doctor</option>
                <option value="5">Physiotherapist</option>
                <option value="6">Manager</option>
                <option value="7">Media</option>
                <option value="8">Fan</option>
                <option value="9">Official</option>
                <option value="10">Other</option>
            </select>

            <select class="form-select form-select-sm w-auto js-choices" id="state_filter" name="state" placeholder="state_filter">
                <option value="" selected>State</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>
            
            <select class="form-select form-select-sm w-auto profile-filter" id="search_by" name="search_by">
                 <option value="">Select One</option>
                 <option value="reg_uid">UID</option>
                 <option value="name">Name</option>
                 <option value="email">Email</option>
                 <option value="contact">Contact</option>
            </select>
            <input type="text" class="form-control form-control-sm w-auto profile-filter" id="search_key" name="search_key" placeholder="Enter search..." style="min-width:160px;">
            <button type="submit" class="btn btn-phoenix-primary btn-sm px-3" id="search_go"><span class="uil uil-search me-1"></span>Go</button>
            <button type="button" class="btn btn-phoenix-secondary btn-sm px-3" id="reset_filters" title="Reset Filters"><span class="uil uil-redo"></span></button>
        </form>
    </div>
    <div class="col-md-6 col-12 text-md-end mt-2 mt-md-0">
        <div class="d-flex justify-content-md-end align-items-center gap-2">
            <button type="button" class="btn btn-success btn-sm text-sm" id="export_user_csv_file" onclick="export_old_user_csv_file();" disabled><i class="fas fa-file-export"></i>  <small>CSV</small></button>
            <button type="button" class="btn btn-secondary btn-sm" id="download_qrcode" onclick="download_old_qr_zip();" disabled><i class="fas fa-download"></i> <small>All QrCodes</small></button>
            <label for="date_range" class="form-label mb-0 me-2 small">Date Range:</label>
            <input class="form-control datetimepicker form-control-sm w-auto" id="reportrange" name="date_range" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' readonly style="min-width:200px;" />
        </div>
    </div>
</div>

<!-- Recent Artifacts Modal -->
<div class="position-fixed bottom-0 start-50 translate-middle-x mb-2" style="z-index:1080;">
    <button type="button" class="btn btn-phoenix-primary btn-sm shadow px-3" data-bs-toggle="modal" data-bs-target="#recentArtifactsModal" id="openArtifactsModalBtn">
        <i class="fas fa-clock-rotate-left me-1"></i> Recent Exports
    </button>
</div>

<div class="modal fade" id="recentArtifactsModal" tabindex="-1" aria-labelledby="recentArtifactsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title" id="recentArtifactsModalLabel">Recent Exports & QR Archives</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle" style="border:1px solid var(--phoenix-border-color,#dee2e6);">
                        <thead class="table-light">
                            <tr>
                                <th style="width:34px;">#</th>
                                <th>Type</th>
                                <th>File</th>
                                <th>Expires</th>
                                <th style="width:150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="recent-artifacts-body">
                            <tr><td colspan="5" class="text-center small text-muted py-3">No exports yet</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2 d-flex justify-content-between">
                <div class="small text-muted" id="artifacts-hint">Artifacts are auto-purged after TTL.</div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-danger btn-sm" id="clear-artifacts">Clear List</button>
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="phoenix-table-sticky-wrapper" style="position:relative;min-height:calc(100vh - 200px); max-height:calc(100vh - 200px); overflow:auto;">
    <table class="table table-sm fs-9 mb-0">
        <thead style="position:sticky; top:0; background:#fff;">
            <tr>
                <th class="sort border-top border-translucent ps-3" data-sort="">QR</th>                                
                <th class="sort border-top border-translucent" data-sort="uid">UID</th>
                <th class="sort border-top border-translucent" data-sort="profile">Profile</th>
                <th class="sort border-top border-translucent" data-sort="name">Name</th>
                <th class="sort border-top border-translucent" data-sort="dob">D.O.B</th>
                <th class="sort border-top border-translucent" data-sort="state">State</th>
                <th class="sort border-top border-translucent" data-sort="district">District</th>
                <th class="sort border-top border-translucent" data-sort="email">Email</th>
                <th class="sort border-top border-translucent" data-sort="contact">Contact</th>
                <th class="sort border-top border-translucent" data-sort="created_at">Created at</th>
            </tr>
        </thead>
        <tbody id="paymentDetailsTbody" class="applications_list">
          <!-- Application rows will be rendered by JS -->
        </tbody>
    </table>
</div>

<script>
    // Pass initial page URL to JS
    window.OLD_USERS_ROUTES = {
        getAllOldUserProfiles: "{{ route('admin.old-users.getAllOldUserProfiles') }}",
        downloadQr: "{{ route('admin.old-users.download_old_user_qrcode', ':id') }}",
        downloadQrZip: "{{ route('admin.old-users.download_old_qr_zip') }}",
        qrGenProgress: "{{ route('admin.old-users.qr-gen.progress') }}",
        qrZipStatus: "{{ route('admin.old-users.qr.zip.status') }}",
        cancelQrZip: "{{ route('admin.old-users.qr.zip.cancel') }}",
        downloadQrZipFile: "{{ route('admin.old-users.download_old_qr_zip_file', ':filename') }}",
        exportCsv: "{{ route('admin.old-users.export_old_user_csv_file') }}",
        csvProgress: "{{ route('admin.old-users.export_old_user_csv_progress') }}",
        cancelCsvExport: "{{ route('admin.old-users.export_old_user_csv_cancel') }}",
        downloadCsv: "{{ route('admin.old-users.download_old_export_csv', ':filename') }}"
    };
</script>
<script src="{{ asset('js/pages/admin/old_user_profile.js') }}"></script>
@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class=""></div>
@endsection

@push('styles')
     <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}?v={{ config('app.asset_version') }}"></script>
@endpush