@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('master/master.incentive') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url("$alias/home") }}">
                            {{ trans('master/master.home') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ url("$alias/overtime/rules") }}">{{ trans('master/master.incentive') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{ trans('master/master.configuration') }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@push('prev-next-head')
    <div class="content-header-right text-end col-md-3">
        <div class="form-group breadcrumb-right">
            <div class="row">
                <div class="col-md-12">
                    <button type="button" class="dt-button create-new btn btn-primary waves-effect waves-float waves-light"
                        id="add-custom-date">{{ trans('master/master.add_custom_date') }} </button>
                </div>
            </div>
        </div>
    @endpush
    @section('content')
        <!-- Basic multiple Column Form section start -->

        <form id="form" role="post-data" method="POST"
            action="{{ $orgUrl . '/overtime/configuration/store/' . $overtimeRule->id }}"
            redirect="{{ $orgUrl . '/overtime/configurations/' . $overtimeRule->id }}">
            <section>
                <input type="hidden" name="overtime_rule_id" value="{{ $overtimeRule->id }}" id="multiple-column-form">
                <div class="card new-cardbox p-1">
                    <div class="row">
                        <div class="col-12 col-sm-12 mb-1 table-responsive">
                            <table class="table table-responsive table-striped  mb-4 earningtablecomp"
                                style="background-color:#fff">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th class="text-nowrap">{{ trans('admin/template.name') }}</th>
                                        <th class="text-nowrap">{{ trans('master/master.compensatory_type') }}</th>
                                        <th class="text-nowrap">Config/comp-off validity </th>
                                        <th class="text-nowrap">{{ trans('master/master.attendance_type') }}</th>
                                        <th class="text-nowrap">{{ trans('master/master.minimum_days') }} (Max:31)</th>
                                        <th class="text-nowrap">{{ trans('master/master.ot_factor') }}</th>
                                        <th class="text-nowrap">{{ trans('master/master.exclude') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="congiguration-table">
                                    
                                    @foreach ($overtimeConfigurations as $key => $overtimeConfiguration)

                                        @php
                                            $overtimeBufferConfig = '';
                                        @endphp
                                        @if ($overtimeConfiguration->buffer_config)
                                            @php
                                                $overtimeBufferConfig = json_encode(
                                                    $overtimeConfiguration->buffer_config,
                                                );
                                            @endphp
                                        @endif
                                        <tr id="tr_id_{{ $key }}" class="congiguration-table-tr">
                                            <td><span class="row-sn">{{ $loop->iteration }}</span></td>
                                            <td class="first-td-comp">
                                                <input type="hidden" name="configurations[{{ $key }}][id]"
                                                    value="{{ $overtimeConfiguration->id }}">
                                                <input class="ot-conf-id" type="hidden"
                                                    name="configurations[{{ $key }}][type]"
                                                    value="{{ $overtimeConfiguration->type }}">
                                                <input type="hidden"
                                                    name="configurations[{{ $key }}][buffer_config]"
                                                    value="{{ $overtimeBufferConfig }}">
                                                @if ($overtimeConfiguration->type == 'custom')
                                                    <input style="width: 220px" type="date" class="form-control"
                                                        name="configurations[{{ $key }}][name]"
                                                        value="{{ $overtimeConfiguration->name }}"
                                                        @if ($key < 3) readonly @endif>
                                                @else
                                                    <input style="width: 220px" type="text" class="form-control"
                                                        name="configurations[{{ $key }}][name]"
                                                        value="{{ $overtimeConfiguration->name }}"
                                                        @if ($key < 3) readonly @endif>
                                                @endif
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[{{ $key }}][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}"
                                                            @if ($overtimeConfiguration->compensatory_type == $val) selected @endif>
                                                            {{ ucfirst($val) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[{{ $key }}][comp_off_validity_type]" value="{{$overtimeConfiguration->comp_off_validity_type ?: 'days'}}">
                                                <input type="hidden" name="configurations[{{ $key }}][comp_off_validity]" value="{{$overtimeConfiguration->comp_off_validity}}">
                                                <input type="hidden" name="configurations[{{ $key }}][is_validity_complete]" value="{{$overtimeConfiguration->is_validity_complete ?: '0'}}">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="{{ $key }}"
                                                    @if ($overtimeConfiguration->compensatory_type != 'comp-off') style="display:none;" @endif>
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal{{ $key }}" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick='populateFormWithJson("{{ $key }}", {{ $overtimeBufferConfig }})'
                                                    @if ($overtimeConfiguration->compensatory_type != 'relaxation') style="display:none;" @endif>
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control"
                                                    name="configurations[{{ $key }}][attendance_type]">
                                                    <option value="present"
                                                        @if ($overtimeConfiguration->attendance_type == 'present') selected @endif>
                                                        Min Present</option>
                                                    <option value="absent"
                                                        @if ($overtimeConfiguration->attendance_type == 'absent') selected @endif>
                                                        Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only"
                                                    name="configurations[{{ $key }}][days]"
                                                    value="{{ $overtimeConfiguration->days }}">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only"
                                                    name="configurations[{{ $key }}][factor]"
                                                    value="{{ $overtimeConfiguration->factor }}">
                                            </td>
                                            <td>
                                                @if ($overtimeConfiguration->type != 'custom')
                                                    <select class="form-control select2"
                                                        name="configurations[{{ $key }}][exclude][]" multiple>
                                                        <option value="">Select</option>
                                                        @foreach ($otExcludeType as $val)
                                                            <option value="{{ $val }}"
                                                                @if (isset($overtimeRule) && @in_array($val, $overtimeConfiguration->exclude)) selected @endif>
                                                                {{ ucfirst($val) }} </option>
                                                        @endforeach
                                                    </select>
                                                @else
                                                    <button type="button"
                                                        class="btn btn-icon round btn-danger waves-effect remove-config mt-2">Remove</button>
                                                @endif
                                            </td>
                                        </tr>
                                        
                                    @endforeach
                                   
                                    @if (count($overtimeConfigurations) && !array_search('Extra Week Off', array_column($overtimeConfigurations->toArray(), 'name')))
                                        @php
                                            $key = $key + 1;
                                        @endphp
                                        <tr id="tr_id_{{ $key }}" class="congiguration-table-tr">
                                            <td><span class="row-sn">{{ $key+1 }}</span></td>
                                            <td class="first-td-comp">
                                                <input type="hidden" name="configurations[{{ $key }}][id]"
                                                    value="">
                                                <input class="ot-conf-id" type="hidden"
                                                    name="configurations[{{ $key }}][type]"
                                                    value="system">
                                                <input type="hidden"
                                                    name="configurations[{{ $key }}][buffer_config]"
                                                    value="">
                                                <input style="width: 220px" type="text" class="form-control"
                                                    name="configurations[{{ $key }}][name]" value="Extra Week Off" readonly />
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[{{ $key }}][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}">
                                                            {{ ucfirst($val) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[{{ $key }}][comp_off_validity_type]" value="days">
                                                <input type="hidden" name="configurations[{{ $key }}][comp_off_validity]" value="">
                                                <input type="hidden" name="configurations[{{ $key }}][is_validity_complete]" value="0">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="{{ $key }}"
                                                    @if ($overtimeConfiguration->compensatory_type != 'comp-off') style="display:none;" @endif>
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal{{ $key }}" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick='populateFormWithJson("{{ $key }}", {{ $overtimeBufferConfig }})' style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control"
                                                    name="configurations[{{ $key }}][attendance_type]">
                                                    <option value="present">
                                                        Min Present</option>
                                                    <option value="absent">
                                                        Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only"
                                                    name="configurations[{{ $key }}][days]"
                                                    value="0">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only"
                                                    name="configurations[{{ $key }}][factor]"
                                                    value="1">
                                            </td>
                                            <td>
                                                <select class="form-control select2" name="configurations[{{ $key }}][exclude][]"
                                                        multiple>
                                                        <option value="">Select</option>
                                                        @foreach ($otExcludeType as $val)
                                                            <option value="{{ $val }}">{{ ucfirst($val) }}</option>
                                                        @endforeach
                                                    </select>
                                            </td>
                                        </tr>
                                    @endif    
                                    @if (!count($overtimeConfigurations))
                                        <tr id="tr_id_0" class="congiguration-table-tr">
                                            <td><span class="row-sn">1</span></td>
                                            <td class="first-td-comp">
                                                <input class="ot-conf-id" type="hidden" name="configurations[0][id]"
                                                    value="">
                                                <input class="ot-conf-id" type="hidden" name="configurations[0][type]"
                                                    value="system">
                                                <input class="" type="hidden"
                                                    name="configurations[0][buffer_config]" value="">
                                                <input style="width: 150px" type="text" class="form-control"
                                                    name="configurations[0][name]" value="Week Off" readonly>
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[0][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[0][comp_off_validity_type]" value="days">
                                                <input type="hidden" name="configurations[0][comp_off_validity]" value="">
                                                <input type="hidden" name="configurations[0][is_validity_complete]" value="0">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="0"
                                                    style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal0" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick="populateFormWithJson('0', null);" style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control" name="configurations[0][attendance_type]">
                                                    <option value="present">Min Present</option>
                                                    <option value="absent">Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[0][days]"
                                                    value="0">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[0][factor]"
                                                    value="1">
                                            </td>
                                            <td>
                                                <select class="form-control select2" name="configuration[0][exclude][]"
                                                    multiple>
                                                    <option value="">Select</option>
                                                    @foreach ($otExcludeType as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                        <tr id="tr_id_1" class="congiguration-table-tr">
                                            <td><span class="row-sn">2</span></td>
                                            <td class="first-td-comp">
                                                <input type="hidden" class="" name="configurations[1][id]"
                                                    value="">
                                                <input class="ot-conf-id" type="hidden" name="configurations[1][type]"
                                                    value="system">
                                                <input class="" type="hidden"
                                                    name="configurations[1][buffer_config]" value="">
                                                <input style="width: 150px" type="text" class="form-control"
                                                    name="configurations[1][name]" value="Holiday" readonly>
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[1][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[1][comp_off_validity_type]" value="days">
                                                <input type="hidden" name="configurations[1][comp_off_validity]" value="">
                                                <input type="hidden" name="configurations[1][is_validity_complete]" value="0">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="1"
                                                    style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal1" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick="populateFormWithJson('1', null);" style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control" name="configurations[1][attendance_type]">
                                                    <option value="present">Min Present</option>
                                                    <option value="absent">Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[1][days]"
                                                    value="0">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[1][factor]"
                                                    value="1">
                                            </td>
                                            <td>
                                                <select class="form-control select2" name="configurations[1][exclude][]"
                                                    multiple>
                                                    <option value="">Select</option>
                                                    @foreach ($otExcludeType as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                        <tr id="tr_id_2" class="congiguration-table-tr">
                                            <td><span class="row-sn">3</span></td>
                                            <td class="first-td-comp">
                                                <input type="hidden" name="configurations[2][id]" value="">
                                                <input class="ot-conf-id" type="hidden" name="configurations[2][type]"
                                                    value="system">
                                                <input class="" type="hidden"
                                                    name="configurations[2][buffer_config]" value="">
                                                <input style="width: 150px" type="text" class="form-control"
                                                    name="configurations[2][name]" value="Normal Working Day" readonly>
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[2][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[2][comp_off_validity_type]" value="days">
                                                <input type="hidden" name="configurations[2][comp_off_validity]" value="">
                                                <input type="hidden" name="configurations[2][is_validity_complete]" value="0">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="2"
                                                    style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal2" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick="populateFormWithJson('2', null);" style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control" name="configurations[2][attendance_type]">
                                                    <option value="present">Min Present</option>
                                                    <option value="absent">Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[2][days]"
                                                    value="0">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[2][factor]"
                                                    value="1">
                                            </td>
                                            <td>
                                                <select class="form-control select2" name="configurations[2][exclude][]"
                                                    multiple>
                                                    <option value="">Select</option>
                                                    @foreach ($otExcludeType as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                        <tr id="tr_id_3" class="congiguration-table-tr">
                                            <td><span class="row-sn">4</span></td>
                                            <td class="first-td-comp">
                                                <input type="hidden" name="configurations[3][id]" value="">
                                                <input class="ot-conf-id" type="hidden" name="configurations[3][type]"
                                                    value="system">
                                                <input class="" type="hidden"
                                                    name="configurations[3][buffer_config]" value="">
                                                <input style="width: 150px" type="text" class="form-control"
                                                    name="configurations[3][name]" value="Extra Week Off" readonly>
                                            </td>
                                            <td>
                                                <select class="form-control compensatory-type-select"
                                                    name="configurations[3][compensatory_type]">
                                                    @foreach ($compensatoryTypes as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }} </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="hidden" name="configurations[3][comp_off_validity_type]" value="days">
                                                <input type="hidden" name="configurations[3][comp_off_validity]" value="">
                                                <input type="hidden" name="configurations[3][is_validity_complete]" value="0">
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                                    data-id="3"
                                                    style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                                
                                                <button type="button"
                                                    class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button"
                                                    id="relConfigModal2" data-bs-toggle="modal"
                                                    data-bs-target="#relConfigModal" data-id="" title="Configuration"
                                                    onclick="populateFormWithJson('2', null);" style="display:none;">
                                                    <i class="tool" data-feather="tool"></i>
                                                </button>
                                            </td>
                                            <td>
                                                <select class="form-control" name="configurations[3][attendance_type]">
                                                    <option value="present">Min Present</option>
                                                    <option value="absent">Max Absent</option>
                                                </select>
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[3][days]"
                                                    value="0">
                                            </td>
                                            <td class="first-td-comp">
                                                <input style="width: 120px" type="text"
                                                    class="form-control decimal-only" name="configurations[3][factor]"
                                                    value="1">
                                            </td>
                                            <td>
                                                <select class="form-control select2" name="configurations[3][exclude][]"
                                                    multiple>
                                                    <option value="">Select</option>
                                                    @foreach ($otExcludeType as $val)
                                                        <option value="{{ $val }}">{{ ucfirst($val) }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-2 offset-10">
                            @if (!count($overtimeConfigurations))
                                <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                    class="btn btn-success btn-submit user-submit waves-float"
                                    id="submit-text">{{ trans('common/common.create') }}</button>
                            @else
                                <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                    class="btn btn-success btn-submit user-submit waves-float"
                                    id="submit-text">{{ trans('common/common.update') }}</button>
                            @endif

                        </div>
                    </div>
                </div>
            </section>
        </form>
        <!-- Basic Floating Label Form section end -->
        <!-- Config Modal -->
        <div class="modal fade" id="relConfigModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
                <div class="modal-content">
                    <div class="modal-header bg-transparent">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-header">
                        <h3 class="modal-title" id="modelHeading">Buffer Configuration</h3>
                        <button type="button" id="add-row" class="btn btn-primary btn-sm" data-config-index=""
                            data-buffer-index="" style="float: right">Add More</button>
                    </div>
                    <div class="modal-body pb-5 pt-50">

                        <form id="bufferConfigForm" onsubmit="return false;">
                            <input type="hidden" name="overtime_configuration_id" id="overtime-configuration-id"
                                value="">
                            <div class="row">
                                <div class="col-12">
                                    <table id="bufferConfigTable" class="table table-responsive">
                                        <thead>
                                            <th class="text-nowrap">Min Overtime (H:M)</th>
                                            <th class="text-nowrap">Max Overtime (H:M)</th>
                                            <th class="text-nowrap">Relaxation Type</th>
                                            <th class="text-nowrap">Value &nbsp;&nbsp;&nbsp;</th>
                                            <th></th>
                                        </thead>
                                        <tbody id="config-body">

                                        </tbody>
                                    </table>
                                    <input type="hidden" name="config_id" id="config-id" value=""/>
                                    <div class="error" id="buffer-config-error"></div>
                                    <div class="row">
                                        <div class="col-md-2 offset-10">
                                            <button type="button" class="btn btn-success btn-submit1  waves-float waves-effect waves-float waves-light submit-buffer-config" >Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            </div> --}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="compOffConfigModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
                <div class="modal-content">
                    <div class="modal-header bg-transparent">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-header">
                        <h3 class="modal-title" id="modelHeading">Comp Off Configuration</h3>
                    </div>
                    <div class="modal-body pb-5 pt-50" id="compOffConfigModalBody">
                    </div>
                </div>
            </div>
        </div>
        <!-- Close  config modal -->
    @endsection

    @push('footer-script')
        <!-- BEGIN: Page Vendor JS-->
        <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
        <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
        <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
        <!-- END: Page Vendor JS-->
        <!-- BEGIN: Page JS-->
        <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
        <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
        <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
        <!-- END: Page JS-->
        <script src="{{ asset('js/common-script.js') }}"></script>
        <script src="{{ asset('js/sweetalert.js') }}"></script>
        <script>
            function initFeatherIcons() {
                feather.replace();
            }

            $(document).ready(function() {
                $("body").on("click", "#add-custom-date", function() {
                    var count = $(".congiguration-table-tr").length + 1;
                    let button = $('#relConfigModal' + count);
                    button.data('config-index', count);
                    let html = `
                                <tr id="tr_id_${count}" class="congiguration-table-tr">
                                    <td>${count}</td>
                                    <td class="first-td-comp">
                                        <input type="hidden" name="configurations[${count}][id]" value="">
                                        <input class="ot-conf-id" type="hidden" name="configurations[${count}][type]" value="custom">
                                        <input type="hidden" name="configurations[${count}][buffer_config]" value="">
                                        <input style="width: 250px" type="date" class="form-control" name="configurations[${count}][name]" value="">
                                    </td>
                                    <td>
                                        <select class="form-control compensatory-type-select" name="configurations[${count}][compensatory_type]">
                                            @foreach ($compensatoryTypes as $val)
                                                <option value="{{ $val }}">{{ ucfirst($val) }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="hidden" name="configurations[${count}][comp_off_validity_type]" value="days">
                                        <input type="hidden" name="configurations[${count}][comp_off_validity]" value="">
                                        <input type="hidden" name="configurations[${count}][is_validity_complete]" value="0">
                                        <button type="button"
                                            class="btn btn-icon rounded-circle btn-outline-success waves-effect compoff-config-btn comp-off-validity"
                                            data-id="${count}"
                                            style="display:none;">
                                            <i class="tool" data-feather="tool"></i>
                                        </button>
                                        
                                        <button type="button" class="btn btn-icon rounded-circle btn-outline-success waves-effect config-button" id="relConfigModal${count}" data-bs-toggle="modal" data-bs-target="#relConfigModal" data-id="" title="Configuration" onclick="populateFormWithJson(${count}, null);" style="display:none;">
                                            <i class="tool" data-feather="tool"></i>
                                        </button>
                                    </td>
                                    <td>
                                        <select class="form-control" name="configurations[${count}][attendance_type]">
                                            <option value="present">Min Present</option>
                                            <option value="absent">Max Absent</option>
                                        </select>
                                    </td>
                                    <td class="first-td-comp">
                                        <input style="width: 120px" type="text" class="form-control" name="configurations[${count}][days]" value="0">
                                    </td>
                                    <td class="first-td-comp">
                                        <input style="width: 120px" type="text" class="form-control decimal-only" name="configurations[${count}][factor]" value="1">
                                    </td>
                                    <td>
                                        <input style="width: 150px" type="hidden" class="form-control" name="configurations[${count}][exclude]" value="">
                                        <button type="button" class="btn btn-icon round btn-danger waves-effect remove-config mt-2">Remove</button>
                                    </td>
                                </tr>
                                `;
                    $("#congiguration-table").append(html);
                });

                $("body").on("click", ".remove-config", function() {
                    $(this).parents('tr').remove();
                });

                $(document).on('change', '.compensatory-type-select', function() {
                    var tr = $(this).closest('tr');
                    var button = tr.find('.config-button');
                    var compOffvalidity = tr.find('.comp-off-validity');
                    if ($(this).val() === 'relaxation') {
                        button.show();
                        compOffvalidity.hide();
                    } else if($(this).val() === 'comp-off'){
                        compOffvalidity.show();
                        button.hide();
                    }else {
                        button.hide();
                        compOffvalidity.hide();
                    }
                    initFeatherIcons();
                });

                initFeatherIcons();

                $('#relConfigModal').on('hide.bs.modal', function(e) {
                    
                });

            });


            function populateFormWithJson(configIndex,jsonDatas) {
                jsonData = $('input[name="configurations[' + configIndex + '][buffer_config]"]').val();
                let bufferIndex = 0;
                let table = $('#bufferConfigTable tbody');
                $('#config-id').val(configIndex);
                table.empty();
                
                if (jsonData) {
                    let dataArray = JSON.parse(jsonData);
                    $.each(dataArray, function(index, data) {
                        let row = $('<tr class="ot-buffer-config">');
                        row.append($('<td>').append($('<input>').attr('type', 'time').addClass(
                                'form-control decimal-only cls-min-overtime').attr(
                                'name', 'buffer_config[' + index +
                                '][min_overtime]')
                            .val(data.min_overtime)
                        ));
                        row.append($('<td>').append($('<input>').attr('type', 'time').addClass(
                                'form-control decimal-only cls-max-overtime').attr(
                                'name', 'buffer_config[' + index +
                                '][max_overtime]')
                            .val(data.max_overtime)
                        ));
                        row.append($('<td>').append($('<select>').addClass('form-control cls-relaxation-type').attr('name',
                                    'buffer_config[' + index +
                                    '][relaxation_type]')
                                .append($('<option>').val('minutes').text('Minutes'))
                                .append($('<option>').val('hours').text('Hours'))
                                .append($('<option>').val('days').text('Days'))
                                .val(data.relaxation_type))
                            );
                        
                        row.append($('<td>').append($('<input>').attr('type', 'text').addClass(
                                'form-control decimal-only cls-buffer-value').attr(
                                'name', 'buffer_config[' + index +
                                '][value]')
                            .val(data.value)
                        ));
                        row.append($('<td>').append($('<button>').attr('type', 'button').addClass(
                            'btn btn-danger btn-sm remove-config').text('X')));
                        table.append(row);
                    });
                }
            }
            $(document).on('click', '#add-row', function() {
                var count = $(".ot-buffer-config").length + 1;
                $newRow = '<tr class="ot-buffer-config"><td><input type="time" class="form-control decimal-only cls-min-overtime" name="buffer_config['+count+'][min_overtime]" placeholder="Min Overtime"  inputmode="numeric"></td><td><input type="time" class="form-control decimal-only cls-max-overtime" name="buffer_config['+count+'][max_overtime]" placeholder="Max Overtime"  inputmode="numeric"></td><td><select class="form-control cls-relaxation-type" name="buffer_config['+count+'][relaxation_type]"><option value="minutes">Minutes</option><option value="hours">Hours</option><option value="days">Days</option></select></td><td><input type="text" class="form-control decimal-only cls-buffer-value" name="buffer_config['+count+'][value]" placeholder="Value" pattern="\d*" inputmode="numeric"></td><td><button type="button" class="btn btn-danger btn-sm remove-config">X</button></td></tr>';
                $('#config-body').append($newRow);
            });

            $(document).on('click', '.submit-buffer-config', function() {
                configIndex = $('#config-id').val();
                if(revalidate()){
                    let jsonData = [];
                    $('#bufferConfigTable tbody tr').each(function() {
                        let min_overtime = $(this).find('input[name*=min_overtime]').val();
                        let max_overtime = $(this).find('input[name*=max_overtime]').val();
                        let relaxation_type = $(this).find('select[name*=relaxation_type]').val();
                        let value = $(this).find('input[name*=value]').val();
                        jsonData.push({
                            min_overtime: min_overtime,
                            max_overtime: max_overtime,
                            relaxation_type: relaxation_type,
                            value: value
                        });
                    });

                    $('input[name="configurations[' + configIndex + '][buffer_config]"]').val(JSON.stringify(jsonData));
                    $('#relConfigModal').modal('hide');
                }else{
                    $('input[name="configurations[' + configIndex + '][buffer_config]"]').val('');
                }
            });

            $('#relConfigModal').on('hide.bs.modal', function(e) {
                    if (!revalidate()) {
                        e.preventDefault();
                        let duration = 100;
                        let distance = 10;
                        $(this).animate({
                                left: `-=${distance}px`
                            }, duration / 2)
                            .animate({
                                left: `+=${2 * distance}px`
                            }, duration)
                            .animate({
                                left: `-=${distance}px`
                            }, duration / 2);
                    }
                });
                
                $(document).on('click', '.cls-relaxation-type', function() {    
                    
                    if ($(this).val() === 'days') {
                        $(this).closest("tr").find('.cls-buffer-value').val(1); 
                        $(this).closest("tr").find('.cls-buffer-value').prop('readonly', true);
                    } else {
                        $(this).closest("tr").find('.cls-buffer-value').prop('readonly', false);
                    }
                });    

            function revalidate() {
                let isValid = true; // Assume validity unless proven otherwise
                $('#buffer-config-error').html(''); // Clear previous errors
                $('#bufferConfigTable tbody tr').each(function(bufferIndex) {
                    let row = $(this);
                    let minOvertime = row.find('.cls-min-overtime');
                    let maxOvertime = row.find('.cls-max-overtime');
                    let relaxationType = row.find('.cls-relaxation-type');
                    let value = row.find('.cls-buffer-value');

                    if (!minOvertime.val()) {
                        $('#buffer-config-error').html('Min overtime is required');
                        isValid = false; // Set flag to false
                        
                    }else if (!maxOvertime.val()) {
                        $('#buffer-config-error').html('Max overtime is required');
                        isValid = false; // Set flag to false
                    }else if (!relaxationType.val()) {
                        $('#buffer-config-error').html('Relaxation type is required');
                        isValid = false; // Set flag to false
                    }else if (!value.val()) {
                        $('#buffer-config-error').html('Value is required');
                        isValid = false; // Set flag to false
                    }else if (minOvertime.val() > maxOvertime.val()) {
                        $('#buffer-config-error').html('Min overtime value should be less than max overtime value');
                        isValid = false; // Set flag to false
                    }else if (minOvertime.val() > '23:59') {
                        $('#buffer-config-error').html('Min overtime value should not be greater than 24 hours');
                        isValid = false; // Set flag to false
                    }else if (maxOvertime.val() >  '23:59') {
                        $('#buffer-config-error').html('Max overtime value should not be greater than 24 hours');
                        isValid = false; // Set flag to false
                    }else if (relaxationType.val() == 'minutes' && value.val()>60) {
                        $('#buffer-config-error').html('Value should not be greater than 60 minutes');
                        isValid = false; // Set flag to false
                    }else if (relaxationType.val() == 'hours' && value.val() > 24) {
                        $('#buffer-config-error').html('Value should not be greater than 24 hours');
                        isValid = false; // Set flag to false
                    }else if (relaxationType.val() == 'days' && value.val() > 1) {
                        $('#buffer-config-error').html('Value should not be greater than 1 days');
                        isValid = false; // Set flag to false
                    }

                });

                return isValid; // Return the flag indicating overall validity
            }

            
            $(document).on('click','.compoff-config-btn',function(){
                let id = $(this).data('id');

                let comp_off_validity_type = $(`[name="configurations[${ id }][comp_off_validity_type]"]`).val();
                let comp_off_validity = $(`[name="configurations[${ id }][comp_off_validity]"]`).val();
                let is_validity_complete = $(`[name="configurations[${ id }][is_validity_complete]"]`).val();

                $('#compOffConfigModalBody').html(getCompOffConfigHtml(comp_off_validity_type, comp_off_validity, is_validity_complete));
                $('#compOffConfigModal').data('id', id);
                $('#compOffConfigModal').modal('show');
            });

            $('#compOffConfigModal').on('hide.bs.modal', function(e) {
                let id = $(this).data('id');

                $(`[name="configurations[${ id }][comp_off_validity_type]"]`).val($('#comp_off_validity_type').val());
                $(`[name="configurations[${ id }][comp_off_validity]"]`).val($('#comp_off_validity').val());
                $(`[name="configurations[${ id }][is_validity_complete]"]`).val($('#is_validity_complete').is(':checked') ? '1' : '0');
            });

            function getCompOffConfigHtml(comp_off_validity_type, comp_off_validity, is_validity_complete){
                // console.log(comp_off_validity_type, comp_off_validity, is_validity_complete);
                let html = `
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-1">
                            <label class="form-label">Comp Off Validity Type</label>
                            <select class="form-select" name="comp_off_validity_type"
                                id="comp_off_validity_type">
                                <option value="days"
                                    ${comp_off_validity_type == 'days' ? 'selected' : ''}>
                                    Days </option>
                                <option value="months"
                                    ${comp_off_validity_type == 'months' ? 'selected' : ''}>
                                    Months </option>
                                <option value="years"
                                    ${comp_off_validity_type == 'years' ? 'selected' : ''}>
                                    Years </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-1">
                            <label class="form-label">Comp Off Validity</label>
                            <input type="text" class="form-control"
                                placeholder="Enter Comp Off Validity"
                                name="comp_off_validity"
                                id="comp_off_validity"
                                value="${comp_off_validity}">
                            <label class="form-label text-end"
                                for="is_validity_complete"
                                id="is_validity_complete_label"
                                style="${comp_off_validity_type == 'days' ? 'display:none' : ''}">
                                <input type="checkbox" name="is_validity_complete"
                                    value="1" id="is_validity_complete" ${ is_validity_complete == '1' ? 'checked' : ''}>
                                Is Complete
                            </label>
                        </div>
                    </div>
                </div>
                `;

                return html;
            }

            $(document).on('change', '#comp_off_validity_type', function() {
                if ($(this).val() != 'days') {
                    $('#is_validity_complete_label input').prop('disabled', false);
                    $('#is_validity_complete_label').show();
                } else {
                    $('#is_validity_complete_label input').prop('disabled', true);
                    $('#is_validity_complete_label').hide();
                }
            });
        </script>
    @endpush