@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('css')
    <style>
        @media print {
            body * {
                visibility: hidden !important;
                font-size: 12px;
            }

            #newPrint, #newPrint * {
                visibility: visible !important;
            }

            #newPrint {
                position: absolute !important;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 0;
            }

            /* Optional: Remove print button when printing */
            #printBtn {
                display: none !important;
            }

            /* Ensure Bootstrap grid prints correctly */
            .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
            .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
                @if(app()->getLocale() == 'fa')
                    float: left !important;
                @else
                    float: right !important;
                @endif
                display: block !important;
            }

            .col-md-1 { width: 8.33% !important; }
            .col-md-2 { width: 16.66% !important; }
            .col-md-3 { width: 25% !important; }
            .col-md-4 { width: 33.33% !important; }
            .col-md-5 { width: 41.66% !important; }
            .col-md-6 { width: 50% !important; }
            .col-md-7 { width: 58.33% !important; }
            .col-md-8 { width: 66.66% !important; }
            .col-md-9 { width: 75% !important; }
            .col-md-10 { width: 83.33% !important; }
            .col-md-11 { width: 91.66% !important; }
            .col-md-12 { width: 100% !important; }

            /* Keep alert color background */
            .alert-success {
                background-color: #d4edda !important;
                color: #155724 !important;
            }

            .alert-danger {
                background-color: #f8d7da !important;
                color: #721c24 !important;
            }

            /* Preserve d-flex and alignment */
            .d-flex {
                display: flex !important;
            }

            .flex-column {
                flex-direction: column !important;
            }

            .align-items-center {
                align-items: center !important;
            }

            .text-center {
                text-align: center !important;
            }

            .text-secondary {
                color: #6c757d !important;
            }

            .rounded-circle {
                border-radius: 50% !important;
            }

            img {
                max-width: 100% !important;
                height: auto !important;
            }

            .card {
                box-shadow: none !important;
                border: 1px solid #ccc !important;
                margin-bottom: 1rem !important;
            }

            .card-body {
                padding: 1rem !important;
            }

            hr {
                border: 0;
                height: 1px;
                background-color: #201313 !important;
                margin: 1rem 0 !important;
            }

            .signature{
                width:30px;
            }
            .profile{
                width: 20px;
            }
        }

        .emarat-logo{
            width:80px;border-radius: 10px;
        }
        .signature{
            width:110px;
        }
        .profile{
            width: 90px;
        }
        h4 {
            white-space: normal !important;
            word-break: break-word;
        }
        .fs-20{
            font-size: 20px !important;
        }

    </style>

@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- view -->
            <div class="card data-table view-employee mb-3">
                <div class="card-header pe-0 ps-0">
                    <label class="card-title"><i class="fa fa-user"></i> {{ __('employee.view_employee')}}</label>
                    @if(auth()->user()->hasPermissionTo('Employee - Edit Employee'))
                        <button type="button" class="btn btn-primary btn-sm edit-btn pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}">
                            <i class="fa fa-pen"></i> {{ __('employee.edit') }}
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm print-btn  mx-2 pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}">
                            <i class="fa fa-print"></i> {{ __('employee.print') }}
                        </button>
                    @endif
                </div>
                <div class="card-body">
                    <div class="row" id="newPrint">
                         <div class="col-md-12 text-center hiddens">
                            <div id="title-info">
                                <img src="{{asset('assets/img/main-logo.png')}}" alt="emarat-logo" class="emarat-logo img-fluid my-1">
                                <h3>د ریاست الوزراء اقتصادي معاونیت</h3>
                                <h4>د منابعي او اداري ریاست</h4>
                                <h5 id="emplpyee-dir">د کارکونکو د همغږي مدیریت</h5>
                            </div>
                            <hr>
                        </div>

                        <div class="col-md-3 d-flex">
                            <div class="flex-grow-1">
                                <div class="card">
                                    <div class="card-body @if($employee->status == 'active') alert-success @else alert-danger @endif">
                                        <div class="d-flex flex-column align-items-center text-center">
                                            <img src="{{ $employee->image && file_exists(storage_path('app/public/attachment/employee/photo/' . $employee->image)) ? asset('storage/attachment/employee/photo/' . $employee->image) : asset('assets/img/default-img.png') }}" alt="{{ $employee->name }}" class="rounded-circle profile" height="auto">
                                            <div class="mt-2 mb-2">
                                                <h2>{{ ucfirst($employee->name) }}, {{ ucfirst($employee->last_name) }}</h2>
                                                <h3 class="text-secondary mb-1">{{ ucfirst(@$employee->department->name ?? '') }}</h3>
                                                <h3 class="text-secondary mb-1">{{ ucfirst(@$employee->designation->name) }}</h3>
                                                <h4 class="text-secondary mb-1">{{ $employee->id_number }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-9 d-flex">
                            <div class="flex-grow-1">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_name">{{ __('employee.name') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->name }}</h3>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_father_name">{{ __('employee.father_name') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->father_name }}</h3>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_grand_father_name">{{ __('employee.grand_father_name') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->grand_father_name }}</h3>
                                                    </div>
                                                </div>
                                                <hr>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_last_name">{{ __('employee.last_name') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->last_name }}</h3>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_email">{{ __('employee.email') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->email }}</h3>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_phone">{{ __('employee.phone') }}</label>
                                                        <h3 class="text-secondary m-0">{{ $employee->phone }}</h3>
                                                    </div>
                                                </div>
                                                <hr>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label class="fs-20" for="employee_direcorate">{{ __('employee.directorate') }}</label>
                                                        <h3 class="text-secondary m-0">{{ @$employee->directorate->name }}</h3>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="fs-20" for="employee_manager">{{ __('employee.manager') }}</label>
                                                        <h3 class="text-secondary m-0">{{ @$employee->manager->name }}</h3>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <label class="fs-20" for="employee_salary">{{ __('employee.salary') }}</label>
                                                        <h3 class="text-secondary m-0">{{ @$employee->salary }}</h3>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="fs-20" for="employee_salary">{{ __('employee.is_specialist') }}</label>
                                                        <h3 class="text-secondary m-0">{{ @$employee->is_specialist == 'yes' ? __('global.yes') : __('global.nos') }}</h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($employee->is_in_office == 'yes')
                            <div class="col-md-3 d-flex">
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body @if($employee->status == 'active') alert-success @else alert-danger @endif">
                                            <div class="d-flex flex-column align-items-center text-center pb-5">
                                                <div class="mt-3 mb-3">
                                                    <h2>{{ __('employee.signature') }} , {{ ucfirst($employee->name) }}</h2>
                                                    <h3 class="text-secondary mb-1">{{ ucfirst(@$employee->designation->name ?? '') }}</h3>
                                                </div>
                                                <img src="{{ $employee->signature && file_exists(storage_path('app/public/attachment/employee/signature/' . $employee->signature)) ? asset('storage/attachment/employee/signature/' . $employee->signature) : asset('assets/img/signature.png') }}" alt="{{ $employee->signature }}" class="rounded-circle signature" height="auto">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-9 d-flex">
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body">

                                            <div class="row mb-5">
                                                <div class="col-md-12">
                                                    <h5>{{ __('employee.main_residence') }}</h5>
                                                    <hr>
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_main_country">{{ __('employee.country') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->mainCountry->name ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_main_province">{{ __('employee.province') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->mainProvince->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_main_district">{{ __('employee.district') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->mainDistrict->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_main_village">{{ __('village.item') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->mainVillage->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h5>{{ __('employee.current_residence') }}</h5>
                                                    <hr>
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_current_country">{{ __('employee.country') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->currentCountry->name ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_current_province">{{ __('employee.province') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->currentProvince->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_current_district">{{ __('employee.district') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->currentDistrict->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="fs-20" for="employee_current_village">{{ __('village.item') }}</label>
                                                            <h3 class="text-secondary m-0">{{ @$employee->currentVillage->{'name_'.$lang } ?? '-' }}</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="col-md-12 hiddens">
                            <div class="row m-1" style="position: fixed; bottom: 0px;">
                                <div class="col-md-6">
                                    <h4 style="text-align: {{ app()->getLocale() != 'en' ? 'right' : 'left' }}">
                                        <span>پته: صدارت – مرمرینه ماڼۍ - د ملک اصغر څلور لاری – کابل – افغانستان</span><br>
                                        <span>د اریکی شمیره: 0202105504</span>
                                    </h4>
                                </div>
                                <div class="col-md-6">
                                    <h4 style="text-align: {{ app()->getLocale() != 'en' ? 'left' : 'right' }}">
                                        <span>Address: Sedarat Marmarin Palace - Malik Asghar Square - Kabul – Afghanistan</span><br>
                                        <span>Contact number: 0202105504 </span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @if($employee->is_in_office == 'yes')
                            <div class="col-md-12"> <!-- Education Record view-->
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5>{{__('employee.educationalRecord.name')}}</h5>
                                            <hr>
                                            @if($educationalRecords->isNotEmpty())
                                                @php
                                                    $i =1;
                                                @endphp
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover">
                                                        <tr>
                                                            <th>{{ __('global.no')}}</th>
                                                            <th>{{ __('employee.educationalRecord.compus')}}</th>
                                                            <th>{{ __('employee.educationalRecord.degree')}}</th>
                                                            <th>{{ __('employee.educationalRecord.start_date')}}</th>
                                                            <th>{{ __('employee.educationalRecord.end_date')}}</th>
                                                            <th>{{ __('employee.educationalRecord.attachment')}}</th>
                                                        </tr>
                                                        @foreach($educationalRecords as $edu)
                                                        <tr>
                                                            <td>{{ $i++ }}</td>
                                                            <td>{{ $edu->university->name }}</td>
                                                            <td>
                                                                @switch($edu->degree)
                                                                    @case('high_school')
                                                                        {{ __('employee.educationalRecord.high_school')}}
                                                                        @break
                                                                    @case('bachelor')
                                                                        {{ __('employee.educationalRecord.bachelor')}}
                                                                        @break
                                                                    @case('master')
                                                                        {{ __('employee.educationalRecord.master')}}
                                                                    @case('doctorate')
                                                                        {{ __('employee.educationalRecord.doctorate')}}
                                                                        @break
                                                                    @case('professor')
                                                                        {{ __('employee.educationalRecord.professor')}}
                                                                        @break
                                                                    @default

                                                                @endswitch
                                                            </td>
                                                            <td>{{ getHijriDate($edu->start_date) }}</td>
                                                            <td>{{ getHijriDate($edu->end_date) }}</td>
                                                            <td>
                                                                @if ($edu->attachment)
                                                                    <a href="{{ asset('storage/attachment/employee/educational_document/'.$edu->attachment) }}" target="_blank">{{ $edu->attachment }}</a>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-educational-record-modal">{{ __('employee.educationalRecord.addNew')}}</button>
                                                </div>
                                            @else
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-educational-record-modal">{{ __('employee.educationalRecord.addNew')}}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12"> <!-- Work Experience view-->
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5>{{__('employee.workExperience.name')}}</h5>
                                            <hr>
                                            @if($workExperience->isNotEmpty())
                                                @php
                                                    $j =1;
                                                @endphp
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover">
                                                        <tr>
                                                            <th>{{ __('global.no')}}</th>
                                                            <th>{{ __('employee.workExperience.position')}}</th>
                                                            <th>{{ __('employee.workExperience.organization')}}</th>
                                                            <th>{{ __('employee.workExperience.start_date')}}</th>
                                                            <th>{{ __('employee.workExperience.end_date')}}</th>
                                                            <th>{{ __('employee.workExperience.attachment')}}</th>
                                                        </tr>
                                                        @foreach($workExperience as $work)
                                                        <tr>
                                                            <td>{{ $j++ }}</td>
                                                            <td>{{ $work->position }}</td>
                                                            <td>{{ $work->organizationName->name }}</td>
                                                            <td>{{ getHijriDate($work->start_date) }}</td>
                                                            <td>{{ getHijriDate($work->end_date) }}</td>
                                                            <td>
                                                                @if ($work->attachment)
                                                                    <a href="{{ asset('storage/attachment/employee/workexperience_document/'.$work->attachment) }}" target="_blank">{{ $work->attachment }}</a>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-work-experience-modal">{{ __('employee.workExperience.addNew')}}</button>
                                                </div>
                                            @else
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-work-experience-modal">{{ __('employee.workExperience.addNew')}}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

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

            <!-- end view-->
            @if(auth()->user()->hasPermissionTo('Employee - Edit Employee'))
                <!-- edit -->
                <div class="card data-table mb-3 edit-employee hiddens">
                    <div class="card-header pe-0 ps-0">
                        <label class="card-title"><i class="fa fa-user"></i> {{ __('employee.edit_employee')}}</label>
                    </div>
                    <div class="card-body">
                        @csrf
                        <form id="editEmployeeForm" action="{{ route('updateEmployee')}}" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="edit_employee_id" id="edit_employee_id" value="{{ encryption($employee->id) }}" class="form-control" />
                            <div class="row">
                                <div class="col-md-3 d-flex">
                                    <div class="flex-grow-1">
                                        <div class="card">
                                            <div class="card-body @if($employee->status == 'active') alert-success @else alert-danger @endif">
                                                <div class="d-flex flex-column align-items-center text-center">
                                                    <label for="edit_employee_photo_pic" id="img-label" style="padding: 3px 5px; border-radius: 5px; text-align: center;">
                                                        <img id="previewImage" src="{{ $employee->image && file_exists(storage_path('app/public/attachment/employee/photo/' . $employee->image)) ? asset('storage/attachment/employee/photo/' . $employee->image) : asset('assets/img/default-img.png') }}" alt="{{ $employee->name }}" for="edit_employee_photo_pic" class="rounded-circle" width="182" height="auto">
                                                        @if($employee->is_in_office == 'yes') <span class="required">*</span> @endif
                                                    </label>
                                                    <input type="file" class="custom-file-input" @if($employee->image && file_exists(storage_path('app/public/attachment/employee/photo/' . $employee->image))) name="edit_employee_photo_pic" @else  @if($employee->is_in_office == 'yes') name="r_edit_employee_photo_pic" @else  name="edit_employee_photo_pic" @endif @endif id="edit_employee_photo_pic" onchange="showImages(event, 'edit_employee_photo_pic', 'previewImage')" style="display:none;">

                                                    <div class="mt-3">
                                                        <h4>{{ ucfirst($employee->name) }}, {{ ucfirst($employee->last_name) }}</h4>
                                                        <p class="text-secondary mb-1">{{ ucfirst(@$employee->department->name ?? '') }}</p>
                                                        <p class="text-secondary mb-1">{{ ucfirst(@$employee->designation->name) }}</p>
                                                        <p class="text-secondary mb-1">{{ $employee->id_number }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9 d-flex">
                                    <div class="flex-grow-1">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <label for="edit_employee_name">{{ __('employee.name') }} <span class="required">*</span></label>
                                                                <input type="text" class="form-control" name="r_edit_employee_name" id="edit_employee_name" value="{{ $employee->name }}" placeholder="{{ __('employee.name') }}" />
                                                                <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label for="edit_employee_father_name">{{ __('employee.father_name') }} <span class="required">*</span></label>
                                                                <input type="text" class="form-control" name="r_edit_employee_father_name" id="edit_employee_father_name" value="{{ $employee->father_name }}" placeholder="{{ __('employee.father_name') }}" />
                                                                <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                            </div>

                                                            <div class="col-md-3">
                                                                <label for="edit_employee_grand_father_name">{{ __('employee.grand_father_name') }} <span class="required">*</span></label>
                                                                <input type="text" class="form-control" name="r_edit_employee_grand_father_name" id="edit_employee_grand_father_name" value="{{ $employee->grand_father_name }}" placeholder="{{ __('employee.grand_father_name') }}" />
                                                                <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label for="edit_employee_last_name">{{ __('employee.last_name') }} <span class="required">*</span></label>
                                                                <input type="text" class="form-control" name="r_edit_employee_last_name" id="edit_employee_last_name" value="{{ $employee->last_name }}" placeholder="{{ __('employee.last_name') }}" />
                                                                <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                    </div>
                                                </div>

                                                @if($employee->is_in_office == 'yes')
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <label for="edit_employee_email">{{ __('employee.email') }} <span class="required">*</span></label>
                                                                    <input type="email" class="form-control" name="r_edit_employee_email" id="edit_employee_email" value="{{ $employee->email }}" placeholder="{{ __('employee.email') }}" />
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_phone">{{ __('employee.phone') }} <span class="required">*</span></label>
                                                                    <input type="text" class="form-control" name="r_edit_employee_phone" id="edit_employee_phone" value="{{ $employee->phone }}" placeholder="{{ __('employee.phone') }}" />
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_salary">{{ __('employee.salary') }}</label>
                                                                    <input type="number" class="form-control" name="edit_employee_salary" id="edit_employee_salary" oninput="validateInput(event)" value="{{ @$employee->salary}}" placeholder="{{ __('employee.salary') }}" />
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label for="edit_employee_statuss">{{ __('employee.status') }} <span class="required">*</span></label>
                                                                    <select name="r_edit_employee_statuss" id="edit_employee_statuss" class="form-control select2">
                                                                        <option value="">--{{ __('employee.status') }}--</option>
                                                                        <option @if($employee->status == 'active') selected @endif value="active">{{ __('employee.active') }}</option>
                                                                        <option @if($employee->status == 'inactive') selected @endif value="inactive">{{ __('employee.inactive') }}</option>
                                                                    </select>
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <label for="edit_employee_directorate">{{ __('employee.directorate') }} <span class="required">*</span></label>
                                                                    <select name="r_edit_employee_directorate" id="edit_employee_directorate" class="form-control select2">
                                                                        @if($directorates)
                                                                            @foreach($directorates as $directorate)
                                                                                <option @if($directorate->id == $employee->directorate_id) selected @endif value="{{ $directorate->id }}">
                                                                                    {{ $directorate->name }}
                                                                                </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="edit_employee_department">{{ __('employee.department') }} <span class="required">*</span></label>
                                                                    <select name="r_edit_employee_department" id="edit_employee_department" class="form-control select2">
                                                                        <option value="">--{{ __('employee.department') }}--</option>
                                                                    </select>
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="edit_employee_designation">{{ __('employee.designation') }} <span class="required">*</span></label>
                                                                    <select name="r_edit_employee_designation" id="edit_employee_designation" class="form-control select2">
                                                                        <option value="">--{{ __('employee.designation') }}--</option>
                                                                    </select>
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <label for="edit_employee_report_to_id">{{ __('employee.manager') }} <span class="required">*</span></label>
                                                                    <select name="r_edit_employee_report_to_id" id="edit_employee_report_to_id" class="form-control select2">
                                                                        <option value="">--{{ __('employee.manager') }}--</option>
                                                                        @if($managers)
                                                                            @foreach($managers as $manager)
                                                                                <option @if($manager->id == $employee->report_to_id) selected @endif value="{{ $manager->id }}">{{ $manager->name }} - {{ $manager->last_name }}</option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <div class="form-check form-switch form-switch-md mb-3" style="padding-left:0px !important;">
                                                                        <div class="col-md-12">
                                                                            <div class="row">
                                                                                <div class="col-md-12">
                                                                                    <label class="form-check-label pull-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}" for="is_specialist">{{ __('employee.is_specialist') }}</label>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <input class="form-check-input pull-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}" type="checkbox" id="is_specialist" name="is_specialist" style="margin-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}:{{ app()->getLocale() == 'en' ? 10 : -10 }}px !important;" @if($employee->is_specialist == 'yes') value="1" checked @else value="0" @endif onchange="toggleCheckboxState(this)">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif

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

                                @if($employee->is_in_office == 'yes')
                                    <div class="col-md-12">
                                        <hr>
                                    </div>

                                    {{-- Residence --}}
                                    <div class="col-md-3 d-flex">
                                        <div class="flex-grow-1">
                                            <div class="card">
                                                <div class="card-body @if($employee->status == 'active') alert-success @else alert-danger @endif">
                                                    <div class="d-flex flex-column align-items-center text-center pb-5">
                                                        <div>
                                                            <p class="text-secondary mb-1">{{ ucfirst(@$employee->designation->name) }}</p>
                                                        </div>
                                                        <br>
                                                        <label for="edit_employee_signature_pic" id="img-label" style="padding: 3px 5px; border-radius: 5px; text-align: center;">
                                                            <img id="signatureImage" src="{{ $employee->signature && file_exists(storage_path('app/public/attachment/employee/signature/' . $employee->signature)) ? asset('storage/attachment/employee/signature/' . $employee->signature) : asset('assets/img/signature.png') }}" alt="{{ $employee->signature }}" for="edit_employee_signature_pic" class="rounded-circle" width="164" height="auto">
                                                        </label>
                                                        <input type="file" class="custom-file-input" name="edit_employee_signature_pic" id="edit_employee_signature_pic" onchange="showImages(event, 'edit_employee_signature_pic', 'signatureImage')" style="display:none;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 d-flex">
                                        <div class="flex-grow-1">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <h5>{{ __('employee.main_residence') }}</h5>
                                                        <hr>
                                                        <div class="col-md-12">
                                                            <div class="row mb-5">
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_main_country">{{ __('employee.country') }}</label>
                                                                    <select name="edit_employee_main_country" id="edit_employee_main_country" class="form-control select2">
                                                                        @if($countries)
                                                                            @foreach($countries as $mainCountry)
                                                                                <option value="{{ $mainCountry->id }}" @if($employee->main_country == $mainCountry->id) selected @endif>{{ $mainCountry->name }}</option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_main_province">{{ __('employee.province') }}</label>
                                                                    <select name="edit_employee_main_province" id="edit_employee_main_province" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_main_district">{{ __('employee.district') }}</label>
                                                                    <select name="edit_employee_main_district" id="edit_employee_main_district" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_main_village">{{ __('village.item') }}</label>
                                                                    <select name="edit_employee_main_village" id="edit_employee_main_village" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>

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

                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <h5>{{ __('employee.current_residence') }}</h5>
                                                                <hr>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_current_country">{{ __('employee.country') }}</label>
                                                                    <select name="edit_employee_current_country" id="edit_employee_current_country" class="form-control select2">
                                                                        @if($countries)
                                                                            @foreach($countries as $currentCountry)
                                                                                <option value="{{ $currentCountry->id }}" @if($employee->current_country == $currentCountry->id) selected @endif>{{ $currentCountry->name }}</option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_current_province">{{ __('employee.province') }}</label>
                                                                    <select name="edit_employee_current_province" id="edit_employee_current_province" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_current_district">{{ __('employee.district') }}</label>
                                                                    <select name="edit_employee_current_district" id="edit_employee_current_district" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label for="edit_employee_current_village">{{ __('village.item') }}</label>
                                                                    <select name="edit_employee_current_village" id="edit_employee_current_village" class="form-control select2">
                                                                        <option value="">{{__('global.select')}}</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="col-md-12 mt-2">
                                    <div class="flex-grow-1">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <button type="submit" class="btn btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }} m{{ app()->getLocale() == 'en' ? 's' : 'e' }}-2">{{ __('global.update')}}</button>
                                                        <button type="button" class="btn btn-dark view-btn pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}">{{ __('global.back')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        @if($employee->is_in_office == 'yes')
                            <div class="col-md-12"> <!-- Educational Record -->
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5>{{__('employee.educationalRecord.name')}}</h5>
                                            <hr>
                                            @if($educationalRecords->isNotEmpty())
                                                @php
                                                    $i =1;
                                                @endphp
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover">
                                                        <tr>
                                                            <th>{{ __('global.no')}}</th>
                                                            <th>{{ __('employee.educationalRecord.compus')}}</th>
                                                            <th>{{ __('employee.educationalRecord.degree')}}</th>
                                                            <th>{{ __('employee.educationalRecord.start_date')}}</th>
                                                            <th>{{ __('employee.educationalRecord.end_date')}}</th>
                                                            <th>{{ __('employee.educationalRecord.attachment')}}</th>
                                                            @if(auth()->user()->hasPermissionTo('Employee - Edit Employee') || auth()->user()->hasPermissionTo('Employee - Delete Employee'))
                                                                <th colspan="2" class="text-center"><i class="bx bx-cog"></i></th>
                                                            @endif
                                                        </tr>
                                                        @foreach($educationalRecords as $edu)
                                                            <tr>
                                                                <td>{{ $i++ }}</td>
                                                                <td>{{ $edu->university->name }}</td>
                                                                <td>{{ $edu->degree }}</td>
                                                                <td>{{ getHijriDate($edu->start_date) }}</td>
                                                                <td>{{ getHijriDate($edu->end_date) }}</td>
                                                                <td>
                                                                    @if ($edu->attachment)
                                                                    <a href="{{ asset('storage/attachment/employee/educational_document/'.$edu->attachment) }}" target="_blank">{{ $edu->attachment }}</a>
                                                                    @endif
                                                                </td>
                                                                @if(auth()->user()->hasPermissionTo('Employee - Edit Employee'))
                                                                    <td style="padding: 5px; text-align:center;">
                                                                        <a class="btn btn-outline-primary custom-a btn-sm editEducationalRecord" style="font-size: 12px; font-weight: bold;" data-id="{{ encryption($edu->id) }}" data-toggle="tooltip" title="{{ __('employee.edit')}}" >
                                                                            <i class="fa fa-pen"></i>
                                                                        </a>
                                                                    </td>
                                                                @endif
                                                                @if(auth()->user()->hasPermissionTo('Employee - Delete Employee'))
                                                                    <td style="padding: 5px;text-align: center;">
                                                                        <i class="mdi mdi-trash-can-outline text-danger btn btn-outline-danger btn-sm deleteBtn" data-id="{{ encryption($edu->id) }}" data-url="deletes_educational_record_route" data-toggle="tooltip" title="{{ __('employee.delete')}}"></i>
                                                                    </td>
                                                                @endif
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-educational-record-modal">{{ __('employee.educationalRecord.addNew')}}</button>
                                                </div>
                                            @else
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-educational-record-modal">{{ __('employee.educationalRecord.addNew')}}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12"> <!-- Work Experience -->
                                <div class="flex-grow-1">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5>{{__('employee.workExperience.name')}}</h5>
                                            <hr>
                                            @if($workExperience->isNotEmpty())
                                                @php
                                                    $j =1;
                                                @endphp
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover">
                                                        <tr>
                                                            <th>{{ __('global.no')}}</th>
                                                            <th>{{ __('employee.workExperience.position')}}</th>
                                                            <th>{{ __('employee.workExperience.organization')}}</th>
                                                            <th>{{ __('employee.workExperience.start_date')}}</th>
                                                            <th>{{ __('employee.workExperience.end_date')}}</th>
                                                            <th>{{ __('employee.workExperience.attachment')}}</th>
                                                            @if(auth()->user()->hasPermissionTo('Employee - Edit Employee') || auth()->user()->hasPermissionTo('Employee - Delete Employee'))
                                                                <th colspan="2" class="text-center"><i class="bx bx-cog"></i></th>
                                                            @endif
                                                        </tr>
                                                        @foreach($workExperience as $work)
                                                        <tr>
                                                            <td>{{ $j++ }}</td>
                                                            <td>{{ $work->position }}</td>
                                                            <td>{{ $work->organizationName->name }}</td>
                                                            <td>{{ getHijriDate($work->start_date) }}</td>
                                                            <td>{{ getHijriDate($work->end_date) }}</td>
                                                            <td>
                                                                @if ($work->attachment)
                                                                    <a href="{{ asset('storage/attachment/employee/workexperience_document/'.$work->attachment) }}" target="_blank">{{ $work->attachment }}</a>
                                                                @endif
                                                            </td>
                                                            @if(auth()->user()->hasPermissionTo('Employee - Edit Employee'))
                                                                <td style="padding: 5px; text-align:center;">
                                                                    <a class="btn btn-outline-primary custom-a btn-sm editWorkExperience" style="font-size: 12px; font-weight: bold;" data-id="{{ encryption($work->id) }}" data-toggle="tooltip" title="{{ __('employee.edit')}}" >
                                                                        <i class="fa fa-pen"></i>
                                                                    </a>
                                                                </td>
                                                            @endif
                                                            @if(auth()->user()->hasPermissionTo('Employee - Delete Employee'))
                                                                <td style="padding: 5px;text-align: center;">
                                                                    <i class="mdi mdi-trash-can-outline text-danger btn btn-outline-danger btn-sm deleteBtn" data-id="{{ encryption($work->id) }}" data-url="deletes_work_experience_route" data-toggle="tooltip" title="{{ __('employee.delete')}}"></i>
                                                                </td>
                                                            @endif
                                                        </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-work-experience-modal">{{ __('employee.workExperience.addNew')}}</button>
                                                </div>
                                            @else
                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-work-experience-modal">{{ __('employee.workExperience.addNew')}}</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <!-- end edit -->
            @endif

        </div>


        <!-- Add WorkExperience  modal -->
        <div class="modal fade add-work-experience-modal" id="add-work-experience-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                @csrf
                <form id="addWorkExperienceForm" action="{{ route('addWorkExperience')}}" method="POST" enctype="multipart/form-data" style="display: contents">
                    <input type="hidden" name="add_work_experience_id" id="add_work_experience_id" class="form-control" />
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="add-work-experience-title">{{ __('employee.workExperience.addNew') }}</h5>
                            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="add_position" class="form-label">{{ __('employee.workExperience.position') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control mb-1" id="add_position" name="r_add_position" placeholder="{{ __('employee.workExperience.position') }}" />
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="add_workexperience_start_date" class="form-label">{{ __('employee.workExperience.start_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_add_workexperience_start_date" id="add_workexperience_start_date" placeholder="{{ __('employee.workExperience.start_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="add_workexperience_end_date" class="form-label">{{ __('employee.workExperience.end_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_add_workexperience_end_date" id="add_workexperience_end_date" placeholder="{{ __('employee.workExperience.end_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                        <span class="editWorkExperienceDate_smaller hiddens required" id="editWorkExperienceDate_smaller"><span class="required">*</span> {{ __('employee.workExperience.no_smaller_start_date') }}</span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="add_organization" class="form-label">{{ __('employee.workExperience.organization') }} <span class="required">*</span></label>
                                        <select name="r_add_organization" id="add_organization" class="form-control">
                                            <option value="">--{{ __('global.select')}}--</option>
                                            @if($organizations)
                                                @foreach($organizations as $organization)
                                                    <option value="{{ $organization->id }}">{{ $organization->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <label for="add_workexperience_attachment" class="form-label">{{ __('employee.workExperience.attachment') }}</label>
                                        <div class="custom-file">
                                            <input type="file" class="form-control" name="add_workexperience_attachment" onchange="setFileNameToFileInput(event);" id="add_workexperience_attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                            <label class="custom-file-label" for="add_workexperience_attachment">{{ __('global.chose_file') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}">{{ __('global.cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('global.submit') }}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- Edit WorkExperience  modal -->
        <div class="modal fade edit-work-experience-modal" id="edit-work-experience-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                @csrf
                <form id="editWorkExperienceForm" action="{{ route('updateWorkExperience')}}" method="POST" enctype="multipart/form-data" style="display: contents">
                    <input type="hidden" name="edit_workexperience_id" id="edit_workexperience_id" class="form-control" />
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="edit-work-experience-title">{{ __('employee.workExperience.edit') }}</h5>
                            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="edit_workexperience_position" class="form-label">{{ __('employee.workExperience.position') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control mb-1" id="edit_workexperience_position" name="r_edit_workexperience_position" placeholder="{{ __('employee.workExperience.position') }}" />
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="edit_workexperience_start_date" class="form-label">{{ __('employee.workExperience.start_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_edit_workexperience_start_date" id="edit_workexperience_start_date" placeholder="{{ __('employee.workExperience.start_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="edit_workexperience_end_date" class="form-label">{{ __('employee.workExperience.end_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_edit_workexperience_end_date" id="edit_workexperience_end_date" placeholder="{{ __('employee.workExperience.end_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                        <span class="editWorkExperienceDate_smaller hiddens required" id="editWorkExperienceDate_smaller"><span class="required">*</span> {{ __('employee.workExperience.no_smaller_start_date') }}</span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="edit_workexperience_organization" class="form-label">{{ __('employee.workExperience.organization') }} <span class="required">*</span></label>
                                        <select name="r_edit_workexperience_organization" id="edit_workexperience_organization" class="form-control">
                                            <option value="">--{{ __('global.select')}}--</option>
                                            @if($organizations)
                                                @foreach($organizations as $organization)
                                                    <option value="{{ $organization->id }}">{{ $organization->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <label for="edit_workexperience_attachment" class="form-label">{{ __('employee.workExperience.attachment') }} <span class="editWorkAttachmentDiv hiddens"><a href="" class="editWorkAttachment" target="_blank"></a></span></label>
                                        <div class="custom-file">
                                            <input type="file" class="form-control" name="edit_workexperience_attachment" onchange="setFileNameToFileInput(event);" id="edit_workexperience_attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                            <label class="custom-file-label" for="edit_workexperience_attachment">{{ __('global.chose_file') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}">{{ __('global.cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('global.update') }}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- Add EducationalRecord  modal -->
        <div class="modal fade add-educational-record-modal" id="add-educational-record-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                @csrf
                <form id="addEducationalRecordForm" action="{{ route('addEducationalRecord')}}" method="POST" enctype="multipart/form-data" style="display: contents;">
                    <input type="hidden" name="add_educational_record_id" id="add_educational_record_id" class="form-control" />
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="add-designation-title">{{ __('employee.educationalRecord.addNew') }}</h5>
                            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="add_university_degree" class="form-label">{{ __('employee.educationalRecord.degree') }} <span class="required">*</span></label>
                                        <select name="r_add_university_degree" id="add_university_degree" class="form-control">
                                            <option value="">--{{ __('global.select')}}--</option>
                                            <option value="high_school">{{ __('employee.educationalRecord.high_school') }}</option>
                                            <option value="bachelor">{{ __('employee.educationalRecord.bachelor') }}</option>
                                            <option value="master">{{ __('employee.educationalRecord.master') }}</option>
                                            <option value="doctorate">{{ __('employee.educationalRecord.doctorate') }}</option>
                                            <option value="professor">{{ __('employee.educationalRecord.professor') }}</option>
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="add_education_start_date" class="form-label">{{ __('employee.educationalRecord.start_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_add_education_start_date" id="add_education_start_date" placeholder="{{ __('employee.educationalRecord.start_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="add_education_end_date" class="form-label">{{ __('employee.educationalRecord.end_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_add_education_end_date" id="add_education_end_date" placeholder="{{ __('employee.educationalRecord.end_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                        <span class="editEduEndDate_smaller hiddens required" id="editEduEndDate_smaller"><span class="required">*</span> {{ __('employee.educationalRecord.no_smaller_start_date') }}</span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="add_university_name" class="form-label">{{ __('employee.educationalRecord.university') }} <span class="required">*</span></label>
                                        <select name="r_add_university_name" id="add_university_name" class="form-control mb-1">
                                            <option value="">{{__('global.select')}}</option>
                                            @if($universities)
                                                @foreach($universities as $university)
                                                    <option value="{{ $university->id}}">{{ $university->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <label for="add_university_attachment" class="form-label">{{ __('employee.educationalRecord.attachment') }}</label>
                                        <div class="custom-file">
                                            <input type="file" class="form-control" name="add_university_attachment" onchange="setFileNameToFileInput(event);" id="add_university_attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                            <label class="custom-file-label" for="add_university_attachment">{{ __('global.chose_file') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}">{{ __('global.cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('global.submit') }}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- Edit EducationalRecord  modal -->
        <div class="modal fade edit-educational-record-modal" id="edit-educational-record-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                @csrf
                <form id="editEducationalRecordForm" action="{{ route('updateEducationalRecord')}}" method="POST" enctype="multipart/form-data" style="display: contents;">
                    <input type="hidden" name="edit_educational_record_id" id="edit_educational_record_id" class="form-control" />
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="add-designation-title">{{ __('employee.educationalRecord.edit') }}</h5>
                            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="edit_university_degree" class="form-label">{{ __('employee.educationalRecord.degree') }} <span class="required">*</span></label>
                                        <select name="r_edit_university_degree" id="edit_university_degree" class="form-control">
                                            <option value="">--{{ __('global.select')}}--</option>
                                            <option value="high_school">{{ __('employee.educationalRecord.high_school') }}</option>
                                            <option value="bachelor">{{ __('employee.educationalRecord.bachelor') }}</option>
                                            <option value="master">{{ __('employee.educationalRecord.master') }}</option>
                                            <option value="doctorate">{{ __('employee.educationalRecord.doctorate') }}</option>
                                            <option value="professor">{{ __('employee.educationalRecord.professor') }}</option>
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="edit_education_start_date" class="form-label">{{ __('employee.educationalRecord.start_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_edit_education_start_date" id="edit_education_start_date" placeholder="{{ __('employee.educationalRecord.start_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="edit_education_end_date" class="form-label">{{ __('employee.educationalRecord.end_date') }} <span class="required">*</span></label>
                                        <input type="text" class="form-control datepickers" name="r_edit_education_end_date" id="edit_education_end_date" placeholder="{{ __('employee.educationalRecord.end_date') }}" autocomplete="off"/>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                        <span class="editEduEndDate_smaller hiddens required" id="editEduEndDate_smaller"><span class="required">*</span> {{ __('employee.educationalRecord.no_smaller_start_date') }}</span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="edit_university_name" class="form-label">{{ __('employee.educationalRecord.university') }} <span class="required">*</span></label>
                                        <select name="r_edit_university_name" id="edit_university_name" class="form-control mb-1">
                                            <option value="">{{__('global.select')}}</option>
                                            @if($universities)
                                                @foreach($universities as $university)
                                                    <option value="{{ $university->id}}">{{ $university->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <span class="text-danger hiddens required">{{ __('global.required') }}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <label for="edit_university_attachment" class="form-label">{{ __('employee.educationalRecord.attachment') }} <span class="editEducationalAttachmentDiv hiddens"><a href="" class="editEducationalAttachment" target="_blank"></a></span></label>
                                        <div class="custom-file">
                                            <input type="file" class="form-control" name="edit_university_attachment" onchange="setFileNameToFileInput(event);" id="edit_university_attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                            <label class="custom-file-label" for="edit_university_attachment">{{ __('global.chose_file') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close')}}">{{ __('global.cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('global.update') }}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
@endsection
@section('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function(){

            $(document).on('click', '.edit-btn', function(e) {
                $('#edit_employee_main_country').trigger('change');
                $('#edit_employee_current_country').trigger('change');
                $('#edit_employee_directorate').trigger('change');
                $('.view-employee').slideUp('slow');
                $('.edit-employee').removeClass('hiddens');
                $('.edit-employee').slideDown('slow');
            });

            $(document).on('click', '.view-btn', function(e) {
                $('.view-employee').slideDown('slow');
                $('.edit-employee').slideUp('slow');
            });

            $(document).on('change', '#edit_employee_directorate', function(e) {
                var access_token = $("#access_token").val();
                var directorate = $("#edit_employee_directorate option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDirectorateDepartment')}}",
                    data: {
                        access_token: access_token,
                        directorate: directorate
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_department').html(result.content);
                        $('#edit_employee_department').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_department').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_department', function(e) {
                var access_token = $("#access_token").val();
                var department = $("#edit_employee_department option:selected").val();
                var directorate = $("#edit_employee_directorate option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDirectorateDesignation')}}",
                    data: {
                        access_token: access_token,
                        department: department,
                        directorate: directorate
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_designation').html(result.content);
                        $('#edit_employee_designation').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_designation').html(errors);
                    }
                });
            });

            $(document).on("click", ".editEducationalRecord", function(){
                var id = $(this).attr('data-id');
                $('#edit_educational_record_id').val(id);

                $.ajax({
                    url: "{{ route('fetchEducationRecord') }}",
                    method: "GET",
                    data: {
                        id: id
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        // Handle the success response
                        if(response != ''){
                            $('#edit_university_degree').val(response.degree);
                            $('#edit_education_start_date').val(response.start_date);
                            $('#edit_education_end_date').val(response.end_date);
                            $('#edit_university_name').val(response.compus);
                            if(response.attachment != ''){
                                $('.editEducationalAttachment').attr('href', '/storage/attachment/employee/educational_document/' + response.attachment);
                                $('.editEducationalAttachment').text(response.attachment);
                                $('.editEducationalAttachmentDiv').show();
                            } else {
                                $('.editEducationalAttachment').attr('href', '');
                                $('.editEducationalAttachment').text('');
                                $('.editEducationalAttachmentDiv').hide();
                            }
                            $('#edit-educational-record-modal').modal('show');

                        } else {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.name);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                        console.error(error);
                    }
                });

            });

            $(document).on("click", ".editWorkExperience", function(){
                var id = $(this).attr('data-id');
                $('#edit_workexperience_id').val(id);

                $.ajax({
                    url: "{{ route('fetchWorkExperience') }}",
                    method: "GET",
                    data: {
                        id: id
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        // Handle the success response
                        if(response != ''){
                            $('#edit_workexperience_position').val(response.position);
                            $('#edit_workexperience_organization').val(response.organization);
                            $('#edit_workexperience_start_date').val(response.start_date);
                            $('#edit_workexperience_end_date').val(response.end_date);
                            if(response.attachment != ''){
                                $('.editWorkAttachment').attr('href', '/storage/attachment/employee/workexperience_document/' + response.attachment);
                                $('.editWorkAttachment').text(response.attachment);
                                $('.editWorkAttachmentDiv').show();
                            } else {
                                $('.editWorkAttachment').attr('href', '');
                                $('.editWorkAttachment').text('');
                                $('.editWorkAttachmentDiv').hide();
                            }
                            $('#edit-work-experience-modal').modal('show');

                        } else {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.name);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                        console.error(error);
                    }
                });

            });

            $(document).on('submit', '#editEmployeeForm', function(e) {
                e.preventDefault();
                var id = $('#edit_employee_id').val();
                if(!validateForm('editEmployeeForm')){
                    return false;
                }

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Go back one step in the browser history
                                window.history.back();

                                // Refresh the current page
                                window.location.reload();
                            }, 3000); // 3 seconds in milliseconds (1000 milliseconds = 1 second)
                            // Handle success response
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });

            });

            $(document).on('submit', '#addEducationalRecordForm', function(e) {
                e.preventDefault();
                employee_id = lastUrlSegment();

                if(!validateForm('addEducationalRecordForm')){
                    return false;
                }

                $('#add_educational_record_id').val(employee_id);

                var start_date = $('#add_education_start_date').val();
                var end_date = $('#add_education_end_date').val();

                var start_dateSize = moment(start_date, 'iYYYY-iMM-iDD');
                var end_dateSize = moment(end_date, 'iYYYY-iMM-iDD');

                if (end_dateSize.isBefore(start_dateSize)) {
                    $('#editEduEndDate_smaller').show();
                    return false;
                } else {
                    $('#editEduEndDate_smaller').hide();
                }

                var formData = new FormData(this);
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            $("#addEducationalRecordForm")[0].reset();
                            $('#add-educational-record-modal').modal('hide');
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewEmployee", ["id" => "__id__"]) }}'.replace('__id__', employee_id);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            console.log(response);
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options = {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });


            });

            $(document).on('submit', '#editEducationalRecordForm', function(e) {
                e.preventDefault();
                if(!validateForm('editEducationalRecordForm')){
                    return false;
                }

                var id = $('#edit_educational_record_id').val();
                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Refresh the current page
                                window.location.reload();
                            }, 2000); // 3 seconds in milliseconds (1000 milliseconds = 1 second)
                            // Handle success response
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });

            });

            $(document).on('submit', '#addWorkExperienceForm', function(e) {
                e.preventDefault();
                employee_id = lastUrlSegment();
                if(!validateForm('addWorkExperienceForm')){
                    return false;
                }

                $('#add_work_experience_id').val(employee_id);

                var start_date = $('#add_workexperience_start_date').val();
                var end_date = $('#add_workexperience_end_date').val();

                var start_dateSize = moment(start_date, 'iYYYY-iMM-iDD');
                var end_dateSize = moment(end_date, 'iYYYY-iMM-iDD');

                if (end_dateSize.isBefore(start_dateSize)) {
                    $('#editWorkExperienceDate_smaller').show();
                    return false;
                } else {
                    $('#editWorkExperienceDate_smaller').hide();
                }

                var formData = new FormData(this);
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            $("#addWorkExperienceForm")[0].reset();
                            $('#add-work-experience-modal').modal('hide');
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewEmployee", ["id" => "__id__"]) }}'.replace('__id__', employee_id);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in millisecond
                        } else {
                            console.log(response);
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options = {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });


            });

            $(document).on('submit', '#editWorkExperienceForm', function(e) {
                e.preventDefault();
                if(!validateForm('editWorkExperienceForm')){
                    return false;
                }

                var id = $('#edit_workexperience_id').val();
                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Refresh the current page
                                window.location.reload();
                            }, 2000); // 3 seconds in milliseconds (1000 milliseconds = 1 second)
                            // Handle success response
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });

            });

            $(document).on('change', '#edit_employee_main_country', function(e) {
                var access_token = $("#access_token").val();
                var country = $("#edit_employee_main_country option:selected").val();
                var main_province = "{{ $employee->main_province }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getProvinces')}}",
                    data: {
                        access_token: access_token,
                        country: country,
                        province: main_province
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_main_province').html(result.content);
                        $('#edit_employee_main_province').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_main_province').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_main_province', function(e) {
                var access_token = $("#access_token").val();
                var province = $("#edit_employee_main_province option:selected").val();
                var main_district = "{{ $employee->main_district }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDistricts')}}",
                    data: {
                        access_token: access_token,
                        province: province,
                        district: main_district
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_main_district').html(result.content);
                        $('#edit_employee_main_district').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_main_district').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_main_district', function(e) {
                var access_token = $("#access_token").val();
                var district = $("#edit_employee_main_district option:selected").val();
                var main_village = "{{ $employee->main_village }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getVillages')}}",
                    data: {
                        access_token: access_token,
                        district: district,
                        village: main_village
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        console.log(result.content);

                        $('#edit_employee_main_village').html(result.content);
                        $('#edit_employee_main_village').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_main_village').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_current_country', function(e) {
                var access_token = $("#access_token").val();
                var country = $("#edit_employee_current_country option:selected").val();
                var current_province = "{{ $employee->current_province }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getProvinces')}}",
                    data: {
                        access_token: access_token,
                        country: country,
                        province: current_province
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_current_province').html(result.content);
                        $('#edit_employee_current_province').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_current_province').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_current_province', function(e) {
                var access_token = $("#access_token").val();
                var province = $("#edit_employee_current_province option:selected").val();
                var current_district = "{{ $employee->current_district }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDistricts')}}",
                    data: {
                        access_token: access_token,
                        province: province,
                        district: current_district
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_current_district').html(result.content);
                        $('#edit_employee_current_district').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_current_district').html(errors);
                    }
                });
            });

            $(document).on('change', '#edit_employee_current_district', function(e) {
                var access_token = $("#access_token").val();
                var district = $("#edit_employee_current_district option:selected").val();
                var current_village = "{{ $employee->current_village }}";

                $.ajax({
                    type: "GET",
                    url: "{{ route('getVillages')}}",
                    data: {
                        access_token: access_token,
                        district: district,
                        village: current_village
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#edit_employee_current_village').html(result.content);
                        $('#edit_employee_current_village').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#edit_employee_current_village').html(errors);
                    }
                });
            });

            $('.print-btn').on('click', function () {
                var printContent = $('#newPrint').clone(); // clone only the card-body
                var originalContent = $('body').html(); // store original page content

                $('body').html(printContent); // replace body with just the print content
                window.print(); // trigger print
                // $('body').html(originalContent); // restore original content after print
                window.location.reload();
            });

            // Delete Event
            $(document).on("click", ".deleteBtn", function() {
                employee_id = lastUrlSegment();
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var itemId = $(this).attr('data-id');
                var originalRoute = $(this).attr('data-url');

                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/employee/' + newRoute;

                // Show the confirmation modal
                $("#confirmModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { itemId: itemId },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#confirmModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                    // Construct the URL using a template literal
                                    var redirectUrl = '{{ route("viewEmployee", ["id" => "__id__"]) }}'.replace('__id__', employee_id);
                                    window.location.href = redirectUrl;
                                }, 2000); // 2 seconds in millisecond
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#confirmModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

        });

        function toggleCheckboxState(checkbox) {
            checkbox.value = checkbox.checked ? "1" : "0";
            if (checkbox.checked) {
                checkbox.setAttribute("checked", "");
            } else {
                checkbox.removeAttribute("checked");
            }
        }


    </script>
@endsection