{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1" aria-controls="kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fas fa-receipt"></i>
                            </span>
                            <span class="nav-text font-size-lg">Payments</span>
                        </a>
                    </li>
                    @if(!empty($payment['id']))
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_2" aria-controls="kt_user_edit_tab_2">
                            <span class="nav-icon">
                                <i class="fas fa-clock"></i>
                            </span>
                            <span class="nav-text font-size-lg">History</span>
                        </a>
                    </li>
                    @endif
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">
                <!--begin::Tab-->
                @include("backend.errors")
                @include('backend.invoice.payments.tab_1')
                @if(!empty($payment['id']))
                @include('backend.invoice.payments.tab_2')
                @endif
                <!--end::Tab-->
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button type="button" class="btn btn-primary me-2 btn_to_disable btn-hover-rise" id="submit_btn" onclick="submitForm()">Submit</button>
            <a href="{{route('payments.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
@endsection
{{-- Scripts Section --}}
@section('scripts')
@if(!empty($payment['id']))
{!! $html->scripts() !!}
@endif
<script src="{{ asset(theme()->getDemo() . '/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#manage_form').validate();

         $(document).on('change', '.payment_mode', function () {
            toggleOtherField($(this).closest('tr'));
        });

        $(document).on('input', '.amount_received', function () {
            calculateTotalAmount();
        });

        $(document).on('change', '.is_payment_done', function () {
            calculateTotalAmount();
        });

        $(document).on('click', '.btn_delete', function(){
            let total_row = $('#payments_items_repeater tbody tr').length;
            if (total_row == 1){
                alert('Atleast one row required!');
                return;
            }
            $(this).closest('tr').remove();
            setTimeout(function() {
                calculateTotalAmount();
            }, 1000); 
            $('#payments_items_repeater tbody tr').each(function () {
                toggleOtherField($(this));
            });        
        });

        $('#payments_items_repeater_div').repeater({
            initEmpty: false,

            defaultValues: {
                'text-input': 'foo',
            },

            show: function () {
                $(this).slideDown();
                paymentItemDatePickr();
                $('#payments_items_repeater tbody tr').each(function () {
                    toggleOtherField($(this));
                });
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            },
            ready: function (ele) {
                paymentItemDatePickr();
                $('#payments_items_repeater tbody tr').each(function () {
                    toggleOtherField($(this));
                });
                calculateTotalAmount();
            }
        });

        $('.nav-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            var target = $(e.target).attr("href") // activated tab
            if (target == "#kt_user_edit_tab_2") {
                $('.card-footer').hide();
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            } else {
                $('.card-footer').show()
            }
        });
    });

    function toggleOtherField(row) {
        const paymentMode = row.find('.payment_mode').val();
        const otherField = row.find('.other');
        if (paymentMode === 'other') {
            otherField.show();
        } else {
            otherField.hide();
        }
    }

    // calculate total amount
    function calculateTotalAmount() {
        let total = 0;
        $('#payments_items_repeater tbody tr').each(function () {
            const isDone = $(this).find('.is_payment_done').val();
            if (isDone == 1) {
                const val = parseFloat($(this).find('.amount_received').val());
                if (!isNaN(val)) {
                    total += val;
                }
            }
        });
        total = total.toFixed(2);
        $('#total_payment_amount').val(total);
        managePaymentStatus(total);
    }

    function managePaymentStatus(totalAmountReceived) {
        var totalInvoiceAmount = parseFloat('{{ $total_invoice_amount }}') || 0;
        totalAmountReceived = parseFloat(totalAmountReceived) || 0;

        let status = 0;

        if ((totalAmountReceived - totalInvoiceAmount) >= 0) {
            status = 2; // Completed
        } else if (totalAmountReceived > 0 && (totalInvoiceAmount - totalAmountReceived) > 0) {
            status = 1; // Partial
        } else {
            status = 0; // Pending
        }

        console.log(totalInvoiceAmount, totalAmountReceived, status);
        

        $('#payment_status').val(status).trigger('change');
        $('#payment_status_hidden').val(status);
    }


    function paymentItemDatePickr(){
        $(".item-datepicker").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": true,
            locale: {
                format: 'DD-MM-YYYY',
            },
            //maxYear: parseInt(2030)
        }, function (start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }
        ).on('apply.daterangepicker', function (ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            console.log(picker);
            
        }).on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
        });
    }

    function submitForm() {
        if ($('#manage_form').valid()) {
            $('#manage_form').submit();
        }
    }
</script>
@endsection