@extends('layouts.applicant')

@section('nav-links')
@include('imports.p-nav-links',['navItem'=> 'profile'])
@endsection

@section('contents')
<section>
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-full lg:py-5">

        <h4 class="text-2xl font-bold dark:text-white italic"><i class="fa-solid fa-address-card"></i> Applicant Profile Summary</h4>
        <p class="mt-1 text-sm font-medium italic mb-3 text-gray-700 dark:text-gray-300"><i class="fa-solid fa-star-of-life"></i> Marked fields are mendatory fields.</p>

        @if($errors->any())
        <p class="p-2 mb-2 border border-red-300 rounded-md text-sm text-center text-red-600 dark:text-red-500">
            <span class="font-medium">Oops!</span> There are some problems with your input. Please check below {{ $errors->count() }} message(s).
            <br />
            <span class="font-medium bn_font">দুঃখিত! আপনার দেয়া তথ্যে সমস্যা পাওয়া গিয়েছে। নিচের চিহ্নিত মেসেজ গুলো চেক করুন।</span>
        </p>
        @endif

        @if(Session::has('success'))
        <div id="alert-profile-update" class="p-4 mb-4 text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800" role="alert">
            <div class="flex items-center">
                <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                </svg>
                <span class="sr-only">Info</span>
                <h3 class="text-lg font-medium">Profile is updated successfully!</h3>
            </div>
            <div class="mt-2 mb-4 text-sm font-medium">
                You can now preview your profile or directly apply to the circular.
            </div>
            <div class="flex">
                <button type="button" data-modal-target="prev-modal" data-modal-toggle="prev-modal" class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
                        <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>
                    </svg>
                    Preview Profile
                </button>

                <a href="{{route('apply.circulars')}}" class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    Apply Circular
                </a>

                @php
                    Session::forget('success');
                @endphp

                <button type="button" class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800" data-dismiss-target="#alert-profile-update" aria-label="Close">
                Dismiss
                </button>
            </div>
        </div>
        @elseif(Session::has('failed'))
        <div id="alert-0" class="w-full sm:w-2/5 flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-300 dark:bg-gray-800 dark:text-red-400" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <div class="ms-3 text-sm font-medium">
                <p>{{Session::get('failed')}}</p>
                @php
                Session::forget('failed');
                @endphp
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-0" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
        @endif

        <div class="w-full bg-white rounded-lg shadow-2xl dark:border md:mt-0 sm:max-w-5xl xl:p-0 dark:bg-gray-800 dark:border-gray-700">
            <div class="p-6 space-y-4 md:space-y-4 sm:p-8">
                <form class="space-y-3 md:space-y-5 grid gap-2 sm:grid-cols-2" action="{{ route('update.profiles') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div>
                        <label for="fullname" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name*</label>
                        <input type="text" name="fullname" id="fullname" value="{{$data->name}}" class="bg-gray-200 border border-gray-300 text-gray-900 sm:text-sm font-medium rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled>
                    </div>

                    <!-- Profile-Pic -->
                    <div class="w-full flex items-start gap-2">
                        <img id="avatar-preview" class="w-24 h-24 rounded-sm border" src="{{route('show.pro-pic', ['filename' => $data->pro_pic])}}" alt="profile-avatar">
                        <div class="flex-1">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="pro_pic">Change Profile Image</label>
                            <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="pro_pic_help" id="pro_pic" name="pro_pic" type="file" accept="image/*">
                            <p class="mt-1 text-sm font-medium italic text-gray-500 dark:text-gray-300" id="pro_pic_help">Image(jpeg,jpg,png) size must be 300x300. <a href="https://resizepic.com" target="_blank" class="font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline">Image Resize!</a></p>
                            @error('pro_pic')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email*</label>
                        <input type="email" name="email" id="email" value="{{$data->email}}" class="bg-gray-200 border border-gray-300 text-gray-900 sm:text-sm font-medium rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled>
                    </div>

                    <div>
                        <label for="name_bn" class="bn_font block mb-2 text-sm font-semibold text-gray-900 dark:text-white">নাম (বাংলায়)*</label>
                        <input type="text" name="name_bn" id="name_bn" value="{{$data->name_bn}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="255" pattern="[\u0980-\u09FF\u200C\u200D\s\.\:\-\(\)\,]+" title="অনুগ্রহ করে বাংলা অক্ষর এবং অনুমোদিত চিহ্ন ব্যবহার করুন (.,-:())" placeholder="" required="">
                        @error('name_bn')
                            <p class="mt-2 text-sm bn_font text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="father" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Father's Name*</label>
                        <input type="text" name="father" id="father" value="{{$data->father}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="55" pattern="[A-Za-z.\-\(\)]+(?: [A-Za-z.\-\(\)]+)*" title="English letters, dots, hyphens and parentheses allowed. No double/extra spaces allowed." placeholder="" required="">
                        @error('father')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="father_bn" class="bn_font block mb-2 text-sm font-semibold text-gray-900 dark:text-white">পিতার নাম (বাংলায়)*</label>
                        <input type="text" name="father_bn" id="father_bn" value="{{$data->father_bn}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="255" pattern="[\u0980-\u09FF\u200C\u200D\s\.\:\-\(\)\,]+" title="অনুগ্রহ করে বাংলা অক্ষর এবং অনুমোদিত চিহ্ন ব্যবহার করুন (.,-:())" placeholder="" required="">
                        @error('father_bn')
                            <p class="mt-2 text-sm bn_font text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="mother" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mother's Name*</label>
                        <input type="text" name="mother" id="mother" value="{{$data->mother}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="55" pattern="[A-Za-z.\-\(\)]+(?: [A-Za-z.\-\(\)]+)*" title="English letters, dots, hyphens and parentheses allowed. No double/extra spaces allowed" placeholder="" required="">
                        @error('mother')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="mother_bn" class="bn_font block mb-2 text-sm font-semibold text-gray-900 dark:text-white">মাতার নাম (বাংলায়)*</label>
                        <input type="text" name="mother_bn" id="mother_bn" value="{{$data->mother_bn}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="255" pattern="[\u0980-\u09FF\u200C\u200D\s\.\:\-\(\)\,]+" title="অনুগ্রহ করে বাংলা অক্ষর এবং অনুমোদিত চিহ্ন ব্যবহার করুন (.,-:())" placeholder="" required="">
                        @error('mother_bn')
                            <p class="mt-2 text-sm bn_font text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex flex-row gap-1">
                        <div class="w-1/2">
                            <label for="mobile" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mobile*</label>
                            <input type="text" name="mobile" id="mobile" value="{{$data->mobile}}" pattern="01[3-9][0-9]{8}" title="Please enter a valid 11-digit mobile number starting with 01. No spaces allowed." minlength="11" maxlength="13" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="01xxxxxxxxx" required="">
                            @error('mobile')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>

                        <div class="w-1/2">
                            <label for="guardian_mobile" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Guardian's Mobile*</label>
                            <input type="text" name="guardian_mobile" id="guardian_mobile" value="{{$data->guardian_mobile}}" pattern="01[3-9][0-9]{8}" title="Please enter a valid 11-digit mobile number starting with 01. No spaces allowed." minlength="11" maxlength="13" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="01xxxxxxxxx" required="">
                            @error('guardian_mobile')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Gender -->
                    <div>
                        <label for="gender" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Gender*</label>

                        <ul id="gender" class="items-center w-full text-sm font-medium text-gray-900 bg-gray-50 border border-gray-300 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="gender-1" type="radio" value="1" name="gender_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->gender == 1 ? 'checked' : ''}}>
                                    <label for="gender-1" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Male<i class="fa-solid fa-person fa-lg ms-2"></i></label>
                                </div>
                            </li>
                            <li class="w-full dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="gender-2" type="radio" value="2" name="gender_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->gender == 2 ? 'checked' : ''}}>
                                    <label for="gender-2" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Female<i class="fa-solid fa-person-dress fa-lg ms-2"></i></label>
                                </div>
                            </li>
                        </ul>
                        @error('gender_status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Marital Status -->
                    <div>
                        <label for="marital" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Marital Status*</label>

                        <ul id="marital" class="items-center w-full text-sm font-medium text-gray-900 bg-gray-50 border border-gray-300 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="marital-1" type="radio" value="1" name="marital_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->marital_status == 1 ? 'checked' : ''}}>
                                    <label for="marital-1" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Single</label>
                                </div>
                            </li>
                            <li class="w-full dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="marital-2" type="radio" value="2" name="marital_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->marital_status == 2 ? 'checked' : ''}}>
                                    <label for="marital-2" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Married</label>
                                </div>
                            </li>
                        </ul>
                        @error('marital_status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Freedom-Fighter-Quota -->
                    <div>
                        <label for="ff-quota" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Quota for Freedom Fighter*</label>

                        <ul id="ff-quota" class="items-center w-full text-sm font-medium text-gray-900 bg-gray-50 border border-gray-300 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="ff-quota-1" type="radio" value="1" name="ffquota_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->ffquota == 1 ? 'checked' : ''}}>
                                    <label for="ff-quota-1" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Yes<i class="fa-solid fa-check ms-2"></i></label>
                                </div>
                            </li>
                            <li class="w-full dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="ff-quota-2" type="radio" value="0" name="ffquota_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->ffquota == 0 ? 'checked' : ''}}>
                                    <label for="ff-quota-2" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">No<i class="fa-solid fa-x ms-2"></i></label>
                                </div>
                            </li>
                        </ul>
                        @error('ffquota_status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Nationality -->
                    <div>
                        <label for="nationality" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nationality*</label>
                        <!-- <input type="text" name="nationality" id="nationality" value="{{$data->nationality}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" maxlength="25" placeholder="" required=""> -->
                        <select id="nationality" name="nationality" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                            <option value="" disabled>Select Nationality</option>
                            <option value="Bangladeshi" selected>Bangladeshi</option>
                        </select>
                        @error('nationality')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Religion -->
                    <div>
                        <label for="religion" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Religion*</label>
                        <!-- <input type="text" name="religion" id="religion" value="{{$data->religion}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" maxlength="25" placeholder="" required=""> -->
                        <select id="religion" name="religion" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                            <option value="" disabled>Select Religion</option>
                            <option value="Islam" {{$data->religion == "Islam" ? 'selected' : ''}}>Islam</option>
                            <option value="Hindu" {{$data->religion == "Hindu" ? 'selected' : ''}}>Hindu</option>
                            <option value="Christian" {{$data->religion == "Christian" ? 'selected' : ''}}>Christian</option>
                            <option value="Buddhism" {{$data->religion == "Buddhism" ? 'selected' : ''}}>Buddhism</option>
                            <option value="N/A" {{$data->religion == "N/A" ? 'selected' : ''}}>N/A</option>
                        </select>
                        @error('religion')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Identity Info -->
                    <div class="sm:col-span-2">
                        <label for="national-id-info" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">National/Personal Identity*</label>
                        <div id="national-id-info" class="flex flex-row gap-1">
                            <div class="w-1/4">
                                <select id="id_type" name="id_type" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>*ID Type</option>
                                    <option value="1" {{$id_info->id_type == 1 ? 'selected' : ''}}>Birth Registration</option>
                                    <option value="2" {{$id_info->id_type == 2 ? 'selected' : ''}}>Passport</option>
                                    <option value="3" {{$id_info->id_type == 3 ? 'selected' : ''}}>National NID</option>
                                    <option value="4" {{$id_info->id_type == 4 ? 'selected' : ''}}>Smart Card</option>
                                    <!-- <option value="5">Driving License</option> -->
                                </select>
                                @error('id_type')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-2/4">
                                <input type="text" name="id_no" id="id_no" value="{{$id_info->id_no}}" pattern="[a-zA-Z0-9]+" title="English letters and digits allowed. No spaces allowed." class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="*ID Number" minlength="5" maxlength="22" required>
                                @error('id_no')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/4">
                                <div id="dob" class="relative w-full">
                                    <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                        </svg>
                                    </div>
                                    <input id="dob_picker" name="dob" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$data->dob}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="*Date of Birth" required autocomplete="off">
                                </div>

                                <p id="dob_dt_err" class="text-sm text-red-600 underline text-justify dark:text-white"></p>
                                @error('dob')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Permanent-Address Info -->
                    <div class="sm:col-span-2">
                        <label for="permanent-addr-info" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Permanent Address*</label>
                        <div id="permanent-addr-info" class="flex flex-row gap-1">
                            <div class="w-1/6">
                                <select id="division" name="division" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* Division</option>
                                    <option value="6">Dhaka</option>
                                    <option value="1">Chattagram</option>
                                    <option value="2">Rajshahi</option>
                                    <option value="3">Khulna</option>
                                    <option value="5">Sylhet</option>
                                    <option value="4">Barisal</option>
                                    <option value="7">Rangpur</option>
                                    <option value="8">Mymensingh</option>
                                </select>
                                @error('division')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <select id="district" name="district" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* District</option>
                                </select>
                                @error('district')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <select id="upozilla" name="upozilla" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* Upozilla</option>
                                </select>
                                @error('upozilla')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <input type="text" name="postal_code" id="postal_code" value="{{$address->postal_code}}" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="* Postal Code" minlength="3" maxlength="5" required="Please enter only numbers. No spaces allowed.">
                                @error('postal_code')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-2/6">
                                <input type="text" name="permanent_addr" id="permanent_addr" value="{{$address->permanent_addr}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="*Address Details" minlength="7" maxlength="120" pattern="[A-Za-z0-9\.,\-\/#\(\)&]+(?: [A-Za-z0-9\.,\-\/#\(\)&]+)*" title="Letters, numbers, spaces and . , - / # () & allowed. No double/extra spaces allowed." required="">
                                @error('permanent_addr')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Present-Address Info -->
                    <div class="sm:col-span-2">
                        <label for="present-addr-info" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Present Address*</label>
                        <div id="present-addr-info" class="flex flex-row gap-1">
                            <div class="w-1/6">
                                <select id="p_division" name="p_division" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* Division</option>
                                    <option value="6">Dhaka</option>
                                    <option value="1">Chattagram</option>
                                    <option value="2">Rajshahi</option>
                                    <option value="3">Khulna</option>
                                    <option value="5">Sylhet</option>
                                    <option value="4">Barisal</option>
                                    <option value="7">Rangpur</option>
                                    <option value="8">Mymensingh</option>
                                </select>
                                @error('p_division')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <select id="p_district" name="p_district" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* District</option>
                                </select>
                                @error('p_district')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <select id="p_upozilla" name="p_upozilla" class="bg-gray-50 border border-gray-300 text-gray-900 mb-2 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                    <option value="" disabled selected>* Upozilla</option>
                                </select>
                                @error('p_upozilla')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-1/6">
                                <input type="text" name="p_postal_code" id="p_postal_code" value="{{$address->p_postal_code}}" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="* Postal Code" minlength="3" maxlength="5" required="Please enter only numbers. No spaces allowed.">
                                @error('p_postal_code')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-2/6">
                                <input type="text" name="present_addr" id="present_addr" value="{{$address->current_addr}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="*Address Details" minlength="7" maxlength="120" pattern="[A-Za-z0-9\.,\-\/#\(\)&]+(?: [A-Za-z0-9\.,\-\/#\(\)&]+)*" title="Letters, numbers, spaces and . , - / # () & allowed." required="">
                                @error('present_addr')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Bn-addresses -->
                    <div>
                        <label for="permanent_address_bn" class="bn_font block mb-2 text-sm font-semibold text-gray-900 dark:text-white">স্থায়ী ঠিকানা (বাংলায়)*</label>
                        <input type="text" name="permanent_address_bn" id="permanent_address_bn" value="{{$address->permanent_addr_bn}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" maxlength="500" pattern="[\u0980-\u09FF\u200C\u200D\s\.\,\/\-\#\:\(\)&]+" title="অনুগ্রহ করে বাংলা অক্ষর এবং অনুমোদিত চিহ্ন ব্যবহার করুন (.,/-#&:())" placeholder="" required="">
                        @error('permanent_address_bn')
                            <p class="mt-2 text-sm bn_font text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="present_address_bn" class="bn_font block mb-2 text-sm font-semibold text-gray-900 dark:text-white">বর্তমান ঠিকানা (বাংলায়)*</label>
                        <input type="text" name="present_address_bn" id="present_address_bn" value="{{$address->current_addr_bn}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" maxlength="500" pattern="[\u0980-\u09FF\u200C\u200D\s\.\,\/\-\#\:\(\)&]+" title="অনুগ্রহ করে বাংলা অক্ষর এবং অনুমোদিত চিহ্ন ব্যবহার করুন (.,/-#:())" placeholder="" required="">
                        @error('present_address_bn')
                            <p class="mt-2 text-sm bn_font text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Edu-Info -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="edu-info" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">Education Info*</label>

                            <button id="add_edu" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="edu-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Examination-Name
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Passing-Year
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Result
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Institute
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Board/University
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Major/Dept.
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body">
                                @foreach($educations as $index => $edu)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <select id="exam-info" name="exm[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled selected>Choose Your Degree</option>
                                            <option value="ssc" {{$edu->exam_name == "ssc" ? 'selected' : ''}}>SSC/Equivalent</option>
                                            <option value="dip" {{$edu->exam_name == "dip" ? 'selected' : ''}}>Diploma</option>
                                            <option value="hsc" {{$edu->exam_name == "hsc" ? 'selected' : ''}}>HSC/Equivalent</option>
                                            <option value="ug" {{$edu->exam_name == "ug" ? 'selected' : ''}}>Undergraduate</option>
                                            <option value="msc" {{$edu->exam_name == "msc" ? 'selected' : ''}}>Postgraduate</option>
                                            <option value="phd" {{$edu->exam_name == "phd" ? 'selected' : ''}}>PhD</option>
                                            <option value="pgd" {{$edu->exam_name == "pgd" ? 'selected' : ''}}>PGD (Post Graduate Diploma)</option>
                                        </select>
                                        <input type="hidden" name="e_sl[]" value="{{ $edu->id }}">
                                    </th>

                                    <td class="px-1 py-2">
                                        <input type="text" id="pass-yr" name="passYr[]" value="{{$edu->passed}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. 2003" minlength="4" maxlength="4" pattern="(19|20)[0-9]{2}" title="Only vaid years allowed. No spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" id="result" name="result[]" value="{{$edu->result}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. 3.50" maxlength="25" pattern="[A-Za-z0-9\.,\-\/\(\)]+(?: [A-Za-z0-9\.,\-\/\(\)]+)*" title="Letters, numbers and . , - / () allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" id="inst" name="inst[]" value="{{$edu->inst}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" id="board" name="board[]" value="{{$edu->board}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Rajshahi/RUET" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" id="major" name="major[]" value="{{$edu->major}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Science/CSE" minlength="3" maxlength="40" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed.  No double/extra spaces allowed." required />
                                    </td>

                                    @if($index)
                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('exm.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('passYr.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('result.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('inst.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('board.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('major.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Spec-Info -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="spec-info" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">Field of specialization <span class="text-xs">(as per preferrence - max 5)</span></label>

                            <button id="add_spec" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="spec-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        Sl.
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-8/12">
                                        Specialization Details
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-spec">
                                @foreach($specializations as $spec)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="px-1 py-2 text-center w-1/12">
                                        {{ $loop->iteration }})
                                    </td>
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                                        <input type="text" id="specs" name="spec[]" value="{{$spec->specialization}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="100" pattern="[A-Za-z0-9\.,\-\(\)&]+(?: [A-Za-z0-9\.,\-\(\)&]+)*" title="Letters, numbers, spaces and . , - () & allowed. No double/extra spaces allowed." required />

                                        <input type="hidden" name="s_sl[]" value="{{ $spec->id }}">
                                    </th>

                                    <td class="px-1 py-2 text-center w-1/12">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-spec"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('spec.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Emp-Info -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="emp-info" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">General Employment Info<br><span class="text-xs font-bold italic">(If job is running, select application's end date in [To])</span></label>

                            <button id="add_emp" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="emp-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Position
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Organization
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Current Pay Scale & Grade
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        From
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        To
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Total Period
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Nature of Job
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-emp">
                                @foreach($employments as $emp)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <input type="text" name="position[]" value="{{$emp->position}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </th>

                                    <td class="px-1 py-2">
                                        <input type="text" name="org[]" value="{{$emp->org}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" id="pay_scale" name="pay_scale[]" value="{{$emp->pay_scale}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - ( ) allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="from[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$emp->emp_from}}" class="from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                        <input type="hidden" name="em_sl[]" value="{{$emp->id}}">
                                    </td>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="to[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$emp->emp_to}}" class="to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="total_period[]" value="{{$emp->period}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <select name="job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled>Select Job Type</option>
                                            <option value="Fulltime" {{$emp->job_type == "Fulltime" ? 'selected' : ''}}>Fulltime</option>
                                            <option value="Partime" {{$emp->job_type == "Partime" ? 'selected' : ''}}>Partime</option>
                                            <option value="Contractual" {{$emp->job_type == "Contractual" ? 'selected' : ''}}>Contractual</option>
                                            <option value="Others" {{$emp->job_type == "Others" ? 'selected' : ''}}>Others</option>
                                        </select>
                                    </td>

                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-emp"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('from.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('to.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('position.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('org.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('pay_scale.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('total_period.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('job_type.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Case-file -->
                    <div>
                        <label for="label-case-info" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white">Whether any departmental case is currently pending against the applicant / whether any minor or major disciplinary punishment has been imposed during service <span class="bn_font">(বর্তমানে আবেদনকারীর বিরুদ্ধে কোন বিভাগীয় মামলা চলছে কিনা / চাকুরীকালে কোন লঘু বা গুরু দণ্ড হয়েছে কিনা)</span>*</label>
                    </div>

                    <div>
                        <ul id="case-file" class="items-center w-full text-sm font-medium text-gray-900 bg-gray-50 border border-gray-300 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="case-file-1" type="radio" value="1" name="case_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->case_file == 1 ? 'checked' : ''}}>
                                    <label for="case-file-1" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Yes<i class="fa-solid fa-check ms-2"></i></label>
                                </div>
                            </li>
                            <li class="w-full dark:border-gray-600">
                                <div class="flex items-center ps-3">
                                    <input id="case-file-2" type="radio" value="0" name="case_status" class="w-4 h-4 text-blue-600 bg-gray-300 border-gray-400 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required {{$data->case_file == 0 ? 'checked' : ''}}>
                                    <label for="case-file-2" class="w-full py-2.5 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">No<i class="fa-solid fa-x ms-2"></i></label>
                                </div>
                            </li>
                        </ul>
                        @error('case_status')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Research & Publications -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="research-info" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">Research and Publications</label>

                            <button id="add_research" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="research-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-sm text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Publication Time
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Publication Type
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Author Position
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center hidden">
                                        Count
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-research">
                                @foreach($publications as $publication)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="pub_times[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$publication->pub_time}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                        <input type="hidden" name="pub_sl[]" value="{{$publication->id}}">
                                    </th>

                                    <td class="px-1 py-2">
                                        <select id="publication-type" name="pub_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled selected>Publication Type</option>
                                            <option value="100" {{$publication->pub_type == 100 ? 'selected' : ''}}>Journal</option>
                                            <option value="101" {{$publication->pub_type == 101 ? 'selected' : ''}}>Conference</option>
                                            <option value="102" {{$publication->pub_type == 102 ? 'selected' : ''}}>Book Chapter</option>
                                            <option value="103" {{$publication->pub_type == 103 ? 'selected' : ''}}>Patent</option>
                                        </select>
                                    </td>

                                    <td class="px-1 py-2">
                                        <!-- <input type="number" id="positions" name="w_position[]" value="{{$publication->position}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> -->
                                         <select name="w_position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled>Select Author Position</option>
                                            @for ($i = 1; $i <= 6; $i++)
                                                <option value="{{$i}}" {{$publication->position == $i ? 'selected' : ''}}>{{ $i }}{{ $i == 1 ? 'st' : ($i == 2 ? 'nd' : ($i == 3 ? 'rd' : 'th')) }} Author</option>
                                            @endfor
                                        </select>
                                    </td>

                                    <td class="px-1 py-2 hidden">
                                        <input type="number" id="counts" name="counts[]" value="{{$publication->counts}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
                                    </td>

                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-research"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('pub_times.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('pub_type.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('w_position.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('counts.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Training-Info -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="traning-info" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">Training in the country or abroad</label>

                            <button id="add_training" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="traning-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-sm text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        From
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        To
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Organization
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Training Title
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Duration
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-training">
                                @foreach($trainings as $training)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="traning_from[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$training->training_from}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                        <input type="hidden" name="training_sl[]" value="{{$training->id}}">
                                    </th>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="traning_to[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$training->training_to}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="traning_org[]" value="{{$training->org}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="75" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="traning_titles[]" value="{{$training->title}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="10" maxlength="120" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="traning_duration[]" value="{{$training->duration}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-traning"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('traning_from.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('traning_to.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('traning_org.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('traning_titles.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('traning_duration.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Employment-Teachers -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <label for="label-case-info" class="block text-md font-semibold text-gray-900 dark:text-white">Applicable only for recruitment to teacher positions<span class="bn_font">(শুধুমাত্র শিক্ষক পদসমুহে নিয়োগের জন্য প্রযোজ্য)</span></label>
                        <div class="mt-1 flex justify-between items-center">
                            <label for="teachers-emp-info" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Total experience in teaching role<span class="bn_font"> (শিক্ষকতা পদে অভিজ্ঞতা)</span><br><span class="ml-5 text-xs font-bold italic">(If job is running, select application's end date in [To])</span></label>

                            <button id="add_emp_teachers" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="teachers-emp-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Position
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Organization
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Current Pay Scale & Grade
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        From
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        To
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Total Period
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Nature of Job
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-emp-teacher">
                                @foreach($teach_employments as $emp)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <!-- <input type="text" name="t_position[]" value="{{$emp->position}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)]+(?: [A-Za-z0-9\.,\-\('\)]+)*" title="Letters, numbers, spaces and . , - ' () allowed. No double/extra spaces allowed." required /> -->
                                        <select name="t_position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled>Select Post</option>
                                            <option value="Lecturer" {{$emp->position == "Lecturer" ? 'selected' : ''}}>Lecturer</option>
                                            <option value="Assistant Professor" {{$emp->position == "Assistant Professor" ? 'selected' : ''}}>Assistant Professor</option>
                                            <option value="Associate Professor" {{$emp->position == "Associate Professor" ? 'selected' : ''}}>Associate Professor</option>
                                            <option value="Professor" {{$emp->position == "Professor" ? 'selected' : ''}}>Professor</option>
                                        </select>
                                    </th>

                                    <td class="px-1 py-2">
                                        <input type="text" name="t_org[]" value="{{$emp->org}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="t_pay_scale[]" value="{{$emp->pay_scale}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="2" maxlength="35" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed. No double/extra spaces allowed." required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="t_from[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$emp->emp_from}}" class="t_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                        <input type="hidden" name="em_t_sl[]" value="{{$emp->id}}">
                                    </td>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="t_to[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$emp->emp_to}}" class="t_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="t_total_period[]" value="{{$emp->period}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                                    </td>

                                    <td class="px-1 py-2">
                                        <select name="t_job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled>Select Job Type</option>
                                            <option value="Fulltime" {{$emp->job_type == "Fulltime" ? 'selected' : ''}}>Fulltime</option>
                                            <option value="Partime" {{$emp->job_type == "Partime" ? 'selected' : ''}}>Partime</option>
                                            <option value="Contractual" {{$emp->job_type == "Contractual" ? 'selected' : ''}}>Contractual</option>
                                            <option value="Others" {{$emp->job_type == "Others" ? 'selected' : ''}}>Others</option>
                                        </select>
                                    </td>

                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-t-emp"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('t_from.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_to.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_position.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_org.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_pay_scale.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_total_period.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('t_job_type.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Education-Leave Info -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="teachers-leave-info" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Education Leave Information<span class="bn_font"> (শিক্ষাজনীত ছুটির বিবরণ)</span></label>

                            <button id="add_teachers_leave_info" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="teachers-leave-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Leave Purpose
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        From
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        To
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        Total Period
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-edu-leave">
                                @foreach($edu_leave as $leave)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                        <select name="leave_reasons[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                            <option value="" disabled>Select Purpose</option>
                                            @foreach($leave_purposes as $reason)
                                                <option value="{{$reason->id}}" {{$leave->purpose == $reason->id ? 'selected' : ''}}>{{$reason->purpose}}</option>
                                            @endforeach
                                        </select>
                                    </th>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="leave_from[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$leave->leave_from}}" class="eduleave_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                        <input type="hidden" name="sl_edu_leave[]" value="{{$leave->id}}">
                                    </td>

                                    <td class="px-1 py-2">
                                        <div class="relative w-full">
                                            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                                </svg>
                                            </div>
                                            <input name="leave_to[]" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy" type="text" value="{{$leave->leave_to}}" class="eduleave_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                                        </div>
                                    </td>

                                    <td class="px-1 py-2">
                                        <input type="text" name="leave_period[]" value="{{$leave->period}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                                    </td>

                                    <td class="px-1 py-2 text-center">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-edu-leave"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('leave_reasons.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('leave_from.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('leave_to.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('leave_period.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Subject-taken -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <label for="subjects-taken-info" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Teaching Areas in Undergraduation/Post Graduation<span class="bn_font"> (স্নাতক ও স্নাতকোত্তর পর্যায়ে যে সকল বিষয় পাঠদান করা হয়েছে)</span></label>
                        <table id="subjects-taken-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center w-1/12">
                                        #
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-11/12">
                                        Subjects separated by commas
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-subjects-taken">
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="font-semibold px-1 py-2 text-center w-1/12">
                                        Undergraduation
                                    </td>
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-11/12">
                                        <input type="text" id="ug_subjects" name="ug_subjects" value="{{$teach_subjects->ug_subjects ?? ''}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="600" placeholder="e.g. Machine Learning, Artifical Intelligence" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." />
                                    </th>
                                </tr>
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="font-semibold px-1 py-2 text-center w-1/12">
                                        Post Graduation
                                    </td>
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-11/12">
                                        <input type="text" id="pg_subjects" name="pg_subjects" value="{{$teach_subjects->pg_subjects ?? ''}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="600" placeholder="e.g. Advanced Networking, Distributed Systems" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." />
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                        @error('ug_subjects')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                        @error('pg_subjects')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Thesis-count -->
                    <div class="sm:col-span-2">
                        <label for="thesis-summary-info" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Thesis Supervision Summary(Count) on UG/PG/PhD Level</label>
                        <div id="thesis-summary-info" class="flex flex-col md:flex-row gap-1">
                            <div class="w-full sm:w-1/3">
                                <div class="flex">
                                    <span class="merriweather-wt inline-flex items-center px-3 text-sm font-bold text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        UG
                                    </span>
                                    @php
                                        $thesis = $thesis_supers->where('level','ug')->first();
                                    @endphp
                                    <input type="number" id="ug_thesis_count" name="ug_thesis_count" class="rounded-none rounded-e-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="1" maxlength="5" placeholder="e.g. 25" value="{{ $thesis ? $thesis->title : '' }}">

                                    <input type="hidden" name="ug_thesis_sl" value="{{ $thesis ? $thesis->id : 0 }}">
                                </div>
                                @error('ug_thesis_count')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>
                        
                            <div class="w-full sm:w-1/3">
                                <div class="flex">
                                    <span class="merriweather-wt inline-flex items-center px-3 text-sm font-bold text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        PG
                                    </span>
                                    @php
                                        $thesis = $thesis_supers->where('level','pg')->first();
                                    @endphp
                                    <input type="number" id="pg_thesis_count" name="pg_thesis_count" class="rounded-none rounded-e-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="1" maxlength="5" placeholder="e.g. 25" value="{{ $thesis ? $thesis->title : '' }}">
                                    <input type="hidden" name="pg_thesis_sl" value="{{ $thesis ? $thesis->id : 0 }}">
                                </div>
                                @error('pg_thesis_count')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>

                            <div class="w-full sm:w-1/3">
                                <div class="flex">
                                    <span class="merriweather-wt inline-flex items-center px-3 text-sm font-bold text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        PhD
                                    </span>
                                    @php
                                        $thesis = $thesis_supers->where('level','phd')->first();
                                    @endphp
                                    <input type="number" id="phd_thesis_count" name="phd_thesis_count" class="rounded-none rounded-e-lg bg-gray-50 border text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="1" maxlength="5" placeholder="e.g. 25" value="{{ $thesis ? $thesis->title : '' }}">
                                    <input type="hidden" name="phd_thesis_sl" value="{{ $thesis ? $thesis->id : 0 }}">
                                </div>
                                @error('phd_thesis_count')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{--
                    <!-- UG-Thesis -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="ug-thesis-info" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Thesis Supervision on Undergraduation Level</label>

                            <button id="add_ug_thesis" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="ug-thesis-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        Sl.
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-8/12">
                                        Thesis Title
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-ug-thesis">
                                @foreach($thesis_supers->where('level','ug') as $thesis)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="px-1 py-2 text-center w-1/12">
                                        {{ $loop->iteration }})
                                    </td>
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                                        <input type="text" id="ug_thesis" name="ug_thesis[]" value="{{$thesis->title}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="200" required />

                                        <input type="hidden" name="ug_thesis_sl[]" value="{{ $thesis->id }}">
                                    </th>

                                    <td class="px-1 py-2 text-center w-1/12">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-ug-thesis"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('ug_thesis.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- PG-Thesis -->
                    <div class="sm:col-span-2 overflow-x-auto">
                        <div class="flex justify-between items-center">
                            <label for="pg-thesis-info" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Thesis Supervision on Post Graduation Level</label>

                            <button id="add_pg_thesis" type="button" class="m-1 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"><i class="fa-solid fa-plus fa-beat"></i> Add</button>
                        </div>
                        <table id="pg-thesis-info" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        Sl.
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-8/12">
                                        Thesis Title
                                    </th>
                                    <th scope="col" class="px-1 py-3 text-center w-2/12">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="tbl-body-pg-thesis">
                                @foreach($thesis_supers->where('level','pg') as $thesis)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="px-1 py-2 text-center w-1/12">
                                        {{ $loop->iteration }})
                                    </td>
                                    <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                                        <input type="text" id="pg_thesis" name="pg_thesis[]" value="{{$thesis->title}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="200" required />
                                        <input type="hidden" name="pg_thesis_sl[]" value="{{ $thesis->id }}">
                                    </th>

                                    <td class="px-1 py-2 text-center w-1/12">
                                        <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-pg-thesis"><i class="fa-solid fa-trash-can"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @error('pg_thesis.*')
                            <p class="mt-2 text-sm text-red-600 text-center dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>
                    --}}

                    <!-- Pro-Society -->
                    <div class="sm:col-span-2">
                        <label for="label-pro-society" class="block mb-2 text-sm font-semibold text-gray-900 dark:text-white"><i class="fa-solid fa-circle ms-1"></i> Member of Professional Society (If any) <span class="bn_font">(পেশাজীবী সমিতির সদস্যপদ - যদি থাকে)</span></label>

                        <textarea id="label-pro-society" name="pro_society" rows="4" class="mt-2 block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Member-IEB(M/42030) | Max 200 characters" maxlength="200" oninput="validateTextarea(this)">{{$data->pro_society}}</textarea>
                        @error('pro_society')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ref-No-1 -->
                    <div class="flex flex-col gap-5">
                        <h5 class="text-xl font-bold underline dark:text-white">Reference-1</h5>

                        <div>
                            <label for="ref1" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name*</label>
                            <input type="text" name="ref1_name" id="ref1" value="{{$refs->ref1_name}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="55" pattern="[A-Za-z\.\-\(\)]+(?: [A-Za-z\.\-\(\)]+)*" title="Letters, spaces and . - () allowed. No double/extra spaces allowed." placeholder="" required="" autocomplete="off">
                            @error('ref1_name')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="ref1_rank" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Designation*</label>
                            <input type="text" name="ref1_rank" id="ref1_rank" value="{{$refs->ref1_rank}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\/\(\)&]+(?: [A-Za-z0-9\.,\-\/\(\)&]+)*" title="Letters, numbers and . , - / () & allowed.  No double/extra spaces allowed." placeholder="" required="">
                            @error('ref1_rank')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="ref1_addr" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Address*</label>
                            <input type="text" name="ref1_addr" id="ref1_addr" value="{{$refs->ref1_addr}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="100" pattern="[A-Za-z0-9\.,\-\/#\(\)&]+(?: [A-Za-z0-9\.,\-\/#\(\)&]+)*" title="Letters, numbers, spaces and . , - / # () & allowed. No double/extra spaces allowed." placeholder="" required="">
                            @error('ref1_addr')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Ref-No-2 -->
                    <div class="flex flex-col gap-5">
                        <h5 class="text-xl font-bold underline dark:text-white">Reference-2</h5>

                        <div>
                            <label for="ref2" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name*</label>
                            <input type="text" name="ref2_name" id="ref2" value="{{$refs->ref2_name}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="3" maxlength="55" pattern="[A-Za-z\.\-\(\)]+(?: [A-Za-z\.\-\(\)]+)*" title="Letters, spaces and . - () allowed.  No double/extra spaces allowed." placeholder="" required="" autocomplete="off">
                            @error('ref2_name')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="ref2_rank" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Designation*</label>
                            <input type="text" name="ref2_rank" id="ref2_rank" value="{{$refs->ref2_rank}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\/\(\)&]+(?: [A-Za-z0-9\.,\-\/\(\)&]+)*" title="Letters, numbers and . , - / () & allowed. No double/extra spaces allowed." placeholder="" required="">
                            @error('ref2_rank')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="ref2_addr" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Address*</label>
                            <input type="text" name="ref2_addr" id="ref2_addr" value="{{$refs->ref2_addr}}" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="100" pattern="[A-Za-z0-9\.,\-\/#\(\)&]+(?: [A-Za-z0-9\.,\-\/#\(\)&]+)*" title="Letters, numbers, spaces and . , - / # () & allowed. No double/extra spaces allowed." placeholder="" required="">
                            @error('ref2_addr')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- file-upload-msg -->
                    <div>
                        <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Upload all required files in a single combined PDF. The combined PDF file should at least contain the following items (Max File Size- 10MB)</h2>
                        <ul class="max-w-md space-y-1 text-gray-500 list-inside dark:text-gray-400">
                            <li class="flex items-center">
                                <svg class="w-3.5 h-3.5 me-2 text-green-500 dark:text-green-400 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                All academic certificates.
                            </li>
                            <li class="flex items-center">
                                <svg class="w-3.5 h-3.5 me-2 text-green-500 dark:text-green-400 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                All Academic Transcripts/Marksheets.
                            </li>
                            <li class="flex items-center">
                                <svg class="w-3.5 h-3.5 me-2 text-gray-500 dark:text-gray-400 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                Migration Certificate.
                            </li>
                            <li class="flex items-center">
                                <svg class="w-3.5 h-3.5 me-2 text-green-500 dark:text-green-400 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                Employer Permission Letter (if employed).
                            </li>
                            <li class="flex items-center">
                                <svg class="w-3.5 h-3.5 me-2 text-green-500 dark:text-green-400 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                Recommndation Letter from 2 Reference.
                            </li>
                        </ul>
                    </div>

                    <!-- file-upload -->
                    <div>
                        <a href="{{route('show.cert', ['filename' => $data->req_doc])}}" target="_blank" class="inline-flex items-center font-medium text-blue-600 mb-5 mt-5 dark:text-blue-500 hover:underline">
                            Check the uploaded Certificates
                            <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>

                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="req_doc">Change Required Docs</label>
                        <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="req_doc_help" id="req_doc" name="req_doc" type="file" accept="application/pdf">
                        <p class="mt-1 text-sm font-medium italic text-gray-500 dark:text-gray-300" id="req_doc_help">File Size Should be Max 10MB.</p>
                        @error('req_doc')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Check Box -->
                    <div class="flex items-center">
                        <div class="flex items-center h-5">
                            <input id="confirm" aria-describedby="confirm" type="checkbox"
                                class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
                                required="">
                        </div>
                        <div class="ml-2 text-sm">
                            <label for="confirm"
                                class="font-semibold text-gray-500 dark:text-gray-300">I confirm that the above information given is correct.
                            </label>
                        </div>
                    </div>

                    <div class="sm:col-span-2 flex gap-2">
                        <button type="submit" id="btnSubmit" class="w-1/2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><i class="fa-solid fa-square-pen pr-1"></i> Update Profile</button>

                        <button type="button" id="btnPreview" data-modal-target="prev-modal" data-modal-toggle="prev-modal" class="w-1/2 text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"><i class="fa-solid fa-magnifying-glass pr-1"></i> Preview Profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('widgets.preview',['id' => $data->id, 'applicant' => $data, 'identity' => $id_info, 'specs' => $specializations, 'edus'=> $educations, 'emps' => $employments, 'refs' => $refs])
</section>
@endsection

<!-- Jquery -->
@section('scripts')
<script src="{{ asset('assets/js/utility.js') }}"></script>

<script type="text/javascript">
    const dev = "{{env('DEV_MODE')}}";
    const devUrl = "{{env('API_DEV')}}";
    const liveUrl = "{{env('API_LIVE')}}";
    const host = (dev === "1" ? devUrl : liveUrl);

    const server = host.slice(0, -4);

    $(document).ready(function() {
        const auto_delay = 5500;
        const MAX_SPEC=5;
        const leave_purposes = JSON.parse('@json($leave_purposes)');
        var sl = parseInt("{{$specializations->count()}}");
        let ug_thesis_sl = parseInt("{{$thesis_supers->where('level','ug')->count()}}");
        let pg_thesis_sl = parseInt("{{$thesis_supers->where('level','pg')->count()}}");

        var selectedDivision = "{{ $address->division }}"; // Division from DB
        var selectedDistrict = "{{ $address->district }}"; // District from DB
        var selectedUpozilla = "{{ $address->upozilla }}"; // Upozilla from DB

        var selected_pDivision = "{{ $address->p_division }}"; // Division from DB
        var selected_pDistrict = "{{ $address->p_district }}"; // District from DB
        var selected_pUpozilla = "{{ $address->p_upozilla }}"; // Upozilla from DB

        $("#division").on('change', function() {
            var division = $(this).val();

            $.ajax({
                type: "GET",
                url: "{{route('search.districts')}}",
                data: {
                    'division': division
                },
                success: function(response) {
                    $("#district").html(response);
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error); // Log the error for debugging purposes
                    alert("An error occurred while fetching districts. Please try again.");
                }
            });
        });

        $("#p_division").on('change', function() {
            var p_division = $(this).val();

            $.ajax({
                type: "GET",
                url: "{{route('search.districts')}}",
                data: {
                    'division': p_division
                },
                success: function(response) {
                    $("#p_district").html(response);
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error); // Log the error for debugging purposes
                    alert("An error occurred while fetching districts. Please try again.");
                }
            });
        });

        $("#district").on('change', function() {
            var district = $(this).val();

            $.ajax({
                type: "GET",
                url: "{{route('search.upozillas')}}",
                data: {
                    'district': district
                },
                success: function(response) {
                    $("#upozilla").html(response);
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error); // Log the error for debugging purposes
                    alert("An error occurred while fetching upozillas. Please try again.");
                }
            });
        });

        $("#p_district").on('change', function() {
            var p_district = $(this).val();

            $.ajax({
                type: "GET",
                url: "{{route('search.upozillas')}}",
                data: {
                    'district': p_district
                },
                success: function(response) {
                    $("#p_upozilla").html(response);
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error); // Log the error for debugging purposes
                    alert("An error occurred while fetching upozillas. Please try again.");
                }
            });
        });

        // editing
        if (selectedDivision) {
            $("#division").val(selectedDivision).trigger('change');

            setTimeout(function() {
                $("#district").val(selectedDistrict).trigger('change');

                setTimeout(function() {
                    $("#upozilla").val(selectedUpozilla);
                }, auto_delay);
            }, auto_delay);
        }

        if (selected_pDivision) {
            $("#p_division").val(selected_pDivision).trigger('change');

            setTimeout(function() {
                $("#p_district").val(selected_pDistrict).trigger('change');

                setTimeout(function() {
                    $("#p_upozilla").val(selected_pUpozilla);
                }, auto_delay);
            }, auto_delay);
        }
        /*----------------------*/
        $("#add_edu").click(function() {
            $("#tbl-body").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <select id="exam-info" name="exm[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Choose Your Degree</option>
                                <option value="ssc">SSC/Equivalent</option>
                                <option value="dip">Diploma</option>
                                <option value="hsc">HSC/Equivalent</option>
                                <option value="ug">Undergraduate</option>
                                <option value="msc">Postgraduate</option>
                                <option value="phd">PhD</option>
                                <option value="pgd">PGD (Post Graduate Diploma)</option>
                            </select>
                            <input type="hidden" name="e_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2">
                            <input type="text" id="pass-yr" name="passYr[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. 2003" minlength="4" maxlength="4" pattern="(19|20)[0-9]{2}" title="Only vaid years allowed. No spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="result" name="result[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. 3.50" maxlength="25" pattern="[A-Za-z0-9\.,\-\/\(\)]+(?: [A-Za-z0-9\.,\-\/\(\)]+)*" title="Letters, numbers and . , - / ( ) allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="inst" name="inst[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="board" name="board[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Rajshahi/RUET" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="major" name="major[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Science/CSE" minlength="3" maxlength="40" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - ( ) allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
        });

        $("#add_spec").click(function() {
            sl = sl + 1;

            $("#tbl-body-spec").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <td class="px-1 py-2 text-center w-1/12">
                            ${sl})
                        </td>
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                            <input type="text" id="specs" name="spec[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="100" pattern="[A-Za-z0-9\.,\-\(\)&]+(?: [A-Za-z0-9\.,\-\(\)&]+)*" title="Letters, numbers, spaces and . , - () & allowed. No double/extra spaces allowed." required />
                            <input type="hidden" name="s_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2 text-center w-1/12">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-spec"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );

            if(sl >= MAX_SPEC)
                $("#add_spec").addClass('hidden');
        });

        initRowsEvent("#tbl-body-emp tr",".from_dt_pick",".to_dt_pick","total_period[]");
        $("#add_emp").click(function() {
            /*
            $("#tbl-body-emp").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <input type="text" name="position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)]+(?: [A-Za-z0-9\.,\-\('\)]+)*" title="Letters, numbers, spaces and . , - ' ( ) allowed." required />
                        </th>

                        <td class="px-1 py-2">
                            <input type="text" name="org[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)]+(?: [A-Za-z0-9\.,\-\('\)]+)*" title="Letters, numbers, spaces and . , - ' ( ) allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="pay_scale" name="pay_scale[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="2" maxlength="35" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - ( ) allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="from[]" class="from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="em_sl[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="to[]" class="to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="total_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , ( ) allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <select name="job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Job Type</option>
                                <option value="Fulltime">Fulltime</option>
                                <option value="Partime">Partime</option>
                                <option value="Contractual">Contractual</option>
                                <option value="Others">Others</option>
                            </select>
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-emp"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
            
            $(".from_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });

            $(".to_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });

            $(".from_dt_pick, .to_dt_pick").on('changeDate', function() {
                let $row = $(this).closest('tr');
                let fromVal = $row.find(".from_dt_pick").val();
                let toVal = $row.find(".to_dt_pick").val();

                if (fromVal && toVal) {
                    let fromDate = parseDate(fromVal);
                    let toDate = parseDate(toVal);

                    if (toDate >= fromDate) {
                        let diff = calculateDateDiff(fromDate, toDate);
                        $row.find("input[name='total_period[]']").val(diff);
                    } else {
                        alert('Invalid Date Range ❌.');
                        $row.find("input[name='total_period[]']").val("");
                    }
                }
            });
            */
           let $nrow = $(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <input type="text" name="position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                        </th>

                        <td class="px-1 py-2">
                            <input type="text" name="org[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" id="pay_scale" name="pay_scale[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="2" maxlength="35" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="from[]" class="from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="em_sl[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="to[]" class="to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="total_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                        </td>

                        <td class="px-1 py-2">
                            <select name="job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Job Type</option>
                                <option value="Fulltime">Fulltime</option>
                                <option value="Partime">Partime</option>
                                <option value="Contractual">Contractual</option>
                                <option value="Others">Others</option>
                            </select>
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-emp"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );

            $("#tbl-body-emp").append($nrow);

            $nrow.find(".from_dt_pick, .to_dt_pick").each(function() {
                new Datepicker(this, {
                    autohide: true,
                    format: 'dd/mm/yyyy',
                    orientation: 'top'
                });

                this.addEventListener('changeDate', function() {
                    calcPeriod($nrow,".from_dt_pick",".to_dt_pick","total_period[]");
                });
            });
        });
        
        $("#add_research").click(function() {
            $("#tbl-body-research").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="pub_times[]" class="publication_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="pub_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2">
                            <select id="publication-type" name="pub_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Publication Type</option>
                                <option value="100">Journal</option>
                                <option value="101">Conference</option>
                                <option value="102">Book Chapter</option>
                                <option value="103">Patent</option>
                            </select>
                        </td>

                        <td class="px-1 py-2">
                            <select name="w_position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Author Position</option>
                                @for($i = 1; $i <= 6; $i++)
                                    <option value="{{$i}}">{{ $i }}{{ $i == 1 ? 'st' : ($i == 2 ? 'nd' : ($i == 3 ? 'rd' : 'th')) }} Author</option>
                                @endfor
                            </select>
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-research"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
            
            $(".publication_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });
        });

        $("#add_training").click(function() {
            $("#tbl-body-training").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="traning_from[]" class="traning_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="training_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="traning_to[]" class="traning_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="traning_org[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="75" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="traning_titles[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. Office Management" minlength="10" maxlength="120" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="traning_duration[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. 3 Days" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-traning"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );

            $(".traning_from_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });

            $(".traning_to_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });
        });

        // existing-row
        initRowsEvent("#tbl-body-emp-teacher tr",".t_from_dt_pick",".t_to_dt_pick","t_total_period[]");
        $("#add_emp_teachers").click(function() {
            /*
            $("#tbl-body-emp-teacher").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <input type="text" name="t_position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)]+(?: [A-Za-z0-9\.,\-\('\)]+)*" title="Letters, numbers, spaces and . , - ' () allowed." required />
                        </th>

                        <td class="px-1 py-2">
                            <input type="text" name="t_org[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)]+(?: [A-Za-z0-9\.,\-\('\)]+)*" title="Letters, numbers, spaces and . , - ' () allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="t_pay_scale[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="2" maxlength="35" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="t_from[]" class="t_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="em_t_sl[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="t_to[]" class="t_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="t_total_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <select name="t_job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Job Type</option>
                                <option value="Fulltime">Fulltime</option>
                                <option value="Partime">Partime</option>
                                <option value="Contractual">Contractual</option>
                                <option value="Others">Others</option>
                            </select>
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-t-emp"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
            
            $(".t_from_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });

            $(".t_to_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });
            
            $(".t_from_dt_pick, .t_to_dt_pick").on('changeDate', function() {
                let $row = $(this).closest('tr');
                let fromVal = $row.find(".t_from_dt_pick").val();
                let toVal = $row.find(".t_to_dt_pick").val();

                if (fromVal && toVal) {
                    let fromDate = parseDate(fromVal);
                    let toDate = parseDate(toVal);

                    if (toDate >= fromDate) {
                        let diff = calculateDateDiff(fromDate, toDate);
                        $row.find("input[name='t_total_period[]']").val(diff);
                    } else {
                        alert('Invalid Date Range ❌.');
                        $row.find("input[name='t_total_period[]']").val("");
                    }
                }
            });
            
            $(".t_from_dt_pick, .t_to_dt_pick").on('changeDate', function() {
                let $row = $(this).closest('tr');
                calcPeriod($row,".t_from_dt_pick",".t_to_dt_pick","t_total_period[]");
            });
            */
            let $nrow = $(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <select name="t_position[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Post</option>
                                <option value="Lecturer">Lecturer</option>
                                <option value="Assistant Professor">Assistant Professor</option>
                                <option value="Associate Professor">Associate Professor</option>
                                <option value="Professor">Professor</option>
                            </select>
                        </th>

                        <td class="px-1 py-2">
                            <input type="text" name="t_org[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="4" maxlength="55" pattern="[A-Za-z0-9\.,\-\('\)&]+(?: [A-Za-z0-9\.,\-\('\)&]+)*" title="Letters, numbers, spaces and . , - ' () & allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="t_pay_scale[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="2" maxlength="35" pattern="[A-Za-z0-9\.,\-\(\)]+(?: [A-Za-z0-9\.,\-\(\)]+)*" title="Letters, numbers, spaces and . , - () allowed. No double/extra spaces allowed." required />
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="t_from[]" class="t_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="em_t_sl[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="t_to[]" class="t_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="t_total_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                        </td>

                        <td class="px-1 py-2">
                            <select name="t_job_type[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Job Type</option>
                                <option value="Fulltime">Fulltime</option>
                                <option value="Partime">Partime</option>
                                <option value="Contractual">Contractual</option>
                                <option value="Others">Others</option>
                            </select>
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-t-emp"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );

            $("#tbl-body-emp-teacher").append($nrow);

            $nrow.find(".t_from_dt_pick, .t_to_dt_pick").each(function() {
                new Datepicker(this, {
                    autohide: true,
                    format: 'dd/mm/yyyy',
                    orientation: 'top'
                });

                this.addEventListener('changeDate', function() {
                    calcPeriod($nrow,".t_from_dt_pick",".t_to_dt_pick","t_total_period[]");
                });
            });
        });

        initRowsEvent("#tbl-body-edu-leave tr",".eduleave_from_dt_pick",".eduleave_to_dt_pick","leave_period[]");
        $("#add_teachers_leave_info").click(function() {
            let purposes = '';

            leave_purposes.forEach(element => {
                purposes += `
                    <option value="${element.id}">${element.purpose}</option>
                `;
            });

            /*
            $("#tbl-body-edu-leave").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <select name="leave_reasons[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Purpose</option>
                                ${purposes}
                            </select>
                        </th>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="leave_from[]" class="eduleave_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="sl_edu_leave[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="leave_to[]" class="eduleave_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="leave_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed." required />
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-edu-leave"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
            
            $(".eduleave_from_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });

            $(".eduleave_to_dt_pick").each(function() {
                if (!this.datepicker) {
                    new Datepicker(this, {
                        autohide: true,
                        format: 'dd/mm/yyyy',
                        orientation: 'top'
                    });
                }
            });
            
            $(".eduleave_from_dt_pick, .eduleave_to_dt_pick").on('changeDate', function() {
                let $row = $(this).closest('tr');
                let fromVal = $row.find(".eduleave_from_dt_pick").val();
                let toVal = $row.find(".eduleave_to_dt_pick").val();

                if (fromVal && toVal) {
                    let fromDate = parseDate(fromVal);
                    let toDate = parseDate(toVal);

                    if (toDate >= fromDate) {
                        let diff = calculateDateDiff(fromDate, toDate);
                        $row.find("input[name='leave_period[]']").val(diff);
                    } else {
                        alert('Invalid Date Range ❌.');
                        $row.find("input[name='leave_period[]']").val("");
                    }
                }
            });
            */

            let $nrow = $(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <select name="leave_reasons[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                                <option value="" disabled selected>Select Purpose</option>
                                ${purposes}
                            </select>
                        </th>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="leave_from[]" class="eduleave_from_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                            <input type="hidden" name="sl_edu_leave[]" value="0">
                        </td>

                        <td class="px-1 py-2">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input type="text" name="leave_to[]" class="eduleave_to_dt_pick bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="dd/mm/yyyy" minlength="10" maxlength="10" required autocomplete="off" />
                            </div>
                        </td>

                        <td class="px-1 py-2">
                            <input type="text" name="leave_period[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="35" pattern="[A-Za-z0-9,\(\)]+(?: [A-Za-z0-9,\(\)]+)*" title="Letters, numbers, spaces and , () allowed. No double/extra spaces allowed." readonly required />
                        </td>

                        <td class="px-1 py-2 text-center">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-edu-leave"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );

            $("#tbl-body-edu-leave").append($nrow);

            $nrow.find(".eduleave_from_dt_pick, .eduleave_to_dt_pick").each(function() {
                new Datepicker(this, {
                    autohide: true,
                    format: 'dd/mm/yyyy',
                    orientation: 'top'
                });

                this.addEventListener('changeDate', function() {
                    calcPeriod($nrow,".eduleave_from_dt_pick",".eduleave_to_dt_pick","leave_period[]");
                });
            });
        });
        
        function initRowsEvent(tblRows, fromEl, toEl, period) {
            $(tblRows).each(function() {
                let $row = $(this);
                $row.find(`${fromEl}, ${toEl}`).each(function() {
                    this.addEventListener('changeDate', function() {
                        calcPeriod($row,fromEl,toEl,period);
                    });
                });
            });
        }

        /*
        $("#add_ug_thesis").click(function() {
            ug_thesis_sl = ug_thesis_sl + 1;

            $("#tbl-body-ug-thesis").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <td class="px-1 py-2 text-center w-1/12">
                            ${ug_thesis_sl})
                        </td>
                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                            <input type="text" id="ug_thesis" name="ug_thesis[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="200" required />
                            <input type="hidden" name="ug_thesis_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2 text-center w-1/12">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-ug-thesis"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
        });

        $("#add_pg_thesis").click(function() {
            pg_thesis_sl = pg_thesis_sl + 1;

            $("#tbl-body-pg-thesis").append(
                `
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <td class="px-1 py-2 text-center w-1/12">
                            ${pg_thesis_sl})
                        </td>

                        <th scope="row" class="px-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white w-9/12">
                            <input type="text" id="pg_thesis" name="pg_thesis[]" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" minlength="5" maxlength="200" required />
                            <input type="hidden" name="pg_thesis_sl[]" value="0">
                        </th>

                        <td class="px-1 py-2 text-center w-1/12">
                            <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline row-del-id-pg-thesis"><i class="fa-solid fa-trash-can"></i></a>
                        </td>
                    </tr>
                `
            );
        });
        */

        $(document).on('click', '.row-del-id', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        $(document).on('click', '.row-del-id-spec', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
            sl = sl - 1;

            if(sl < MAX_SPEC)
                $("#add_spec").removeClass('hidden');
        });

        $(document).on('click', '.row-del-id-emp', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });
        
        $(document).on('click', '.row-del-id-research', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        $(document).on('click', '.row-del-id-traning', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        $(document).on('click', '.row-del-id-t-emp', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        $(document).on('click', '.row-del-edu-leave', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        /*
        $(document).on('click', '.row-del-id-ug-thesis', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });

        $(document).on('click', '.row-del-id-pg-thesis', function(event) {
            event.preventDefault();
            $(this).parents('tr').remove();
        });
        */
    });

    function validateTextarea(el) {
        // const regex = /^[A-Za-z0-9\.,\-\(\)\']+(?: [A-Za-z0-9\.,\-\(\)\']+)*$/;
        // const regex = /^[A-Za-z0-9\.,\-\/#\(\)\']+([\s\n][A-Za-z0-9\.,\-\/#\(\)\']+)*$/;
        const regex = /^[A-Za-z0-9\.,\-\/#\(\)\'&]+(?:[ \n][A-Za-z0-9\.,\-\/#\(\)\'&]+)*$/;
        
        if (el.value === "" || regex.test(el.value)) {
            el.setCustomValidity(""); // Valid: Clear error message
        } else {
            el.setCustomValidity("English letters, numbers, spaces, single ENTRY and . , - / # () & allowed. No blank lines or double/extra spaces allowed.");
        }
    }

    window.addEventListener("pageshow", function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    });

    window.defAvatar = "{{url('assets/gallery/icons/avatar.jpg')}}";
</script>

<script src="{{ asset('assets/js/e-reg.js') }}"></script>
@endsection