@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/store'),
                            'id' => 'formId', 'class' => 'form', 'method' => 'post',
                        ]) !!}

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

                                    <div class="col-sm-4">
                                        {!! Form::select('org_letter_type', ['' => 'Select Letter Type'] + $data['org_letter_types'], '',
                                                ['class' => 'form-control', 'id' => 'org_letter_type']
                                            )!!}
                                        <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[]', [], '',
                                            ['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', null, ['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="Save" />
                                    <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('');
        });
        $('#effect_date').change(function() {
            $('#effect_date_msg').text('');
        });
    });

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

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

        $.ajax({
            url: '../orgLetterTypeWiseAttributeConfig/store',
            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) {
                toastr.error(__response.message);
                $("#add").prop('disabled', false);
            }
            else {
                $("#add").prop('disabled', false);
                alert("something went wrong");
            }
        })
        .fail(function() {
            $("#add").prop('disabled', false);
            alert("Response error");
        });

    });

    $('#org_letter_type').change(function() {
        const letter_type = $(this).val();
        if (letter_type !== '') {
            $.ajax({
                url: "{{ route('getOrgLetterTypeAttributes') }}",
                type: 'POST',
                data: {
                    letter_type: letter_type,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    let options = '';
                    $.each(response, function (key, value) {
                        options += `<option value="${key}">${value}</option>`;
                    });

                    $('#org_letter_attribute').html(options).trigger('change');
                }
            });
        } else {
            $('#org_letter_attribute').html('').trigger('change');
        }
    });

    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,
                        _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);

    });

</script>

@endsection