@extends('admin.layout.master')
@section('title', __('obs.bill_installment'))
@section('custom_style')
    @include('inventory.blade_styles.posting_blade_css')
@endsection
@section('content')
    <div class="cl-card card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title m-0">{{__('obs.bill_installment')}}</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-xl-2p5 col-lg-3 col-md-4 col-sm-6">
                    <div class="classic_input_container">
                        <div class="classic_label" title="type">
                            {{__('obs.type')}}
                        </div>
                        <div class="classic_input">
                            <select class="form-select cl-form-select" name="type" id="type" NsModelBind="dataObj.type" onchange="setupParty(this.value)">
                                <option value="1">{{ __('obs.payment')}}</option>
                                <option value="2">{{__('obs.receive')}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2p5 col-lg-3 col-md-4 col-sm-6" id="div_vendor">
                    <div class="classic_input_container">
                        <div class="classic_label" title="vendor_id">
                            {{__('obs.vendor')}}
                        </div>
                        <div class="classic_input">
                            @include('v2.inventory.global.party_live_dd', [
                                'type'=> 1,
                                'id'=> 'vendor_id',
                                'skip_add_new'=> 1,
                                'binder'=> 'dataObj.vendor_id',
                                'cls'=> 'v'
                            ])
                        </div>
                    </div>
                </div>
                <div class="col-xl-2p5 col-lg-3 col-md-4 col-sm-6" id="div_customer" style="display: none;">
                    <div class="classic_input_container">
                        <div class="classic_label" title="customer_id">
                            {{__('obs.customer')}}
                        </div>
                        <div class="classic_input">
                            @include('v2.inventory.global.party_live_dd', [
                                'type' => 2,
                                'id'=> 'customer_id',
                                'skip_add_new'=> 1,
                                'binder'=> 'dataObj.customer_id',
                                'cls' => 'p'
                            ])
                        </div>
                    </div>
                </div>
                <div class="col-xl-2p5 col-lg-3 col-md-4 col-sm-6">
                    <div class="classic_input_container">
                        <div class="classic_label" title="pay_status">
                            {{__('obs.pay_status')}}
                        </div>
                        <div class="classic_input">
                            <select class="form-select cl-form-select" name="pay_status" id="pay_status" NsModelBind="dataObj.pay_status">
                                <option value="1">{{ __('obs.unpaid')}}</option>
                                <option value="2">{{__('obs.paid')}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2p5 col-lg-3 col-md-4 col-sm-6">
                    <div class="classic_input_container">
                        <div class="classic_label" title="type">
                            {{__('obs.installment_start_date')}}
                        </div>
                        <div class="classic_input">
                            @include('v2.admin.global.date', [
                                'value'=> date('d-m-Y'),
                                'binder'=> 'dataObj.date'
                            ])
                        </div>
                    </div>
                </div>
                <div class="col-2">
                    <button type="button" class="btn btn-coral cl-btn" onclick="getInstallments()"> <i class="bi bi-filter"></i>
                        <span>{{__('obs.filter')}}</span>
                    </button>
                </div>
            </div>
            <div class="cl-table-container mt-3" id="div_tbl" style="max-height: calc(100vh - 190px);">
                <table class="table mb-0 rounded-2 cl-bg-gray-100 cl-table table-bordered">
                    <thead>
                        <th class="text-center">#</th>
                        <th class="text-center">{{__('obs.inv_no')}}</th>
                        <th class="text-center">{{__('obs.inv_date') }}</th>
                        <th class="text-center">{{__('obs.due_date') }}</th>
                        <th class="text-center">{{__('obs.due_amount') }}</th>
                        <th class="text-center">{{__('obs.amount') }}</th>
                        <th class="text-center">{{__('obs.notes') }}</th>
                        <th class="text-center" colspan="2">{{__('obs.action') }}</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    @include('v2.admin.global.empty_modal', [
        'modal_title'=> __('obs.installment_voucher'),
        'modal_id'=> 'installment_voucher_modal', 
        'modal_body_id'=> 'installment_voucher_modal_body'
    ])
@endsection
@section('script')
    <script>
        dataObj = {
            type: 1,
            vendor_id: null,
            customer_id: null,
            pay_status: 1,
            // cost_center_id: '',
            // inv_group_id: '',
            // invoice_no: '',
            // ref_invoice: '',
            // pay_status: '',
            date: date_picker_instances?.element.value,
            // date_to: date_picker_instances[1].element.value
        }

        $(document).ready(function() {
        });

        const setupParty = (type) => {
            if (type == 2) {
                $('#div_vendor').hide('slow')
                $('#div_customer').show('slow')
                $('#vendor_id').html('');
                dataObj.vendor_id = null;
            } else {
                $('#div_vendor').show('slow')
                $('#div_customer').hide('slow')
                $('#customer_id').html('');
                dataObj.customer_id = null;
            }
        }
        const getInstallments = () => {
            ajaxCallV2('/accounts/installment/index', 'GET', dataObj, (html) => {
                $('#div_tbl').html(html);
                $('#loader').hide();
            });
        }

        const printBarcode = async (inv_id) => {
            const inv = await invoices.find(inv=> inv.id == inv_id);
            let reqObj = inv.transactions.map(tr=> ({'product_id': tr.product_id, 'quantity': tr.quantity}));
            ajaxCallV2('/invoicewise-barcode-generate', 'GET', {'data': reqObj}, (res)=> {
                printPopUp({ html: res });
                $('#loader').hide();
            });
        }

        const receivePayment = (id, due_amount) => {
            const amount = $('#amount_'+id).val();
            const cash_bank_id = $('#cash_bank_id_'+id).val();
            if (!amount || amount > due_amount) {
                alert('Please Enter Amount or Enter Valid Amount..!!');
                return;
            }
            const cb_type = cash_banks.find(cb=>cb.account_id==cash_bank_id)?.type;
            ajaxCallV2('/accounts/installment/receive-payment', 'POST', {
                id: id,
                cash_bank_ledger_id: cash_bank_id,
                amount: amount,
                cb_type: cb_type
            }, (res) => {
                console.log(res);
                getInstallments();
                $('#loader').hide();
            });
        }

        const editReceivePayment = id => {
            const ins = installments.find(item=> item.id == id);
            console.log(ins);
            
            let str = `<table class="table mb-0 rounded-2 cl-bg-gray-100 cl-table table-bordered">
                <thead>
                    <th class="text-center">#</th>
                    <th class="text-center">Voicher No</th>
                    <th class="text-center">Date</th>
                    <th class="text-center">Amount</th>
                    <th class="text-center">Action</th>
                </thead>
                <tbody>`;
                    for (const [i, vcr] of ins.vouchers.entries()) {
                        str += `<tr>
                            <td class="text-center">${i+1}</td>
                            <td class="text-center">${vcr.voucher_no}</td>
                            <td class="text-center">${vcr.date}</td>
                            <td class="text-center">${vcr.transaction_amount}</td>
                            <td class="text-center">
                                <a href="/accounts/voucher/voucher_edit?id=${vcr.id}&voucher_id=${vcr.id}" target="_blank" title="Edit" target="_blank" class="badge badge-hover badge text-bg-warning"><i class="bi bi-pencil-square"></i></a>
                            </td>
                        </tr>`
                    }
                str += `</tbody>
            </table>`;
            $('#installment_voucher_modal_body').html(str);

            $('#installment_voucher_modal').modal('show');
        }
    </script>
@endsection