@extends(Request::ajax() ? 'layouts.model' : 'layouts.app')

@section('include_css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css" rel="stylesheet" />
@endsection
@section('content')
<div class="dashboard-wrapper">
    <div class="top-bar clearfix">
        <div class="row gutter">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="page-title">
                    {{-- <h4>{{ $header }} {{ $payment->payment_code ?? '' }}</h4> --}}
                    <h4>Cheque Return Payment Create</h4>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <ul class="right-stats" id="save_button_group">
                </ul>
            </div>
        </div>
    </div>

    <div class="main-container">
        <form action="{{ url('/') . '/payment' }}" method="POST" id="payment_form">
            @csrf
            {{-- <input type="hidden" name="payment_id" id="payment_id" value="{{ $payment->id ?? '' }}">
            <input type="hidden" name="ref_id" id="ref_id" value="{{ $payment->id ?? '' }}">
            <input type="hidden" name="ref_type" id="ref_type" value="CPM">
            <input type="hidden" name="customer_id" id="customer_id"
                value="{{ $payment->customer_id ?? $customer_id }}">
            <input type="hidden" name="page" id="ref_type" value="PM">
            <input type="hidden" name="record_payment_update_id" id="record_payment_update_id">
            <input type="hidden" name="page" id="page" value="{{ $page ?? '' }}">
            <input type="hidden" name="payment_status" id="payment_status" value="{{ $payment->status ?? '' }}">
            <input type="hidden" name="invoice_id" id="invoice_id" value=""> --}}


            <!-- Row starts -->
            <div class="row gutter">
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="card" id="customer_detail_panel">
                        <div class="card-body">
                            <div class="row gutter">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                                    <label for="">Customer Name</label>
                                    <select name="customer_id_selected" class="form-control select2 select3"
                                        id="customer_id_selected">
                                        <option value="">Select Customer Name</option>
                                        @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->company_name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                                    <label for="">Customer Code</label>
                                    <select name="customer_name_selected" class="form-control select2"
                                        id="customer_name_selected">
                                        <option value="">Select Customer Code</option>
                                        @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->company_name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                {{-- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    {{ formDropdown('Customer Code', 'customer_name_select', [], '', ['class' => 'form-control select2 ','id' => 'customer_name_select']) }}

                            </div> --}}

                        </div>

                    </div>
                </div>
                {{-- <div class="alert alert-info alert-dismissible" id="customer_info_alert"></div> --}}
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">

                @include('cheque_return_payment.cheque_return_payment_filter')

            </div>
    </div>
    <!-- Row ends -->
    <div class="" id="all_details_panel">
        <div id="overlay"></div>
        {{-- @include('xpayment::payment_filter') --}}

        <div class="card card-primary" id="cheque_return_payment_panel">
            <div class="card-body">
                <form id="cheque_return_payment_table_form">
                    <div class="row gutter">
                        <div class="table-responsive">
                            <table id="cheque_return_payment_table"
                                class="table table-striped table-bordered no-margin" cellspacing="0"
                                width="100%">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Cheque Date</th>
                                        <th>Cheque Return Date</th>
                                        <th>CHEQUE No</th>
                                        <th>Amount</th>
                                        <th>Payment Amount</th>
                                        <th>Status</th>

                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <div class="form-group">
        </div>

        <!-- Row starts -->
        <div class="row gutter">

        </div>
    </div>
    </form>


</div>
<!-- Main container ends -->

</div>
@endsection
@section('custom_script')
<script>
    // $(document).on('click', '#cheque_payment_add_item_btn', function(){
    //     alert('in');

    //     $('#chequePaymentForm').submit();
    // })

    $(document).on('click', '#cheque_payment_add_item_btn', function(e) {
        e.preventDefault();

        if (!$('#payment_date').val()) {
            $.notify({
                message: "⚠ Payment date is required."
            }, {
                z_index: 10000000000,
                type: "danger",
            });
            return false;
            
        }

        if (!$('#cheque_date').val()) {
            $.notify({
                message: "⚠ Cheque date is required."
            }, {
                z_index: 10000000000,
                type: "danger",
            });
            return false;
            
        }

        if (!$('#payment_amount').val() || parseFloat($('#payment_amount').val()) <= 0) {
            $.notify({
                message: "⚠ Payment amount is required and must be greater than zero."
            }, {
                z_index: 10000000000,
                type: "danger",
            });
            return false;
        }


        var table_data = $('#cheque_return_payment_table_form').serialize();

        let payment_date = $('#payment_date').val();
        let cheque_date = $('#cheque_date').val();
        let cheque_bank = $('#cheque_bank').find(":selected").val();
        let customer_id = $('#customer_name_selected').find(":selected").val();
        let payment_ref_no = $('#payment_ref_no').val();
        let payment_remarks = $('#payment_remarks').val();
        let payment_amount = $('#payment_amount').val();
        let payment_code = $('#payment_code').val();
        let payment_method = $('#payment_meth').val();

        let request_body = {
            payment_data: table_data,
            payment_date: payment_date,
            payment_code: payment_code,
            cheque_bank: cheque_bank,
            customer_id: customer_id,
            cheque_date: cheque_date,
            payment_ref_no: payment_ref_no,
            payment_remarks: payment_remarks,
            payment_amount: payment_amount,
            payment_method: payment_method
        }
        // alert(customer_id)


        $.ajax({

            method: 'POST',
            url: "{{ route('cheque-return-payments.store') }}",
            data: request_body,

            success: function(result) {
                if (result.status == 'success') {

                    console.log(result.msg);
                    // $('div.brands_modal').modal('hide');
                    // toastr.success(result.msg);
                    notification(result);
                    window.location.reload();
                } else {
                    notification(result.msg);
                }
            },
        });
    });

    var customer_id = '';


    $(document).on('change', '#customer_id_selected, #customer_name_selected', function() {

        customer_id = $(this).val();
        // console.log(customer_id);


        $.ajax({
            url: BASE + 'cheque-return-payments/cheque-return-details/' + customer_id,
            method: 'GET',
            success: function(response) {

                $('#cheque_return_payment_table tbody').empty();

                $.each(response, function(index, cheque) {
                    if (cheque.status !== 'paid') {

                        var row = '<tr>' +
                            '<td><input type="checkbox" class="cheque_payment_check" name="cheque_payment[' +
                            cheque.id + '][cheque_id]" value="' + cheque.id + '"  id="' +
                            cheque.id + '"></td>' +
                            // '<td>'+ cheque.bank_id + '</td>'+
                            '<td style="text-align: right;">' + cheque.cheque_date +
                            '</td>' +
                            '<td style="text-align: right;">' + cheque.cheque_return_date +
                            '</td>' +
                            '<td>' + (cheque.payment_ref_no ? cheque.payment_ref_no :
                                'N/A') + '</td>' +
                            '<td style="text-align: right;">' + 'Rs.' + cheque
                            .payment_amount +
                            '<input type="hidden" class="cheque_amount_input" value=" ' +
                            cheque.payment_amount + ' "></td>' +
                            '<td style="text-align: center;"><input type="number" value="" class="cheque_payment_amount" name="cheque_payment[' +
                            cheque.id + '][amount]" id="' + cheque.id +
                            '" disabled=""></td>' +
                            (cheque.status == 'partial' ? '<td>' +
                                '<span class="text-primary">' + '<strong>' + cheque.status +
                                '</strong>' + '</span>' + '</td>' : '') +
                            (cheque.status == 'pending' ? '<td>' +
                                '<span class="text-danger">' + '<strong>' + cheque.status +
                                '</strong>' + '</span>' + '</td>' : '') +
                            (cheque.status == 'paid' ? '<td>' +
                                '<span class="text-success">' + '<strong>' + cheque.status +
                                '</strong>' + '</span>' + '</td>' : '') +

                            '</tr>';

                        $('#cheque_return_payment_table tbody').append(row);
                    }
                });

            },
            error: function(xhr, status, error) {
                // Handle any errors that occur during the AJAX request
                console.log(error);
            }
        });

        returnChequePayments(customer_id);
        clearFileds();

    })

    function clearFileds() {
        const today = new Date().toISOString().split('T')[0];
        $('#payment_date').val(today);
        $('#cheque_date').val(today);
        $('#cheque_bank select').val($('#cheque_bank select option:first').val()).trigger('change');
        $('#payment_ref_no').val('');
        $('#payment_remarks').val('');
        $('#payment_amount').val('');
        $('#payment_code').val('');
        $('#payment_meth').val('cash').trigger('change');
        $('#value_show').prop('hidden', true);
        $('#cheque_value_show').text('0.00');
        $('#cheque_value_show').prop('hidden', true);
        display_total = 0;
        $('#payment_value').text('0.00');
        $('#remaining_value').text('0.00');
        $('#cheque_payment_add_item_btn').addClass('disabled');

        $('.cheque_payment_check').prop('checked', false);
        $('.cheque_payment_amount').prop('disabled', true);
        $('.cheque_payment_amount').val('');
    }

    function returnChequePayments(customer_id) {
        $.ajax({
            url: BASE + 'cheque-return-payments/cheque-return-payment-details/' + customer_id,
            method: 'GET',
            success: function(response) {

                $('#chequeReturnPaymentsTable tbody').empty();

                $.each(response, function(index, cheque_payment) {

                    var row = '<tr>' +

                        '<td>' + (cheque_payment.payment_code ? cheque_payment.payment_code :
                            'N/A') + '</td>' +

                        '<td class="text-right">' + cheque_payment.payment_date + '</td>' +
                        '<td class="text-right">' + cheque_payment.cheque_date + '</td>' +
                        '<td >' + cheque_payment.payment_method + '</td>' +
                        // (cheque_payment.status == 'partial' ? '<td>'+ '<span class="text-primary">' +  '<strong>'+ cheque_payment.status + '</strong>'+ '</span>' + '</td>' : '') +
                        // (cheque_payment.status == 'pending' ? '<td>'+ '<span class="text-danger">' + '<strong>'+ cheque_payment.status + '</strong>'+ '</span>' + '</td>' : '') +
                        // (cheque_payment.status == 'paid' ? '<td>'+ '<span class="text-success">' + '<strong>'+ cheque_payment.status + '</strong>'+ '</span>' + '</td>' : '') +
                        // '<td>'+ cheque_payment.bank_id + '</td>'+
                        '<td>' + (cheque_payment.payment_ref_no ? cheque_payment.payment_ref_no :
                            'N/A') + '</td>' +
                        '<td>' + (cheque_payment.payment_remarks ? cheque_payment.payment_remarks :
                            'N/A') + '</td>' +
                        '<td class="text-right">' + 'Rs.' + cheque_payment.total_payment_amount
                        .toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        }) + '</td>' +
                        '</tr>';
                    console.log(row);
                    $('#chequeReturnPaymentsTable tbody').append(row);
                });

            },
            error: function(xhr, status, error) {
                // Handle any errors that occur during the AJAX request
                console.log(error);
            }
        });

    }

    $(document).on('change', '.cheque_payment_check', function() {
        $('#value_show').prop('hidden', false);
        var payment_amount = $('#payment_amount').val();
        var row = $(this).closest('tr');
        var total = 0;
        if (payment_amount == '') {
            $.notify({
                // options
                message: "Please enter the amount before proceeding",
            }, {
                // settings
                z_index: 10000000000,
                type: "danger",
            });
            $('.cheque_payment_check').prop('checked', false);
        } else {

            if ($(this).prop('checked')) {
                row.find('.cheque_payment_amount').prop('disabled', false);
                // var total_string = row.find('td:eq(3)').text();
                var total_string = row.find('.cheque_amount_input').val();
                displayTotal(total_string)
            } else {

                row.find('.cheque_payment_amount').prop('disabled', true);
                row.find('.cheque_payment_amount').val('');
                // var total_string = row.find('td:eq(3)').text();
                var total_string = row.find('.cheque_amount_input').val();
                subtractTotal(total_string)
            }

        }
    })

    let display_total = 0;

    function displayTotal(total_string) {
        let total = total_string.replace(/[^0-9-]+/g, "").slice(0, -2);

        let float_total = parseFloat(total);
        // console.log(total)
        console.log(float_total)
        if (!isNaN(float_total)) {

            display_total += float_total;

            $('#cheque_value').prop('hidden', true);
            $('#cheque_value_show').prop('hidden', false);
            let formatted_display_total = display_total.toLocaleString('en-US', {
                minimumFractionDigits: 2
            });
            console.log('inside' + formatted_display_total);
            $('#cheque_value_show').text(formatted_display_total);


        }
    }

    function subtractTotal(total_string) {
        let grand_total_string = $('#cheque_value_show').text();
        let total = total_string.replace(/[^0-9-]+/g, "").slice(0, -2);
        let grand_total = grand_total_string.replace(/[^0-9-]+/g, "").slice(0, -2);
        let float_grand_total = parseFloat(grand_total);
        let float_total = parseFloat(total);
        if (!isNaN(float_total)) {

            display_total = float_grand_total - float_total;

            $('#cheque_value').prop('hidden', true);
            $('#cheque_value_show').prop('hidden', false);
            let formatted_display_total = display_total.toLocaleString('en-US', {
                minimumFractionDigits: 2
            });
            $('#cheque_value_show').text(formatted_display_total);
        }

    }

    $(document).on('input', '.cheque_payment_amount', function() {

        let row = $(this).closest('tr');
        let input_value = parseFloat(row.find('.cheque_payment_amount').val());
        // let cheque_payment_amount_string = row.find('td:eq(3)').text();
        let cheque_payment_amount_string = row.find('.cheque_amount_input').val();
        let cheque_payment_amount = cheque_payment_amount_string.replace(/[^0-9-]+/g, "").slice(0, -2);
        let main_payment = $('#payment_amount').val();

        if (input_value > main_payment) {

            $('.cheque_payment_amount').val('');
        }
        calculate();


    })



    function calculate() {

        let sum = 0;
        let amount = parseFloat($('#payment_amount').val());
        $('.cheque_payment_amount').each(function() {
            let value = parseFloat($(this).val());
            sum += isNaN(value) ? 0 : value;
        })

        // alert(sum)
        let sub_amount = amount - sum;
        if (sub_amount < 0) {
            sub_amount = 0;
        }

        let formatted_sub_amount = sub_amount.toLocaleString('en-US', {
            minimumFractionDigits: 2
        });
        let formatted_sum = sum.toLocaleString('en-US', {
            minimumFractionDigits: 2
        });
        $('#payment_value').text(formatted_sum)
        $('#remaining_value').text(formatted_sub_amount)
        if (sub_amount == 0) {
            $('#cheque_payment_add_item_btn').removeClass('disabled');
        }
        if (sub_amount !== 0) {
            $('#cheque_payment_add_item_btn').addClass('disabled');
        }

    }


    var customer_name_selected = $('#customer_name_selected').select2({
        ajax: {
            url: BASE + 'get_select_two_customer_code_filter',
            dataType: 'json',
            delay: 500,
            processResults: function(data) {
                return {
                    results: $.map(data, function(item) {
                        return {
                            text: item.business_name,
                            id: item.id
                        };
                    })
                };
            },
        }
    });


    var customer_id_selected = $('#customer_id_selected').select2({
        ajax: {
            url: BASE + 'get_select_two_customer_name_filter',
            dataType: 'json',
            delay: 500,
            processResults: function(data) {
                return {
                    results: $.map(data, function(item) {
                        if (item.company_name != '') {
                            return {
                                text: item.company_name,
                                id: item.id
                            };
                        }
                    })
                };
            },
        }
    });

    //bank input show

    $('#payment_meth').on('change', function() {
        let payment_method = $(this).val();
        if (payment_method == 'cheque') {
            $('#cheque_bank').prop('hidden', false)
            $('#payment_col').prop('hidden', false)
        } else {
            $('#cheque_bank').prop('hidden', true)
            $('#payment_col').prop('hidden', true)
        }
    })
</script>
@endsection