@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"  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 </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">{{ $user_info->biography }}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <img alt="no-image" src="{{$user_info->profile_image_path}}" 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({{ $user_info->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 </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="{{ $user_info->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>

                                            {{-- Need to add new checkboxes for document selection --}}

                                            @foreach($user_personal_docs as $key => $value)
                                            @if ($value->document_id == 1)
                                                    <div class="form-check">
                                                    <input class="form-check-input document_type" onchange="hideWhenDocumentUploadDiv($('#aadhar').val())" type="checkbox" value="1" id="aadhar" disabled checked>
                                                    <label class="form-check-label" for="aadhar">
                                                        Aadhar
                                                    </label>
                                                    </div>
                                             @else
                                             <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
                                                </label>
                                                </div>
                                             @endif
                                             @if ($value->document_id == 2)
                                                    <div class="form-check">
                                                    <input class="form-check-input document_type" onchange="hideWhenDocumentUploadDiv($('#passport').val())" type="checkbox" value="2" id="passport" disabled checked>
                                                    <label class="form-check-label" for="passport">
                                                        Passport
                                                    </label>
                                                    </div>
                                            @else
                                            <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>
                                            @endif
                                            @if ($value->document_id == 3)
                                                  <div class="form-check">
                                                    <input class="form-check-input document_type" onchange="hideWhenDocumentUploadDiv($('#birth_certificate').val())" type="checkbox" value="3" id="birth_certificate" disabled checked>
                                                    <label class="form-check-label" for="birth_certificate">
                                                        Birth Certificate
                                                    </label>
                                                    </div>
                                            @else
                                            <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>
                                            @endif
                                            @endforeach
                                            <span id="error_document_type" class="text-danger"></span>

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

                                        <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" style="height:700px">
                            <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 ($users_all_profiles 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: 600px; overflow:auto">

                                            @foreach ($users_all_profiles 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" >
                                                        <div class="accordion" id="accordionExample">
                                                    @foreach ($profile->user_official_docs as $doc_value)
                                                        @if($doc_value->belt_certificate_path)
                                                                    <div class="card">
                                                                        <div class="card-header shadow bg-white rounded" id="headingTwo">
                                                                                <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">
                                                                                    <h5 class="card-title my-2">
                                                                                        Kukkiwon Belt Certificate 
                                                                                </h5>
                                                                                </a>
                                                                        </div>
                                                                          <div id="collapseTwo" class="collapse @if($doc_value->profile_count != 1) show @endif" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style="">
                                                                            <div class="card-body" style="height:500px; overflow: auto;">
                                                                                <div class="row">
                                                                                    <div class="col-sm-12 col-lg-12 col-md-12 col-xl-12 text-center">
                                                                                     <img class="mb-4"
                                                                                        src="{{ $doc_value->belt_certificate_path }}"
                                                                                        alt="Kukkiwon Belt Certificate" width="50%" height="50%">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            @endif
                
                                                            @if($doc_value->supporting_doc_path)
                                                                    <div class="card">
                                                                        <div class="card-header shadow bg-white rounded" id="headingThree">
                                                                                <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                                                                                    <h5 class="card-title my-2">
                                                                                        Supporting Certificate/Other
                                                                                </h5>
                                                                                </a>
                                                                        </div>
                                                                          <div id="collapseThree" class="collapse @if($doc_value->profile_count != 1) show @endif" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style="">
                                                                            <div class="card-body" style="height:500px; overflow: auto;">
                                                                                <div class="row">
                                                                                    <div class="col-sm-12 col-lg-12 col-md-12 col-xl-12 text-center">
                                                                                        <center>
                                                                                            <embed
                                                                                            src="{{ $doc_value->supporting_doc_path }}"
                                                                                            class="emptyEmbedSrc"
                                                                                            style="height:250px;width:500px"
                                                                                            frameborder="0"
                                                                                            id="">
                                                                                        </center>
                                                                                       <a href="{{ $doc_value->supporting_doc_path }}" class="btn btn-sm btn-success form-control emptyAnchorhref" target="_blank" style="margin:10px;padding:10px;width:50%" id=""> View</a>
                
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <center>
                                                                      <h3 style="margin-top:25px">No document(s) uploaded.</h3>
                                                                    </center>
                                                                @endif
                                                                @endforeach
                                                            </div>
                                                     </div>
                                                </div>
                                                @else
                                                <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" >
                                                        <div class="accordion" id="accordionExample">
                                                    @foreach ($profile->user_official_docs as $doc_value)
                                                        @if($doc_value->belt_certificate_path)
                                                                    <div class="card">
                                                                        <div class="card-header shadow bg-white rounded" id="headingTwo">
                                                                                <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">
                                                                                    <h5 class="card-title my-2">
                                                                                        Kukkiwon Belt Certificate 
                                                                                </h5>
                                                                                </a>
                                                                        </div>
                                                                          <div id="collapseTwo" class="collapse @if($doc_value->profile_count != 1) show @endif" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style="">
                                                                            <div class="card-body" style="height:500px; overflow: auto;">
                                                                                <div class="row">
                                                                                    <div class="col-sm-12 col-lg-12 col-md-12 col-xl-12 text-center">
                                                                                     <img class="mb-4"
                                                                                        src="{{ $doc_value->belt_certificate_path }}"
                                                                                        alt="Kukkiwon Belt Certificate" width="50%" height="50%">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            @endif
                
                                                            @if($doc_value->supporting_doc_path)
                                                                    <div class="card">
                                                                        <div class="card-header shadow bg-white rounded" id="headingThree">
                                                                                <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">
                                                                                    <h5 class="card-title my-2">
                                                                                        Supporting Certificate/Other
                                                                                </h5>
                                                                                </a>
                                                                        </div>
                                                                          <div id="collapseThree" class="collapse @if($doc_value->profile_count != 1) show @endif" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style="">
                                                                            <div class="card-body" style="height:500px; overflow: auto;">
                                                                                <div class="row">
                                                                                    <div class="col-sm-12 col-lg-12 col-md-12 col-xl-12 text-center">
                                                                                        <center>
                                                                                            <embed
                                                                                            src="{{ $doc_value->supporting_doc_path }}"
                                                                                            class="emptyEmbedSrc"
                                                                                            style="height:250px;width:500px"
                                                                                            frameborder="0"
                                                                                            id="">
                                                                                        </center>
                                                                                       <a href="{{ $doc_value->supporting_doc_path }}" class="btn btn-sm btn-success form-control emptyAnchorhref" target="_blank" style="margin:10px;padding:10px;width:50%" id=""> View</a>
                
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <center>
                                                                      <h3 style="margin-top:25px">No document(s) uploaded.</h3>
                                                                    </center>
                                                                @endif
                                                                @endforeach
                                                        </div>
                                                     </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" style=" height:500px;display: @if(count($get_existing_profile_name) >= sizeOf($user_profiles_get)) block @else none @endif ">
                                <br><br><br><br>    
                                <center><h2>You have already registered/applied for all available profiles.</h2></center>
                                </div>
                                <div class="col-12" style="display: @if(count($get_existing_profile_name) < sizeOf($user_profiles_get)) block @else none @endif ">
                            

                                    <div id="arrows-primary-step-3" class="tab-pane" role="tabpanel">
                                        <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:auto; overflow: auto;">
                                                        <div class="row">
                                                            <div class="mb-3 col-md-4">
                                                                <label for="inputCity"><b>Select Profile Category: </b><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>
                                                                    @foreach ($user_profiles_get as $profile)
                                                                    @if(in_array($profile->name, $get_existing_profile_name))
                                                                        <option value="{{$profile->id}}" id="{{$profile->id}}" disabled>{{$profile->name}} (already added)</option>
                                                                    @else
                                                                        <option value="{{$profile->id}}" id="{{$profile->id}}">{{$profile->name}}</option>

                                                                    @endif
                                                              @endforeach
                                                                </select>
                                                                <span id="error_primary_profile_cat"></span>
    
                                                                <div class="row" id="user_belt_type_div"
                                                                    style="display:none">
                                                                    <div class="mb-3 col-md-12">
                                                                        <label for="inputCity">Select Kukkiwon 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>
                                                                            @foreach ($userBeltTypes as $beltType)
                                                                                <option value="{{ $beltType->id }}">
                                                                                    {{ $beltType->name }}</option>
                                                                            @endforeach
                                                                            <!-- <option value="5" selected>Volunteer</option>-->
                                                                        </select>
                                                                        <span id="error_belt_type" class="error_span"></span>
                                                                    </div>
                                                                </div>
    
                                                                @foreach ($userBeltTypes as $beltType)
                                                                    <div class="row user_belt_div"
                                                                        id="user_belt_div_{{ $beltType->id }}"
                                                                        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_{{ $beltType->id }}"
                                                                                onchange="hideWhenUploadDoc(this)"
                                                                                placeholder="Belt">
                                                                                <option value="" selected>-Select-Belt-
                                                                                </option>
                                                                                @foreach ($userBelts as $belt)
                                                                                    @if ($beltType->id == $belt->belt_type_id)
                                                                                        <option value="{{ $belt->id }}">
                                                                                            {{ $belt->name }}</option>
                                                                                    @endif
                                                                                @endforeach
                                                                                <!-- <option value="5" selected>Volunteer</option>-->
                                                                            </select>
                                                                            <span id="error_belt" class="error_span"></span>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
    
    
                                                            </div>
                                                            <div class="mb-3 col-md-4" id="belt_certificate_div"
                                                                style="display:none">
                                                                <div class="custom-file-container"
                                                                    data-upload-id="belt_certif_preview">
                                                                    <p style="float: left">upload Belt certificate<span
                                                                            class="text-danger "
                                                                            style="font-size:16pt;display: inline;">*</span> :
                                                                    </p>
                                                                    <a href="javascript:void(0)" style="float: right"
                                                                        id="clear_belt_certificate"
                                                                        class="custom-file-container__image-clear clearImageForPersonalDoc"
                                                                        title="Clear Image"
                                                                        onclick="$('#belt_certificate_file').addClass('step_2')">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="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"
                                                                style="display:none">
                                                                <center>
                                                                    <div class="mb-3">
                                                                        <label class="form-label"
                                                                            id="certificate_label">Upload Support doc ( .pdf
                                                                            format )</label><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>
    
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" >
                                            <div class="mb-3 col-md-6" style="margin-top:25px">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <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 class="card-footer text-muted">
                                <a href="#" class="btn btn-primary">Apply</a>
                            </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">
                </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">
                           
                            <div class="accordion" id="accordionExample">
                                    @foreach($user_personal_docs as $key => $value)
                                        <div class="card">
                                        <div class="card-header shadow bg-white rounded" id="headingOne{{$value->id}}">
                                                <a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOne{{$value->id}}" aria-expanded="false" aria-controls="collapseOne{{$value->id}}" class="collapsed">
                                                    <h5 class="card-title my-2">
                                                        {{ $value->document_type }}
                                                    </h5>
                                                </a>
                                        </div>
                                        <div id="collapseOne{{$value->id}}" class="collapse show" aria-labelledby="headingOne{{$value->id}}" data-bs-parent="#accordionExample" style="">
                                            <div class="card-body" 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 ($value->document_id == 1)
                                                            <h5 class="card-title my-2">{{$value->document_type}}</h5>
                                                            <img class="mb-4"
                                                            src="{{ $value->document_path }}"
                                                            alt="{{$value->document_type}}" width="50%" height="50%">
                                                        @endif
                                                        
                                                        @if ($value->document_id == 2)
                                                        <h5 class="card-title my-2">Passport-page 1</h5>
                                                        <img class="mb-4"
                                                            src="{{ $value->document_path }}"
                                                            alt="Passport-page 1" width="50%" height="50%">
                                                            <h5 class="card-title my-2">Passport-page 2</h5>
                                                        <img class="mb-4"
                                                            src="{{ $value->document_path_1 }}"
                                                            alt="Passport-page 2" width="50%" height="50%">
                                                       @endif

                                                        @if ($value->document_id == 3)
                                                            <h5 class="card-title my-2">{{$value->document_type}}</h5>
                                                            <img class="mb-4"
                                                            src="{{ $value->document_path }}"
                                                            alt="{{$value->document_type}}" width="50%" height="50%">
                                                        @endif
                                                       
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                        </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 belt_certif_preview = new FileUploadWithPreview('belt_certif_preview');
       
    </script>
    @if(session("click"))
     <script>
         document.addEventListener('DOMContentLoaded',function() {
            document.getElementById('password_tab').click();

        });
    </script>
    @endif
    
   
        
          
   

@endsection