@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>
<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>
<form class="form" id="invoiceForm">
    <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>
                                        <input type="hidden" name="client_id" id="client_id">
                                    </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 Status</label>
                                        <h4 class="gd_status">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Marks of Shipment</label>
                                        <h4 class="shipping_remarks">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Invoice Status</label>
                                        <h4 class="invoice_status">...</h4>
                                    </div>
                                </div>

                            </div>

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

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

                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>Generate Invoice
                            </h4>
                            <input type="hidden" name="job_no" id="hidden_job_no">
                            <input type="hidden" name="total_amount" id="hidden_total_amount">
                            <input type="hidden" name="tax" id="hidden_tax">
                            <input type="hidden" name="net_invoice" id="hidden_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="row d-none" id="generate_invoice">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Job Expenses</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody id="job_expenses">

                                        </tbody>
                                        <!-- <tfoot>
                                            <tr>
                                                <td>Total</td>
                                                <td id="total_td">0</td>
                                            </tr>
                                            <tr>
                                                <td>S.Tax  % S.R.B</td>
                                                <td id="tax_td">0</td>
                                            </tr>
                                            <tr>
                                                <td>Net Invoice</td>
                                                <td id="net_invoice_td">0</td>
                                            </tr>

                                        </tfoot> -->
                                    </table>
                                </div>
                            </div>



                            {{-- <div class="row d-none" id="generate_invoices">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Item Name</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody id="item_expenses">

                                        </tbody>
                                    </table>
                                </div>
                            </div> --}}


                            <div class="form-actions d-none">
                                <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>Goods Description</h4>
                        <hr>
                        <p class="desc"></p>
                    </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() {
        $(document).on('click', '.generate_pdf', function() {
            var id = $(this).attr('data-id');
            var job_no = $('#hidden_job_no').val();
            $.ajax({
                url: 'generate_pdf_client_invoice/' + job_no,
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data) {
                        $.ajax({
                            url: 'getClientInvoice/' + 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);
                                $('.desc').text(data['job'].consignment_detail.description);

                                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('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);
                    $('#client_id').val(data[0].client.id);
                    $('.bl_no').text(data[0].shipping_detail.bl_number);
                    $('.gd_status').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);
                    $('.container').text(data['container'] != null && data['container'].container_no);
                    $('.qty').text(data[0].consignment_detail.qty);
                    $('[name=job_no]').val(id);
                    if (data['client_invoice'] != null) {
                        $('.generate_pdf').removeClass('d-none');
                        $('.generate_pdf').attr('data-id', data['client_invoice'].id);
                        $('.invoice_status').text('Generated');
                    } else {
                        $('.generate_pdf').addClass('d-none');
                        $('.invoice_status').text('No Invoice');
                    }

                    if (data['job_expenses'].length > 0) {
                        var htmls = "";
                        for (let index = 0; index < data['job_expenses'].length; index++) {
                            htmls += '<tr>';
                            htmls += '<td><input type="hidden" name="" value="' + data['job_expenses'][index].ref_id + '"/>' + data['job_expenses'][index].expense + '</td>';
                            htmls += '<td >' + data['job_expenses'][index].amount + '</td>';
                            htmls += '</tr>';

                        }
                        $('#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);


                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(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="text" 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 e = document.getElementById("items_select");

                        // Assuming you have a dropdown element with the id "myDropdown"
                        let dropdown = document.getElementById("items_select");
                        console.log(dropdown);


                        // Get the selected option
                        let selectedOption = dropdown.options[dropdown.selectedIndex];
                        console.log(selectedOption);


                        // Get the text of the selected option
                        let selectedText = selectedOption.text;
                        console.log(selectedText);


                        // Split the selected text by the "-" character
                        let parts = selectedText.split("-");
                        console.log(parts);


                        // Get the value after the sign
                        let valueAfterSign = parts[1].trim();

                        // Output the value after the sign
                        console.log(valueAfterSign);
                       


                       if(valueAfterSign == 'Service'){

                        var amount = $(this).val();
                        total = total + parseInt(amount);
                        srb = parseInt((total * (tax / 100)));
                        net_invoice = total + srb;

                       }else{

                        total = total + parseInt($(this).val());
                       
                        net_invoice = total;

                        }


                       

                    });
                    $('#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() {

                let dropdown = document.getElementById("items_select");
                        console.log(dropdown);


                        // Get the selected option
                        let selectedOption = dropdown.options[dropdown.selectedIndex];
                        console.log(selectedOption);


                        // Get the text of the selected option
                        let selectedText = selectedOption.text;
                        console.log(selectedText);


                        // Split the selected text by the "-" character
                        let parts = selectedText.split("-");
                        console.log(parts);


                        // Get the value after the sign
                        let valueAfterSign = parts[1].trim();

                        // Output the value after the sign
                        console.log(valueAfterSign);
                       


                       if(valueAfterSign == 'Service'){

                        var amount = $(this).val();
                        total = total + parseInt(amount);
                        srb = parseInt((total * (tax / 100)));
                        net_invoice = total + srb;

                       }else{

                        total = total + parseInt($(this).val());
                        net_invoice = total;

                       }

                // 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();

            $('#hidden_total_amount').val($('#total_td').text());
            $('#hidden_tax').val($('#tax_td').text());
            $('#hidden_net_invoice').val($('#net_invoice_td').text());

            var form_data = new FormData($("#invoiceForm")[0]);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('add_client_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