@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')  

<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{!! $data['listBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
                        class="glyphicon glyphicon-th-list viewIcon">
                    </i>{!! $data['listBtnLabel'] !!}
                </a>
            </div>

            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="panel-heading">
                        <div class="panel-title">{{ $data['pageTitle'] }}</div>
                    </div>

                    <div class="panel-body">

                        {!! Form::open(['url' => url('hr/orgLetterTypeWiseAttributeConfig/update'),
                            'id' => 'formId', 'class' => 'form', 'method' => 'post',
                        ]) !!}

                            <input type='hidden' name='modelId' value='{{ $data['model']->id }}' />
                            <input type='hidden' name='effect_date' value='{{ $data['model']->effect_date }}' />

                            <br>
                            <div class="row form-group">
                                <div class="col-sm-12">
                                   <div class="col-sm-2">
                                       {!! Form::label('Letter Type', 'Letter Type', ['class' => 'control-label']) !!}
                                   </div>

                                   <div class="col-sm-4">
                                       {!! Form::select('org_letter_type', $data['org_letter_types'], $data['model']->letter_type,
                                            ['class' => 'form-control', 'id' => 'org_letter_type', 'disabled' => true]
                                        )!!}
                                       <p id='org_letter_type_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                   </div>
                                </div>     
                            </div>

                            <br>
                            <div class="row form-group">
                                <div class="col-sm-12">
                                    <div class="col-sm-2">
                                        {!! Form::label('Attributes', 'Attributes', ['class' => 'control-label']) !!}
                                        <span style="color: red">*</span>
                                    </div>

                                    <div class="col-sm-4">
                                        {!! Form::select('org_letter_attributes[]', $data['org_letter_attributes'], $data['model']->attributes,
                                            ['class' => 'form-control', 'id' => 'org_letter_attribute', 'multiple' => 'multiple']
                                        )!!}
                                        <p id='org_letter_attribute_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row form-group">
                                <div class="col-sm-12">
                                    <div class="col-sm-2">
                                        {!! Form::label('Effect Date', 'Effect Date', ['class' => 'control-label']) !!}
                                        <span style="color: red">*</span>
                                    </div>
    
                                    <div class="col-sm-4">
                                        {!! Form::text('effect_date', date('d-m-Y', strtotime($data['model']->effect_date)), ['class' => 'form-control datepicker', 'id' => 'effect_date',
                                            'placeholder' => 'Choose Effect Date', 'style'=>'cursor:pointer']) !!}
                                        <p id='effect_date_msg' style="max-height:3px; color:#FF0000 !important;"></p>
                                    </div>
                                </div>
                            </div>

                            <br>
                            <div class="row form-group" style="margin-top: 20px; margin-left: 230px">
                                <div class="col-sm-8 text-center">
                                    <input type="button" class="btn btn-success closeBtn" id="add" value="Update" />
                                    <a href="{!! $data['closeBtnUrl'] !!}" class="btn btn-danger closeBtn">Close</a>
                                </div>
                            </div>

                        {!! Form::close() !!}

                    </div>
                </div>
            </div>
            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function() {   
        $("#org_letter_attribute").select2({
            placeholder: 'Choose Attributes',
            allowClear: true
        }).on('select2-open', function()
        {   
            // Adding Custom Scrollbar
            $(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
        });

        $('#org_letter_type').change(function() {         
            $('#org_letter_type_msg').text('');
        });

        $('#org_letter_attribute').change(function() {         
            $('#org_letter_attribute_msg').text('');
        });
        let currentConfigId = "{{ $data['model']->id }}";
        let isHandlingChange = false;
        $('#effect_date').off('change').on('change', function () {
            if (isHandlingChange) return;
            isHandlingChange = true;
            setTimeout(() => {
                const letter_type = $('#org_letter_type').val();
                const effect_date = $(this).val();

                if (letter_type && effect_date) {
                    $.ajax({
                        url: "{{ route('validateEffectDate') }}",
                        type: 'POST',
                        data: {
                            letter_type: letter_type,
                            effect_date: effect_date,
                            exclude_attribute_config_id: currentConfigId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.status) {
                                $('#effect_date_msg').html('');
                            } else {
                                $('#effect_date').val('');
                                $('#effect_date_msg').html('<span style="color: red; font-size: 12px;">' + response.message + '</span>');
                            }
                        },
                        error: function () {
                            $('#effect_date_msg').html('<span style="color: red; font-size: 12px;">Something went wrong!</span>');
                        }
                    });
                }
                isHandlingChange = false;
            }, 100);

        });
    });

    // Form Submit Function
    $('#add').click(function(event) {
        event.preventDefault();
        $("#add").prop('disabled', true);

        var formData = $('#formId').serialize();

        $.ajax({
            url: '../../orgLetterTypeWiseAttributeConfig/update',
            type: 'POST',
            dataType: 'json',
            data: formData,
        })
        .done(function(__response) {     

            if(__response.errors) {
                if (__response.errors.org_letter_type) $('#org_letter_type_msg').text(__response.errors.org_letter_type[0]);
                if (__response.errors.org_letter_attributes) $('#org_letter_attribute_msg').text(__response.errors.org_letter_attributes[0]);
                if (__response.errors.effect_date) $('#effect_date_msg').text(__response.errors.effect_date[0]);
                $("#add").prop('disabled', false);
            } 
            else if (__response.status == true) {
                toastr.success(__response.message);
                setTimeout(function() {
                    window.location.href = "{{ route('orgLetterTypeWiseAttributeConfigList') }}";
                }, 1000);
            }
            else if (__response.status == false && __response.message) {
                $("#add").prop('disabled', false);
                toastr.error(__response.message);
            }
            else {
                $("#add").prop('disabled', false);
                alert("something went wrong");
            }
        })
        .fail(function() {
            $("#add").prop('disabled', false);
            alert("Response error");
        });

    });

</script>

@endsection