@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_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/incentive/applicability") }}">{{trans('master/master.incentive_applicability')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if(isset($incentiveApplicability->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($incentiveApplicability) && $incentiveApplicability){{ $orgUrl.'/incentive/applicability/update/'.$incentiveApplicability->id }}@else{{ $orgUrl.'/incentive/applicability/store' }}@endif " redirect="{{ $orgUrl.'/incentive/applicability' }}">
    
        @if(isset($incentiveApplicability->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="incentive_rule" id = "incentive-rule">
                                            <option value="">--select--</option>
                                            @foreach($incentiveRules as $incentiveRule)
                                                <option value="{{$incentiveRule->id}}" @if(isset($incentiveApplicability->incentive_rule_id) && $incentiveApplicability->incentive_rule_id == $incentiveRule->id) selected @endif>{{$incentiveRule->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">
                                                <option value="">--select--</option>
                                                @foreach($applicabilityTypes as $applicabilityType)
                                                    <option value="{{$applicabilityType}}" @if(isset($incentiveApplicability->applicable_type) && $incentiveApplicability->applicable_type == $applicabilityType) selected @endif>{{$applicabilityType}} </option>
                                                @endforeach
                                            </select>
                                        </div>

                                    
                                        <div class="col-md-6 mb-1">
                                            <label class="form-label ">{{trans('master/master.assign_to')}} <span class="mendatory-field text-danger">*</span></label>
                                           
                                            <select class="form-control select2" name="applicable_id[]" id="applicable-id" onchange="manageSelectOption('applicable-id')" multiple>
                                                <option value=""> select </option>
                                                @if(isset($applicables))
                                                <option value="0" @if(in_array('0',$applicabilityDetails)) selected  @endif> All </option>
                                                @foreach($applicables as $applicable)
                                                    <option value="{{$applicable->id}}" @if(in_array($applicable->id,$applicabilityDetails)) selected @endif>{{$applicable->name}}  @if(isset($applicable->employee_code))
                                                        ({{$applicable->employee_code}})
                                                    @endisset</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <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($incentiveApplicability) && $incentiveApplicability->status == 'active' && $incentiveApplicability->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($incentiveApplicability) && $incentiveApplicability->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 = '<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);
                        }
                    },
                });
            });
        });
        
    </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);
        }
    }
    </script>
    
@endpush