@extends('admin.layouts.app')
<style>
  /* input:focus {
  outline: none;
  color: blue;
  border: 1px solid black;
  text-decoration: underline;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
}  */

/* input {border:0!important;outline:0!important;} 
/* input:focus {outline:none!important;} */

.loader {
                position: relative;
                width: 100px;
                height: 50px;
                background-repeat: no-repeat;
                background-image: linear-gradient(#1e81f1 50px, transparent 0),
                                  linear-gradient(#f8f7f7 50px, transparent 0),
                                  linear-gradient(#1e81f1 50px, transparent 0),
                                  linear-gradient(#f8f7f7 50px, transparent 0),
                                  linear-gradient(#1e81f1 50px, transparent 0),
                                  linear-gradient(#f8f7f7 50px, transparent 0);
                background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
                animation: rikSpikeRoll 0.65s linear infinite alternate;
              }
            @keyframes rikSpikeRoll {
              0% { background-size: 10px 3px;}
              16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
              33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
              50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
              66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
              83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
              100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
            }
</style>
<link href=" /css/file-upload-with-preview.min.css" rel="stylesheet" type="text/css" />

@section('content')



    <div class="container-fluid">

        <!-- <div class="header">
        
            <nav aria-label="breadcrumb" >
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/dashboard">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="/admin/user_profiles">Users/Members</a></li>
                </ol>
            </nav>
        </div> -->
    

        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">

        <div class="header text-white">
            
            <div class="py-2 px-4 border-bottom d-none d-lg-block">
                <div class="d-flex align-items-center py-1">
                    <div class="position-relative">
                        <div class="input-group ">
                            <select class="form-select" id="selected_profile" onchange="getRequestedData(1,'getAllOldUserProfiles?page=','loadAllUserProfiles');" >
                                <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>
                             &nbsp;&nbsp;&nbsp;
                          
                                <select class="form-control select2"
                                    data-bs-toggle="select2" id="state_filter"
                                    placeholder="state_filter" style="width: 100%;" onchange="getRequestedData(1,'getAllOldUserProfiles?page=','loadAllUserProfiles');">
                               <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>
                            &nbsp;&nbsp;&nbsp;

                            <select class="form-select" id="search_by">
                                <option value="">Select...</option>
                                <option value="reg_uid" selected>UID</option>
                                <option value="name" selected>Name</option>
                                <option value="email">Email</option>
                                <option value="contact">Contact</option>
                                <option value="state">State</option>
                            </select>
                            <input type="text" class="form-control" id="search_key" placeholder="Search for...">
                            <button class="btn btn-secondary" type="button" onclick="searchByKey()">Go!</button>
                            <button class="btn btn-danger ml-2 d-none" type="button" id="clearSearchByKey" onclick="clearSearchByKey()">X</button>

                        </div>
                    </div>
                    <div class="flex-grow-1 ps-3">
                       
                    </div>
                    
                    <!--  <div>-->
                    <!--    <button type="button" class="btn btn-success" id="export_user_csv_file" onclick="export_user_csv_file();"><i class="fas fa-file-export"></i> Export CSV</button>-->
                    <!-- </div>-->
                    <!--&nbsp;&nbsp;&nbsp;-->
                    <!--<div>   -->
                    <!--    <button type="button" class="btn btn-secondary" id="download_qrcode" onclick="download_qr_zip();"><i class="fas fa-download"></i> All QrCodes</button>-->
                    <!--</div>-->
                    <!--&nbsp;&nbsp;&nbsp;-->
                    <div>
                        <div id="reportrange" class="overflow-hidden form-control">
                            <i class="far fa-calendar"></i>&nbsp;
                            <span></span> <i class="fas fa-caret-down"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="row" style="margin-top:-40px !important;">
            <div class="col-12">
                <div class="card">

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

                    {{-- <div class="card-header">
									<h4 class="card-title">Responsive DataTables</h4>
									<h6 class="card-subtitle text-muted">Highly flexible tool that many advanced features to any HTML table. See official
										documentation <a href="https://datatables.net/extensions/responsive/" target="_blank"
											rel="noopener noreferrer nofollow">here</a>.</h6>
								</div> --}}
                    <div class="card-body scroll-h" >
                        <div class="table-responsive table-card" style="max-height:85vh; height: auto;  overflow: hidden scroll;">
                            <table class="table table-sm table-centered align-middle table-hover table-nowrap mb-0">
                                <thead class="text-muted table-light" style="position: sticky;top: 0;	">
                                    <tr>
                                        <th>QR</th>
                                        <th>UID</th>
                                        <th>Profile</th>
                                        <th>Name</th>
                                        <th>D.O.B</th>
                                        <th>State</th>
                                        <th>District</th>
                                        <th>Email</th>
                                        <th>Contact</th>
                                        <th>Status</th>
                                        <th>Verified By</th>
                                        <th>Created at</th>

                                    </tr>
                                </thead>
                                <tbody id="paymentDetailsTbody">

                                </tbody>
                            </table>
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
    </div>
 
<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>
<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