@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1">
                            <h3 class="fw-semibold text-dark mb-7">Add Reimbursement Payment</h3>
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
                    <form id="PaymentForm" name="PaymentForm" class="pt-1">
                        {{ csrf_field() }}

                        <input type="hidden" name="reimbursement_payment_type" value="{{$type}}">
                        <div class="row">
                            @if($type == "OTHER")
                                <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                    <label class="required form-label fs-6 fw-semibold">Reimbursement Payment Type
                                    </label>
                                    <select class="form-select form-select-sm form-select-solid" id="reimbursement_payment_type_id"
                                            name="reimbursement_payment_type_id">
                                        <option value=""> -- select reimbursement payment type --</option>
                                        @foreach($reimbursementPaymentTypes as $reimbursementPaymentType)
                                            <option value="{{$reimbursementPaymentType->id}}"> {{$reimbursementPaymentType->name}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif


                            <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                <label class="required form-label fs-6 fw-semibold">Amount
                                </label>
                                <input type="number" class="form-control form-control-sm form-control-solid" name="amount"
                                       id="amount" placeholder="Enter amount " value="">
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                <label for="cycle_no" class="required form-label fs-6 fw-semibold"> Billing Month</label>
                                <select class="form-select form-select-sm form-select-solid" id="month_no"
                                        name="month_no">
                                    <option value=""> -- select month --</option>
                                    @if(count($months))
                                        @foreach($months as $key => $month)
                                            <option value="{{$month['id']}}"> {{$month['name']}}
                                                - {{$month['year']}} </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                <label for="payment_method" class="required form-label fs-6 fw-semibold"> Payment
                                    Type</label>
                                <select class="form-select form-select-sm form-select-solid" id="payment_method"
                                        name="payment_method" onchange="return get_payment_method( this.value );">
                                    <option value=""> -- select payment type --</option>
                                    @foreach($paymentMethods as $key => $paymentMethod)
                                        <option value="{{$key}}"> {{$paymentMethod}} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 cheque_no mb-3" style="display: none;">
                                <label class="required form-label fs-6 fw-semibold">Cheque No
                                </label>
                                <input type="text" class="form-control form-control-sm form-control-solid"
                                       name="cheque_no" id="cheque_no" placeholder="Enter Cheque No " value="">
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 cheque_no mb-3" style="display: none;">
                                <label class="required form-label fs-6 fw-semibold">Cheque Date
                                </label>
                                <input type="text" class="form-control form-control-sm form-control-solid datepicker_date"
                                       name="cheque_date" id="cheque_date" placeholder="Enter Cheque Date " value="">
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 zelle_no mb-3" style="display: none;">
                                <label class="required form-label fs-6 fw-semibold">Zelle No
                                </label>
                                <input type="text" class="form-control form-control-sm form-control-solid"
                                       name="zelle_ref_no" id="zelle_ref_no" placeholder="Enter Zelle Reference No "
                                       value="">
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                <label class="form-label fs-6 fw-semibold">Date</label>
                                <input type="date"
                                       class="form-control form-control-sm form-control-solid datepicker_date"
                                       name="date" id="date" placeholder="Select date" value="">
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                <label class="form-label fs-6 fw-semibold"> Notes
                                </label>
                                <textarea name="notes" id="notes"
                                          class="form-control form-control-sm form-control-solid"></textarea>
                            </div>
                        </div>

                        <hr>
                        <input type="hidden" value="{{$studentId}}" name="student_id">
                        <div class="row d-flex">
                            <div class="col-1">
                                <button type="button" class="btn btn-success w-100" id="SubmitForm">
                                    Save
                                </button>
                            </div>

                            <div class="col-1">
                                <a href="{{ url('reimbursement-payments/' . encryptedId($studentId) . '/list') }}" type="button"
                                   class="btn btn-primary w-10">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script type="text/javascript">
        flatpickr('.datepicker_date', {
            enableTime: false,
            dateFormat: "Y-m-d",
            allowInput: true,
        });

        $('.cheque_no').hide();
        $('.zelle_no').hide();

        function get_payment_method(value) {
            if (value == 'CHEQUE') {
                $('.cheque_no').show();
                $('.zelle_no').hide();
            } else if (value == 'ZELLE') {
                $('.zelle_no').show();
                $('.cheque_no').hide();
            } else {
                $('.cheque_no').hide();
                $('.zelle_no').hide();
            }
        }

        $(function () {
            $(document).on('click', '#SubmitForm', function (e) {
                let CSRF_TOKEN = "{{csrf_token()}}";
                let cheque_no = $('#cheque_no').val();
                let zelle_ref_no = $('#zelle_ref_no').val();
                $.ajax({
                    type: 'POST',
                    url: '{{ url("reimbursement-payments/check-validation") }}',
                    data: {
                        _token: CSRF_TOKEN,
                        cheque_no: cheque_no,
                        zelle_ref_no: zelle_ref_no
                    },
                    success: function (data) {
                        if (data.success) {
                            if(data.exists > 0){
                                Swal.fire({
                                    icon: 'warning',
                                    title: data.msg_error,
                                    showDenyButton: false,
                                    showCancelButton: true,
                                    confirmButtonText: 'Proceed'
                                }).then(function(result) {
                                    if (result.isConfirmed) {
                                        $('#is_suspicious').val('1');
                                        $('#suspicious_type').val('DUPLICATE');
                                        submitFrom();
                                    } else {
                                        return false;
                                    }
                                });
                            }else {
                                checkDepositValidation(cheque_no,zelle_ref_no)
                            }
                        } else if (data.failure) {
                            let htmlError = '';
                            $.each(data.failure, function (index, value) {
                                htmlError += '<li>' + value + '</li>';
                            });
                            toastr.error(htmlError);
                        }
                    }
                });
            });
        });

        function checkDepositValidation(cheque_no,zelle_ref_no){
            let checkUrl = "{{url('/parents/student-deposit/check-validation')}}"
            let CSRF_TOKEN = "{{csrf_token()}}";
            $.ajax({
                type: 'POST',
                url: checkUrl,
                data: {
                    _token: CSRF_TOKEN,
                    cheque_no: cheque_no,
                    zelle_ref_no: zelle_ref_no
                },
                success: function (data) {
                    if (data.success) {
                        if(data.exists > 0){
                            Swal.fire({
                                icon: 'warning',
                                title: data.msg_error,
                                showDenyButton: false,
                                showCancelButton: true,
                                confirmButtonText: 'Proceed'
                            }).then(function(result) {
                                if (result.isConfirmed) {
                                    $('#is_suspicious').val('1');
                                    $('#suspicious_type').val('DUPLICATE');
                                    submitFrom();
                                } else {
                                    return false;
                                }
                            });
                        }else {
                            submitFrom()
                        }
                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function (index, value) {
                            htmlError += '<li>' + value + '</li>';
                        });
                        toastr.error(htmlError);
                    }
                }
            });
        }
         function submitFrom(){
             $.ajax({
                 type: 'POST',
                 url: '{{ url("reimbursement-payments/store") }}',
                 processData: false,
                 contentType: false,
                 data: new FormData($('#PaymentForm')[0]),
                 dataType: 'json',

                 success: function (data) {
                     if (data.success) {
                         toastr.success(data.success);
                         setTimeout(function () {
                             window.location.href = "{{ url( 'reimbursement-payments/' . encryptedId($studentId) . '/list' ) }}";
                         }, 1500);

                     } else if (data.failure) {
                         let htmlError = '';
                         $.each(data.failure, function (index, value) {
                             htmlError += '<li>' + value + '</li>';
                         });

                         toastr.error(htmlError);
                     }
                 }
             });
         }
    </script>
@endsection