@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">Update Reimbursement Payment</h3>
                        </div>
                    </div>
                </div>

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

                        <div class="row">
                            <input type="hidden" name="reimbursement_payment_type" value="{{$payment->reimbursement_payment_type}}">
                            @if($payment->reimbursement_payment_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}}" {{($payment->reimbursement_payment_type_id == $reimbursementPaymentType->id) ? 'selected' : ''}}> {{$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="{{$payment->amount}}">
                            </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['id'] == $payment->month_no) ? 'selected' : ''}}> {{$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}}" {{($payment->payment_method == $key) ? 'selected' : ''}}> {{$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="{{$payment->cheque_no}}">
                            </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="{{$payment->cheque_date}}">
                            </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="{{$payment->zelle_ref_no}}">
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6 mb-3">
                                <label class="form-label fs-6 fw-semibold">Deposit Date</label>
                                <input type="date"
                                       class="form-control form-control-sm form-control-solid datepicker_date"
                                       name="deposit_date" id="deposit_date" placeholder="Select date" value="{{$payment->date}}">
                            </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">{{$payment->notes}}</textarea>
                            </div>
                        </div>

                        <hr>
                        <input type="hidden" value="{{$payment->student_id}}" name="student_id">
                        <input type="hidden" value="{{$payment->id}}" name="record_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($payment->student_id) . '/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,
        });
        @if($payment->payment_method == 'CHEQUE')
            $('.cheque_no').show();
            $('.zelle_no').hide();
        @endif

        @if($payment->payment_method == 'ZELLE')
            $('.cheque_no').hide();
            $('.zelle_no').show();
        @endif


        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) {
                $.ajax({
                    type: 'POST',
                    url: '{{ url("reimbursement-payments/update") }}',
                    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($payment->student_id) . '/list' ) }}";
                            }, 1500);

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

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