@extends('admin.layouts.app')
@section('title')
    {!! $user->name !!} {{ __('details') }}
@endsection
@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="ll-card">
                <div class="ll-card-header d-flex justify-content-between align-items-center">
                    <h3 class="ll-card-title line-height-36">{{ $candidate->user->name }}'s
                        {{ __('details') }}</h3>
                    <div>
                        <a href="{{ route('candidate.edit', $candidate->id) }}">
                            <x-svg.table-edit />
                        </a>
                        {{-- <a href=""
                        class="btn bg-warning float-right d-flex align-items-center justify-content-center mr-2"
                        data-toggle="modal" data-target="#modalContactForm">Create followup</a> --}}
                        <form action="{{ route('candidate.destroy', $candidate->id) }}" method="POST" class="d-inline">
                            @method('DELETE')
                            @csrf
                            <button onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}');"
                                class="border-0 bg-transparent">
                                <x-svg.table-delete />
                            </button>
                        </form>
                    </div>
                </div>
                <div class="ll-card-body table-responsive">
                    <div class="row my-2">
                        <div class="col-md-5 col-12">
                            <div class="candidate-details__left">
                                <div class="candidate-logo">
                                    <img src="{{ $candidate->photo }}" alt="candidate_profile">
                                </div>
                                <div>
                                    <h3>{{ $candidate->user->name }}</h3>
                                    <p>{{ $candidate->user->email }}</p>
                                    {{-- <p>{{ $candidate->user->phone }}</p> --}}
                                    <div>
                                        <div class="accordion-item mb-3">
                                            <h6 class="accordion-header font-base" id="heading-0">
                                                <button class="accordion-button fw-bold rounded d-inline-block collapsed pe-4 pe-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="true" aria-controls="collapse-1">
                                                    <p>{{ $candidate->user->phone }} <i class="success status-switch fas fa-plus"></i></p>
                                                </button>
                                            </h6>
                                            <!-- Body -->
                                            <div id="collapse-0" class="accordion-collapse collapse" aria-labelledby="heading-1" data-bs-parent="#accordionExample2" style="">
                                                {{-- <div class="accordion-body mt-3"> --}}
                                                    @forelse ($user->leads as $lead)
                                                        @if($lead->phone !== $candidate->user->phone)
                                                        <p>{{ $lead->phone }}</p>
                                                        @endif
                                                    @empty
                                                        <p>{{ __('no_data_found') }}...</p>
                                                    @endforelse
                                                {{-- </div> --}}
                                            </div>
                                        </div>
                                  
                                    </div>
                                    @if ($user->socialInfo && $candidate->user->socialInfo->count() > 0)
                                        <div class="d-flex">
                                            @foreach ($user->socialInfo as $contact)
                                                <a class="social-media" target="__blank" href="{{ $contact->url }}">
                                                    @switch($contact)
                                                        @case($contact->social_media === 'facebook')
                                                            <x-svg.facebook-icon />
                                                        @break

                                                        @case($contact->social_media === 'twitter')
                                                            <x-svg.twitter-icon />
                                                        @break

                                                        @case($contact->social_media === 'instagram')
                                                            <x-svg.instagram-icon />
                                                        @break

                                                        @case($contact->social_media === 'youtube')
                                                            <x-svg.youtube-icon />
                                                        @break

                                                        @case($contact->social_media === 'linkedin')
                                                            <x-svg.linkedin-icon />
                                                        @break

                                                        @case($contact->social_media === 'pinterest')
                                                            <x-svg.pinterest-icon />
                                                        @break

                                                        @case($contact->social_media === 'reddit')
                                                            <x-svg.reddit-icon />
                                                        @break

                                                        @case($contact->social_media === 'github')
                                                            <x-svg.github-icon />
                                                        @break

                                                        @case($contact->social_media === 'other')
                                                            <x-svg.link-icon />
                                                        @break

                                                        @default
                                                    @endswitch
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                    <div class="d-flex align-items-center" style="gap: 16px;">
                                        <div>
                                            <a href="javascript:void(0)" class="active-status">
                                                <label class="switch ">
                                                    <input data-id="{{ $user->id }}" type="checkbox"
                                                        class="success status-switch"
                                                        {{ $user->status == 1 ? 'checked' : '' }}>
                                                    <span class="slider round"></span>
                                                </label>
                                                <p class="{{ $user->status == 1 ? 'active' : '' }}"
                                                    id="status_{{ $candidate->user_id }}">
                                                    {{ $user->status == 1 ? __('activated') : __('deactivated') }}</p>
                                            </a>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0)" class="active-status">
                                                <label class="switch ">
                                                    <input data-userid="{{ $user->id }}" type="checkbox"
                                                        class="success email-verification-switch"
                                                        {{ $user->email_verified_at ? 'checked' : '' }}>
                                                    <span class="slider round"></span>
                                                </label>
                                                <p class="{{ $user->email_verified_at ? 'active' : '' }}"
                                                    id="verification_status_{{ $candidate->user_id }}">
                                                    {{ $user->email_verified_at ? __('verified') : __('unverified') }}
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-md-7 col-12">
                            <div class="candidate-details__right">
                                <div class="one">
                                    <div class="mb-4">
                                        <x-svg.details-profession />
                                        <p>{{ __('profession') }}</p>
                                        <h4>{{ $candidate->profession->name }}</h4>
                                    </div>
                                    <div>
                                        <x-svg.details-experience />
                                        <p>{{ __('experience') }}</p>
                                        <h4>{{ $candidate->experience ? $candidate->experience->name : '' }}</h4>
                                    </div>
                                </div>
                                <div class="two">
                                    <div class="mb-4">
                                        <x-svg.details-package />
                                        <p>{{ __('marital_status') }}</p>
                                        <h4>{{ __($candidate->marital_status) }}</h4>
                                    </div>
                                    <div>
                                        <x-svg.details-education />
                                        <p>{{ __('education') }}</p>
                                        <h4>{{ $candidate->education ? $candidate->education->name : '' }}</h4>
                                    </div>
                                </div>
                                <div class="three">
                                    <div class="mb-4">
                                        <x-svg.details-leyers />
                                        <p>{{ __('gender') }}</p>
                                        <h4>{{ ucfirst($candidate->gender) }}</h4>
                                    </div>
                                    <div>
                                        <x-svg.details-calendar-blank />
                                        <p>{{ __('birth_date') }}</p>
                                        <h4>{{ date('D, d M Y', strtotime($candidate->birth_date)) }}</h4>
                                    </div>
                                </div>
                                <div class="four">
                                    <div class="mb-4 d-flex">
                                        <x-svg.details-globe-simple />
                                        <div>
                                            <p>{{ __('website') }}</p>
                                            <a href="{{ $candidate->website }}">{{ $candidate->website }}</a>
                                        </div>
                                    </div>
                                    @if ($user->contactInfo && $user->contactInfo->phone)
                                        <div class="mb-4 d-flex">
                                            <x-svg.details-phone-call />
                                            <div>
                                                <p>{{ __('phone') }}</p>
                                                <a
                                                    href="tel: {{ $user->contactInfo->phone }}">{{ $user->contactInfo->phone }}</a>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($user->contactInfo && $user->contactInfo->email)
                                        <div class="d-flex">
                                            <x-svg.details-envelop />
                                            <div>
                                                <p>{{ __('contact_email') }}</p>
                                                <a
                                                    href="mailto: {{ $user->contactInfo->email }}">{{ $user->contactInfo->email }}</a>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                {{-- <div class="desc-skills-wrapper">
                    <div class="desc-wrap">
                        <div class="text-bold">
                            {{ __('description') }}
                        </div>
                        <p>
                            {!! nl2br($candidate->bio) !!}
                        </p>
                    </div>
                    <div class="skills-wrap">
                        <div class="ll-mb-6">
                            <h4 class="text-bold">
                                {{ __('skills') }}
                            </h4>
                            <p>
                                @foreach ($candidate->skills as $skill)
                                    <span class="skill-badge">{{ $skill->name }}</span>
                                @endforeach
                            </p>
                        </div>
                        <div class="ll-mb-6">
                            <h4 class="text-bold">
                                {{ __('languages') }}
                            </h4>
                            <p>
                                @foreach ($candidate->languages as $language)
                                    <span class="language-badge">{{ $language->name }}</span>
                                @endforeach
                            </p>
                        </div>
                        <div>
                            <h4 class="text-bold"> {{ __('location') }} </h4>
                            <p>{{ $candidate->full_address ?? '-' }}</p>
                        </div>
                    </div>
                </div> --}}
            </div>

            {{-- <div class="cadidate-dashboard-tabs card p-4">
                <ul class="nav nav-pills h_38ul mb-3" id="pills-tab" role="tablist">
                 <!-- All Category  -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target=""
                            type="button" role="tab" aria-controls="pills-personal" aria-selected="true">
                            <!-- <x-svg.user-icon /> -->
                            <!-- <i class="ph-file"></i> -->

                            {{ __('all') }}
                        </button>
                    </li>

                    <!-- Application Category  -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link " id="pills-application-tab" data-bs-toggle="pill"
                            data-bs-target="" type="button" role="tab" aria-controls="pills-profile"
                            aria-selected="false">
                             <!-- <x-svg.user-round-icon />  -->
                            {{ __('application') }}
                        </button>
                    </li>

                 <!-- Visa Category  -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link " id="pills-visa-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-experience" type="button" role="tab"
                            aria-controls="pills-experience" aria-selected="false">
                         <!-- <x-svg.briefcase-icon />  -->
                            {{ __('visa') }}
                        </button>
                    </li>

                     <!-- Financial Category   -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link " id="pills-financial-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-social" type="button" role="tab"
                            aria-controls="pills-social" aria-selected="false">
                         <!-- <x-svg.globe2-icon />  -->
                            {{ __('financial') }}
                        </button>
                    </li>

                    <!-- Account Category  -->
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-additional-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-setting" type="button" role="tab"
                            aria-controls="pills-setting" aria-selected="false">
                         <!-- <x-svg.cog-icon />  -->
                            {{ __('additional') }}
                        </button>
                    </li>
                </ul>


                <div class="d-flex justify-content-center">
                    <div id="loader" class="">
                        <div class="spinner-border text-info " role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>

                    </div>
                </div>

                <button id="load_modal" type="button" hidden data-bs-toggle="modal"
                    data-bs-target="#iframe_modal">
                    Launch demo modal
                </button>
                <div class="modal fade" id="iframe_modal" tabindex="-1" aria-labelledby="exampleModal2Label"
                    aria-hidden="true">
                    <div class="modal-dialog modal-xl ">
                        <div class="modal-content">
                            <div class="ratio ratio-4x3 dynamic_iframe">
                                <iframe id="iframe_document" src="" title="Document Viewer"
                                    allowfullscreen></iframe>
                            </div>

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

                <div id="accordionExample2" class="accordion accordion-icon accordion-bg-light "></div>
                <div id="pills-section-additional">

                </div>
                 
                <input type="number" hidden id="user_id" value="{{ $user_id }}">



                <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div><span id="upload_modal_title"
                                        class="align-middle fw-bold fs-5 text-dark upload_modal_title"> </span>
                                </div>
                                <div id="modal_warning"></div>
                                <button type="button"
                                    class="btn btn-sm btn-white btn-round mb-0 close-button"
                                    data-bs-dismiss="modal" aria-label="Close">✕</button>
                            </div>
                            <div class="modal-body">
                                <div id="doc_name_input">
                                    <div class="row">
                                        <label for="document_name" class="fw-bold p-0 mb-2">Document Name</label>
                                        <input type="text" name="document_name" id="document_name" />
                                    </div>
                                    <div class="row mt-4 mb-1 d-flex justify-content-center">
                                        <button id="next_upload" class="btn btn-success border border-grey w-25">
                                            <span class="text-grey fs-6">Next</span>
                                        </button>
                                    </div>
                                </div>
                                <div id="regular_upload">
                                    <div id="upload_icon" class="d-flex justify-content-center upload_icon">
                                        <svg data-v-600095a0="" width="40px" height="40px"
                                            viewBox="0 0 40 40" fill="none"
                                            xmlns="http://www.w3.org/2000/svg" class="h-10 w-10">
                                            <path d="M15.0003 28.334V18.334L11.667 21.6673" stroke="#697386"
                                                stroke-width="2.11607" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path d="M15 18.334L18.3333 21.6673" stroke="#697386"
                                                stroke-width="2.11607" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path
                                                d="M36.6663 16.6673V25.0007C36.6663 33.334 33.333 36.6673 24.9997 36.6673H14.9997C6.66634 36.6673 3.33301 33.334 3.33301 25.0007V15.0007C3.33301 6.66732 6.66634 3.33398 14.9997 3.33398H23.333"
                                                fill="url(#paint0_linear_1096_170322)"></path>
                                            <path
                                                d="M36.6663 16.6673V25.0007C36.6663 33.334 33.333 36.6673 24.9997 36.6673H14.9997C6.66634 36.6673 3.33301 33.334 3.33301 25.0007V15.0007C3.33301 6.66732 6.66634 3.33398 14.9997 3.33398H23.333"
                                                stroke="#697386" stroke-width="2.11607"
                                                stroke-linecap="round" stroke-linejoin="round">
                                            </path>
                                            <path
                                                d="M36.6663 16.6673H29.9997C24.9997 16.6673 23.333 15.0007 23.333 10.0007V3.33398L36.6663 16.6673Z"
                                                fill="url(#paint1_linear_1096_170322)" stroke="#697386"
                                                stroke-width="2.11607" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <defs>
                                                <linearGradient id="paint0_linear_1096_170322" x1="19.9997"
                                                    y1="-59.9992" x2="19.9997" y2="23.5722"
                                                    gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#7C7C7C"></stop>
                                                    <stop offset="1" stop-color="#7C7C7C"
                                                        stop-opacity="0"></stop>
                                                </linearGradient>
                                                <linearGradient id="paint1_linear_1096_170322" x1="39.6426"
                                                    y1="-1.78495" x2="22.4997" y2="14.6436"
                                                    gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#7C7C7C"></stop>
                                                    <stop offset="1" stop-color="#777777"
                                                        stop-opacity="0"></stop>
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </div>
                                    <p id="modal_replace_text" class="fw-bold text-center">
                                        Choose File to Upload
                                    </p>
                                    <p data-v-600095a0=""
                                        class="mt-1 font-medium text-xs w-full text-yocket-neutral-500 text-center">
                                        Supported formats:
                                        pdf, png, jpg and jpeg
                                    </p>
                                    <p class="text-center">Size Limit: 5MB</p>

                                    <div class="upload-container">
                                        <div class="border-container">

                                            <div class="d-flex justify-content-center">
                                                <form id="file_upload_form" class="file_upload_form"
                                                    enctype="multipart/form-data">


                                                    <input id="subcategory_name" type="hidden"
                                                        name="subcategory_name" value=""
                                                        placeholder="eg. Green Card" />
                                                    <input id="document_subcategory_id" type="hidden"
                                                        name="document_subcategory_id" value="" />
                                                    <div id="row ">
                                                        <input id="file"
                                                            class="form-control file_upload_input"
                                                            name="file" type='file' />
                                                    </div>

                                                    <div class="row mt-4">
                                                        <button class="btn btn-success border border-grey"
                                                            type="submit">
                                                            <span class="text-grey fs-6">Upload File</span>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="modal_footer" class="modal-footer m-0 p-0">
                                <div id="uploaded_card" class="card w-100 m-0 p-0">
                                    <div class="card-body">
                                        <div class="row">
                                            <div id="modal_footer_title" class="col-10 fw-bold fs-6">

                                            </div>
                                            <div
                                                class="col-2 text-center d-flex justify-content-center align-items-center m-0 p-0">
                                                <button id="remove_file"
                                                    class="btn btn-light border border-grey m-n9 remove_file"
                                                    type="">✖</button>
                                            </div>
                                            <div id="file_size" class="fs-6">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> --}}

        </div>
    </div>
<br/>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title line-height-36">{{ __('lead_list') }}</h3>
        </div>
        <div class="card-body table-responsive p-0">
            @include('admin.layouts.partials.message')
            <table class="table table-striped table-hover" width="100%">
                <thead class="table-head1">
                    <tr class="text-center">
                        <th>{{ __('s_no') }}</th>
                        <th>{{ __('name') }}</th>
                        <th>{{ __('email') }}</th>
                        <th>{{ __('source') }}</th>
                        {{-- <th>{{ __('country') }}</th> --}}
                        <th>{{ __('created_date') }}</th>
                        <th>{{ __('country') }}/{{ __('phone') }}</th>
                        @if (userCan('lead.update') || userCan('lead.delete'))
                            <th width="12%">
                                {{ __('action') }}
                            </th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @php
                        $i = 1;
                    @endphp
                    @forelse ($user->leads as $lead)
                        <tr class="text-center">
                            <th scope="row">
                                {{ $i++ }}
                            </th>
                            <td>
                                <a href="{{ route('lead.edit', $lead->id) }}" class="text-primary btn ll-mr-4 ll-p-0">
                                    <p class="highlight">{{ substr($lead->name, 0, 27) }}</p>
                                </a>
                            </td>
                            <td>
                                {{ $lead->email }}
                            </td>

                            <td>
                                {{ $lead->source }}
                            </td>
                            {{-- <td>
                                {{ $lead->phone }}
                            </td> --}}
                            <td>
                                @if(!empty($lead->created_at))
                                {{dateMonthTimeFormat($lead->created_at)}}
                                @endif
                            </td>
                            <td>
                                @if (strpos($lead->country_id, '@#$?') !== false)
                                    @php
                                        $country_array = explode("@#$?", $lead->country_id);
                                        $country_name = reset($country_array);
                                        $country_code = end($country_array);
                                    @endphp
                                    {{ $country_name }}/{{ $country_code }}
                                @else
                                    {{ $lead->country_id }}
                                @endif
                                {{ $lead->phone }}

                            </td>
                            <td>

                                @if (userCan('candidate.update'))
                                <a href="{{ route('lead.edit', $lead->id) }}"
                                    class="btn ll-btn ll-border-none">
                                    {{__('view')}} {{__('lead')}}
                                    <x-svg.table-btn-arrow />
                                </a>
                                @endif

                                {{-- @if (userCan('lead.update'))
                                <a href="{{ route('lead.edit', $lead->id) }}" class="btn ll-mr-4 ll-p-0">
                                    <x-svg.table-edit />
                                </a>
                                @endif --}}
                                @if (userCan('lead.delete'))
                                    <form action="{{ route('lead.destroy', $lead->id) }}" method="POST"
                                        class="d-inline">
                                        @method('DELETE')
                                        @csrf
                                        <button
                                            onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}');"
                                            class="btn ll-p-0">
                                            <x-svg.table-delete /></i>
                                        </button>
                                    </form>
                                @endif


                            </td>



                        </tr>
                    @empty
                        <tr>
                            <td colspan="10">
                                <p>{{ __('no_data_found') }}...</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
     
        </div>
    </div>
    {{-- follow up model --}}
    <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="myForm" class="form-horizontal"
                    action="{{ route('lead-followup', $user->id) }}" method="POST"
                    onsubmit="validateForm(event)">
                    @csrf
                    <div class="modal-header text-center">
                        <h4 class="modal-title w-100 font-weight-bold">Follow up</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body mx-3">
                        <div class="md-form mb-3">
                            <label data-error="wrong" data-success="right"
                                for="form8">Comment</label>
                            <textarea type="text" id="form8" class="md-textarea form-control" rows="4" name="comment">{{ old('comment') }}</textarea>
                            <span class="text-danger"></span>
                        </div>

                        <div class="md-form mb-3">
                            <label data-error="wrong" data-success="right"
                                for="form34">Type</label>
                            <select name="type" class="form-control validate" id="form34">
                                <option></option>
                                <option value="Inbound Call"
                                    {{ old('type') == 'Inbound Call' ? 'selected' : '' }}>Inbound Call
                                </option>
                                <option value="Outbound Call"
                                    {{ old('type') == 'Outbound Call' ? 'selected' : '' }}>Outbound
                                    Call</option>
                                <option value="Chat" {{ old('type') == 'Chat' ? 'selected' : '' }}>
                                    Chat</option>
                                <option value="Email" {{ old('type') == 'Email' ? 'selected' : '' }}>
                                    Email</option>
                            </select>
                            <span class="text-danger"></span>
                        </div>
                        <div class="md-form mb-3">
                            <label data-error="wrong" data-success="right" for="form29"
                                class="float-left mr-3">Follow Up</label>
                            <div>
                                <input type="radio" id="followChoice1" name="followup_up"
                                    value="yes" class=""
                                    @if (old('followup_up') == 'yes') checked @endif />
                                <label for="followChoice1">Yes</label>
                                <input type="radio" id="followChoice2" name="followup_up"
                                    value="no" class="ml-2"
                                    @if (old('followup_up') == 'no') checked @endif />
                                <label for="followChoice2">No</label>
                            </div>
                            <span class="text-danger" id="followChoice"></span>
                        </div>
                        <div class="md-form d-none" id="datetime">
                            <label data-error="wrong" data-success="right" for="form32">Date and
                                Time</label>
                            {{-- <input type="datetime-local" id="form32" name="datetime" class="form-control validate" value="{{ old('datetime') }}"> --}}
                            <input type="text" id="form32" name="datetime" autocomplete="off"
                                class="form-control validate" value="{{ request('datetime') }}">
                            <span class="text-danger"></span>
                        </div>

                    </div>

                    <div class="modal-footer d-flex justify-content-center">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-paper-plane-o ml-1"></i> {{ __('save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- follow up model end --}}

   
@endsection

@section('style')
    <style>

        .h_38ul {
            height: 38px !important;
        }

        .card .card-body {
            padding: 15px;
        }

        .modal-header {
            background-color: #e2eced
        }




        .switch {
            position: relative;
            display: inline-block;
            width: 35px;
            height: 19px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            display: none;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 15px;
            width: 15px;
            left: 3px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input.success:checked+.slider {
            background-color: #28a745;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(15px);
            -ms-transform: translateX(15px);
            transform: translateX(15px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
    <!-- >=>Leaflet Map<=< -->
    <x-map.leaflet.map_links />

    @include('map::links')
@endsection
@section('script')
    <script src="{{ asset('backend/js/candidate-documents-admin.js') }}"></script>
    {{-- Leaflet  --}}
    {{-- <x-map.leaflet.map_scripts />
    <script>
        var oldlat = {!! $candidate->lat ? $candidate->lat : setting('default_lat') !!};
        var oldlng = {!! $candidate->long ? $candidate->long : setting('default_long') !!};

        // Map preview
        var element = document.getElementById('leaflet-map');

        // Height has to be set. You can do this in CSS too.
        element.style = 'height:300px;';

        // Create Leaflet map on map element.
        var leaflet_map = L.map(element);

        // Add OSM tile layer to the Leaflet map.
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(leaflet_map);

        // Target's GPS coordinates.
        var target = L.latLng(oldlat, oldlng);

        // Set map's center to target with zoom 14.
        const zoom = 14;
        leaflet_map.setView(target, zoom);

        // Place a marker on the same location.
        L.marker(target).addTo(leaflet_map);
    </script>
    <!-- >=>Mapbox<=< -->
    @include('map::scripts') --}}
    <!-- >=>Mapbox<=< -->
    <!-- ================ mapbox map ============== -->
    {{-- <x-website.map.map-box-check />
    <script>
        mapboxgl.accessToken = "{{ $setting->map_box_key }}";
        const coordinates = document.getElementById('coordinates');

        var oldlat = {!! $candidate->lat ? $candidate->lat : setting('default_lat') !!};
        var oldlng = {!! $candidate->long ? $candidate->long : setting('default_long') !!};

        const map = new mapboxgl.Map({
            container: 'map-box',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [oldlng, oldlat],
            zoom: 6
        });
        var marker = new mapboxgl.Marker({
                draggable: false
            }).setLngLat([oldlng, oldlat])
            .addTo(map);

        function onDragEnd() {
            const lngLat = marker.getLngLat();
            let lat = lngLat.lat;
            let lng = lngLat.lng;
            $('#lat').val(lat);
            $('#lng').val(lng);
            document.getElementById('form').submit();
        }

        function add_marker(event) {
            var coordinates = event.lngLat;
            marker.setLngLat(coordinates).addTo(map);

        }
        // zoom in and out
        <
        x - mapbox - zoom - control / >
    </script>
    <script>
        $('.mapboxgl-ctrl-logo').addClass('d-none');
        $('.mapboxgl-ctrl-attrib-inner').addClass('d-none');
    </script> --}}
    <script>
        $('.status-switch').on('change', function() {
            var status = $(this).prop('checked') == true ? 1 : 0;
            var id = $(this).data('id');
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '{{ route('candidate.status.change') }}',
                data: {
                    'status': status,
                    'id': id
                },
                success: function(response) {
                    toastr.success(response.message, 'Success');
                }
            });

            if (status == 1) {
                $(`#status_${id}`).text("{{ __('activated') }}")
            } else {
                $(`#status_${id}`).text("{{ __('deactivated') }}")
            }
        });

        $('.email-verification-switch').on('change', function() {
            var status = $(this).prop('checked') == true ? 1 : 0;
            var id = $(this).data('userid');
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '{{ route('company.verify.change') }}',
                data: {
                    'status': status,
                    'id': id
                },
                success: function(response) {
                    toastr.success(response.message, 'Success');
                }
            });

            if (status == 1) {
                $(`#verification_status_${id}`).text("{{ __('verified') }}")
            } else {
                $(`#verification_status_${id}`).text("{{ __('unverified') }}")
            }
        });
    </script>
    <!-- ================ mapbox map ============== -->
    <!-- ================ google map ============== -->
    {{-- <x-website.map.google-map-check />
    <script>
        function initMap() {
            var token = "{{ $setting->google_map_key }}";

            var oldlat = {!! $candidate->lat ? $candidate->lat : setting('default_lat') !!};
            var oldlng = {!! $candidate->long ? $candidate->long : setting('default_long') !!};

            const map = new google.maps.Map(document.getElementById("google-map"), {
                zoom: 7,
                center: {
                    lat: oldlat,
                    lng: oldlng
                },
            });

            const image =
                "https://gisgeography.com/wp-content/uploads/2018/01/map-marker-3-116x200.png";
            const beachMarker = new google.maps.Marker({

                draggable: false,
                position: {
                    lat: oldlat,
                    lng: oldlng
                },
                map,
                // icon: image
            });
        }
        window.initMap = initMap;
    </script>
    <script>
        @php
            $link1 = 'https://maps.googleapis.com/maps/api/js?key=';
            $link2 = $setting->google_map_key;
            $Link3 = '&callback=initMap&libraries=places,geometry';
            $scr = $link1 . $link2 . $Link3;
        @endphp;
    </script>
    <script src="{{ $scr }}" async defer></script> --}}
    <!-- ================ google map ============== -->
@endsection