@extends('layouts/contentLayoutMaster')

@section('title', 'Create Employee')

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Personal Details</h4>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($message = Session::get('error'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <form class="form" id="myForm" novalidate  method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="full_name">Full Name </label>
                                        <input type="text" id="full_name" class="form-control"
                                            placeholder="Enter Full Name" name="name" value="{{ old('name') }}" required/>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="full_name">Father Name *</label>
                                        <input type="text" id="father_name" class="form-control"
                                            placeholder="Enter Father Name" name="father_name" value="{{ old('name') }}" required />
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="email">Email *</label>
                                        <input type="email" id="email" class="form-control" placeholder="Enter Email"
                                            name="email" value="{{ old('email') }}" required />
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="gender">Select Gender</label>
                                        <select id="gender" class="form-control" name="gender" required>
                                            <option value="" selected disabled>Select Gender</option>
                                            <option value="male" {{ (old('gender') == 'male' ? 'selected' : '') }}>Male</option>
                                            <option value="female" {{ (old('gender') == 'female' ? 'selected' : '') }}>Female</option>
                                            <option value="other" {{ (old('gender') == 'other' ? 'selected' : '') }}>Other</option>
                                        </select>
                                        @error('gender')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="sap_code">Sap Code</label>
                                        <input type="text" id="sap_code" class="form-control"
                                            placeholder="Enter Sap Code" name="sap_code" value="{{ old('sap_code') }}" />
                                        @error('sap_code')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="joining_date">Joining Date *</label>
                                        <input type="date" id="joining_date" class="form-control" placeholder="Enter Joining Date"
                                            name="joining_date" value="{{ old('joining_date') }}" required/>
                                        @error('joining_date')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                {{-- <div class="col-md-4 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="resignation_date">Resign Date </label>
                                        <input type="date" id="resignation_date" class="form-control" placeholder="Enter Resign Date"
                                            name="resignation_date" value="{{ old('resignation_date') }}" />
                                        @error('resignation_date')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div> --}}
                                <div class="col-md-6 col-12">
                                    <div class="mt-1 mb-1">
                                        <label class="form-label" for="status">Status</label>
                                        <div class="form-check form-switch form-check-primary">
                                            <input type="checkbox" class="form-check-input" id="status"
                                                name="status" value="1"
                                                {{ old('status') == '1' ? 'checked' : '' }} />
                                            <label class="form-check-label" for="status">
                                                <span class="switch-icon-left"><i data-feather="check"></i></span>
                                                <span class="switch-icon-right"><i data-feather="x"></i></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <ul class="nav nav-tabs scroller" id="myTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" id="company-tab-dtl" href="#company-tab"
                                                    role="tab" aria-controls="company-tab"
                                                    aria-selected="true">Company</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" id="personal-tab-dtl" href="#personal-tab"
                                                    role="tab" aria-controls="personal-tab"
                                                    aria-selected="false">Personal</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" id="contact-tab-dtl" href="#contact-tab"
                                                    role="tab" aria-controls="contact-tab"
                                                    aria-selected="false">Contact Details</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"  data-toggle="tab"
                                                    href="#qualification-tab" role="tab" id="qualification-tab-dtl" aria-controls="qualification-tab"
                                                    aria-selected="false">Qualification & Experience</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="bank-dtl-tab" data-toggle="tab" href="#bank-tab"
                                                    role="tab" aria-controls="bank-tab" aria-selected="false">Bank
                                                    Details</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="next-of-kin-dtls-tab" data-toggle="tab"
                                                    href="#next-of-kin-tab" role="tab" aria-controls="next-of-kin-tab"
                                                    aria-selected="false">Next of Kin</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="family-dtl-tab" data-toggle="tab"
                                                    href="#family-tab" role="tab" aria-controls="family-tab"
                                                    aria-selected="false">Family Details</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content tab-data" style="padding: 5px;" id="myTabContent">
                                            <div class="tab-pane fade show active" id="company-tab" role="tabpanel"
                                                aria-labelledby="company-tab-dtl">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Company Details</h2>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label">Select Designation</label>
                                                            <select id="designation_id" class="form-control" name="designation_id" required>
                                                                <option value="" selected disabled>Employee Designation</option>
                                                                @foreach ($designations as $designation)
                                                                    <option value="{{$designation->_id}}" {{ (Input::old("designation_id") == $designation->_id  ? "selected":"") }}>{{$designation->name}}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('designation_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="user_exists">User Exists</label>
                                                            <select id="user_exists" class="form-control" name="user_exists" required>
                                                                <option value="" selected disabled>User Exists</option>
                                                                <option value="yes" {{ (Input::old("user_exists") == 'yes'  ? "selected":"") }}>Yes</option>
                                                                <option value="no" {{ (Input::old("user_exists") == 5  ? "selected":"") }}>No</option>
                                                            </select>
                                                            @error('user_exists')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div> 
                                                    <div class="col-md-4 col-12" id="user_select">
                                                        <div class="mb-1">
                                                            <label class="form-label">Select User</label>
                                                             {{-- <select id="user_id" class="form-control" name="user_id" required>
                                                                <option value="" selected disabled>Select User</option>
                                                                @foreach ($users as $user)
                                                                    <option value="{{$user->_id}}" data-access_level="{{$user->access_level}}" 
                                                                        data-parent_id="{{$user->parent_id}}" 
                                                                        data-access_level_id="{{ isset($user->access_level_ids[0]) ? $user->access_level_ids[0] : '' }}"
                                                                        {{ (old("user_id") == $user->_id ? "selected":"") }}>
                                                                        {{$user->name}} ({{$user->user_name}})
                                                                    </option>
                                                                @endforeach
                                                            </select> --}}
                 
                                                            <select id="user_id" class="form-control appendUsers" name="user_id" required>
                                                               
                                                               
                                                            </select>
                                                            @error('user_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                   
                                                    {{--
                                                        <div class="col-md-4 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="transfer_date">Transfer Date *</label>
                                                                <input type="date" id="transfer_date" class="form-control" placeholder="Enter Transfer Date"
                                                                    name="transfer_date" value="{{ old('transfer_date') }}" required/>
                                                                @error('transfer_date')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="mcc-latitude">Current Status</label>
                                                                <select id="current_status" class="form-control" name="current_status" required>
                                                                    <option value="" selected disabled>Select Entity</option>
                                                                    <option value="6" data-access="6" {{ (Input::old("access_level") == 6  ? "selected":"") }}>New Joining</option>
                                                                    <option value="5" data-access="5" {{ (Input::old("access_level") == 5  ? "selected":"") }}>Transfered</option>
                                                                </select>
                                                                @error('role_dropdown')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                        </div>
                                                    </div> 
                                                    --}}
                                                    <div class="row p-0 m-0">
                                                        <div class="col-md-4 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="mcc-latitude">Select Entity</label>
                                                                <select id="role_dropdown" class="form-control" name="access_level" required>
                                                                    <option value="" selected disabled>Select Entity</option>
                                                                    <option value="6" data-access="6" {{ (Input::old("access_level") == 6  ? "selected":"") }}>Plant</option>
                                                                    {{-- <option value="5" data-access="5" {{ (Input::old("access_level") == 5  ? "selected":"") }}>Departments</option>
                                                                    <option value="4" data-access="4" {{ (Input::old("access_level") == 4  ? "selected":"") }}>Sections</option>
                                                                    <option value="3" data-access="3" {{ (Input::old("access_level") == 3  ? "selected":"") }}>Zones</option> --}}
                                                                    <option value="2" data-access="2" {{ (Input::old("access_level") == 2  ? "selected":"") }}>Area Office</option>
                                                                    <option value="1" data-access="1" {{ (Input::old("access_level") == 1  ? "selected":"") }}>Collection Points</option>
                                                                </select>
                                                                @error('role_dropdown')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="parent_id">Choose Parent for Access Level</label>
                                                                <select id="parent_id" name="parent_id"></select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="access_level_id">Choose Access Level</label>
                                                                <select id="access_level_id" name="access_level_id" required></select>
                                                                @error('access_level_id')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label">Select Category</label>
                                                            <select id="category_id" class="form-control" name="category_id" required onchange="getDropdownData()">
                                                                <option value="" selected disabled>Employee Category</option>
                                                                @foreach ($categories as $category)
                                                                    <option value="{{$category->_id}}" {{ (Input::old("category_id") == $category->_id  ? "selected":"") }}>{{$category->name}}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('category_id')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <label class="form-label">Select Type </label><small> (Optional)</small>
                                                        <select id="type_id" name="type_id" data-placeholder="Item" class="select2 form-select" 
                                                            >
                                                            <option value="" selected>None</option>
                    
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="full_name">Emp Grade </label>
                                                            <input type="text" id="employee_grade" class="form-control"
                                                                placeholder="Enter Employee Grade" name="employee_grade" value="{{ old('employee_grade') }}" required />
                                                            @error('employee_grade')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="gross_salary">Gross Salary </label>
                                                            <input type="text" id="gross_salary" class="form-control"
                                                            placeholder="Enter Gross Salary" name="gross_salary" value="{{ old('gross_salary') }}" required />
                                                            @error('gross_salary')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="personal-tab" role="tabpanel"
                                                aria-labelledby="personal-tab-dtl">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Personal Details</h2>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="nationality">Nationality</label>
                                                            <input type="text" id="nationality" class="form-control"
                                                                placeholder="Enter Nationality" name="nationality" value="{{ old('nationality') }}" required />
                                                            @error('nationality')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="religion">Religion</label>
                                                            <input type="text" id="religion" class="form-control"
                                                                placeholder="Enter Religion" name="religion" value="{{ old('religion') }}" required />
                                                            @error('religion')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="dob">Date of Birth</label>
                                                            <input type="date" id="dob" class="form-control"
                                                                name="dob" value="{{ old('dob') }}" required />
                                                            @error('dob')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="marital_status">Marital Status</label>
                                                            <select id="marital_status" class="form-control" name="marital_status" required>
                                                                <option value="" selected disabled>Select Marital Status</option>
                                                                <option value="single" {{ old('marital_status') == 'single' ? 'selected' : '' }}>Single</option>
                                                                <option value="married" {{ old('marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                                                                <option value="divorced" {{ old('marital_status') == 'divorced' ? 'selected' : '' }}>Divorced</option>
                                                                <option value="widowed" {{ old('marital_status') == 'widowed' ? 'selected' : '' }}>Widowed</option>
                                                            </select>
                                                            @error('marital_status')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="blood_group">Blood Group</label>
                                                            <select id="blood_group" class="form-control" name="blood_group" required>
                                                                <option value="" selected disabled>Select Blood Group</option>
                                                                <option value="A+" {{ old('blood_group') == 'A+' ? 'selected' : '' }}>A+</option>
                                                                <option value="A-" {{ old('blood_group') == 'A-' ? 'selected' : '' }}>A-</option>
                                                                <option value="B+" {{ old('blood_group') == 'B+' ? 'selected' : '' }}>B+</option>
                                                                <option value="B-" {{ old('blood_group') == 'B-' ? 'selected' : '' }}>B-</option>
                                                                <option value="O+" {{ old('blood_group') == 'O+' ? 'selected' : '' }}>O+</option>
                                                                <option value="O-" {{ old('blood_group') == 'O-' ? 'selected' : '' }}>O-</option>
                                                                <option value="AB+" {{ old('blood_group') == 'AB+' ? 'selected' : '' }}>AB+</option>
                                                                <option value="AB-" {{ old('blood_group') == 'AB-' ? 'selected' : '' }}>AB-</option>
                                                            </select>
                                                            @error('blood_group')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="cnic">CNIC</label>
                                                            <input type="text" id="cnic" class="form-control cnic"
                                                                placeholder="CNIC XXXXX-XXXXXXX-X" name="cnic" value="{{ old('cnic') }}" required />
                                                            @error('cnic')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="cnic_issuance_date">CNIC Issuance Date</label>
                                                            <input type="date" id="cnic_issuance_date" class="form-control"
                                                                name="cnic_issuance_date" value="{{ old('cnic_issuance_date') }}" required />
                                                            @error('cnic_issuance_date')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="cnic_expiry_date">CNIC Expiry Date</label>
                                                            <input type="date" id="cnic_expiry_date" class="form-control"
                                                                name="cnic_expiry_date" value="{{ old('cnic_expiry_date') }}" required />
                                                            @error('cnic_expiry_date')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="ntn">NTN</label>
                                                            <input type="text" id="ntn" class="form-control ntn"
                                                                placeholder="Enter NTN Number" name="ntn" value="{{ old('ntn') }}" required />
                                                            @error('ntn')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="contact-tab" role="tabpanel"
                                                aria-labelledby="contact-tab-dtl">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Contact Details</h2>
                                                    </div>
                                                     <div class="col-md-6 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="phone">Contact Number 1</label>
                                                            <input type="text" id="phone" class="form-control phone" name="contact1"
                                                                placeholder="Contact 1" value="{{ old('contact1') }}" required/>
                                                            @error('contact1')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label">Contact Number 2</label>
                                                            <input type="text" class="form-control" name="contact2"
                                                                placeholder="Contact 2" value="{{ old('contact2') }}" />
                                                            @error('contact2')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div> 
                                                    <div class="col-md-6 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Home Address (Permanent)</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Enter Permanent Home Address" name="permanent_address"
                                                                value="{{ old('permanent_address') }}" required />
                                                            @error('permanent_address')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Home Address (Present)</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Enter Present Home Address" name="present_address"
                                                                value="{{ old('present_address') }}" required />
                                                            @error('present_address')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="qualification-tab" role="tabpanel"
                                                aria-labelledby="qualification-tab-dtl">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Qualification & Experience</h2>
                                                    </div>
                                                     <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="qualification">Last Degree</label>
                                                            <input type="text" id="qualification" class="form-control" name="qualification"
                                                                placeholder="Last Degree" value="{{ old('qualification') }}" />
                                                            @error('qualification')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label">Degree Completion Year</label>
                                                            <input type="text" class="form-control" name="degree_completion_date"
                                                                placeholder="Degree Completion Year" value="{{ old('degree_completion_date') }}" />
                                                            @error('degree_completion_date')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div> 
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Grade</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Enter Grade" name="grade"
                                                                value="{{ old('grade') }}" />
                                                            @error('grade')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Years Of Experience</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Years of Experience" name="experience"
                                                                value="{{ old('experience') }}"/>
                                                            @error('experience')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Previous Organization</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Previous Organization" name="previous_organization"
                                                                value="{{ old('previous_organization') }}"/>
                                                            @error('previous_organization')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Reference</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Reference" name="reference"
                                                                value="{{ old('reference') }}"/>
                                                            @error('reference')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Reference Details</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Reference Details" name="reference_details"
                                                                value="{{ old('reference_details') }}"/>
                                                            @error('reference_details')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="bank-tab" role="tabpanel"
                                                aria-labelledby="bank-dtl-tab">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Bank Details</h2>
                                                    </div>
                                                    @include('content._partials._sections.add_bank')
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="next-of-kin-tab" role="tabpanel" aria-labelledby="next-of-kin-dtls-tab">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Next of Kin Details</h2>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-own-10">Name</label>
                                                            <input type="text" id="column-own-10" class="form-control"
                                                                placeholder="Name" name="next_of_kin_name"
                                                                value="{{ old('next_of_kin_name') }}" />
                                                            @error('next_of_kin_name')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-own-12">Relation</label>
                                                            <input type="text" id="column-own-12" class="form-control"
                                                                placeholder="Relation" name="relation"
                                                                value="{{ old('relation') }}" />
                                                            @error('relation')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="next_of_kin_dob">Date of Birth</label>
                                                            <input type="date" id="next_of_kin_dob" class="form-control" placeholder="Next Of Kin DOB"
                                                                name="next_of_kin_dob" value="{{ old('next_of_kin_dob') }}" required />
                                                            @error('next_of_kin_dob')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-own-13">Cnic</label>
                                                            <input type="text" id="column-own-13"
                                                                class="form-control cnic" placeholder="Next Of Kin CNIC"
                                                                name="next_of_kin_cnic"
                                                                value="{{ old('next_of_kin_cnic') }}" />
                                                            @error('next_of_kin_cnic')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="next_of_kin_phone">Contact Number 1</label>
                                                            <input type="text" id="next_of_kin_phone" class="form-control phone" name="next_of_kin_contact1"
                                                                placeholder="Next of Kin Contact 1" value="{{ old('next_of_kin_contact1') }}" required/>
                                                            @error('next_of_kin_contact1')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label">Contact Number 2</label>
                                                            <input type="text" class="form-control" name="next_of_kin_contact2"
                                                                placeholder="Next of Kin Contact 2" value="{{ old('next_of_kin_contact2') }}" />
                                                            @error('next_of_kin_contact2')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div> 
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Home Address (Permanent)</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Next of Kin Permanent Home Address" name="next_of_kin_permanent_address"
                                                                value="{{ old('next_of_kin_permanent_address') }}" required />
                                                            @error('next_of_kin_permanent_address')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-ao5">Home Address (Present)</label>
                                                            <input type="text" id="column-ao5" class="form-control"
                                                                placeholder="Next of Kin Present Home Address" name="next_of_kin_present_address"
                                                                value="{{ old('next_of_kin_present_address') }}" required />
                                                            @error('next_of_kin_present_address')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="family-tab" role="tabpanel" aria-labelledby="family-dtl-tab">
                                                <div class="row">
                                                    <div class="col-md-12  mb-1">
                                                        <h2>Family Details</h2>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="column-own-10">Spouse Name</label>
                                                            <input type="text" id="column-own-10" class="form-control"
                                                                placeholder="Spouse Name" name="spouse_name"
                                                                value="{{ old('spouse_name') }}" />
                                                            @error('spouse_name')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12">
                                                        <div class="mb-1">
                                                            <label class="form-label" for="spouse_dob">Spouse Date of Birth</label>
                                                            <input type="date" id="spouse_dob" class="form-control" placeholder="Spouse DOB"
                                                                name="spouse_dob" value="{{ old('spouse_dob') }}" required />
                                                            @error('spouse_dob')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row dynamic-entry m-0 p-0">
                                                        <div class="col-12 mb-1 mt-1">
                                                            <h3>
                                                                Childrens
                                                            </h3>
                                                        </div>
                                                        <div class="col-md-5 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="children_name">Children Name</label>
                                                                <input type="text" class="form-control" value="{{ old('children_name[]') }}"
                                                                    name="children_name[]" placeholder="Enter Child Name" />
                                                                @if ($errors->has('children_name[]'))
                                                                    <span class="invalid-feedback">
                                                                        <strong>{{ $errors->first('children_name[]') }}</strong>
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-3 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="children_dob">Children DOB</label>
                                                                <input type="date" class="form-control" name="children_dob[]" value="{{ old('children_dob[]') }}"/>
                                                                @if ($errors->has('children_dob[]'))
                                                                    <span class="invalid-feedback">
                                                                        <strong>{{ $errors->first('children_dob[]') }}</strong>
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-3 col-12">
                                                            <div class="mb-1">
                                                                <label class="form-label" for="gender">Gender</label>
                                                                <select class="form-control" name="children_gender[]">
                                                                    <option value="" selected disabled>Select Gender</option>
                                                                    <option value="male" {{ old('children_gender[]') == 'male' ? 'selected' : '' }}>Male</option>
                                                                    <option value="female" {{ old('children_gender[]') == 'female' ? 'selected' : '' }}>Female</option>
                                                                    <option value="other" {{ old('children_gender[]') == 'other' ? 'selected' : '' }}>Other</option>
                                                                </select>
                                                                @if ($errors->has('children_gender[]'))
                                                                    <span class="invalid-feedback">
                                                                        <strong>{{ $errors->first('children_gender[]') }}</strong>
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="col-12 m-0 p-0">
                                                            <button type="button" id="addEntry" style="margin-left:15px; margin-top:5px" class="btn btn-success">Add More +</button>
                                                        </div>
                                                        
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>                                        
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <button type="submit" id="submitBtn" class="btn btn-primary me-1" style="margin-left:5px">Submit</button>
                                        <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                        <a class="btn btn-outline-secondary cancel-btn"
                                            href="{{ route('users.index') }}">Cancel</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->
@endsection

@section('vendor-script')
    {{-- Vendor js files --}}
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function() {

            $('#myTab a').on('click', function(e) {
                e.preventDefault();
                $(this).tab('show');
            });

            $('#user_id').select2();
            $('#role_dropdown').select2();
            $('#category_id').select2();
            $('#access_level_id').select2({
                placeholder: "Access level"
            });
            $('#parent_id').select2({
                placeholder: "Choose Parent"
            });
            $('#role_dropdown').trigger('change');
        });
        $('#role_dropdown').change(function(e) {
            var accessLevel = $(this).find(':selected').data('access');
            var formData = new FormData();
            formData.append('access_level', accessLevel);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                method: 'POST',
                url: "{{ route('hr.get.employee.access.level.parent') }}",
                contentType: false,
                processData: false,
                data: formData,
                success: function(response) {
                    if (response.success) {
                        $('#parent_id').html('');
                        $.each(response.records, function(index, val) {
                            $('#parent_id').append('<option value="' + val['_id'] + '">' + val[
                                'name'] + '</option>');
                        });
                    }
                   
                    if( $('#user_id').val() && $('#user_id').val() !== '' && $('#user_id').val() != null)
                    { 
                        const val = $('#user_id').find(':selected').data('parent_id');
                        $('#parent_id').val(val).trigger('change'); 
                                            
                    }
                    else
                    {
                        $('#parent_id').trigger('change');
                       
                    }
                }
            });
        });

        $('#parent_id').change(function(e) {
            var accessLevel = $("#role_dropdown").find(':selected').data('access');
            var isSingle = $("#role_dropdown").find(':selected').data('single');
            var parent_id = $(this).find(':selected').val();
            var formData = new FormData();
            formData.append('access_level', accessLevel);
            formData.append('parent_id', parent_id);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('hr.get.employee.access.level.dropdown') }}",
                method: 'POST',
                contentType: false,
                processData: false,
                data: formData,
                success: function(response) {
                    if (response.success) {
                        $('#dispatch_point_id').html('');
                        $('#access_level_id').html('');
                        $.each(response.records, function(index, val) {
                            if (isSingle == 1)
                                $('#access_level_id').removeAttr('multiple');
                            $('#access_level_id').append('<option value="' + val['_id'] + '">' +
                                val['name'] + '</option>');
                        });

                        if( $('#user_id').val() && $('#user_id').val() !== '' && $('#user_id').val() != null)
                        {
                            const val = $('#user_id').find(':selected').data('access_level_id');
                            $('#access_level_id').val(val).trigger('change');                        
                        }
                        else
                        {
                            // var selectedValue = $('#access_level_id').val();
                            $('#access_level_id').trigger('change');
                        }
                    }
                }
            });
        });

        function getDropdownData() {

            $.ajax('{{ route('hr.get.employee-category-types') }}', {
                type: 'get',
                data: {
                    id: $('#category_id').val()
                },
                success: function(data) {
                    if (data.success == true) {
                        $('#type_id').html(data.data);
                    }
                    else
                    {
                        $('#type_id').html(data.data);
                    }
                },
                error: function(jqXhr, textStatus, errorMessage) {
                    alert('Error Occurred')
                }
            });
        }


        $('#user_id').val('');
        $('#user_id').hide().removeAttr('required');
        $('#user_select').hide();
        $('#role_dropdown').prop('disabled',true).select2();
        $('#parent_id').prop('disabled',true).select2();
        $('#access_level_id').prop('disabled',true).select2();

        $('#user_exists').change(function(e) {

            let check = $(this).find(':selected').val();

            $('#role_dropdown').val('');
            $('#user_id').val('');
            $('#parent_id').val('');
            $('#access_level_id').val('');
            // $('#role_dropdown').trigger('change');
            // $('#parent_id').trigger('change');
            // $('#access_level_id').trigger('change');
            $('#user_id').trigger('change');

            if(check === 'yes')
            { 
            
                $.ajax('{{ route('hr.get.users.byaccesslevel') }}', {
                    type: 'get',
                
                    success: function(data) {
                        if (data.success == true) {
                            $('.appendUsers').append(data.data)
                        }
                    
                    },
                    error: function(jqXhr, textStatus, errorMessage) {
                        alert('Error Occurred')
                    }
                });
                $('#user_select').show();
                $('#user_id').show().attr('required', 'required');
                $('#user_id').trigger('change');

                // $('#role_dropdown').trigger('change');
                $('#role_dropdown').prop('disabled',true).select2();
                $('#parent_id').prop('disabled',true).select2();
                $('#access_level_id').prop('disabled',true).select2();

            }
            else
            {
                $('#user_id').hide().removeAttr('required');
                $('#user_select').hide();

                $('#role_dropdown').val('');

                $('#role_dropdown').prop('disabled',false).select2();
                $('#parent_id').prop('disabled',false).select2();
                $('#access_level_id').prop('disabled',false).select2();
            }
            
        }
    );

        $(document).on('change','#user_id',function () {
            var selectedOption = $(this).find(':selected'); // Get the selected option

            var accessLevel = selectedOption.data('access_level'); 
            // var parentId = selectedOption.data('parent_id');
            // var accessLevelId = selectedOption.data('access_level_id');

            // console.log("Access Level: " + accessLevel);
            // console.log("Parent ID: " + parentId);
            // console.log("Access Level ID: " + accessLevelId);

            $('#role_dropdown').val(accessLevel).trigger('change');
        });

      
    
        $("#myForm").submit(function (event) {
            event.preventDefault(); // Prevent default form submission

            let isValid = true;
            const button = document.getElementById('submitBtn');
            button.disabled = true;
            button.innerText = 'Submitting...';
            // Check required fields
            $("input[required], select[required]").each(function () {
            
            let fieldValue = $(this).val() ? $(this).val().trim() : "";
            let fieldLabel = $(this).attr("placeholder") || $(this).prev("label").text();

            if (fieldValue === "") {
                    alert(fieldLabel + " is required!");
                    $(this).focus(); // Focus on first invalid field
                    isValid = false;
                    button.disabled = false;
                    button.innerText = 'Submit';
                    return false; // Stop loop
                }
            });

            // Check email validation only if the email field exists and is required
            let emailInput = document.getElementById("email");
            if (emailInput) {
                let emailValue = emailInput.value.trim();
                let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

                if (emailInput.hasAttribute("required") && emailValue === "") {
                    alert("Email is required!");
                    emailInput.focus();
                    button.disabled = false;
                    button.innerText = 'Submit';
                    return false;
                }

                if (emailValue !== "" && !emailPattern.test(emailValue)) {
                    alert("Invalid Email! Please enter a valid email address.");
                    emailInput.focus();
                    button.disabled = false;
                    button.innerText = 'Submit';
                    return false;
                }
            }

            if (isValid) {

                // Remove any existing hidden fields first
                $('input[name="role_dropdown1"]').remove();
                $('input[name="parent_id1"]').remove();
                $('input[name="access_level_id1"]').remove();
                $('#myForm').append('<input type="hidden" name="role_dropdown1" value="' + $('#role_dropdown').val() + '">');
                $('#myForm').append('<input type="hidden" name="parent_id1" value="' + $('#parent_id').val() + '">');
                $('#myForm').append('<input type="hidden" name="access_level_id1" value="' + $('#access_level_id').val() + '">');

                let formData = $("#myForm").serialize();

                $.ajax({
                    url: '{{ route("hr.employees.store") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    data: formData ,
                    success: function (response) {
                        if (response.success == true) {
                                showAlert('success', response.message);
                                button.disabled = false;
                                button.innerText = 'Submit';
                                // alert('Transfer Note created successfully!');
                                location.reload();
                            } else {
                                 button.disabled = false;
                                 button.innerText = 'Submit';
                                showAlert('error', response.message);
                            }
                    }
                });
            }
        });

         // Add Entry Button
         $('#addEntry').click(function() {
            var entryHtml = `
        <div class="row dynamic-entry m-0 p-0">
            <div class="col-md-5 col-12">
                <div class="mb-1">
                    <input type="text" required class="form-control" name="children_name[]" placeholder="Enter Child Name" />
                </div>
            </div>
            <div class="col-md-3 col-12">
                <div class="mb-1">
                    <input type="date" required class="form-control" name="children_dob[]" />
                </div>
            </div>
            <div class="col-md-3 col-12">
                <div class="mb-1">
                    <select class="form-control" name="children_gender[]" required>
                        <option value="" selected disabled>Select Gender</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>
            <div class="col-md-1 col-12">
                <button type="button" class="btn btn-danger removeEntry">-</button>
            </div>
        </div>`;

                $(entryHtml).insertBefore('#addEntry');
            });

            // Remove Entry Button
            $(document).on('click', '.removeEntry', function() {
                $(this).closest('.dynamic-entry').remove();
            });

    </script>

    <!-- Page js files -->
        {{-- <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> --}}
        <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>
    <script>
           $('.cnic').inputmask({
            mask: '99999-9999999-9'
        });
        $('.phone').inputmask({
            mask: '+\\92-399-9999999'
        });
        $('.ntn').inputmask({
            mask: '99999-9999999-9'
        });
    </script>
@endsection