@extends('layouts.admin')

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

@section('content')
<div class="row g-2 mb-2 align-items-center">
    <div class="col-md-7 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" id="selected_profile" name="selected_profile" style="min-width:130px;">
                <option value="">Select 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-control select2"
                    data-bs-toggle="select2" id="state_filter" name="state"
                    placeholder="state_filter" style="width: 100%;">
                <option value="0" selected>Select 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" id="search_by" name="search_by">
                <option value="">Select...</option>
                <option value="reg_uid" selected>UID</option>
                <option value="email">Email</option>
                <option value="contact">Contact</option>
            </select>
            <input type="text" class="form-control form-control-sm w-auto" 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">Go</button>
        </form>
    </div>
    <div class="col-md-5 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();"><i class="fas fa-file-export"></i>  <small>Export CSV</small></button>
            <button type="button" class="btn btn-secondary btn-sm text-sm" id="download_qrcode" onclick="download_qr_zip();"><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>

<div class="row g-3">
    <div class="col-12">
        <div class="card border h-100">
            <!-- <div class="card-header border-bottom bg-body">
                <div class="row align-items-center py-0" style="min-height:22px;">
                    <div class="col">
                        <h4 class="mb-0 fw-semibold small" style="line-height:1.2;">All Applications</h4>
                    </div>
                </div>
            </div> -->
            <div class="card-body p-0">
               
                    <div class="table-responsive scrollbar">
                 
                    <div class="phoenix-table-sticky-wrapper" style="position:relative; max-height:calc(100vh - 156px); overflow:auto;">
                        <table class="table table-sm fs-9 mb-0">
                            <thead style="position:sticky; top:0; z-index:2; 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>
<!-- ==================================off canvas -->

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" style="width: 50%;">
    <div class="offcanvas-header">
        <h4 id="offcanvasRightLabel">User Information</h4>
        <h4 id="offcanvasRightLabel">UID: <span id="set_uid"></span></h4>

        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="edit_mode_toggle">
            <label class="form-check-label" for="edit_mode_toggle" id="edit_mode_toggle_label">Edit Mode Off</label>
        </div>
            <!-- <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> -->
    </div>
    <div class="offcanvas-body">

    <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>

        <div class="border bg-light pt-1" style="height: auto;">
        <center>
            <h4>
                Personal Information
            </h4>
        </center>
        </div>
        <div class="container-fluid">
        <form>
            <div class="row" style="margin-top:-30px">
                <div class="col-md-6">
                    <div class="mb-2 mt-4">
                        <div class="text-center">
                            <img alt="Profile Pic" src="/img/pp.png"
                                id="profile_image"
                                class="rounded me-2 mb-2 img-responsive mt-2"
                                width="128" height="128" />
                                <p class="text-danger d-none" id="pp_nf_error">Profile Photo Not Found!</p>
                            <div class="mt-2">

                                <input type="file" class="required_update"
                                    name="docImageUpload" id="docImageUpload"
                                    style="display: none;"
                                    placeholder="Profile-Picture"
                                    onchange="uploadOnChangeDocUpload()" onclick="emptyImageUploadElementsAndViewer('profile_image')">
                                <button type="button"
                                    class="btn btn-primary "
                                    id="docImageUploadButton"
                                    onclick="document.getElementById('docImageUpload').click();"><i
                                        class="fas fa-upload"></i>
                                    Change</button>
                                <span class="text-danger"
                                    style="font-size:16pt;display: inline;">*</span>
                                <span id="error_docImageUpload"></span>

                            </div>
                            <!-- <small>For best results, use an image at least 128px by 128px in .jpg
                format</small> -->
                        </div>

                    </div>
                </div>

                <!-- <div class="col-md-6">
                    <div class="mb-2 mt-4" id="qr_code_div">
                        <div class="text-center">
                            <img alt="Qr Code" src="/img/qr_code.png" id="" class="rounded me-2 mb-2 img-responsive mt-2" width="128" height="128" />
                                <p class="text-danger d-none" id="qr_ng_error">Qr Code is not generated!</p>
                            <div class="mt-2">
                                <button type="button" class="btn btn-primary" id="download_qrcode" onclick="generateQrCode();"><i class="fas fa-download"></i> Download</button>
                                <button type="button" class="btn btn-primary" id="ganerate_qrcode" onclick="generateQrCode();"><i class="fas fa-upload"></i> Ganerate Now</button>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="row">
                <div class="mb-3 col-md-4">
                    <input type="hidden" id="user_id" name="user_id" value="">
                    <label for="fname">First Name<span style="color:red; font-size:20px;">*</span></label>
                    <input id="fname" type="text" placeholder="Enter first name" class="required_update form-control" name="fname" value="" required autocomplete="fname" autofocus>

                    <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>

                </div>
                <div class="mb-3 col-md-4">
                     <label for="mname">Middle Name
                        {{-- <input type="checkbox" id="mname_na" name="mname_na" value="Z" onclick="notApplicable('mname')" class="form-check-input" @if(old('mname_na')) checked @endif> --}}
                      </label>
                     <input id="mname" type="text" placeholder="Enter middle name" class="form-control"  name="mname"  autocomplete="mname" autofocus >

                    <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>

                </div>
                <div class="mb-3 col-md-4">
                    <label for="lname">Last Name
                        {{-- <input type="checkbox" id="lname_na" name="lname_na" value="Y" onclick="notApplicable('lname')" class="form-check-input" @if(old('lname_na')) checked @endif> --}}
                    </label>
                    <input id="lname" type="text" placeholder="Enter last name" class="form-control" name="lname"   autocomplete="lname" autofocus >

                    <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>

                </div>
            </div>
            <div class="row">
                <div class="mb-3 col-md-4">
                    <label for="dob">Date Of Birth<span style="color:red; font-size:20px;">*</span></label>
                    <input type="date" class="form-control required" id="dob" name="dob" value="" required>

                     <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>

                </div>
                <div class="mb-3 col-md-4">
                    <label for="gender">Gender<span style="color:red; font-size:20px;">*</span></label>
                    <div class="form-control">
                        <label class="form-check form-check-inline">
                            <input  type="radio"  class="form-check-input" name="gender" value="1">
                            <span class="form-check-label">
                                Male
                            </span>
                        </label>
                        <label class="form-check form-check-inline">
                            <input type="radio" class="form-check-input"   name="gender" value="2" >
                            <span class="form-check-label">
                                Female
                            </span>
                        </label>
                        <label class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="gender" value="3">
                            <span class="form-check-label">
                                Other
                            </span>
                        </label>
                    </div>

                    <span class="invalid-feedback" role="alert">
                        <strong></strong>
                    </span>

                </div>
                <div class="mb-3 col-md-4">
                    <label for="inputEmail4">Email<span style="color:red; font-size:20px;">*</span></label>
                    <input id="email" type="email" placeholder="Enter valid email address" class="form-control required" name="email" value=""  autocomplete="email">
                        <span class="invalid-feedback" role="alert">
                            <strong></strong>
                        </span>
                    <span class="invalid-email">
                        <small  id="invalid_email"></small>
                    </span>

                 </div>
            </div>
          <div class="row">
            <div class="mb-3 col-md-4">
                <label class="form-label">Mobile-No <span
                        class="text-danger"
                        style="font-size:16pt;display: inline;">*</span></label>
                <input type="text" class="form-control required_update"
                    id="mobile" placeholder="Enter Mobile No"
                    maxlength="10" onkeypress="return isNumber(event)">
                <span id="error_mobile"></span>
            </div>

            <div class="mb-3 col-md-4">
                <label class="form-label">Country <span
                        class="text-danger"
                        style="font-size:16pt;display: inline;">*</span></label>
                 <select class="form-control select2 select_require"
                    data-bs-toggle="select2" id="country"
                    onchange="loadStates(); hideWhenNotIndia(); " placeholder="Country" >
                    <option value="0" selected>-Select-Country-</option>
                </select>
                <span id="error_country"></span>
            </div>
            <div class="mb-3 col-md-4" id="state_dropdown">
                <label class="form-label">State <span class="text-danger " style="font-size:16pt;display: inline;">*</span></label>
                <select class="form-control select2 select_require "
                    data-bs-toggle="select2" id="state"
                    placeholder="state" style="z-index:9999 !important"
                    onchange="loadDistricts($('#state').val());">
                    <option value="0" selected>-Select-State/Union Territory/Departments-</option>
                </select>
                <span id="error_state"></span>
            </div>
            <div class="mb-3 col-md-4" id="state_input"
            style="display:none">
            <label class="form-label">State<span class="text-danger  "
                    style="font-size:16pt;display: inline;">*</span></label>
            <input type="text" class="form-control "
                id="state_name" placeholder="Enter State Name">
            <span id="error_state_name"></span>
        </div>
          </div>
          <div class="row">
            <div class="mb-3 col-md-4">
                <label class="form-label">District <span
                        class="text-danger  "
                        style="font-size:16pt;display: inline;">*</span></label>
                <select class="form-control select2 select_require "
                    data-bs-toggle="select2" id="district"
                    placeholder="district"
                    style="z-index:9999 !important">
                    <option value="0" selected>-Select-District-
                    </option>

                </select>
                <span id="error_district"></span>
            </div>
            <div class="mb-3 col-md-4">
                <label class="form-label">Pincode <span
                        class="text-danger  "
                        style="font-size:16pt;display: inline;">*</span></label>
                <input type="text" class="form-control required_update"
                    id="pincode" placeholder="Enter Pincode">
                <span id="error_pincode"></span>
            </div>
            <div class="mb-3 col-md-4">
                <label class="form-label">Address <span
                        class="text-danger  "
                        style="font-size:16pt;display: inline;">*</span></label>
                <textarea class="form-control required_update" rows="2" id="address" placeholder="Enter Address"></textarea>
                <span id="error_address"></span>
            </div>
          </div>
        </form>
    </div>

    <div class="border bg-light pt-1" style="height: auto;">
        <center>
            <h4>
                Personal Document Section
            </h4>
        </center>
    </div>
    <div class="container-fluid">
        <form class="row row-cols-md-auto align-items-center">
         <label class="form-label">Document-Types <span
                        class="text-danger"
                        style="font-size:16pt;display: inline;">*</span></label>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input document_type"
                        onchange="hideWhenDocumentUploadDiv($('#aadhar').val())"
                        type="checkbox" value="1" id="aadhar">
                    <label class="form-check-label" for="aadhar">
                        Aadhar Card
                    </label>
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input document_type"
                        onchange="hideWhenDocumentUploadDiv($('#passport').val())"
                        type="checkbox" value="2" id="passport">
                    <label class="form-check-label" for="passport">
                        Passport
                    </label>
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input document_type"
                        onchange="hideWhenDocumentUploadDiv($('#birth_certificate').val())"
                        type="checkbox" value="3"
                        id="birth_certificate">
                    <label class="form-check-label"
                        for="birth_certificate">
                        Birth Certificate
                    </label>
                </div>
            </div>

            <span id="error_document_type" class="text-danger"></span>
        </form>


         <div class="row" id="aadhar_div" style="background: linear-gradient(0deg, rgba(185, 187, 187, 0) 0%, rgb(231, 231, 228) 100%); display: none;">
            <div class="" style="height: auto; background: rgb(231, 231, 228)">
                <center>
                    <h4>Aadhar-Card</h4>
                </center>
            </div>
            <div class="col" id="aadhar_div" >
                <label class="form-label">Aadhar Number<span
                        class="text-danger"
                        style="font-size:16pt;display: inline;">*</span></label>
                <input type="text" class="form-control "
                    id="aadhar_number" placeholder="Aadhar No"
                    onkeyup="formatAadhaarNumber(this);" maxlength="14">

                <div class="custom-file-container mt-2" data-upload-id="Imagepreview1">
                    <p style="float: left">Upload-Image(Aadhar) <span
                            class="text-danger "
                            style="font-size:16pt;display: inline;">*</span>
                        : </p>
                    <a href="javascript:void(0)" style="float: right"
                        id="clear_aadhar"
                        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"
                            onchange="" id="aadhar_file"
                            placeholder="Document-Image(Aadhar)"
                            name="aadhar" accept="image/*" onclick="document.getElementById('clear_aadhar').click();$('#aadhar_file').val('');">
                        <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"></span>
                </div>
                                <button class="btn btn-primary aadhar-btn mb-2" id="download_aadhar"><i class="fas fa-download"></i> Download</button>

            </div>
         </div>

        <div class="row" id="passport_div" style="background: linear-gradient(0deg, rgba(185, 187, 187, 0) 0%, rgb(231, 231, 228) 100%); display: none;">
            <div class="pt-2"  style="height: auto;">
                <center>
                    <h4>Passport</h4>
                </center>
            </div>
            <div class="col passport_div" >
                <label class="form-label">Passport Number<span
                        class="text-danger"
                        style="font-size:16pt;display: inline;">*</span></label>
                <input type="text" class="form-control"
                    id="passport_number" placeholder="Passport No">
                <span id="error_passport_no"></span>
                <div class="custom-file-container"
                    data-upload-id="Imagepreview4">
                    <p style="float: left">Upload-Image(Passport-Page1)
                        <span class="text-danger "
                            style="font-size:16pt;display: inline;">*</span>
                        : </p>
                    <a href="javascript:void(0)" style="float: right"
                        id="clear_passport_page1"
                        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_passport_page1').click();$('#passport_page1').val('');"  id="passport_page1"
                            placeholder="Document-Image(Passport-Page1)"
                            name="passport_page1" 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_passport_page1"></span>

                </div>
                 <button class="btn btn-primary aadhar-btn mb-2" id="download_passport_page1"><i class="fas fa-download"></i> Download</button>
            </div>

            <div class="col passport_div" id="">
                <div class="row">
                    <div class="col">
                        <label class="form-label">Date Of Issue <span class="text-danger" style="font-size:16pt;display: inline;">*</span></label>
                        <input type="date" class="form-control" id="passport_issue_date" placeholder="Passport No">
                        <span id="error_passport_issue_date"></span>
                    </div>

                     <div class="col">
                        <label class="form-label">Date Of Expiry <span class="text-danger" style="font-size:16pt;display: inline;">*</span></label>
                        <input type="date" class="form-control" id="passport_expiry_date" placeholder="Passport No">
                        <span id="error_passport_expiry_date"></span>
                     </div>

                </div>
                <div class="custom-file-container"
                    data-upload-id="Imagepreview5">
                    <p style="float: left">Upload-Image(Passport-Page2)
                        <span class="text-danger"
                            style="font-size:16pt;display: inline;">*</span>
                        : </p>
                    <a href="javascript:void(0)" style="float: right"
                        id="clear_passport_page2"
                        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_passport_page2').click();$('#passport_page2').val('');" id="passport_page2"
                            placeholder="Document-Image(Passport-Page2)"
                            name="passport_page2" 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_passport_page2"></span>

                </div>
                <button class="btn btn-primary aadhar-btn mb-2" id="download_passport_page2"><i class="fas fa-download"></i> Download</button>

            </div>
        </div>

        <div class="row mt-2" id="birth_certificate_div" style="background: linear-gradient(0deg, rgba(185, 187, 187, 0) 0%, rgb(231, 231, 228) 100%);display: none;">
            <div class="mt-2" style="height: auto;">
                <center>
                    <h4>Birth Certificate</h4>
                </center>
            </div>
            <div class="col mt-3" id="birth_certificate_div" >
            <div class="custom-file-container"
                data-upload-id="Imagepreview6">
                <p style="float: left">Upload-Image(Birth Certificate)
                    <span class="text-danger "
                        style="font-size:16pt;display: inline;">*</span>
                    : </p>
                <a href="javascript:void(0)" style="float: right"
                    id="clear_birth_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_birth_certificate').click();$('#birth_certificate_file').val('');" id="birth_certificate_file"
                        placeholder="Document-Image(birth_certificate_file)"
                        name="birth_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_birth_certificate_file"></span>
            </div>
             <button class="btn btn-primary aadhar-btn mb-2" id="download_birth_certificate"><i class="fas fa-download"></i> Download</button>
        </div>
        </div>

    </div>

    <div class="row" style="background: linear-gradient(0deg, rgba(185, 187, 187, 0) 0%, rgb(231, 231, 228) 100%)">
        <div class="pt-2" style="height: auto;">
            <center>
                <h4>
                    Profiles And Official Document Section
                </h4>
            </center>
        </div>
        <div class="col-12 col-lg-12">
            <div class="tab">
                <ul class="nav nav-tabs" 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 class="offcanvas-footer p-2">
        <button type="button" style="margin-left: 2%;" class="btn btn-info buttons" onclick="getUserInfo($('#user_id').val());">Reset</button>

        <button type="button" style="float: right;" class="btn btn-warning buttons" onclick="updateUserInfo();">Update</button>
    </div>
</div>


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

<script src="/js/file-upload-with-preview.min.js"></script>

<script>
    var Imagepreview1 = new FileUploadWithPreview('Imagepreview1');
    var Imagepreview4 = new FileUploadWithPreview('Imagepreview4')
    var Imagepreview5 = new FileUploadWithPreview('Imagepreview5')
    var Imagepreview6 = new FileUploadWithPreview('Imagepreview6')
    var belt_certif_preview = new FileUploadWithPreview('belt_certif_preview')
</script>


<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="/vendor/select2/select2.min.css">
    <!-- <link rel="stylesheet" href="/vendors/choices/choices.min.css"> -->

@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/vendor/select2/select2.min.js"></script>
<!-- <script src="/vendors/choices/choices.min.js"></script> -->
<script src="/js/pages/admin/user_profile.js?v=1768929571"></script>

@endpush