@extends('layout.main')
@section('content')
    <section>

        <div class="container-fluid"><span id="general_result"></span></div>


        <div class="container-fluid mb-3">
            @can('store-details-employee')
                <button
                    @if (isset($isAllowToCreateEmployee) && !$isAllowToCreateEmployee) disabled
                    title="Disabled | Limit Exceeded" @endif
                    type="button" class="btn btn-primary rounded-1 text-white fs-7 fw-semibold me-1"
                    name="create_record" id="create_record">
                    <i class="fa fa-plus"></i>
                    {{ __('Add Employee') }}
                </button>
            @endcan
            @can('modify-details-employee')
                <button type="button" class="btn btn-danger rounded-1 fs-7 fw-semibold me-1" name="bulk_delete"
                        id="bulk_delete">
                    <i
                        class="fa fa-minus-circle"></i>
                    {{ __('Bulk delete') }}
                </button>
            @endcan
            <button class="btn btn-outline-primary rounded-1 fs-7 fw-semibold me-1" type="button" data-toggle="collapse"
                    data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <i class="fa fa-filter" aria-hidden="true"></i>
                {{ __('Filter') }}
            </button>


            <button class="btn btn-warning rounded-1 fs-7 fw-semibold mt-1 mt-md-0  me-1" type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#date_of_birthModal">
                <i class="fa-regular fa-cake-candles"></i>
                {{ __('Date of Birth') }}
            </button>

            <button class="btn btn-warning rounded-1 fs-7 fw-semibold mt-1 mt-md-0  me-1" type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#joining_dateModal">
                <i class="fa-regular fa-briefcase"></i>
                {{ __('Joining Date') }}
            </button>

            @can('view-termination')
                <a href="{{ route('terminations.index', [], false) }}" target="_blank"
                   class="btn btn-secondary rounded-1 fs-7 fw-semibold mt-1 mt-md-0  me-1">
                    <i class="fa-solid fa-user-slash"></i>
                    {{ __('file.Termination Employees') }}
                </a>
            @endcan
        </div>
        <div class="col-12">
            <!-- Filtering -->
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    <form action="" method="GET" id="filter_form">
                        <div class="row">
                            <!-- Company -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label
                                        class="text-bolder fs-6 pb-2"><strong>{{ trans('file.Company') }}</strong></label>
                                    <select name="company_id" id="company_id_filter"
                                            class="form-control selectpicker dynamic" data-live-search="true"
                                            data-live-search-style="contains" data-shift_name="shift_name"
                                            data-dependent="department_name"
                                            title="{{ __('Selecting', ['key' => trans('file.Company')]) }}...">
                                        <option value=""></option>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--/ Company-->

                            <!-- Department-->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="text-bolder fs-6 pb-2"><b>{{ trans('file.Department') }}</b></label>
                                    <select name="department_id" id="department_id_filter"
                                            class="selectpicker form-control designationFilter" data-live-search="true"
                                            data-live-search-style="contains" data-designation_name="designation_name"
                                            title="{{ __('Selecting', ['key' => trans('file.Department')]) }}..."
                                            disabled>
                                    </select>
                                </div>
                            </div>
                            <!--/ Department-->

                            <!-- Designation -->
                            <div class="col-md-3 form-group">
                                <label class="text-bolder fs-6 pb-2"><b>{{ trans('file.Designation') }}</b></label>
                                <select name="designation_id" id="designation_id_filter"
                                        class="selectpicker form-control"
                                        data-live-search="true" data-live-search-style="contains"
                                        title="{{ __('Selecting', ['key' => trans('file.Designation')]) }}..."
                                        disabled>
                                </select>
                            </div>
                            <!--/ Designation -->

                            <!-- Office Shift -->
                            <div class="col-md-3 form-group">
                                <label class="text-bolder fs-6 pb-2"><b>{{ __('Office Shift') }}</b></label>
                                <select name="office_shift_id" id="office_shift_id_filter"
                                        class="selectpicker form-control"
                                        data-live-search="true" data-live-search-style="contains"
                                        title="{{ __('Selecting', ['key' => __('Office Shift')]) }}..."
                                        disabled>
                                </select>
                            </div>
                            <!--/ Office Shift -->

                            <div class="col-md">
                                <label class="text-bold fs-6"></label><br>
                                <button type="button" class="btn btn-outline-primary fs-7 fw-bolder rounded-1"
                                        id="filterSubmit">
                                    <i class="fa fa-arrow-right pe-1" aria-hidden="true"></i>{{ __('Apply') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--/ Filtering -->
        </div>


        <div class="table-responsive">
            <table id="employee-table" class="table ">
                <thead>
                <tr>
                    <th class="not-exported border bg-light"></th>
                    <th class="border bg-light">{{ trans('file.Employee') }}</th>
                    <th class="border bg-light">{{ trans('file.JobInfo') }}</th>
                    <th class="border bg-light">{{ trans('file.Company') }}</th>
                    <th class="border bg-light">{{ trans('file.Contact') }}</th>
                    <th class="not-exported border bg-light text-center">{{ trans('file.Action') }}</th>
                </tr>
                </thead>

            </table>
        </div>
    </section>



    <div id="formModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">{{ __('Add Employee') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('Close') }}"></button>
                </div>

                <div class="modal-body">
                    <span id="form_result"></span>
                    <form method="post" id="sample_form" class="form-horizontal needs-validation"
                          enctype="multipart/form-data" novalidate>

                        @csrf

                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('Basic Information') }}</legend>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('First Name') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="first_name" id="first_name"
                                           placeholder="{{ __('First Name') }}" required class="form-control">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Last Name') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="last_name" id="last_name"
                                           placeholder="{{ __('Last Name') }}" required class="form-control">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Middle Name') }}</label>
                                    <input type="text" name="middle_name" id="middle_name"
                                           placeholder="{{ __('Middle Name') }}" class="form-control">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Staff Id') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="staff_id" id="staff_id"
                                           placeholder="{{ __('Staff Id') }}" required class="form-control">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Email') }}</label>
                                    <input type="email" name="email" id="email"
                                           placeholder="example@example.com" class="form-control">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Phone') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="contact_no" id="contact_no"
                                           placeholder="{{ trans('file.Phone') }}" required class="form-control"
                                           value="{{ old('contact_no') }}">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Date Of Birth') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="date_of_birth" id="date_of_birth" required
                                           autocomplete="off" placeholder="{{ __('Date Of Birth') }}"
                                           class="form-control date" value="">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Gender') }}</label>
                                    <select name="gender" id="gender" class="selectpicker form-control"
                                            data-live-search="true" data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => trans('file.Gender')]) }}...">
                                        <option value="Male">{{ trans('file.Male') }}</option>
                                        <option value="Female">{{ trans('file.Female') }}</option>
                                        <option value="Other">{{ trans('file.Other') }}</option>
                                    </select>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ __('Marital Status') }}</label>
                                    <select name="marital_status" id="marital_status" class="selectpicker form-control"
                                            data-live-search="true" data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => __('Marital Status')]) }}...">
                                        <option value="single">{{ trans('file.Single') }}</option>
                                        <option value="married">{{ trans('file.Married') }}</option>
                                        <option value="widowed">{{ trans('file.Widowed') }}</option>
                                        <option value="divorced">{{ trans('file.Divorced/Separated') }}</option>
                                    </select>
                                </div>
                            </div>
                        </fieldset>


                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('Identity Card') }}</legend>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>{{ __('ID Card Number') }}</label>
                                    <input type="text" name="id_card_number" id="id_card_number"
                                           placeholder="{{ __('ID Card Number') }}" class="form-control" value="">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>{{ __('ID Card Fin') }}</label>
                                    <input type="text" name="id_card_fin" id="id_card_fin"
                                           placeholder="{{ __('ID Card Fin') }}" class="form-control" value="">
                                </div>
                            </div>
                        </fieldset>


                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('Address') }}</legend>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>{{ trans('file.Country') }}</label>
                                        <select name="country" id="country" class="form-control selectpicker"
                                                data-live-search="true" data-live-search-style="contains"
                                                title="{{ __('Selecting', ['key' => trans('file.Country')]) }}...">
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ trans('file.City') }} </label>
                                    <input type="text" name="city" id="city"
                                           placeholder="{{ trans('file.City') }}" value="" class="form-control">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ trans('file.State/Province') }}
                                    </label>
                                    <input type="text" name="state" id="state"
                                           placeholder="{{ trans('file.State/Province') }}" value=""
                                           class="form-control">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ trans('file.Address') }} </label>
                                    <input type="text" name="address" id="address"
                                           placeholder="{{ trans('file.Address') }}" value="" class="form-control">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ trans('file.ActuallyAddress') }} </label>
                                    <input type="text" name="actually_address" id="actually_address"
                                           placeholder="{{ trans('file.ActuallyAddress') }}" value=""
                                           class="form-control">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label>{{ trans('file.ZIP') }} </label>
                                    <input type="text" name="zip_code" id="zip_code"
                                           placeholder="{{ trans('file.ZIP') }}" value="" class="form-control">
                                </div>

                            </div>
                        </fieldset>

                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('file.Organization') }}</legend>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-bold">{{ trans('file.Company') }}<span
                                                class="text-danger">*</span></label>
                                        <select name="company_id" id="company_id" required
                                                class="form-control selectpicker dynamic" data-live-search="true"
                                                data-live-search-style="contains" data-shift_name="shift_name"
                                                data-dependent="department_name"
                                                title="{{ __('Selecting', ['key' => trans('file.Company')]) }}...">
                                            @foreach ($companies as $company)
                                                <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-bold">{{ trans('file.Department') }}<span
                                                class="text-danger">*</span></label>
                                        <select name="department_id" id="department_id" required
                                                class="selectpicker form-control designation" data-live-search="true"
                                                data-live-search-style="contains"
                                                data-designation_name="designation_name"
                                                title="{{ __('Selecting', ['key' => trans('file.Department')]) }}..."
                                                disabled>
                                        </select>
                                    </div>
                                </div>


                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Designation') }} <span
                                            class="text-danger">*</span></label>
                                    <select name="designation_id" id="designation_id" required
                                            class="selectpicker form-control" data-live-search="true"
                                            data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => trans('file.Designation')]) }}..."
                                            disabled>
                                    </select>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Office_Shift') }} <span
                                                class="text-danger">*</span></label>
                                    <select name="office_shift_id" id="office_shift_id" required
                                            class="selectpicker form-control" data-live-search="true"
                                            data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => trans('file.Office_Shift')]) }}..."
                                            disabled>
                                    </select>
                                </div>

                                <hr>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>
                                            {{ trans('file.Status') }}
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="hidden" name="status_id_hidden"
                                               value="{{ old('status_id_hidden') }}"/>
                                        <select name="status_id" id="status_id" class="form-control selectpicker"
                                                data-live-search="true" data-live-search-style="contains"
                                                title="{{ __('Selecting', ['key' => trans('file.Status')]) }}..."
                                                required>
                                            @foreach ($statuses as $status)
                                                <option value="{{ $status->id }}">{{ $status->status_title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">
                                        {{ __('Date Of Joining') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="joining_date" id="joining_date"
                                           class="form-control date" placeholder="{{ trans('Date Of Joining') }}"
                                           required>
                                </div>

                            </div>
                        </fieldset>

                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('file.Others') }}</legend>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Attendance Type') }} <span
                                            class="text-danger">*</span></label>
                                    <select name="attendance_type" id="attendance_type" required
                                            class="selectpicker form-control" data-live-search="true"
                                            data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => __('Attendance Type')]) }}...">
                                        <option value="general">{{ __('General') }}</option>
                                        <option value="ip_based">{{ __('IP Based') }}</option>
                                    </select>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">
                                        {{ __('file.Allowed Downtime') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group mb-3">
                                        <input type="number" min="0" step="1" name="downtime"
                                               id="downtime" value="{{ old('downtime', 0) }}" class="form-control"
                                               placeholder="{{ trans('file.Down time') }}" required>
                                        <span class="input-group-text" id="basic-addon2">{{ trans('file.min.') }}</span>
                                    </div>
                                </div>

                            </div>
                        </fieldset>

                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ __('User') }}</legend>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Username') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="username" id="username"
                                           placeholder="{{ __('Unique Value', ['key' => trans('file.Username')]) }}"
                                           required class="form-control">
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Password') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="password" name="password" id="password"
                                               placeholder="{{ trans('file.Password') }}" required class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ __('Confirm Password') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input id="confirm_pass" type="password" class="form-control "
                                               name="password_confirmation" placeholder="{{ __('Re-type Password') }}"
                                               required autocomplete="new-password">
                                    </div>
                                    <div class="form-group">
                                        <div class="registrationFormAlert" id="divCheckPasswordMatch">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label class="text-bold">{{ trans('file.Role') }} <span
                                            class="text-danger">*</span></label>
                                    <select name="role_users_id" id="role_users_id" required
                                            class="selectpicker form-control" data-live-search="true"
                                            data-live-search-style="contains"
                                            title="{{ __('Selecting', ['key' => trans('file.Role')]) }}...">
                                        @foreach ($roles as $item)
                                            <option value="{{ $item->id }}">{{ __($item->name) }}</option>
                                        @endforeach
                                        {{-- <option value="1">Admin</option>
                                        <option value="2">Employee</option> --}}
                                    </select>
                                </div>

                                <div class="col-md-6 form-group">
                                    <label for="profile_photo"
                                           class=""><strong>{{ __('Image') }}</strong></label>
                                    <input type="file" id="profile_photo"
                                           class="form-control @error('photo') is-invalid @enderror"
                                           name="profile_photo"
                                           placeholder="{{ __('Upload', ['key' => trans('file.Photo')]) }}">
                                </div>


                            </div>
                        </fieldset>


                        <div class="col-12">
                            <input type="hidden" name="action" id="action"/>
                            <input type="hidden" name="hidden_id" id="hidden_id"/>

                            <button type="submit" name="action_button" id="action_button"
                                    class="btn btn-primary btn-block btn-lg">{{ trans('file.Add') }}</button>
                            {{--                            <input type="submit" name="action_button" id="action_button" class="btn btn-outline-primary w-100" value="{{trans('file.Add')}}"/> --}}
                        </div>

                    </form>

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


    <div id="confirmModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">{{ trans('file.Confirmation') }}</h2>
                    <button type="button" class="employee-close btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h4 class="text-center" style="margin:0;">{{ __('Are you sure you want to remove this data?') }}
                    </h4>
                </div>
                <div class="modal-footer">
                    <button type="button" name="ok_button" id="ok_button"
                            class="btn btn-danger">{{ trans('file.OK') }}</button>
                    <button type="button" class="close btn-dark btn"
                            data-bs-dismiss="modal">{{ trans('file.Cancel') }}</button>
                </div>
            </div>
        </div>
    </div>



    <div id="date_of_birthModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="date_of_birthModalLabel" class="modal-title">{{ __('Date of Birth') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="date_of_birth_result" class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="not-exported border bg-light">#</th>
                                <th class="border bg-light">{{ trans('file.Employee') }}</th>
                                <th class="border bg-light">{{ trans('Date of Birth') }}</th>
                                <th class="border bg-light">{{ trans('file.Gender') }}</th>
                                <th class="border bg-light">{{ trans('file.Contact') }}</th>
                                <th class="not-exported border bg-light text-center">{{ trans('file.Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="employee in employees" :key="employee.id">
                                <td class="not-exported border bg-light">
                                    [[ employee.id ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.full_name ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.date_of_birth ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.gender ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.contact_no ]]
                                </td>
                                <td class="not-exported border bg-light text-center">
                                    <a :href="'employees/' + employee.id" class="edit p-1 text-secondary"
                                       data-toggle="tooltip" data-placement="top"
                                       title="{{ trans('View Details') }}">
                                        <i class="dripicons-preview"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot v-if="employees.length < 1">
                            <tr>
                                <td colspan="6" class="text-center text-danger">
                                    {{ __("No one's birthday in the last 7 days") }}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="joining_dateModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="joining_dateModalLabel" class="modal-title">{{ __('Joining Date') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="joining_date_result" class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="not-exported border bg-light">#</th>
                                <th class="border bg-light">{{ trans('file.Employee') }}</th>
                                <th class="border bg-light">{{ trans('Joining Date') }}</th>
                                <th class="border bg-light">{{ trans('file.Gender') }}</th>
                                <th class="border bg-light">{{ trans('file.Contact') }}</th>
                                <th class="not-exported border bg-light text-center">{{ trans('file.Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="employee in employees" :key="employee.id">
                                <td class="not-exported border bg-light">
                                    [[ employee.id ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.full_name ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.joining_date ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.gender ]]
                                </td>
                                <td class="border bg-light">
                                    [[ employee.contact_no ]]
                                </td>
                                <td class="not-exported border bg-light text-center">
                                    <a :href="'employees/' + employee.id" class="edit p-1 text-secondary"
                                       data-toggle="tooltip" data-placement="top"
                                       title="{{ trans('View Details') }}">
                                        <i class="dripicons-preview"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot v-if="employees.length < 1">
                            <tr>
                                <td colspan="6" class="text-center text-danger">
                                    {{ __('No one has been hired for the past 7 days') }}</td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {

            if (window.location.href.indexOf('#formModal') != -1) {
                $('#formModal').modal('show');
            }

            var date = $('.date');
            var dateFormatJs = @json(session('dateFormatJs'));
            date.datepicker({
                format: dateFormatJs,
                autoclose: true,
                todayHighlight: true,
                language: "{{ app()->getLocale() }}"
            });

            var table_table = $('#employee-table').DataTable({
                initComplete: function () {
                    this.api().columns([1, 5]).every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d +
                                '</option>');
                            $('select').selectpicker('refresh');
                        });
                    });
                },
                responsive: true,
                fixedHeader: {
                    header: true,
                    footer: true
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('employees.index', [], false) }}",
                    type: 'GET',
                    data: function (d) {
                        d.company_id = $("#company_id_filter").val();
                        d.department_id = $('#department_id_filter').val();
                        d.designation_id = $('#designation_id_filter').val();
                        d.office_shift_id = $('#office_shift_id_filter').val();
                    }
                },

                columns: [

                    {
                        data: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name',

                    },
                    {
                        data: 'job_info',
                        name: 'job_info'
                    },
                    {
                        data: 'company',
                        name: 'company',
                    },
                    {
                        data: 'contacts',
                        name: 'contacts',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ],


                "order": [],
                'language': {
                    select: {
                        rows: {
                            _: "{{ __('file.Selected %d rows') }}",
                            0: "{{ __('file.Click a row to select it') }}",
                            1: "{{ __('file.Selected 1 row') }}"
                        }
                    },
                    'zeroRecords': '{{ __('No data available in table') }}',
                    "infoEmpty": '{{trans("file.Showing")}} 0 - 0 (0)',
                    "infoFiltered": "",
                    'lengthMenu': '_MENU_ {{__("records per page")}}',
                    "info": '{{trans("file.Showing")}} _START_ - _END_ (_TOTAL_)',
                    "search": '{{trans("file.Search")}}',
                    'paginate': {
                        'previous': '{{trans("file.Previous")}}',
                        'next': '{{trans("file.Next")}}'
                    }
                },
                'columnDefs': [{
                    "orderable": false,
                    'targets': [0, 5],
                    "className": "text-left"
                },
                    {
                        'render': function (data, type, row, meta) {
                            if (type == 'display') {
                                data =
                                    '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label class="text-bold"></label></div>';
                            }

                            return data;
                        },
                        'checkboxes': {
                            'selectRow': true,
                            'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label class="text-bold"></label></div>'
                        },
                        'targets': [0]
                    }
                ],


                'select': {
                    style: 'multi',
                    selector: 'td:first-child'
                },
                'lengthMenu': [
                    [25, 50, 500],
                    [25, 50, 500]
                ],
                dom: '<"row"lfB>rtip',
                buttons: [{
                    extend: 'pdf',
                    text: '<i title="export to pdf" class="fa-regular fa-file-pdf"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                    {
                        extend: 'csv',
                        text: '<i title="export to csv" class="fa-regular fa-file-csv"></i>',
                        exportOptions: {
                            columns: ':visible:Not(.not-exported)',
                            rows: ':visible'
                        },
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fa-light fa-file-arrow-down"></i>',
                        className: 'export-for-device',
                        exportOptions: {
                            columns: [1, 2],
                            rows: ':visible',
                            format: {
                                body: function (data, row, column, node) {
                                    if (column === 0) {
                                        var id = data.match(/<span>Staff Id: (.*?)<\/span>/)[1];
                                        name = data.match(/<[a][^>]*>(.+?)<\/[a]>/)[1];
                                        return id;
                                    } else {
                                        return name;
                                    }
                                }
                            }
                        },
                        customize: function (csv) {
                            var csvRows = csv.split('\n');
                            csvRows[0] = csvRows[0].replace(['"Employee"', '"Company"'], [
                                '"Staff Id"', '"Name"'
                            ]);
                            return csvRows.join('\n');
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i title="print" class="fa-regular fa-print"></i>',
                        exportOptions: {
                            columns: ':visible:Not(.not-exported)',
                            rows: ':visible'
                        },
                    },
                    {
                        extend: 'colvis',
                        text: '<i title="column visibility" class="fa-regular fa-eye"></i>',
                        columns: ':gt(0)'
                    },
                ],
            });
            new $.fn.dataTable.FixedHeader(table_table);

        });


        //-------------- Filter -----------------------

        $('#filterSubmit').on("click", function (e) {
            $('#employee-table').DataTable().draw(true);
            //$('#filter_form')[0].reset();
            //$('select').selectpicker('refresh');
        });
        //--------------/ Filter ----------------------


        $('#create_record').click(function () {
            $('#action_button').val('{{ trans('file.Add') }}');
            $('#action').val('{{ trans('file.Add') }}');
            $('#formModal').modal('show');
        });


        $('#sample_form').on('submit', function (event) {
            event.preventDefault();

            $.ajax({
                url: "{{ route('employees.store', [], false) }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                beforeSend: function () {
                    $('#action_button').prop('disabled', true);
                    $('#action_button').text('{{ trans('file.Adding...') }}');
                },
                success: function (data) {
                    var html = '';
                    if (data.errors) {
                        $('#sample_form .form-control').removeClass('is-invalid');
                        html += '<ul class="mb-0">';
                        $.each(data.errors, function (field, message) {
                            $('#sample_form #' + field).addClass('is-invalid');
                            $('.selectpicker').selectpicker("refresh");

                            html += '<li>' + message + '</li>';
                        });
                        html += '</ul>';
                        // console.log(html);


                        displayErrorMessage(html);
                    }
                    if (data.error) {
                        displayErrorMessage(data.error);
                    }
                    if (data.warning) {
                        displayErrorMessage(data.warning);
                    }
                    if (data.success) {
                        displaySuccessMessage(data.success);

                        $('#sample_form')[0].reset();
                        $('select').selectpicker('refresh');
                        $('.date').datepicker('update');
                        $('#formModal').modal('hide');
                        $('#employee-table').DataTable().ajax.reload();
                    }
                    $('#action_button').text('{{ trans('file.Add') }}');
                    $('#action_button').prop('disabled', false);
                }
            });
        });


        let employee_delete_id;

        $(document).on('click', '.delete', function () {
            employee_delete_id = $(this).attr('id');
            $('#confirmModal').modal('show');
            $('.modal-title').text('{{ __('DELETE Record') }}');
            $('#ok_button').text('{{ trans('file.OK') }}');

        });


        $(document).on('click', '#bulk_delete', function () {

            var id = [];
            let table = $('#employee-table').DataTable();
            id = table.rows({
                selected: true
            }).ids().toArray();
            if (id.length > 0) {
                if (confirm('{{ __('Delete Selection', ['key' => trans('file.Employee')]) }}')) {
                    $.ajax({
                        url: '{{ route('mass_delete_employees', [], false) }}',
                        method: 'POST',
                        data: {
                            employeeIdArray: id
                        },
                        success: function (data) {
                            if (data.success) {
                                html = '<div class="">' + data.success + '</div>';
                                displaySuccessMessage(html);
                            }
                            if (data.error) {
                                html = '<div class="">' + data.error + '</div>';
                                displayErrorMessage(html);
                            }
                            table.ajax.reload();
                            table.rows('.selected').deselect();
                            // $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);


                        }

                    });
                }
            } else {
                alert('{{ __('Please select atleast one checkbox') }}');
            }
        });


        $('#close').click(function () {
            $('#sample_form')[0].reset();
            $('select').selectpicker('refresh');
            $('.date').datepicker('update');
            $('#employee-table').DataTable().ajax.reload();
        });

        $('#ok_button').click(function () {
            let target = "{{ route('employees.index', [], false) }}/" + employee_delete_id + '/delete';
            $.ajax({
                url: target,
                beforeSend: function () {
                    $('#ok_button').text('{{ trans('file.Deleting...') }}');
                },
                success: function (data) {
                    if (data.success) {
                        html = '<div class="">' + data.success + '</div>';
                        displaySuccessMessage(html);
                    }
                    if (data.error) {
                        html = '<div class="">' + data.error + '</div>';
                        displaySuccessMessage(html);
                    }
                    setTimeout(function () {
                        // $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        $('#confirmModal').modal('hide');
                        $('#employee-table').DataTable().ajax.reload();
                    }, 2000);
                }
            })
        });


        $('#confirm_pass').on('input', function () {

            if ($('input[name="password"]').val() != $('input[name="password_confirmation"]').val())
                $("#divCheckPasswordMatch").html('{{ __('Password does not match! please type again') }}');
            else
                $("#divCheckPasswordMatch").html('{{ __('Password matches!') }}');

        });


        $('.dynamic').change(function () {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_department', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        dependent: dependent
                    },
                    success: function (result) {
                        $('#department_id').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#department_id').html(result);
                        $('select').selectpicker();

                    }
                });
            }
        });


        $('.dynamic').change(function () {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('shift_name');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_office_shifts', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        dependent: dependent
                    },
                    success: function (result) {
                        $('#office_shift_id').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#office_shift_id').html(result);
                        $('select').selectpicker();
                    }
                });
            }
        });

        $('.designation').change(function () {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let designation_name = $(this).data('designation_name');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_designation_department', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        designation_name: designation_name
                    },
                    success: function (result) {
                        $('#designation_id').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#designation_id').html(result);
                        $('select').selectpicker();

                    }
                });
            }
        });


        // Login Type Change
        // $('#login_type').change(function() {
        //     var login_type = $('#login_type').val();
        //     if (login_type=='ip') {
        //         data = '<label class="text-bold">{{ __('IP Address') }} <span class="text-danger">*</span></label>';
        //         data += '<input type="text" name="ip_address" id="ip_address" placeholder="Type IP Address" required class="form-control">';
        //         $('#ipField').html(data)
        //     }else{
        //         $('#ipField').empty();
        //     }
        // });


        //--------  Filter  ---------

        // Company--> Department
        $('.dynamic').change(function () {
            if ($(this).val() !== '') {
                let value = $('#company_id_filter').val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_department', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        dependent: dependent
                    },
                    success: function (result) {
                        $('#department_id_filter').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#department_id_filter').html(result);
                        $('select').selectpicker();

                    }
                });
            }
        });

        //Department--> Designation
        $('.designationFilter').change(function () {
            if ($(this).val() !== '') {
                // let value = $(this).val();
                // let value = $('#company_id_filter').val();
                let value = $('#department_id_filter').val();
                let designation_name = $(this).data('designation_name');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_designation_department', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        designation_name: designation_name
                    },
                    success: function (result) {
                        $('#designation_id_filter').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#designation_id_filter').html(result);
                        $('select').selectpicker();

                    }
                });
            }
        });

        //Company--> Office Shift
        $('.dynamic').change(function () {
            if ($(this).val() !== '') {
                // let value = $(this).val();
                let value = $('#company_id_filter').val();
                let dependent = $(this).data('shift_name');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamic_office_shifts', [], false) }}",
                    method: "POST",
                    data: {
                        value: value,
                        _token: _token,
                        dependent: dependent
                    },
                    success: function (result) {
                        $('#office_shift_id_filter').prop('disabled', false);
                        $('select').selectpicker("destroy");
                        $('#office_shift_id_filter').html(result);
                        $('select').selectpicker();
                    }
                });
            }
        });
    </script>


    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        new Vue({
            el: '#date_of_birth_result',
            delimiters: ['[[', ']]'],
            data: {
                employees: [],
            },
            mounted() {
                $('#date_of_birthModal').on('show.bs.modal', this.fetchDateofbirthEmployees);
            },
            methods: {
                async fetchDateofbirthEmployees() {
                    try {
                        const response = await axios.get('{{ route('employees.date_of_birth', [], false) }}');
                        this.employees = response.data.data;
                    } catch (error) {
                        console.error('Error fetching employees:', error);
                    }
                },
                openModal() {
                    this.fetchDateofbirthEmployees().then(() => {
                        $('#date_of_birthModal').modal('show');
                    });
                }
            },
        },);

        new Vue({
            el: '#joining_date_result',
            delimiters: ['[[', ']]'],
            data: {
                employees: [],
            },
            mounted() {
                $('#joining_dateModal').on('show.bs.modal', this.fetchJoiningdateEmployees);
            },
            methods: {
                async fetchJoiningdateEmployees() {
                    try {
                        const response = await axios.get('{{ route('employees.joining_date', [], false) }}');
                        this.employees = response.data.data;
                    } catch (error) {
                        console.error('Error fetching employees:', error);
                    }
                },
                openModal() {
                    this.fetchJoiningdateEmployees().then(() => {
                        $('#joining_dateModal').modal('show');
                    });
                }
            },
        });
    </script>
@endpush