@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.overtime_applicability') }}</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/applicability") }}">{{ trans('master/master.overtime_applicability') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($overtimeApplicability->id))
                            {{ trans('common/common.edit') }}
                        @else
                            {{ trans('master/master.add_new') }}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->

    <form role="post-data" method="POST"
        action="@if (isset($overtimeApplicability) && $overtimeApplicability){{ $orgUrl . '/overtime/applicability/update/' . $overtimeApplicability->id }}@else{{ $orgUrl . '/overtime/applicability/store' }}@endif "
        redirect="{{ $orgUrl . '/overtime/applicability' }}">

        @if (isset($overtimeApplicability->id))
            <input type="hidden" name="_method" value="PUT">
        @endif
        <section id="multiple-column-form">
            <div class="card new-cardbox p-1">
                <div class="row">
                    <div class="col-md-9 border-end">
                        <div class="card-header newheader border-bottom mb-1 px-0">
                            <h4 class="card-title">{{ trans('master/master.fill_the_below_information') }} </h4>
                        </div>
                        <div class="card-body px-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-6 mb-1">
                                        <label class="form-label">{{ trans('master/master.rule') }} <span
                                                class="mendatory-field text-danger">*</span></label>
                                        <select class="form-control select2" name="overtime_rule" id="overtime-rule"
                                            @if (isset($overtimeApplicability)) disabled @endif>
                                            <option value="">--select--</option>
                                            @foreach ($overtimeRules as $overtmeRule)
                                                <option value="{{ $overtmeRule->id }}"
                                                    @if (isset($overtimeApplicability->overtime_rule_id) && $overtimeApplicability->overtime_rule_id == $overtmeRule->id) selected @endif>
                                                    {{ $overtmeRule->title }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-1">
                                            <label class="form-label">{{ trans('master/master.type') }} <span
                                                    class="mendatory-field text-danger">*</span></label>
                                            <select class="form-control select2" name="type" id="type"
                                                @if (isset($overtimeApplicability)) disabled @endif>
                                                <option value="">--select--</option>
                                                @foreach ($applicabilityTypes as $applicabilityType)
                                                    <option value="{{ $applicabilityType }}"
                                                        @if (isset($overtimeApplicability->applicable_type) && $overtimeApplicability->applicable_type == $applicabilityType) selected @endif>
                                                        {{ $applicabilityType }} </option>
                                                @endforeach
                                            </select>
                                        </div>


                                        <div class="col-md-8 mb-1">
                                            <label class="form-label ">{{ trans('master/master.assign_to') }} <span
                                                    class="mendatory-field text-danger">*</span></label>
                                            <label class="form-label" style="float: right"><input type="checkbox"
                                                    name="select_all_sub_types" id="select_all_sub_types"
                                                    @if (isset($overtimeApplicability) && in_array(0, $applicabilityDetails)) checked @endif> Select All</label>

                                            <select class="form-control select2" name="applicable_id[]" id="applicable-id"
                                                onchange="manageSelectOption('applicable-id')" multiple>

                                                @if (isset($applicables))
                                                    @foreach ($applicables as $applicable)
                                                        <option value="{{ $applicable->id }}"
                                                            @if (isset($overtimeApplicability) &&
                                                                    (in_array($applicable->id, $applicabilityDetails) || in_array(0, $applicabilityDetails))) selected @endif>
                                                            {{ $applicable->name }} @if (isset($applicable->employee_code))
                                                                ({{ $applicable->employee_code }})
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>

                                        <div class="col-md-4 mb-1">
                                            <label class="form-label" for="assign_to_text_field_type_value">
                                                <input type="radio" name="assign_to_text_field_type"
                                                    id="assign_to_text_field_type_value" value="value" checked> Value
                                            </label>
                                            <label class="form-label" for="assign_to_text_field_type_text">
                                                <input type="radio" name="assign_to_text_field_type"
                                                    id="assign_to_text_field_type_text" value="text"> Text
                                            </label>
                                            <input type="text" class="form-control" id="assign_to_text_field">
                                            <small class="form-text text-muted">This field is only for bulk selection</small>
                                        </div>
                                    </div>

                                    @if (isset($excludeEmployeesAllow) && $excludeEmployeesAllow)
                                        <div class="row" id="employee_row">
                                            <div class="col-md-8 mb-1">
                                                <label class="form-label ">Exclude Employees</label>

                                                <select class="form-control select2" name="employee_ids[]"
                                                    id="employee_select" multiple>
                                                    @foreach ($employees as $employee)
                                                        <option value="{{ $employee->id }}"
                                                            @if (in_array($employee->id, $excludeEmployees)) selected @endif>
                                                            {{ $employee->name }} ({{ $employee->employee_code }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4 mb-1">
                                                <label class="form-label" for="employee_select_text_field_type_value">
                                                    <input type="radio" name="employee_select_text_field_type"
                                                        id="employee_select_text_field_type_value" value="value" checked> Value
                                                </label>
                                                <label class="form-label" for="employee_select_text_field_type_text">
                                                    <input type="radio" name="employee_select_text_field_type"
                                                        id="employee_select_text_field_type_text" value="text"> Text
                                                </label>
                                                <input type="text" class="form-control" id="employee_select_text_field">
                                                <small class="form-text text-muted">This field is only for bulk selection</small>
                                            </div>
                                        </div>
                                    @else
                                        <div class="row" id="employee_row" style="display: none">
                                            <div class="col-md-8 mb-1">
                                                <label class="form-label ">Exclude Employees</label>

                                                <select class="form-control select2" name="employee_ids[]"
                                                    id="employee_select" multiple>
                                                </select>
                                            </div>
                                            <div class="col-md-4 mb-1">
                                                <label class="form-label" for="employee_select_text_field_type_value">
                                                    <input type="radio" name="employee_select_text_field_type"
                                                        id="employee_select_text_field_type_value" value="value" checked> Value
                                                </label>
                                                <label class="form-label" for="employee_select_text_field_type_text">
                                                    <input type="radio" name="employee_select_text_field_type"
                                                        id="employee_select_text_field_type_text" value="text"> Text
                                                </label>
                                                <input type="text" class="form-control" id="employee_select_text_field">
                                                <small class="form-text text-muted">This field is only for bulk selection</small>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-md-12">
                                        <div class="d-flex justify-content-between content-footer">
                                            <button type="button" data-request="ajax-submit"
                                                data-target="[role=post-data]"
                                                class="btn btn-success btn-submit user-submit"
                                                id="submit-text">{{ trans('common/common.submit') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card-header newheader border-bottom mb-1 px-0">
                            <h4 class="card-title">Status</h4>
                        </div>
                        <div class="card-body px-0">
                            <div>
                                <div class="form-check form-check-primary mb-2">
                                    <input type="radio" id="customColorRadio1" name="status" class="form-check-input"
                                        value="active"
                                        {{ isset($overtimeApplicability) && $overtimeApplicability->status == 'active' && $overtimeApplicability->status != 'inactive' ? 'checked' : 'checked' }}>
                                    <label class="form-check-label fw-bolder" for="customColorRadio1">Active</label>
                                </div>
                                <div class="form-check form-check-primary">
                                    <input type="radio" id="customColorRadio2" name="status" class="form-check-input"
                                        value="inactive"
                                        {{ isset($overtimeApplicability) && $overtimeApplicability->status == 'inactive' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bolder" for="customColorRadio2">Inactive</label>
                                </div>
                            </div>
                        </div>
                    </div>

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

    </form>
    <!-- Basic Floating Label Form section end -->
@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>
        $(document).ready(function() {
            $("#type").change(function() {
                var selected_value = '';
                $.ajax({
                    beforeSend: function(xhr) {},
                    "url": "{!! route('ajax.types', ['alias' => $alias]) !!}",
                    method: "GET",
                    dataType: "json",
                    data: {
                        'type': $(this).val()
                    },
                    success: function(response) {

                        $("#applicable-id").empty("");
                        var options = '';
                        // var options = '<option value="">select</option>';
                        // var options = '<option value="0">All</option>';
                        if (response.status === 200) {
                            var option_list = response.data;
                            $.each(option_list, function(index, value) {
                                let selected =
                                    parseInt(selected_value) === value.id ? "selected" :
                                    "";
                                let name = value.name;
                                if (typeof(value.employee_code) != "undefined" && value
                                    .employee_code !== null) {
                                    var empcode = "(" + value.employee_code + ")";
                                } else {
                                    var empcode = '';
                                }
                                options += '<option value="' + value.id + '" ' +
                                    selected + ">" + name + " " + empcode + "</option>";
                            });
                            $("#applicable-id").append(options).trigger('change');
                        }
                    },
                });
            });
        });
    </script>
    <script>
        function manageSelectOption(id) {
            var selectedValues = $('#' + id).val();
            if (selectedValues.length > 0) {
                $.each(selectedValues, function(index, value) {
                    if (value == '0') {
                        $('#' + id + " option[value!='0']").prop('disabled', true);
                    } else if (value != '0') {
                        $("#" + id + " option[value='0']").prop('disabled', true);
                    } else {
                        $('#' + id).prop('disabled', false);
                    }
                });
            } else {
                $('#' + id + " option[value!='0']").prop('disabled', false);
                $("#" + id + " option[value='0']").prop('disabled', false);
            }
        }

        $('#applicable-id').change(function() {
            var totalOptions = $(this).find('option').length;
            var selectedOptions = $(this).find('option:selected').length;
            var selectedValues = $(this).val();
            var type = $('#type').val();

            if (totalOptions == selectedOptions) {
                $('#select_all_sub_types').prop('checked', true);
            } else {
                $('#select_all_sub_types').prop('checked', false);
            }

            if (selectedValues.length && ["Department", "Designation", "Contractor", "Grade","Category"].includes(type)) {
                $.ajax({
                    url: '/{!! $alias !!}/ajax/get-employees',
                    method: "GET",
                    data: {
                        _token: "{{ csrf_token() }}",
                        type,
                        ids: selectedValues,
                        all: $('#select_all_sub_types').prop('checked')
                    },
                    success: function(response) {

                        if (response.status == 200) {
                            var html = '';

                            response.data.map(employee => {
                                html += '<option value="' + employee?.id + '">' + employee
                                    ?.name + ' (' + employee?.employee_code + ')</option>';
                            })

                            $('#employee_row').show();
                            $('#employee_select').html(html).trigger('change');
                        } else {
                            $('#employee_row').hide();
                            $('#employee_select').html('').trigger('change');
                        }
                    }
                })
            } else {
                $('#employee_row').hide();
                $('#employee_select').html('').trigger('change');
            }
        });

        $('#select_all_sub_types').change(function() {
            if ($(this).is(':checked')) {
                $('#applicable-id option').prop("selected", true);
            } else {
                $('#applicable-id option').prop("selected", false);
            }
            $('#applicable-id').trigger('change');
        });

        $('#assign_to_text_field, input[name=assign_to_text_field_type]').change(function() {
            let type = $('input[name=assign_to_text_field_type]:checked').val();
            let optionsToSelect = $('#assign_to_text_field').val().split(',').map(item => item.trim());
            let selectedOptions = $('#applicable-id').val();

            var matchingValues = $('#applicable-id option').filter(function() {
                let optionText = (type == 'text') ? $(this).text() : $(this).val();

                return optionsToSelect.some(function(searchText) {
                    return optionText.trim() == searchText.trim();
                });
            }).map(function() {
                return $(this).val();
            }).get();
            
            if (confirm(`${matchingValues.length} values mathched out of ${optionsToSelect.length}`)) {
                selectedOptions.push(...matchingValues);
                $('#applicable-id').val(selectedOptions).trigger('change');
                $('#assign_to_text_field').val('');
            }
        });

        $('#employee_select_text_field, input[name=employee_select_text_field_type]').change(function() {
            let type = $('input[name=employee_select_text_field_type]:checked').val();
            let optionsToSelect = $('#employee_select_text_field').val().split(',').map(item => item.trim());
            let selectedOptions = $('#employee_select').val();

            var matchingValues = $('#employee_select option').filter(function() {
                let optionText = (type == 'text') ? $(this).text() : $(this).val();

                return optionsToSelect.some(function(searchText) {
                    return optionText.trim() == searchText.trim();
                });
            }).map(function() {
                return $(this).val();
            }).get();
            
            if (confirm(`${matchingValues.length} values mathched out of ${optionsToSelect.length}`)) {
                selectedOptions.push(...matchingValues);
                $('#employee_select').val(selectedOptions).trigger('change');
                $('#employee_select_text_field').val('');
            }
        });
    </script>
@endpush