@extends('layouts.app')

@section('content')
<style>
    .select2-container--bootstrap {
        width: unset !important;
    }

    /* .unselectable{
     background-color: #ddd;
     cursor: not-allowed;
    } */

    .bg-light-blue {
        background-color: transparent !important;
        padding: 15px;
    }

    .bg-blue {
        background-color: #1878c5 !important;
        min-height: 130px;
        text-align: center;
        padding-top: 60px;
    }

    .company_logo {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .company_details {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .job_details ul {
        list-style: none;
        padding-left: 0px;
    }

    .job_details ul li {
        font-weight: 600;
        color: black;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 2;
    }

    .right_top p {
        color: black !important;
        position: relative;
        width: 100%;
        text-align: right;
    }

    .right_top p:first-child::after {
        display: none;
    }

    .right_top p::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        width: 75px;
        margin-left: auto;
        height: 1px;
        background-color: #000;
    }

    .billing_description {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        padding-inline: 25px;
    }

    .billing_description h4 {
        font-size: 15px
    }

    .billing_description p {
        line-height: 1;
        font-size: 13px;
        margin-bottom: 6px;
    }

    .invoice_details tbody tr td {
        text-transform: uppercase;
        color: #000;
        padding: 5px !important;
        font-size: 10px;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #000000;
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid #000000;
    }

    .amount_total {
        display: flex;
        justify-content: space-between;
    }

    .amount_total p {
        margin-bottom: 0;
        font-size: 12px;
    }

    .amount_total p span {
        float: right;
    }
    </style>
    <form class="form" id="invoiceForm">
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="pt-3 px-3">
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="job_id">Select Job Number</label>
                                <select id="job_id" name="job_id" class="form-control">
                                    <option selected disabled="">Select Job</option>
                                    @foreach ($jobs as $item)
                                    <option value="{{$item->id}}">{{$item->job_no}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="row d-none" id="delivery_data">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="pt-3 px-3">
                        <div class="form-body">
                            <h4 class="form-section">
                                <i class="icon-user"></i> Job Details
                            </h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Consignee Name</label>
                                        <h4 class="consignee_name">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Client Name</label>
                                        <h4 class="client">...</h4>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>BL#</label>
                                        <h4 class="bl_no">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>GD Number</label>
                                        <h4 class="gd_no">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Shipment of Marks</label>
                                        <h4 class="shipping_remarks">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Invoice Value</label>
                                        <h4 class="invoice_value">...</h4>
                                    </div>
                                </div>

                            </div>

                            <div class="row ">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Consignee Expenses</th>
                                                <th>Expense</th>

                                            </tr>
                                        </thead>
                                        <tbody id="job_expensesOnly">

                                        </tbody>
                                        <tfoot id="job_expenses_foot">
                                            <tr>
                                                <td>Total</td>
                                                <td id="total_foot"></td>
                                            </tr>
                                            <tr>
                                                <td>Tax
                                                    <input type="hidden" id="hidden_tax_perc">
                                                </td>
                                                <td id="tax_foot">
                                                    0
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Discount</td>
                                                <td><input type="text" class="form-control discount" name="discount" value="0"></td>
                                            </tr>
                                            <tr>
                                                <td>Net Invoice:</td>
                                                <td id="net_invoice_foot"></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <button class="btn btn-success" id="add_item">Add More Item</button>
                                </div>
                            </div>

                            {{-- <h4 class="form-section">
                                <i class="icon-book-open"></i>Generate Invoice
                            </h4> --}}
                            <input type="hidden" name="job_no">
                            <input type="hidden" name="total_amount">
                            <input type="hidden" name="tax">
                            <input type="hidden" name="net_invoice">
                            <div class="row">
                                <div class="pt-4 text-center col-12">
                                    {{-- <button type="button" class="btn btn-info mr-1 prepare">
                                        <i class="icon-note"></i> Prepare/Edit Draft
                                    </button> --}}
                                    <!-- <button type="button" class="btn btn-info mr-1 prepareitem">
                                        <i class="icon-note"></i> Prepare/Edit Item
                                    </button> -->
                                    <button type="button" class="btn btn-primary d-none generate_pdf">
                                        <i class="icon-book-open"></i> Generate Invoice
                                    </button>
                                    {{-- <button type="button" class="btn btn-success addMore d-none" style="float: right"><i class="fa fa-plus"></i> Add More</button> --}}
                                </div>
                            </div>

                            
                            <div class="form-actions">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                                <button type="button" class="btn btn-success" id="saveBtn">
                                    <i class="icon-note"></i> Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</form>
</div>
</div>
<div class="d-none">
    <div class="container-fluid p-5" id="generate_invoice_pdf">
        <div class="row">
            <div class="col-3" style="background: #65adcd4a!important;padding: 0;">
                <div class="bg-blue">
                    <h3 class="white">INVOICE</h3>
                </div>
                <div class="bg-light-blue">
                    <div class="company_logo">
                        <img src="{{asset('/paracha-traders.png')}}" alt="" class="img-fluid">
                    </div>
                    <div class="company_details">
                        <span>Paracha Traders</span>
                        <span>123 Street</span>
                        <span>City, Zip Code</span>
                        <span>Phone Number</span>
                        <span>Email Address</span>
                        <span>Website</span>
                    </div>
                    <div class="job_details">
                        <ul>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="right_top pt-3">
                    <p class="mb-0">JOB#</p>
                    <p class="job_no">-</p>
                    <p class="invoice_date">-</p>
                    <p class="invoice_no">-</p>
                </div>
                <div class="billing_description">
                    <div class="bill_to w-100 pr-5">
                        <h4>Bill To</h4>
                        <hr>
                        <p class="client_name">-</p>
                        <p>-</p>
                        <p>-</p>
                        <p class="client_phone">-</p>
                        <p class="client_email">-</p>
                    </div>
                    <div class="goods_description w-100  pl-5">
                        <h4>Details</h4>
                        <hr>
                        <div class="row desc">

                        </div>
                    </div>
                </div>
                <div class="invoice_details mt-3">
                    <table class="table table-bordered table-striped">
                        <thead style="background-color: #1878c5">
                            <tr align="center" class="white">
                                <th>Description</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="invoice_response">

                        </tbody>
                    </table>
                    <div class="amount_total">
                        <div>
                            <p>Remarks / Payment Instructions:</p>
                        </div>
                        <div>
                            <p>SUBTOTAL <span class="subtotal"></span></p>
                            <p>DISCOUNT <span>0.00</span></p>
                            <p>SUBTOTAL LESS DISCOUNT <span class="subtotal"></span></p>
                            <p>TAX RATE <span class="tax_rate"></span></p>
                            <p>TOTAL TAX <span class="total_tax"></span></p>
                        </div>
                    </div>
                    <div style="text-align: right;color:#000;">
                        <p>BALANCE DUE: <span style="padding-left: 20px;color: black;font-weight: bold;background: #65adcd4a!important;" class="net_invoice"></span></p>
                    </div>
                    <div class="d-flex" style="gap:0 25px;margin-top:40px">
                        <div style="width: 35%">
                            <hr class="m-0">
                            <p class="mb-0" style="font-size: 12px">Company Signature</p>
                        </div>
                        <div style="width: 35%">
                            <hr class="m-0">
                            <p class="mb-0" style="font-size: 12px">Client Signature</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@section('afterScript')
<script src="{{ asset('js/html2canvas.js')}}"></script>
<script src="{{ asset('js/html2pdf.bundle.min.js')}}"></script>

<script>
    $(document).ready(function() {
        $('#add_item').click(function(e){
            var output='';
            output+='<tr>';
            output+='<td>';
            output+='<select class="form-control" name="item_id[]" id="item_id">';
            output+='<option value="">Please Select</option>';
            output+='@foreach($itemslist as $item)';
            output+='<option value="{{$item->id}}">{{$item->item_name}}</option>';
            output+='@endforeach';
            output+='</select>';
            output+='</td>';
            output+='<td>';
            output+='<input type="text" class="form-control consignee_expense_amount" name="consignee_expense_amount[]">';
            output+='</td>';
            output+='</tr>';
            $('#job_expensesOnly').append(output);
            e.preventDefault();
        })
        $(document).on('click', '.generate_pdf', function() {
            var id = $(this).attr('data-id');
            var job_no=$('#job_id').val();
            $.ajax({
                url: 'generate_pdf_consignee_invoice/' + job_no,
                method: 'GET',
                dataType: 'json', 
                success:function(data){
                    $.ajax({
                        url: '/getConsigneeInvoice/' + id,
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            var gd_no = data['gd_no'] == null ? '-' : data['gd_no'].gd_no;
                            var job_html = '';
                            job_html += '<li>Shipping Details: <span></span></li>';
                            job_html += '<li>BL#: <span>' + data['job'].shipping_detail.bl_number + '</span></li>';
                            job_html += '<li>Container No(s): <span>' + data['containers_details'].length + '</span></li>';
                            job_html += '<li>GD Number: <span>' + gd_no + '</span></li>';
                            job_html += '<li>Shipping marks:<span>' + data['job'].consignment_detail.shipping_marks + '</span></li>';
                            job_html += '<li>Vessel Name: <span>' + data['job'].shipping_detail.vessel_name + '</span></li>';
                            job_html += '<li>Invoice Value: <span>' + data['job'].consignment_detail.invoice_value + '</span></li>';
                            job_html += '<li>Import Value: <span>-</span></li>';
                            job_html += '<li>Total Taxes: <span>' + data['invoice'].tax + '</span></li>';
                            job_html += '<li>NTN No.: <span>' + data['job'].consignee.ntn + '</span></li>';
                            job_html += '<li>STR No.: <span>' + data['job'].consignee.srtn + '</span></li>';
                            job_html += '<li>IGM# & Date: <span>' + data['job'].shipping_detail.igm_no + ' & ' + data['job'].shipping_detail.igm_date + '</span></li>';
                            job_html += '<li>Index No: <span>' + data['job'].shipping_detail.index_no + '</span></li>';
                            job_html += '<li>Delivery Port: <span>' + data['job'].port_discharge.port_discharge_datetime + '</span></li>';
                            job_html += '<li>Truck No(s): <span>-</span></li>';
                            job_html += '<li>Quantity: <span>' + data['job'].consignment_detail.qty + '</span></li>';
                            job_html += '<li>Delivery Godown: <span>-</span></li>';
        
                            $('.job_details ul').html(job_html);
                            $('.job_no').text(data['job'].job_no);
                            $('.invoice_date').text(data['date']);
                            $('.invoice_no').text('INVOICE# ' + data['invoice'].id);
        
                            $('.client_name').text(data['job'].client.client_name);
                            $('.client_phone').text(data['job'].client.phone);
                            $('.client_email').text(data['job'].client.email);
        
                            var desc='';
                             desc+='<div class="col-md-6"><span>Invoice Value:</span></div>';
                             desc+='<div class="col-md-6"><span>'+data["job"].consignment_detail.invoice_value+'</span></div>';
                            $('.desc').append(desc);
        
                            var invoice_html = '';
                            data['invoice'].invoice_detail.forEach(element => {
                                invoice_html += '<tr>';
                                invoice_html += '<td>' + element.description + '</td>';
                                invoice_html += '<td align="right">' + element.amount + '</td>';
                                invoice_html += '</tr>';
                            });
                            $('#invoice_response').html(invoice_html);
                            $('.subtotal').text(data['invoice'].total_amount);
                            $('.total_tax').text(data['invoice'].tax);
                            // var tax_rate = data['invoice'].total_amount/100;
                            var tax_rate = data['invoice'].tax / (data['invoice'].total_amount / 100);
                            $('.tax_rate').text(Math.round(tax_rate));
                            $('.net_invoice').text(data['invoice'].net_invoice);
                            PrintElem('#generate_invoice_pdf', 'Paracha_Invoice_' + data['invoice'].id);
                        }
                    });

                },
                error:function(e){
                    console.log(e);
                    alert('An Error Occured');
                }
            })
        });

        function PrintElem(elem, title) {

            var element = document.getElementById('generate_invoice_pdf');
            var opt = {
                //margin:       1,
                filename: title,
                //pagebreak: { mode: 'avoid-all', before: '#fo-information' },
                //pagebreak: { after: ['#dbservices','#dbservices3', '#uscitzenservices', '#crs_listing'], avoid: 'img' },
                //pagebreak: { after: ['#uscitzenservices', '#crs_listing'], avoid: 'img' },
                pagebreak: {
                    avoid: 'img'
                },
                image: {
                    type: 'jpeg',
                    quality: 0.98
                },
                html2canvas: {
                    scale: 2
                },
                jsPDF: {
                    unit: 'in',
                    format: 'a4',
                    orientation: 'portrait'
                }
            }; // New Promise-based usage:

            html2pdf().set(opt).from(element).save();

        }
        var do_count = 1;
        var main = 1;
        var total = 0;
        const tax = {{$tax}};
        $('#shipping_id').select2();
        $('#job_id').select2().on('change', function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            var id = $(this).val();
            $.ajax({
                url: 'getJob/' + id,
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    // console.log(data['invoice']);
                    console.log(data['item_expenses']);


                    $('#delivery_data').removeClass('d-none');
                    $('.consignee_name').text(data[0].consignee.consignee_name);
                    $('.client').text(data[0].client.client_name);
                    $('.bl_no').text(data[0].shipping_detail.bl_number);
                    $('.gd_no').text(data.gd_no.gd_no);
                    $('.shipping_remarks').text(data[0].consignment_detail.shipping_marks);
                    $('.shipping').text(data['shipping'] != null && data['shipping'].shipping_name);
                    $('.descripton').text(data[0].consignment_detail.description);
                    $('.invoice_value').text(data[0].consignment_detail.invoice_value);
                    $('.container').text(data['container'] != null && data['container'].container_no);
                    $('.qty').text(data[0].consignment_detail.qty);
                    $('[name=job_no]').val(id);
                    if (data['consignee_invoice'] != null) {
                        $('.generate_pdf').removeClass('d-none');
                        $('.generate_pdf').attr('data-id', data['consignee_invoice'].id);
                        $('.invoice_status').text('Generated');
                    } else {
                        $('.generate_pdf').addClass('d-none');
                        $('.invoice_status').text('No Invoice');
                    }

                    if (data['vendor_bill'].length > 0) {
                        console.log(data['tax_code']);
                        var htmls = "";
                        for (let index = 0; index < data['vendor_bill'].length; index++) {
                            htmls += '<tr>';
                            htmls += '<td><input type="hidden" name="item_id[]" value="' + data['vendor_bill'][index].consignee_item.id + '"/>' + data['vendor_bill'][index].consignee_item.item_name + '</td>';
                            htmls += '<td ><input type="text" class="form-control consignee_expense_amount" name="consignee_expense_amount[]" value="' + data['vendor_bill'][index].amount + '" /></td>';
                            htmls += '</tr>';
                            for(let i=0;i<data['tax_code'].length;i++){
                                if(data['tax_code'][i].id==data['vendor_bill'][index].consignee_item.tax_code){
                                    $('#hidden_tax_perc').val(data['tax_code'][i].tax);
                                    
                                }
                            }
                        }
                        $('#job_expensesOnly').html(htmls);

                    }




                    var sales_tax = (total * (tax / 100));
                    var net_invoice = total + sales_tax;
                    var totalHtml = '<tr style="height:50px" id="totalAmount"><td></td><td></td></tr><tr><td>Total</td><td id="total_td">' + total + '</td></tr>';
                    totalHtml += '<tr><td>S.Tax ' + tax + '% S.R.B </td><td id="tax_td">' + Math.floor(Math.round(sales_tax, 2)) + '</td></tr>';
                    totalHtml += '<tr><td>Net Invoice </td><td id="net_invoice_td">' + net_invoice + '</td></tr>';

                    // $('#job_expenses').html(totalHtml);
                    $('.consignee_expense_amount').trigger('keyup');
                    // $('#hidden_tax_perc').trigger('keyup');
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(document).on('keyup','.consignee_expense_amount',function(){
            var total=0;
            var amount=0;
            var net_total=0;
            $('.consignee_expense_amount').each(function(){
                amount=$(this).val();
                total=parseInt(total)+parseInt(amount);
            });
            $('#total_foot').html(total);
            var tax=$('#hidden_tax_perc').val();
            net_total=(parseInt(tax)/100)*parseInt(total);
            $('#tax_foot').html(net_total);
            $('.discount').trigger('keyup');
        });

        $(document).on('keyup','.discount',function(){
            var total=$('#total_foot').html();
            var discount=$(this).val();
            var tax=$('#tax_foot').html();
            var sum=(parseInt(total) - parseInt(discount))+parseInt(tax);
            $('#net_invoice_foot').html(sum);
        })
        // $(document).on('keyup','#hidden_tax_perc',function(){
        //     var tax=$(this).val();
        //     var total_amount=$('.consignee_expense_amount').val();
        //     var total=(parseInt(tax)/100)*parseInt(total_amount);
        //     $('#tax_foot').html(total);
        //     // alert(total);
        //     $('.discount').trigger('keyup');
        // });

        $(document).on('click', '.addMore', function() {
            var output = '<tr><td><select class="items_select form-control" id="items_select" name="items_select[]"><option>Please Select</option> @foreach($items as $item)<option value="{{$item->id}}">{{$item->item_name}}-{{$item->type}}</option>@endforeach</select></td></tr>';
            $('#job_expenses').before(output);
            $('.items_select').select2()
        });

        $(document).on('change', '.items_select', function() {

            var select = $(this);
            var id = $(this).val();
            var data_id = $(this).attr('data-id');
            var value_text = $('[data-id=' + data_id + '] option:selected').text();
            $('.expenses_' + data_id).val(value_text);
            $.ajax({

                url: 'getItem/' + id,
                method: 'GET',
                dataType: 'json',
                success: function(response) {

                    console.log(response);

                    var total = 0;
                    var net_invoice = 0;
                    var srb = 0;

                    if (response.GroupDteail) {

                        for (var a = 0; a < response.GroupDteail.length; a++) {
                            for (var i = 0; i < response.GroupDteail[a].length; i++) {
                                var moreHtml = "";
                                var moreHtml = '<tr id="row_' + id + '" style="position:relative">';
                                moreHtml += '<td><input type="hidden" name="item_id[]" value="' + response.GroupDteail[a][i].id + '"/><input type="text"  class="form-control" name="item_name[]" value="' + response.GroupDteail[a][i].item_name + '"/></td>';
                                moreHtml += '<td><input type="text" class="form-control amount aamount_' + id + '" name="amount[]" value="' + response.GroupDteail[a][i].rate + '"/><button class="btn btn-danger removeRecord" style="position:absolute;top:-10px;right:-25px" data-id="' + id + '"><i class="fa fa-times"></i></button></td>';
                                moreHtml += '</tr>';
                                $('#job_expenses').before(moreHtml);
                                $('.items_select').select2()
                            }
                        }
                    } else {
                        var moreHtml = "";
                        var moreHtml = '<tr id="row_' + id + '" style="position:relative">';
                        moreHtml += '<td><input type="hidden" name="item_id[]" value="' + response.id + '"/><input type="text"  class="form-control" name="item_name[]" value="' + response.item_name + '"/></td>';
                        moreHtml += '<td><input type="text" class="form-control amount aamount_' + id + '" name="amount[]" value="' + response.rate + '"/><button class="btn btn-danger removeRecord" style="position:absolute;top:-10px;right:-25px" data-id="' + id + '"><i class="fa fa-times"></i></button></td>';
                        moreHtml += '</tr>';
                        $('#job_expenses').before(moreHtml);
                        $('.items_select').select2()
                    }




                    $(select).closest('tr').find('.amount').val(response);

                    $('.amount').each(function() {
                        var amount = $(this).val();
                        total = total + parseInt(amount);
                        srb = parseInt((total * (tax / 100)));
                        net_invoice = total + srb;
                    });
                    $('#total_td').html(total);
                    $('#tax_td').html(srb);
                    $('#net_invoice_td').html(net_invoice);


                    // for (var i = 0; i < response.length; i++) {
                    //     var moreHtml = "";
                    //     var moreHtml = '<tr id="row_' + do_count + '" style="position:relative">';
                    //     moreHtml += '<td><input type="hidden" name="item_id[]" value="' + response[i].id + '"/><input type="text" id="abc"  class="form-control add_more_value amount_' + do_count + '" name="description[]" value="' + response[i].item_name + '"/><button class="btn btn-danger removeRecord" style="position:absolute;top:-10px;right:-25px" data-id="' + do_count + '"><i class="fa fa-times"></i></button></td>';
                    //     moreHtml += '<td><input type="text" class="form-control add_more_value aamount_' + do_count + '" name="amount[]" value="' + response[i].rate + '"/><button class="btn btn-danger removeRecord" style="position:absolute;top:-10px;right:-25px" data-id="' + do_count + '"><i class="fa fa-times"></i></button></td>';
                    //     moreHtml += '</tr>';
                    //     var total_new = parseInt($('#total_amount').text()) + parseInt(response[i].rate);
                    //     $('#total_amount').text(total_new)
                    //     $('#job_expenses tr#totalAmount').before(moreHtml)
                    //     do_count = do_count + 1;
                    //     $('.items_select').select2()
                    // }
                    // var sales_tax = parseInt((total_new * (tax / 100)));
                    // $('#tax_amount').text(sales_tax)
                    // var net_invoice = total_new + sales_tax;
                    // $('#net_invoice').text(net_invoice)
                },
                error: function(res) {
                    console.log('Failed');
                    console.log(res);
                }
            });

        });


        $(document).on('click', '.remove_btn', function() {
            $(this).parents('tr').remove();
            $('.amount').trigger('keyup');
            e.preventDefault();
        })

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

            var data_id = $(this).attr('data-id');

            var id = $('.aamount_' + data_id).val();
           
            if (data_id != 0) {
                var total_new = parseInt($('#total_td').text()) - parseInt(data_id);
                
                console.log(total_new);
                $('#total_td').text(total_new)
                var sales_tax = parseInt((total_new * (tax / 100)));
                $('#tax_td').text(sales_tax)
                var net_invoice = total_new + sales_tax;
                $('#net_invoice_td').text(net_invoice);
            }
            $('#row_' + data_id).remove();
        });


        // $('.items_select').click(function() {
        //     var main2 =$('.sbcdfg').val();

        //     console.log(main2);
        // });



        $(document).on('keyup', '.amount', function() {
            var total = 0;
            var net_invoice = 0;
            var srb = 0;

            $('.amount').each(function() {
                total = total + parseInt($(this).val());
                srb = parseInt((total * (tax / 100)));
                net_invoice = total + srb;
            });
            $('#total_td').html(total);
            $('#tax_td').html(srb);
            $('#net_invoice_td').html(net_invoice);
        })


        $(document).on('change', '.add_more_value', function() {
            var id = $(this).val();
            console.log(id);
            if (id == null || id == '' || id == undefined) {
                return false;
            }
            var total_new = parseInt($('#total_amount').text()) + parseInt(id);
            $('#total_amount').text(total_new)
            var sales_tax = parseInt((total_new * (tax / 100)));
            $('#tax_amount').text(sales_tax)
            var net_invoice = total_new + sales_tax;
            $('#net_invoice').text(net_invoice)
        });


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

            $('[name=total_amount]').val($('#total_foot').text());
            $('[name=tax]').val($('#tax_foot').text());
            $('[name=net_invoice]').val($('#net_invoice_foot').text());

            var form_data = new FormData($("#invoiceForm")[0]);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('add_consignee_invoice.store') }}",
                type: "POST",
                data: form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function(res) {
                    swal("Inserted!", "Invoice has been generated Successfully!", "success");
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    // $('#invoiceForm')[0].reset();
                },
                error: function(err) {
                    swal('Not Valid', err.responseJSON.message, 'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);

                }
            });
        });

        $(document).on('click', '.prepare', function() {
            $('#generate_invoice,.addMore,.form-actions').removeClass('d-none');
            $('html, body').animate({
                scrollTop: $('#generate_invoice').offset().top
            }, 800);
        });

        $(document).on('click', '.prepareitem', function() {
            $('#generate_invoices,.addMore,.form-actions').removeClass('d-none');
            $('html, body').animate({
                scrollTop: $('#generate_invoices').offset().top
            }, 800);
        });



    });
</script>
@endsection