@extends('layouts.admin')

@section('title', '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_user_csv_file();" disabled><i class="fas fa-file-export"></i>  <small>CSV</small></button>
            <div class="input-group input-group-sm w-auto" style="max-width: 220px;display:none;">
                <span class="input-group-text" style="">Batch</span>
                <input type="number" min="50" max="100" step="25" value="{{ config('qr.default_batch_size', 100) }}" id="qr_batch_size" class="form-control" style="min-width: 50px;display:none;" title="QR batch size per request (50-100)" />
            </div>
                <button type="button" class="btn btn-secondary btn-sm" id="download_qrcode" onclick="(function(){ var v = parseInt(document.getElementById('qr_batch_size')?.value||'{{ config('qr.default_batch_size', 100) }}',10)||{{ config('qr.default_batch_size', 100) }}; download_qr_zip(v); })();" 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 Trigger (visible only on this page) -->
                    <!-- Recent Artifacts Modal Trigger (centered footer) -->
                    <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>

                <!-- Recent Artifacts Modal -->
                <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="email">Profile</th>
                                <th class="sort border-top border-translucent" data-sort="name">Name</th>
                                <th class="sort border-top border-translucent" data-sort="contact">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="profile">Email</th>
                                <th class="sort border-top border-translucent" data-sort="contact">Contact</th>
                                <th class="sort border-top border-translucent" data-sort="state">Status</th>
                                <th class="sort border-top border-translucent" data-sort="district">Verified By</th>
                                <th class="sort border-top border-translucent " data-sort="created_at">Created at</th>
                                <!-- <th class="sort border-top border-translucent ">Actpe-3ions</th> -->
                                        
                                        
                            </tr>
                        </thead>
                        <tbody id="paymentDetailsTbody" class="applications_list">
                          <!-- Application rows will be rendered by JS -->
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Removed inline recent artifacts panel now replaced by modal -->
<!-- ==================================off canvas -->

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" style="width: 55%;">
    <div class="offcanvas-header bg-body-tertiary border-bottom">
        <div class="d-flex align-items-center">
            <h5 class="mb-0 me-3" id="offcanvasRightLabel">User Information</h5>
            <span class="badge bg-primary-subtle text-primary">UID: <span id="set_uid"></span></span>
        </div>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-sm btn-phoenix-primary" id="edit_button" style="display:none;">
                <i class="uil uil-edit-alt me-1"></i>Edit
            </button>
            <button type="button" class="btn btn-sm btn-phoenix-success d-none" id="save_button">
                <i class="uil uil-check me-1"></i>Save
            </button>
            <button type="button" class="btn btn-sm btn-phoenix-secondary d-none" id="cancel_button">
                <i class="uil uil-times me-1"></i>Cancel
            </button>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    </div>
    <div class="offcanvas-body p-0">

    <div style="width:100%; height: 100%; background: #00000049; position: absolute; padding: 100px; z-index: 55555; border-radius: 5px; display:none;" id="modal_loader">
        <center style="margin-top: 25%;">
            <div class="loader" ></div>
            <span class="bg-light p-2"> Please Wait..</span>
        </center>
     </div>

        <!-- Tab Navigation -->
        <ul class="nav nav-tabs border-0 px-3 pt-3 bg-body" role="tablist" style="border-bottom: 1px solid #dee2e6 !important;">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="personal-info-tab" data-bs-toggle="tab" data-bs-target="#personal-info" type="button" role="tab" aria-controls="personal-info" aria-selected="true">
                    <i class="uil uil-user me-1"></i>Personal Information
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="personal-docs-tab" data-bs-toggle="tab" data-bs-target="#personal-docs" type="button" role="tab" aria-controls="personal-docs" aria-selected="false">
                    <i class="uil uil-file-alt me-1"></i>Personal Documents
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="professional-info-tab" data-bs-toggle="tab" data-bs-target="#professional-info" type="button" role="tab" aria-controls="professional-info" aria-selected="false">
                    <i class="uil uil-briefcase-alt me-1"></i>Professional Information
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="professional-docs-tab" data-bs-toggle="tab" data-bs-target="#professional-docs" type="button" role="tab" aria-controls="professional-docs" aria-selected="false">
                    <i class="uil uil-files-landscapes-alt me-1"></i>Professional Documents
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="userInfoTabContent">
            
            <!-- Personal Information Tab -->
            <div class="tab-pane fade show active" id="personal-info" role="tabpanel" aria-labelledby="personal-info-tab">
                <div class="container-fluid p-4">
                    <form>
            <!-- Profile Picture Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body text-center">
                            <img alt="Profile Pic" src="/img/pp.png"
                                id="profile_image"
                                class="rounded-circle mb-3"
                                width="120" height="120" 
                                style="object-fit: cover; border: 3px solid #dee2e6;"/>
                            <p class="text-danger d-none small" id="pp_nf_error">Profile Photo Not Found!</p>
                            <div>
                                <input type="file" class="required_update"
                                    name="docImageUpload" id="docImageUpload"
                                    style="display: none;"
                                    placeholder="Profile-Picture"
                                    onchange="uploadOnChangeDocUpload()" onclick="emptyImageUploadElementsAndViewer('profile_image')" disabled>
                                <button type="button"
                                    class="btn btn-sm btn-phoenix-secondary"
                                    id="docImageUploadButton"
                                    onclick="document.getElementById('docImageUpload').click();" disabled>
                                    <i class="fas fa-upload me-1"></i>Change Photo
                                </button>
                                <span id="error_docImageUpload" class="d-block small text-danger mt-1"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Basic Information -->
            <h6 class="mb-3 text-body-emphasis border-bottom pb-2">Basic Information</h6>
            <div class="row">
                <input type="hidden" id="user_id" name="user_id" value="">
                
                <div class="mb-3 col-md-4">
                    <label for="fname" class="form-label">First Name <span class="text-danger">*</span></label>
                    <input id="fname" type="text" placeholder="Enter first name" class="form-control form-control-sm editable-field" name="fname" value="" disabled>
                    <span class="invalid-feedback d-block small"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label for="mname" class="form-label">Middle Name</label>
                    <input id="mname" type="text" placeholder="Enter middle name" class="form-control form-control-sm editable-field" name="mname" disabled>
                    <span class="invalid-feedback d-block small"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label for="lname" class="form-label">Last Name</label>
                    <input id="lname" type="text" placeholder="Enter last name" class="form-control form-control-sm editable-field" name="lname" disabled>
                    <span class="invalid-feedback d-block small"></span>
                </div>
            </div>
            <div class="row">
                <div class="mb-3 col-md-4">
                    <label for="dob" class="form-label">Date Of Birth <span class="text-danger">*</span></label>
                    <input type="date" class="form-control form-control-sm" id="dob" name="dob" value="" disabled>
                    <span class="invalid-feedback d-block small"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                    <div class="border rounded p-2" style="background-color: #f8f9fa;">
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="gender" id="gender_male" value="1" disabled>
                            <label class="form-check-label small" for="gender_male">Male</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="gender" id="gender_female" value="2" disabled>
                            <label class="form-check-label small" for="gender_female">Female</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="gender" id="gender_other" value="3" disabled>
                            <label class="form-check-label small" for="gender_other">Other</label>
                        </div>
                    </div>
                    <span class="invalid-feedback d-block small"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input id="email" type="email" placeholder="Enter valid email address" class="form-control form-control-sm" name="email" value="" disabled>
                    <span class="invalid-feedback d-block small"></span>
                    <small class="text-danger" id="invalid_email"></small>
                </div>
            </div>
            <!-- Contact Information -->
            <h6 class="mb-3 mt-4 text-body-emphasis border-bottom pb-2">Contact Information</h6>
            <div class="row">
                <div class="mb-3 col-md-4">
                    <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm editable-field"
                        id="mobile" placeholder="Enter Mobile No"
                        maxlength="10" onkeypress="return isNumber(event)" disabled>
                    <span id="error_mobile" class="d-block small text-danger"></span>
                </div>

                <div class="mb-3 col-md-4">
                    <label class="form-label">Country <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" id="country"
                        onchange="loadStates(); hideWhenNotIndia();" disabled>
                        <option value="0" selected>Select Country</option>
                    </select>
                    <span id="error_country" class="d-block small text-danger"></span>
                </div>
                
                <div class="mb-3 col-md-4" id="state_dropdown">
                    <label class="form-label">State <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" id="state"
                        onchange="loadDistricts($('#state').val());" disabled>
                        <option value="0" selected>Select State/UT/Department</option>
                    </select>
                    <span id="error_state" class="d-block small text-danger"></span>
                </div>
                
                <div class="mb-3 col-md-4" id="state_input" style="display:none">
                    <label class="form-label">State <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm"
                        id="state_name" placeholder="Enter State Name" disabled>
                    <span id="error_state_name" class="d-block small text-danger"></span>
                </div>
              </div>
            
            <div class="row">
                <div class="mb-3 col-md-4">
                    <label class="form-label">District <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" id="district" disabled>
                        <option value="0" selected>Select District</option>
                    </select>
                    <span id="error_district" class="d-block small text-danger"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label class="form-label">Pincode <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm editable-field"
                        id="pincode" placeholder="Enter Pincode" disabled>
                    <span id="error_pincode" class="d-block small text-danger"></span>
                </div>
                
                <div class="mb-3 col-md-4">
                    <label class="form-label">Address <span class="text-danger">*</span></label>
                    <textarea class="form-control form-control-sm editable-field" rows="2" 
                        id="address" placeholder="Enter Address" disabled></textarea>
                    <span id="error_address" class="d-block small text-danger"></span>
                </div>
            </div>
                    </form>
                </div>
            </div>

            <!-- Personal Documents Tab -->
            <div class="tab-pane fade" id="personal-docs" role="tabpanel" aria-labelledby="personal-docs-tab">
                <div class="container-fluid p-4">
                    
                    <h6 class="mb-3 text-body-emphasis border-bottom pb-2">Select Document Types</h6>
                    <form class="row align-items-center mb-4">
                        <div class="col-12 mb-3">
                            <label class="form-label fw-semibold">Document Types <span class="text-danger">*</span></label>
                            <div class="d-flex gap-4">
                                @foreach($documentTypes as $docType)
                                <div class="form-check">
                                    <input class="form-check-input document_type"
                                        onchange="hideWhenDocumentUploadDiv($('#{{ $docType->slug }}').val())"
                                        type="checkbox" value="{{ $docType->id }}" id="{{ $docType->slug }}" 
                                        data-slug="{{ $docType->slug }}" disabled>
                                    <label class="form-check-label" for="{{ $docType->slug }}">{{ $docType->name }}</label>
                                </div>
                                @endforeach
                            </div>
                            <span id="error_document_type" class="d-block small text-danger mt-1"></span>
                        </div>
                    </form>


                    <!-- Aadhar Card Section -->
                    <div class="card border mb-3" id="aadhar_div" style="display: none;">
                        <div class="card-header bg-body-tertiary">
                            <h6 class="mb-0"><i class="uil uil-id-card me-2"></i>Aadhar Card</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Aadhar Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm"
                                        id="aadhar_number" placeholder="Aadhar No"
                                        onkeyup="formatAadhaarNumber(this);" maxlength="14" disabled>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Upload Aadhar Image <span class="text-danger">*</span></label>
                                    <div class="custom-file-container" data-upload-id="Imagepreview1">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Upload document image</small>
                                            <a href="javascript:void(0)" id="clear_aadhar"
                                                class="custom-file-container__image-clear text-danger small"
                                                title="Clear Image" style="display:none;">
                                                <i class="fa fa-times"></i> Clear
                                            </a>
                                        </div>
                                        <label class="custom-file-container__custom-file">
                                            <input type="file"
                                                class="custom-file-container__custom-file__custom-file-input addRemoveDocClass"
                                                id="aadhar_file"
                                                name="aadhar" accept="image/*" 
                                                onclick="document.getElementById('clear_aadhar').click();$('#aadhar_file').val('');" disabled>
                                            <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                            <span class="custom-file-container__custom-file__custom-file-control"></span>
                                        </label>
                                        <div class="custom-file-container__image-preview"></div>
                                        <span id="error_aadhar_file" class="d-block small text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-sm btn-phoenix-primary" id="download_aadhar">
                                        <i class="fas fa-download me-1"></i>Download
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Passport Section -->
                    <div class="card border mb-3" id="passport_div" style="display: none;">
                        <div class="card-header bg-body-tertiary">
                            <h6 class="mb-0"><i class="uil uil-book-open me-2"></i>Passport</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Passport Number <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm"
                                        id="passport_number" placeholder="Passport No" disabled>
                                    <span id="error_passport_no" class="d-block small text-danger"></span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Issue <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control form-control-sm" id="passport_issue_date" disabled>
                                    <span id="error_passport_issue_date" class="d-block small text-danger"></span>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Expiry <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control form-control-sm" id="passport_expiry_date" disabled>
                                    <span id="error_passport_expiry_date" class="d-block small text-danger"></span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Upload Passport Page 1 <span class="text-danger">*</span></label>
                                    <div class="custom-file-container" data-upload-id="Imagepreview4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Upload document image</small>
                                            <a href="javascript:void(0)" id="clear_passport_page1"
                                                class="custom-file-container__image-clear text-danger small"
                                                title="Clear Image" style="display:none;">
                                                <i class="fa fa-times"></i> Clear
                                            </a>
                                        </div>
                                        <label class="custom-file-container__custom-file">
                                            <input type="file"
                                                class="custom-file-container__custom-file__custom-file-input addRemoveDocClass"
                                                onclick="document.getElementById('clear_passport_page1').click();$('#passport_page1').val('');" 
                                                id="passport_page1"
                                                name="passport_page1" accept="image/*" disabled>
                                            <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                            <span class="custom-file-container__custom-file__custom-file-control"></span>
                                        </label>
                                        <div class="custom-file-container__image-preview"></div>
                                        <span id="error_passport_page1" class="d-block small text-danger"></span>
                                    </div>
                                    <button class="btn btn-sm btn-phoenix-primary mt-2" id="download_passport_page1">
                                        <i class="fas fa-download me-1"></i>Download Page 1
                                    </button>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Upload Passport Page 2 <span class="text-danger">*</span></label>
                                    <div class="custom-file-container" data-upload-id="Imagepreview5">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Upload document image</small>
                                            <a href="javascript:void(0)" id="clear_passport_page2"
                                                class="custom-file-container__image-clear text-danger small"
                                                title="Clear Image" style="display:none;">
                                                <i class="fa fa-times"></i> Clear
                                            </a>
                                        </div>
                                        <label class="custom-file-container__custom-file">
                                            <input type="file"
                                                class="custom-file-container__custom-file__custom-file-input addRemoveDocClass"
                                                onclick="document.getElementById('clear_passport_page2').click();$('#passport_page2').val('');" 
                                                id="passport_page2"
                                                name="passport_page2" accept="image/*" disabled>
                                            <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                            <span class="custom-file-container__custom-file__custom-file-control"></span>
                                        </label>
                                        <div class="custom-file-container__image-preview"></div>
                                        <span id="error_passport_page2" class="d-block small text-danger"></span>
                                    </div>
                                    <button class="btn btn-sm btn-phoenix-primary mt-2" id="download_passport_page2">
                                        <i class="fas fa-download me-1"></i>Download Page 2
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Birth Certificate Section -->
                    <div class="card border mb-3" id="birth_certificate_div" style="display: none;">
                        <div class="card-header bg-body-tertiary">
                            <h6 class="mb-0"><i class="uil uil-file-medical-alt me-2"></i>Birth Certificate</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Upload Birth Certificate <span class="text-danger">*</span></label>
                                    <div class="custom-file-container" data-upload-id="Imagepreview6">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Upload document image</small>
                                            <a href="javascript:void(0)" id="clear_birth_certificate"
                                                class="custom-file-container__image-clear text-danger small"
                                                title="Clear Image" style="display:none;">
                                                <i class="fa fa-times"></i> Clear
                                            </a>
                                        </div>
                                        <label class="custom-file-container__custom-file">
                                            <input type="file"
                                                class="custom-file-container__custom-file__custom-file-input addRemoveDocClass"
                                                onclick="document.getElementById('clear_birth_certificate').click();$('#birth_certificate_file').val('');" 
                                                id="birth_certificate_file"
                                                name="birth_certificate_file"
                                                accept="image/*" disabled>
                                            <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                            <span class="custom-file-container__custom-file__custom-file-control"></span>
                                        </label>
                                        <div class="custom-file-container__image-preview"></div>
                                        <span id="error_birth_certificate_file" class="d-block small text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-sm btn-phoenix-primary" id="download_birth_certificate">
                                        <i class="fas fa-download me-1"></i>Download
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Professional Information Tab -->
            <div class="tab-pane fade" id="professional-info" role="tabpanel" aria-labelledby="professional-info-tab">
                <div class="container-fluid p-4">
                    <div class="alert alert-info border-0 mb-3" role="alert">
                        <i class="uil uil-info-circle me-2"></i>
                        <strong>Profile Information:</strong> View user's professional profiles and belt categories below.
                    </div>
                    <div id="professional_info_content">
                        <p class="text-muted text-center py-5">Select a user to view professional information</p>
                    </div>
                </div>
            </div>

            <!-- Professional Documents Tab -->
            <div class="tab-pane fade" id="professional-docs" role="tabpanel" aria-labelledby="professional-docs-tab">
                <div class="container-fluid p-4">
                    <h6 class="mb-3 text-body-emphasis border-bottom pb-2">Professional Profiles & Official Documents</h6>
                    
                    <div class="tab">
                        <ul class="nav nav-underline mb-3" role="tablist" id="profiles_tablist">
                <li class="nav-item"><a class="nav-link d-none" href="#add_new_profile_for_user" data-bs-toggle="tab" role="tab">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus align-middle me-2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                    <span class="align-middle">Add New</span>
                    </a></li>
                </ul>
                <div class="tab-content" id="profile_content_div">

                    <div class="tab-pane" id="add_new_profile_for_user" role="tabpanel">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <!-- <h5 class="card-title">Form row</h5> -->
                                    <!-- <h6 class="card-subtitle text-muted">Bootstrap column layout.</h6> -->
                                </div>
                                <div class="card-body" style=" height:500px; overflow: auto;">

                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="inputCity">Select Profile Category: <span
                                                    class="text-danger "
                                                    style="font-size:16pt;display: inline;">*</span></label>
                                            <select class="form-control step_3 " data-bs-toggle=""
                                                id="primary_profile_cat" onchange="checkProfile(this)"
                                                placeholder="Primary Profile Category">
                                                <option value="" selected>-Select-Profile-</option>

                                            </select>
                                            <span id="error_primary_profile_cat"></span>

                                            <div class="row" id="coach_license_level_div" style="display:none">
                                                <div class="mb-3 col-md-12">
                                                    <label for="coach_licLicense_level">Coach IT License Certificate: <span
                                                        class="text-danger "
                                                        style="font-size:16pt;display: inline;">*</span></label>
                                                <select class="form-control step_3 " data-bs-toggle=""
                                                    id="coach_license_level"  placeholder="Coach License Certificate">
                                                    <option value="" selected>-Select-Level-</option>
                                                    <option value="1">Level 1</option>
                                                    <option value="2">Level 2</option>
                                                    <option value="3">Level 3</option>
                                                </select>
                                                <span id="error_coach_license_level"></span>
                                                </div>
                                            </div>

                                            <div class="row" id="user_belt_type_div"
                                                style="display:none">
                                                <div class="mb-3 col-md-12">
                                                    <label for="inputCity">Select IT Belt Category
                                                        <span class="text-danger" style="font-size:16pt;display: inline;">*</span></label>
                                                    <select class="form-control remove_danger_class"
                                                        data-bs-toggle="" id="user_belt_type"
                                                        onchange="hideWhenBeltCat(this)"
                                                        placeholder="Belt Category">
                                                        <option value="" selected>-Select-Category-
                                                        </option>

                                                        <!-- <option value="5" selected>Volunteer</option>-->
                                                    </select>
                                                    <span id="error_belt_type" class="error_span"></span>
                                                </div>
                                            </div>

                                                <div class="row user_belt_div"
                                                    id="user_belt_div_"
                                                    style="display:none">
                                                    <div class="mb-3 col-md-12">
                                                        <label for="inputCity">Select Belt :<span
                                                                class="text-danger"
                                                                style="font-size:16pt;display: inline;">*</span></label>
                                                        <select
                                                            class="form-control remove_danger_class user_belt_select"
                                                            data-bs-toggle=""
                                                            id="user_belt_"
                                                            onchange="hideWhenUploadDoc(this)"
                                                            placeholder="Belt">
                                                            <option value="" selected>-Select-Belt-
                                                            </option>

                                                            <!-- <option value="5" selected>Volunteer</option>-->
                                                        </select>
                                                        <span id="error_belt" class="error_span"></span>
                                                    </div>
                                                </div>
                                        </div>

                                        <div class="mb-3 col-md-4" id="belt_certificate_div">
                                            <div class="custom-file-container"
                                                data-upload-id="belt_certif_preview">
                                                <p style="float: left">Upload IT Belt certificate<span class="text-danger" style="font-size:16pt;display: inline;" id="required_tag"></span> :
                                                </p>
                                                <a href="javascript:void(0)" style="float: right"
                                                    id="clear_belt_certificate"
                                                    class="custom-file-container__image-clear"
                                                    title="Clear Image">Clear
                                                    Image
                                                    <i class="fa fa-times text-danger"
                                                        aria-hidden="true"></i></a>
                                                <label class="custom-file-container__custom-file">
                                                    <input type="file"
                                                        class="custom-file-container__custom-file__custom-file-input  addRemoveDocClass"
                                                        onclick="document.getElementById('clear_belt_certificate').click();$('#belt_certificate_file').val('');" id="belt_certificate_file"
                                                        placeholder="Document-Image(Belt certificate)"
                                                        name="belt_certificate_file" accept="image/*">
                                                    <input type="hidden" name="MAX_FILE_SIZE"
                                                        value="10485760" />
                                                    <span
                                                        class="custom-file-container__custom-file__custom-file-control"></span>
                                                </label>
                                                <div class="custom-file-container__image-preview"></div>
                                                <span id="error_belt_certificate_file"></span>
                                            </div>
                                        </div>

                                        <div class="mb-3 col-md-4" id="certificate_div">
                                            <center>
                                                <div class="mb-3">
                                                    <label class="form-label"
                                                        id="certificate_label">Upload Support doc ( .pdf format ) </label>
                                                        <span class="text-danger" style="font-size:16pt;display: inline;">*</span>
                                                        <br>
                                                    <input type="file"
                                                        class="btn btn-primary custom-file-input addRemoveCertClass remove_danger_class emptyPdfInput"
                                                        id="certificate_file" name="certificate"
                                                        accept="application/pdf,image/jpeg,image/jpg"
                                                        style="cursor:pointer"
                                                        onchange="onChangePDf('certificate_file')"
                                                        placeholder="Certificate">
                                                    <span id="error_certificate"
                                                        class="error_span"></span>
                                                </div>
                                                <div class="mb-3" id="refreshCertDiv">
                                                    <label class="form-label"></label><br>
                                                    <embed src="" class="emptyEmbedSrc"
                                                        style="height:250px" frameborder="0"
                                                        id="certificate_embed">
                                                    <a href=""
                                                        class="btn btn-sm btn-success form-control emptyAnchorhref"
                                                        target="_blank"
                                                        style="display:none; margin:10px;padding:10px;width:25%"
                                                        id="certificate_anchor"> View</a>
                                                </div>
                                            </center>

                                        </div>

                                    </div>


                                    <div class="row" id="professional_coach_div" style="display:none">
                                        <div class="mb-3 col-md-6" style="margin-top:25px">
                                            <label class="form-label">Coach-Level <span
                                                    class="text-danger "
                                                    style="font-size:16pt;display: inline;">*</span></label>
                                            <select
                                                class="form-control addRemoveCertClass remove_danger_class"
                                                id="level_coach" onchange="" placeholder="Level">
                                                <option value="" selected>-Select-Level-</option>
                                                <!-- <option value="0" >New</option>
                                                    <option value="1" >State</option>                                                                      -->
                                                <option value="3">National</option>
                                                <option value="4">International</option>
                                            </select>
                                            <span id="error_level_coach" class="error_span"></span>
                                        </div>

                                        <div class="mb-3 col-md-6" id="certificate_coach_div"
                                            style="margin-top:25px">
                                            <center>
                                                <div class="mb-3 ">
                                                    <label class="form-label">Coach-Upload Support doc (
                                                        .pdf format )</label><br>
                                                    <input type="file"
                                                        class="btn btn-primary custom-file-input addRemoveCertClass remove_danger_class emptyPdfInput"
                                                        id="certificate_coach" name="certificate_coach"
                                                        accept="application/pdf" style="cursor:pointer"
                                                        onchange="onChangePDf('certificate_coach')"
                                                        placeholder="Coach-Certificate">
                                                    <span id="error_certificate_coach"
                                                        class="error_span"></span>
                                                </div>
                                                <div class="mb-3 " id="refreshCoachCertDiv">
                                                    <label class="form-label"></label><br>
                                                    <embed src="" class="emptyEmbedSrc"
                                                        style="height:250px" frameborder="0"
                                                        id="certificate_coach_embed">
                                                    <a href=""
                                                        class="btn btn-sm btn-success form-control emptyAnchorhref"
                                                        target="_blank"
                                                        style="display:none;margin:10px;padding:10px;width:25%"
                                                        id="certificate_coach_anchor"> View</a>
                                                </div>
                                            </center>
                                        </div>
                                    </div>

                                    <div class="row" id="professional_referee_div" style="display:none">
                                        <div class="mb-3 col-md-6" style="margin-top:25px">
                                            <label class="form-label">referee-Level <span
                                                    class="text-danger "
                                                    style="font-size:16pt;display: inline;">*</span></label>

                                            <select
                                                class="form-control addRemoveCertClass remove_danger_class"
                                                id="level_referee" onchange="" placeholder="Level">
                                                <option value="" selected>-Select-Level-</option>
                                                <!-- <option value="0" >New</option>
                                                    <option value="1" >State</option> -->
                                                <option value="3">National</option>
                                                <option value="4">International</option>
                                            </select>

                                            <span id="error_level_referee" class="error_span"></span>

                                        </div>
                                        <div class="mb-3 col-md-6" id="certificate_referee_div"
                                            style="margin-top:25px">
                                            <center>

                                                <div class="mb-3 ">
                                                    <label class="form-label">referee-Upload Support doc (
                                                        .pdf format )</label><br>
                                                    <input type="file"
                                                        class="btn btn-primary custom-file-input emptyPdfInput addRemoveCertClass remove_danger_class"
                                                        id="certificate_referee" name="certificate_referee"
                                                        accept="application/pdf" style="cursor:pointer"
                                                        onchange="onChangePDf('certificate_referee')"
                                                        placeholder="referee-Certificate">
                                                    <span id="error_certificate_referee"
                                                        class="error_span"></span>
                                                </div>
                                                <div class="mb-3 " id="refreshrefereeCertDiv">
                                                    <label class="form-label"></label><br>
                                                    <embed src="" class="emptyEmbedSrc"
                                                        style="height:250px" frameborder="0"
                                                        id="certificate_referee_embed">
                                                    <a href=""
                                                        class="btn btn-sm btn-success form-control emptyAnchorhref"
                                                        target="_blank"
                                                        style="display:none;margin:10px;padding:10px;width:25%"
                                                        id="certificate_referee_anchor"> View</a>
                                                </div>
                                            </center>




                                        </div>
                                    </div>

                                    <!-- Physio/Doctor supporting doc -->
                                    <div class="row" id="professional_official_div"
                                        style="display:none">

                                        <div class="row" id="official_NA_div" style="display:none">
                                            <div class="mb-3 col-md-12"
                                                style="margin-top:25px;text-align: center;">
                                                <h3>No document(s) required to upload for the Official role
                                                    you have
                                                    selected</h3>
                                            </div>
                                        </div>
                                        <div class="row" id="official_doctor_div"
                                            style="display:none">
                                            <div class="mb-3 col-md-6" style="margin-top:25px">
                                                <center>
                                                    <div class="mb-3 ">
                                                        <label class="form-label">Doctor-Upload Support doc
                                                            ( .pdf format )</label><br>
                                                        <input type="file"
                                                            class="btn btn-primary custom-file-input emptyPdfInput addRemoveCertClass"
                                                            id="certificate_doctor"
                                                            name="certificate_doctor"
                                                            accept="application/pdf"
                                                            style="cursor:pointer"
                                                            onchange="onChangePDf('certificate_doctor')"
                                                            placeholder="Doctor-Certificate">
                                                        <span id="error_certificate_doctor"
                                                            class="error_span"></span>
                                                    </div>
                                                    <div class="mb-3 " id="refreshDoctorCertDiv">
                                                        <label class="form-label"></label><br>
                                                        <embed src="" class="emptyEmbedSrc"
                                                            style="height:250px" frameborder="0"
                                                            id="certificate_doctor_embed">
                                                        <a href=""
                                                            class="btn btn-sm btn-success form-control emptyAnchorhref"
                                                            target="_blank"
                                                            style="display:none;margin:10px;padding:10px;width:25%"
                                                            id="certificate_doctor_anchor"> View</a>
                                                    </div>
                                                </center>

                                            </div>


                                        </div>
                                    </div>

                                    <!-- Vounteer CV upload -->
                                    <div class="row" id="professional_volunteer_div"
                                        style="display:none">
                                        <div class="mb-3 col-md-4" id="certificate_referee_div">
                                            <center>
                                                <div class="mb-3 ">
                                                    <label class="form-label">Volunteer-Upload your CV (
                                                        .pdf format ) <span class="text-danger "
                                                            style="font-size:16pt;display: inline;">*</span></label><br>

                                                    <input type="file"
                                                        class="btn btn-primary custom-file-input emptyPdfInput addRemoveCertClass remove_danger_class"
                                                        id="cv_volunteer" name="pdf"
                                                        accept="application/pdf" style="cursor:pointer"
                                                        onchange="onChangePDf('cv_volunteer')"
                                                        placeholder="Upload your CV">
                                                    <span id="error_cv_volunteer"
                                                        class="error_span"></span>

                                                    <!-- <label class="custom-file-label" for="customFile" style="cursor:pointer"> <span class="text-danger "  style="font-size:16pt;display: inline;">*</span></label> -->
                                                </div>
                                                <div class="mb-3" id="refreshVolunteerDiv">
                                                    <label class="form-label"></label><br>

                                                    <embed src="" class="emptyEmbedSrc"
                                                        style="height:250px" frameborder="0"
                                                        id="cv_volunteer_embed">

                                                    <a href=""
                                                        class="btn btn-sm btn-success form-control emptyAnchorhref"
                                                        target="_blank"
                                                        style="display:none;margin:10px;padding:10px;width:25%"
                                                        id="cv_volunteer_anchor"> View</a>

                                                </div>
                                            </center>


                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Tab Content -->
    </div>
</div>


<!-- ====================end of off canvas -->


<div class="offcanvas offcanvas-top" tabindex="-1" id="viewQrOffcanvasTop" aria-labelledby="viewQrOffcanvasTopLabel" style="height: 50%;">
    <div class="offcanvas-header">
        <!-- <h5 id="viewQrOffcanvasTopLabel">Offcanvas top</h5> -->
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="text-center" id="view_qrcode_div">
            <img class="IT UID Qr Code" id="qrcode-img" width="250" height="250"  src="" />
        </div>
        <div class="text-center mt-3">
        <a class="btn btn-primary" id="qr_download_btn" onclick=""> <i class="fas fa-download"></i> Download </a>
        </div>
    </div>
</div>
@endsection

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

@push('styles')
     <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendors/dropzone/dropzone.css') }}" rel="stylesheet">
    <style>
        /* Clean tab styling without gradients */
        #userInfoTabContent {
            background-color: #fff;
        }
        
        #userInfoTabContent .nav-tabs {
            background-color: #f8f9fa;
        }
        
        #userInfoTabContent .nav-tabs .nav-link {
            color: #6c757d;
            border: none;
            padding: 0.75rem 1.5rem;
            transition: all 0.2s ease;
        }
        
        #userInfoTabContent .nav-tabs .nav-link:hover {
            color: #0d6efd;
            background-color: #e9ecef;
        }
        
        #userInfoTabContent .nav-tabs .nav-link.active {
            color: #0d6efd;
            background-color: #fff;
            border-bottom: 2px solid #0d6efd;
            font-weight: 500;
        }
        
        /* Form field styling */
        .form-control-sm:disabled, 
        .form-select-sm:disabled {
            background-color: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
        }
        
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
        }
        
        .card-header {
            font-weight: 500;
        }
        
        /* Professional docs tabs */
        #profiles_tablist .nav-link {
            padding: 0.5rem 1rem;
            color: #6c757d;
        }
        
        #profiles_tablist .nav-link.active {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
        }
        
        /* Section headers */
        h6.border-bottom {
            border-bottom: 2px solid #e9ecef !important;
        }
    </style>

@endpush

@push('scripts')
<!-- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> -->
  <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}?v={{ config('app.asset_version') }}"></script>
<script src="/js/pages/admin/user_profile.js?v=1769211523"></script>

@endpush