@extends('user.layouts.app')

<link href=" /css/file-upload-with-preview.min.css" rel="stylesheet" type="text/css" />

@section('content')
    <div class="container-fluid">

        <div class="header">
            <h1 class="header-title" style="margin-top:-40px !important;">
                Settings
            </h1>
        </div>

        <div class="row" style="margin-top:-40px !important;">
            <div class="col-md-3 col-xl-2">

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Profile Settings</h5>
                    </div>

                    <div class="list-group list-group-flush" role="tablist">
                        <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#account"
                            role="tab">
                            Account
                        </a>
                        <a class="list-group-item list-group-item-action" id="password_tab" data-bs-toggle="list" href="#password"
                            role="tab">
                            Password
                        </a>
                        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#all_profiles"
                            role="tab">
                            All Profiles
                        </a>
                        <a class="list-group-item list-group-item-action" onclick="setprofiles();" data-bs-toggle="list" href="#apply_new"
                            role="tab">
                            Apply New Profile
                        </a>
                        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#id_card"
                            role="tab">
                            Download Identity Card
                        </a>
                        {{-- <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
										Widgets
									</a>
									<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
										Your data
									</a>
									<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
										Delete account
									</a> --}}
                    </div>
                </div>
            </div>

            <div class="col-md-9 col-xl-10">
                <div class="tab-content">
    {{--------------------------Account Section Start=====---------------}}
                    <div class="tab-pane fade show active" id="account" role="tabpanel">
                        <div class="alert alert-success alert-dismissible" id="alert_success" role="alert" style="display: none">
                            <div class="alert-icon">
                                <i class="far fa-fw fa-bell"></i>
                            </div>
                            <div class="alert-message">
                                <strong>successfully Saved</strong>
                            </div>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>

                            <div class="alert alert-warning alert-dismissible" id="alert_warning" role="alert" style="display: none">
                                <div class="alert-icon">
                                    <i class="far fa-fw fa-bell"></i>
                                </div>
                                <div class="alert-message">
                                    <strong></strong>
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        <div class="card">
                            <div class="card-header">
                                <div class="card-actions float-end" style="display: none">
                                    <a href="#" class="me-1">
                                        <i class="align-middle" data-feather="refresh-cw"></i>
                                    </a>
                                    <div class="d-inline-block dropdown show">
                                        <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                            <i class="align-middle" data-feather="more-vertical"></i>
                                        </a>

                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                    </div>
                                </div>
                                <h5 class="card-title mb-0">Public info</h5>
                            </div>

                            <div class="card-body">
                                <form>
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="mb-3">
                                                <label for="UsernameEmail">Username/Email</label>
                                                <input type="email" class="form-control" value="{{ $user_info->email }}"
                                                    id="UsernameEmail" placeholder="Username/Email" disabled>
                                            </div>
                                            <div class="mb-3">
                                                <label for="inputUsername">Biography</label>
                                                <textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself">{{ Auth::user()->biography }}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">

                                                <img alt="no-image" src="{{$userDocs->profile_image}}" id="profile_image" class="rounded-circle img-responsive mt-2"
                                                width="128" height="128" />
                                            <div class="mt-2">
                                                <input type="file" class="" name="profileImageUpload" id="profileImageUpload" style="display: none;" placeholder="Profile-Picture" onchange="profileChange()" accept="image/*">
                                                <button type="button" class="btn btn-primary "  id="docImageUploadButton" onclick="document.getElementById('profileImageUpload').click();"  ><i class="fas fa-upload"></i> Upload</button>
                                            </div>
                                                {{-- <small>For best results, use an image at least 128px by 128px in .jpg
                                                    format</small> --}}
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" onclick="updateAccount({{ Auth::user()->id }})">Save changes</button>
                                </form>

                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-actions float-end">
                                    {{-- <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#viewDocumentsModal">View-Documents</button> --}}

                                    {{-- <div class="d-inline-block dropdown show" >
													<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
														<i class="align-middle" data-feather="more-vertical"></i>
													</a>

													<div class="dropdown-menu dropdown-menu-end">
														<a class="dropdown-item" href="#">Action</a>
														<a class="dropdown-item" href="#">Another action</a>
														<a class="dropdown-item" href="#">Something else here</a>
													</div>
												</div> --}}
                                </div>
                                <h5 class="card-title mb-0">Private info</h5>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="inputFirstName">First name</label>
                                            <input type="text" class="form-control" id="inputFirstName"
                                                value="{{ $user_info->fname }}" placeholder="First name" disabled>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputLastName">Middle name</label>
                                            <input type="text" class="form-control" id="inputMiddleName"
                                                value="{{ $user_info->mname }}" placeholder="Middle name" disabled>
                                        </div>

                                        <div class="mb-3 col-md-4">
                                            <label for="inputLastName">Last name</label>
                                            <input type="text" class="form-control"
                                                id="inputLastName"value="{{ $user_info->lname }}" placeholder="Last name"
                                                disabled>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="dob">Date Of Birth*</label>
                                            <input type="date" class="form-control" value="{{ Auth::user()->dob }}"
                                                id="dob" name="dob" disabled>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="gender">Gender*</label>
                                            <div class="form-control">
                                                <label class="form-check form-check-inline">
                                                    @if (Auth::user()->gender == 1)
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="1" checked disabled>
                                                    @else
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="1" disabled>
                                                    @endif
                                                    <span class="form-check-label">
                                                        Male
                                                    </span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    @if (Auth::user()->gender == 2)
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="2" checked disabled>
                                                    @else
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="2" disabled>
                                                    @endif
                                                    <span class="form-check-label">
                                                        Female
                                                    </span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    @if (Auth::user()->gender == 2)
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="3" checked disabled>
                                                    @else
                                                        <input type="radio" class="form-check-input" name="gender"
                                                            value="3" disabled>
                                                    @endif
                                                    <span class="form-check-label">
                                                        Other
                                                    </span>
                                                </label>
                                            </div>

                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="contact">Contact</label>
                                            <input type="text" disabled class="form-control"
                                                value="{{ $user_info->mobile }}" id="contact" placeholder="Contact"
                                                disabled>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="inputCountry">Country</label>
                                            <select id="inputCountry" class="form-control" disabled>
                                                <option value="" selected>-Select-Country-</option>
                                                @foreach ($countries as $country)
                                                    @if ($country->id == Auth::user()->country_id)
                                                        <option value="{{ $country->id }}" selected>{{ $country->name }}
                                                        </option>
                                                    @else
                                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputState">State</label>
                                            <select id="inputState" class="form-control" disabled>
                                                <option value="" selected>-Select-State-</option>
                                                @foreach ($states as $state)
                                                    @if ($state->id == Auth::user()->state_id)
                                                        <option value="{{ $state->id }}" selected>{{ $state->name }}
                                                        </option>
                                                    @else
                                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputState">City</label>
                                            <input type="text" class="form-control" id="inputCity"
                                                value="{{ Auth::user()->city_name }}" disabled>

                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label for="inputZip">Pincode/Zip</label>
                                            <input type="text" class="form-control" id="inputZip"
                                                value="{{ Auth::user()->pincode }}" disabled>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputState">Document-Type</label>

                                            <div class="input-group mb-3">
                                                <select class="form-select flex-grow-1" id="document_type"
                                                    placeholder="Document-Type" disabled>
                                                    @if ($userDocs->document_type == 1 && $userDocs->aadhar_type == 1)
                                                        <option value="1" selected>Aadhar(Basic)</option>
                                                    @elseif($userDocs->document_type == 1 && $userDocs->aadhar_type == 2)
                                                        <option value="2" selected>Aadhar(Smart-Card)</option>
                                                    @else
                                                        <option value="2" selected>Passport</option>
                                                    @endif
                                                </select>
                                                <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                                    data-bs-target="#viewDocumentsModal">View</button>
                                            </div>
                                            {{-- <span style="float: right;" class="badge bg-success">Basic</span> --}}
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label for="inputUsername">Address</label>
                                            <textarea rows="2" class="form-control" id="inputAddress" placeholder="Address" disabled>{{ Auth::user()->address }}</textarea>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary" style="display: none">Save
                                        changes</button>
                                </form>

                            </div>
                        </div>
                    </div>
{{--------------------------Account Section End=====---------------}}

{{--------------------------Change Password Section Start=====---------------}}
                    <div class="tab-pane fade" id="password" role="tabpanel">
                        @if (session('success'))
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <div class="alert-icon">
                                <i class="far fa-fw fa-bell"></i>
                            </div>
                            <div class="alert-message">
                                <strong>{!! session('success') !!}</strong>
                            </div>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>
                        @if (session('error'))
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <div class="alert-icon">
                                    <i class="far fa-fw fa-bell"></i>
                                </div>
                                <div class="alert-message">
                                    <strong>{!! session('error') !!}</strong>
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                    @endif
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Password</h5>
                                {{-- <form action="{{Request::route()->getPrefix()}}/change_password" method="POST" > --}}
                                    {{-- <form action="{{ route(trim(Request::route()->getPrefix(),'/').'/change_password') }}" method="post" > --}}

                                <form action="{{ route(trim(Request::route()->getPrefix(),'/').'.change_password') }}" method="POST" >
                                    {{ csrf_field() }}
                                    <div class="mb-3">
                                        <label for="current_password">Current password</label>
                                        <input type="password" class="form-control" id="current_password" name="current_password" {{ $errors->has('current_password') ? 'autofocus' : 'null' }}>
                                        <small><a href="#">Forgot your password?</a></small>
                                        <small class="text-danger">{{$errors->first('current_password')}}</small>

                                    </div>
                                    <div class="mb-3">
                                        <label for="new_password">New password</label>
                                        <input type="password" class="form-control" id="new_password" name="new_password" {{ $errors->has('new_password') ? 'autofocus' : 'null' }}>
                                        <small class="text-danger">{{$errors->first('new_password')}}</small>

                                    </div>
                                    <div class="mb-3">
                                        <label for="confirm_password">Confirm password</label>
                                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" {{ $errors->has('confirm_password') ? 'autofocus' : 'null' }}>
                                        <small class="text-danger">{{$errors->first('confirm_password')}}</small>

                                    </div>
                                    <button type="submit" class="btn btn-primary" >Save changes</button>
                                </form>

                            </div>
                        </div>
                    </div>
{{--------------------------Change Password Section End=====---------------}}

{{--------------------------All Profiles Section Start=====---------------}}
                    <div class="tab-pane fade" id="all_profiles" role="tabpanel">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">All Profiles</h5>

                                <div class="col-12 col-lg-12">
                                    <div class=" ">

                                        <ul class="nav nav-pills" role="tablist">
                                         @foreach ($alluserProfiles as $profile)
                                            @if("/".strtolower($profile->profile_name) == Request::route()->getPrefix())
                                            <li class="nav-item"><a class="nav-link active" href="#{{$profile->profile_name}}_"
                                                    data-bs-toggle="tab" role="tab">{{$profile->profile_name}}</a></li>
                                               @else
                                                    <li class="nav-item"><a class="nav-link " href="#{{$profile->profile_name}}_"
                                                        data-bs-toggle="tab" role="tab">{{$profile->profile_name}}</a></li>
                                                        @endif
											@endforeach
                                        </ul>

                                        <div class="tab-content" style="height: 500px; overflow:auto">
                                            @foreach ($alluserProfiles as $profile)

                                               @if("/".strtolower($profile->profile_name) == Request::route()->getPrefix())

                                               <div class="tab-pane active" id="{{$profile->profile_name}}_" role="tabpanel">
                                                <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 text-center" >
                                                    <h5 class="card-title my-2">{{$profile->profile_name}}'s Supporting Document</h5>
                                                @if($profile->profile_id == 5)
                                                   <embed src="{{ $profile->supporting_doc_path }}" style="height:300px" frameborder="0" id=""><br />
                                                       <a href="{{ $profile->supporting_doc_path }}" class="btn btn-sm btn-success" target="_blank"
                                                       style="display:; float:right;" id=""> View</a>

                                                @elseif($profile->profile_id == 4)
                                                @if($profile->supporting_doc_path != null)
                                                <img class="mb-2"  src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                    width="80%" height="80%">

                                                @else
                                                <h3>No document(s) required to for the Official role you have
                                                   selected</h3>
                                                @endif
                                                @else
                                                    <img class="mb-2" src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                    width="80%" height="80%">
                                                @endif
                                            </div>
                                            </div>

                                            @else
                                            <div class="tab-pane" id="{{$profile->profile_name}}_" role="tabpanel">
                                                {{-- <h4 class="tab-title" style="text-align: right; margin-right:20px;">LEVEL:
                                                    @if($profile->level == 1)
                                                     New
                                                    @elseif($profile->level == 2)
                                                    State
                                                    @elseif($profile->level == 3)
                                                    National
                                                    @elseif($profile->level == 4)
                                                    International
                                                    @endif
                                                </h4> --}}
                                                <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 text-center">

                                                            <h5 class="card-title my-2" style="position: relative;">{{$profile->profile_name}}'s Supporting Document</h5>
                                                             @if($profile->profile_id == 5)
                                                             @if($profile->approved == 0)
                                                             <embed src="{{ $profile->supporting_doc_path }}" style="height:300px" frameborder="0" id="" class="opacity-50"><br />
                                                                <a href="{{ $profile->supporting_doc_path }}" class="btn btn-sm btn-success" target="_blank"
                                                                style="display:; float:right;" id=""> View</a>
                                                                <div class="pending text-warning" style="position: absolute;
                                                                top: 50%;
                                                                left: 50%;
                                                                transform: translate(-50%, -50%);
                                                                font-size:30px;">
                                                                    <i class="align-middle me-2 fas fa-fw fa-clock"></i><br>
                                                                    Approval Pending...</div>
                                                                @else
                                                                <embed src="{{ $profile->supporting_doc_path }}" style="height:300px" frameborder="0" id=""><br />
                                                                    <a href="{{ $profile->supporting_doc_path }}" class="btn btn-sm btn-success" target="_blank"
                                                                    style="display:; float:right;" id=""> View</a>
                                                             @endif
                                                             @elseif($profile->profile_id == 4)
                                                             @if($profile->supporting_doc_path != null)
                                                             @if($profile->approved == 0)
                                                             <img class="mb-2 opacity-50" style="position: relative;" src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                                 width="80%" height="80%">
                                                                 <div class="pending text-warning" style="position: absolute;
                                                                 top: 50%;
                                                                 left: 50%;
                                                                 transform: translate(-50%, -50%);
                                                                 font-size:30px;">
                                                                     <i class="align-middle me-2 fas fa-fw fa-clock"></i><br>
                                                                     Approval Pending...</div>
                                                              @else
                                                                     <img class="mb-2"  src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                                 width="80%" height="80%">
                                                              @endif
                                                             @else
                                                             <h3>No document(s) required to for the Official role you have
                                                                selected</h3>
                                                             @endif
                                                             @else
                                                             @if($profile->approved == 0)
                                                             <img class="mb-2 opacity-50" style="position: relative;" src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                                 width="80%" height="80%">
                                                                 <div class="pending text-warning" style="position: absolute;
                                                                 top: 50%;
                                                                 left: 50%;
                                                                 transform: translate(-50%, -50%);
                                                                 font-size:30px;">
                                                                     <i class="align-middle me-2 fas fa-fw fa-clock"></i><br>
                                                                     Approval Pending...</div>
                                                              @else
                                                                     <img class="mb-2"  src="{{ $profile->supporting_doc_path }}" alt="Supporting document"
                                                                 width="80%" height="80%">
                                                              @endif
                                                             @endif
                                                </div>
                                            </div>
                                            @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
{{--------------------------All Profiles Section End=====---------------}}

{{--------------------------Apply For New Profile Section Start=====---------------}}
                    <div class="tab-pane fade" id="apply_new" role="tabpanel">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Apply New Profile</h5>

                                <div class="col-12">
                                    <div id="smartwizard-arrows-primary" class="wizard wizard-primary mb-4">
                                        <ul class="nav">
                                            <li class="nav-item"><a class="nav-link" href="#arrows-primary-step-1">Step Title<br /><small>Step description</small></a>
                                            </li>
                                            <li class="nav-item"><a class="nav-link" href="#arrows-primary-step-2">Step Title<br /><small>Step description</small></a>
                                            </li>
                                        </ul>

                                        <div class="tab-content">
                                            <div id="arrows-primary-step-1" class="tab-pane" role="tabpanel" style="height: 500px">
                                                <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

                                                <div class="row">
                                                    <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-6">
                                                                        <label for="inputCity">Profile <span class="text-danger " style="font-size:16pt;display: inline;">*</span></label>
                                                                        <select class="form-control step_3" data-bs-toggle="" id="role"
                                                                            onchange="checkOfficial(this)" placeholder="Role">
                                                                            <option value="">----select new profile----</option>
                                                                            @foreach ($userProfilesGet as $value)
                                                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                                                            @endforeach

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

                                                                    </div>
                                                                    <div class="mb-3 col-md-6" id="official_div" style="display:none">
                                                                        <label for="inputCity">Official <span class="text-danger " style="font-size:16pt;display: inline;">*</span></label>
                                                                        <select class="form-control " data-bs-toggle="" id="role_official"
                                                                            onchange="hideWhenProfessionalOfficialUploadDoc(this)" placeholder="Official">
                                                                            <option value="" selected>-Select-Official-</option>
                                                                            <option value="1">Natioanl-EC-Member</option>
                                                                            <option value="2">State-EC-Member</option>
                                                                            <option value="3">Physio/Doctor</option>
                                                                            <option value="4">Management Staff</option>
                                                                            <!-- <option value="5" selected>Volunteer</option>                                                                      -->
                                                                        </select>
                                                                        <span id="error_role_official" ></span>
                                                                    </div>



                                                                </div>



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

                                                                        <select class="form-control addRemoveCertClass"  id="level_athlete"
                                                                            onchange="hideWhenAthleteCertificate(this)"  placeholder="Level">
                                                                            <option value="" selected>-Select-Level-</option>
                                                                            <option value="0">New</option>
                                                                            <option value="1">State</option>
                                                                            <option value="2">National</option>
                                                                            <option value="3">International</option>
                                                                        </select>
                                                                        <span id="error_level_athlete"></span>

                                                                    </div>
                                                                    <div class="mb-3 col-md-6" id="certificate_athlete_div">
                                                                        <div class="custom-file-container" data-upload-id="ImagepreviewAth">
                                                                            <p style="float: left">Upload Certificate (Athlete) <span class="text-danger "
                                                                                    style="font-size:16pt;display: inline;">*</span> :
                                                                            </p>
                                                                            <a href="javascript:void(0)" style="float: right"
                                                                                id="clear_certificate_athlete"
                                                                                class="custom-file-container__image-clear clearImageForProfessionalDoc" title="Clear Image" onclick="$('#certificate_athlete').addClass('step_3')" >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  addRemoveCertClass"
                                                                                    onchange="checkResolution(this)" id="certificate_athlete"
                                                                                    placeholder="Upload-Certificate" name="certificate_athlete"
                                                                                    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_certificate_athlete"></span>

                                                                        </div>
                                                                    </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"  id="level_coach"
                                                                            onchange="document.getElementById('clear_certificate_coach').click();" placeholder="Level">
                                                                            <option value="" selected>-Select-Level-</option>
                                                                            <!-- <option value="0" >New</option>
                                                                                                <option value="1" >State</option>                                                                      -->
                                                                            <option value="2">National</option>
                                                                            <option value="3">International</option>
                                                                        </select>
                                                                        <span id="error_level_coach"></span>

                                                                    </div>
                                                                    <div class="mb-3 col-md-6" id="certificate_coach_div">
                                                                        <div class="custom-file-container" data-upload-id="ImagepreviewCoach">
                                                                            <p style="float: left">Upload Certificate (Coach) <span class="text-danger "
                                                                                    style="font-size:16pt;display: inline;">*</span> :
                                                                                    <!-- <small  style="color:red"> ( Standard resolution : approx 350x250) </small> -->
                                                                            </p>
                                                                            <a href="javascript:void(0)" style="float: right"
                                                                            id="clear_certificate_coach" class="custom-file-container__image-clear clearImageForProfessionalDoc"
                                                                                title="Clear Image" onclick="$('#certificate_coach').addClass('step_3')">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  addRemoveCertClass"
                                                                                    onchange="checkResolution(this)" id="certificate_coach"
                                                                                    placeholder="Upload-Certificate" name="certificate_coach"
                                                                                    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_certificate_coach"></span>

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

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

                                                                        <select class="form-control addRemoveCertClass" id="level_judge"
                                                                            onchange="document.getElementById('clear_certificate_judge').click()" placeholder="Level">
                                                                            <option value="" selected>-Select-Level-</option>
                                                                            <!-- <option value="0" >New</option>
                                                                                                <option value="1" >State</option> -->
                                                                            <option value="2">National</option>
                                                                            <option value="3">International</option>
                                                                        </select>

                                                                        <span id="error_level_judge"></span>

                                                                    </div>
                                                                    <div class="mb-3 col-md-6" id="certificate_judge_div">
                                                                        <div class="custom-file-container" data-upload-id="ImagepreviewJudge">
                                                                            <p style="float: left">Upload Certificate (Judge)<span class="text-danger "
                                                                                    style="font-size:16pt;display: inline;">*</span> :
                                                                            </p>
                                                                            <a href="javascript:void(0)" style="float: right"
                                                                            id="clear_certificate_judge" class="custom-file-container__image-clear clearImageForProfessionalDoc"
                                                                                title="Clear Image" onclick="$('#certificate_judge').addClass('step_3')">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  addRemoveCertClass"
                                                                                    onchange="checkResolution(this)" id="certificate_judge"
                                                                                    placeholder="Upload-Certificate" name="certificate_judge"
                                                                                    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_certificate_judge"></span>

                                                                        </div>

                                                                        <!--    <div class="mb-3 " >
                                                                                                        <label class="form-label">Upload your CV ( .pdf format )</label><br>

                                                                                                            <input type="file" class="btn btn-primary custom-file-input" id="pdf_volunteer" name="pdf" accept="application/pdf" style="cursor:pointer" onchange="onChangePDf1()" {{ $errors->has('pdf') ? 'autofocus' : '' }} >
                                                                                                        <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 " >
                                                                                                        <label class="form-label"></label><br>

                                                                                                            <embed
                                                                                                                src=""
                                                                                                                style="height:250px"
                                                                                                                frameborder="0"
                                                                                                                id="pdfViewer1">
                                                                                                            <a href="" class="btn btn-sm btn-success form-control" target="_blank" style="display:none;float-right" id="anchorPDFViewer1"> View</a>
                                                                                                        </div>


                                                                                                </div>-->


                                                                    </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">
                                                                            <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 addRemoveCertClass"
                                                                                    id="certificate_doctor" name="certificate_doctor" accept="application/pdf"
                                                                                    style="cursor:pointer" onchange="onChangePDf()" {{
                                                                                    $errors->has('pdf') ? 'autofocus' : '' }} placeholder="Upload Support doc">
                                                                                    <span id="error_certificate_doctor"></span>

                                                                            </div>
                                                                            <div class="mb-3 ">
                                                                                <label class="form-label"></label><br>

                                                                                <embed src="" style="height:250px" frameborder="0" id="pdfViewer">

                                                                                <a href="" class="btn btn-sm btn-success form-control" target="_blank"
                                                                                    style="display:none;float:right" id="anchorPDFViewer"> View</a>

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

                                                                            <div class="custom-file-container" data-upload-id="ImagepreviewDoc">
                                                                                <p style="float: left">Upload Certificate (Doctor)<span class="text-danger "
                                                                                        style="font-size:16pt;display: inline;">*</span> :
                                                                                </p>
                                                                                <a href="javascript:void(0)" style="float: right"
                                                                                id="clear_certificate_doctor" class="custom-file-container__image-clear clearImageForProfessionalDoc"
                                                                                    title="Clear Image"  onclick="$('#certificate_doctor').addClass('step_3')">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  addRemoveCertClass"
                                                                                        onchange="checkResolution(this)" id="certificate_doctor"
                                                                                        placeholder="Upload-Certificate" name="certificate_doctor"
                                                                                        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_certificate_doctor"></span>

                                                                            </div>
                                                                        </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_judge_div">
                                                                        <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 addRemoveCertClass"
                                                                                id="cv_volunteer" name="pdf" accept="application/pdf"
                                                                                style="cursor:pointer" onchange="onChangePDf1()" {{ $errors->has('pdf') ?
                                                                            'autofocus' : '' }} placeholder="Upload your CV" >
                                                                            <span id="error_cv_volunteer"></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="" style="height:200px" frameborder="0" id="pdfViewer1">
                                                                        </div>
                                                                        <a href="" class="btn btn-sm btn-success form-control" target="_blank"
                                                                        style="display:none; float:right;" id="anchorPDFViewer1"> View</a>

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

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



                                            </div>
                                            <div id="arrows-primary-step-2" class="tab-pane" role="tabpanel">
                                                <div class="row" style=" height:500px; ">
                                                    <div class="mb-3 col" style="margin-top:25px">
                                                        <div class="card">


                                                            <div class="card-body" style=" height:500px; overflow: auto;">
                                                                <label class="form-check">
                                                                    <input class="form-check-input step_4" id="agree_terms_policy" type="checkbox" value="">
                                                                    <span class="form-check-label">
                                                                    Yes, I understand and agree <a href="/1633014589.pdf" class="" target="_blank"
                                                                        id="anchorPDFViewer1"> Terms and Conditions Agreements and Privacy Policy.</a>
                                                                    </span>
                                                                </label>

                                                                <span id="error_agree_terms_policy"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                             </div>

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

                            </div>
                        </div>
                    </div>
{{--------------------------Apply For New Profile Section End=====---------------}}

{{--------------------------Download Identity Card Section Start=====---------------}}
                    <div class="tab-pane fade" id="id_card" role="tabpanel">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Download Identity Card</h5>


                                         <img class="mb-4" src="/img/id-temp.png" alt="">

                            </div>
                        </div>
                    </div>
{{--------------------------Download Identity Card Section End=====---------------}}

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

    </div>

    <div class="modal fade" id="viewDocumentsModal" tabindex="-1" role="dialog" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    @if ($userDocs->document_type == 1)
                        <center>
                            <h5 class="modal-title">Document Type Aadhar</h5>
                        </center>
                    @else
                        <center>
                            <h5 class="modal-title">Document Type Passport</h5>
                        </center>
                    @endif
                </div>
                <div class="modal-body m-3" style="height: 500px; overflow:auto;">
                    <div class="row">
                        <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 text-center">
                            @if ($userDocs->document_type == 2)
                                <h5 class="card-title my-2">Passport-page 1</h5>
                                <img class="mb-4" src="{{ $userDocs->passport_page_1 }}" alt="Passport-page 1"
                                    width="80%" height="80%">
                            @else
                                @if ($userDocs->aadhar_type == 1)
                                    <img class="mb-4" src="{{ $userDocs->aadhar_front }}"
                                        alt="Aadhar Front" width="80%" height="80%">
                                @else
                                    <h5 class="card-title my-2">Aadhar Front</h5>
                                    <img class="mb-4" src="{{ $userDocs->aadhar_front }}"
                                        alt="Aadhar Front" width="80%" height="80%">
                                @endif
                            @endif

                        </div>
                        {{-- @if ($application_details->doc_back) --}}
                        <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12 text-center">
                            @if ($userDocs->document_type == 2)
                                <h5 class="card-title my-2">Passport-page 2</h5>
                                <img class="mb-2" src="{{ $userDocs->passport_page_2 }}" alt="Passport-page 1"
                                    width="80%" height="80%">
                            @else
                                @if ($userDocs->aadhar_type == 2)
                                    <h5 class="card-title my-2">Aadhar Back</h5>
                                    <img class="mb-2" src="{{ $userDocs->aadhar_back }}" alt="Aadhar Back"
                                        width="80%" height="80%">
                                @endif
                            @endif

                        </div>
                        {{-- @endif --}}
                    </div>
                    {{-- <div class="row">
                        <div class="col-12" style="margin-top:25px">
                            <button type="button" class="btn btn-success btn-lg" style="width:100%"
                                onclick="checkForAadharSelection()">Done</button>
                        </div>
                    </div> --}}
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
            </div>
        </div>
    </div>


    <script src="/js/file-upload-with-preview.min.js"></script>
    <script src="/js/profile_setup.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="/js/profile_setting.js"></script>
    <script>
        var ImagepreviewAth = new FileUploadWithPreview('ImagepreviewAth')

        var ImagepreviewCoach = new FileUploadWithPreview('ImagepreviewCoach')

        var ImagepreviewJudge = new FileUploadWithPreview('ImagepreviewJudge')

        var ImagepreviewDoc = new FileUploadWithPreview('ImagepreviewDoc')
            </script>
    @if(session("click"))
     <script>
         document.addEventListener('DOMContentLoaded',function() {
            document.getElementById('password_tab').click();

        });
    </script>
    @endif

@endsection