@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.advance_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/advance/applicability") }}">{{ trans('master/master.advance_applicability') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($advanceApplicability->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($advanceApplicability) && $advanceApplicability){{ $orgUrl.'/advance/applicability/update/'. $advanceApplicability->id }}@else{{ $orgUrl .'/advance/applicability/store' }} @endif "
        redirect="{{ $orgUrl . '/advance/applicability' }}">    

        @if (isset($advanceApplicability->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="advance_rule" id="advance-rule" @if(isset($advanceApplicability)) disabled @endif>
                                            <option value="">--select--</option>
                                            @foreach ($advanceRules as $advanceRule)
                                                <option value="{{ $advanceRule->id }}"
                                                    @if (isset($advanceApplicability->advance_rule_id) && $advanceApplicability->advance_rule_id == $advanceRule->id) selected @endif>
                                                    {{ $advanceRule->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($advanceApplicability)) disabled @endif>
                                                <option value="">--select--</option>
                                                @foreach ($applicabilityTypes as $applicabilityType)
                                                    <option value="{{ $applicabilityType }}"
                                                        @if (isset($advanceApplicability->applicable_type) && $advanceApplicability->applicable_type == $applicabilityType) selected @endif>
                                                        {{ $applicabilityType }} </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-12 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($advanceApplicability) && 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))
                                                    {{-- <option value="0"
                                                        @if (in_array('0', $applicabilityDetails)) selected @endif> All </option> --}}
                                                    @foreach ($applicables as $applicable)
                                                        <option value="{{ $applicable->id }}"
                                                            @if (isset($advanceApplicability) && (in_array($applicable->id, $applicabilityDetails) || in_array(0, $applicabilityDetails)) ) selected @endif>
                                                            {{ $applicable->name }} @if (isset($applicable->employee_code))
                                                                ({{ $applicable->employee_code }})
                                                            @endisset
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                @if(isset($excludeEmployeesAllow) && $excludeEmployeesAllow) 
                                <div class="row" id="employee_row">
                                    <div class="col-md-12 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> 
                                @else
                                <div class="row" id="employee_row" style="display: none">
                                    <div class="col-md-12 mb-1">
                                        <label class="form-label ">Exclude Employees</label>

                                        <select class="form-control select2" name="employee_ids[]" id="employee_select"
                                            multiple>
                                        </select>
                                    </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($advanceApplicability) && $advanceApplicability->status == 'active' && $advanceApplicability->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($advanceApplicability) && $advanceApplicability->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"].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');
    });
</script>
@endpush