<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.10/css/intlTelInput.css">
<link rel="stylesheet" type="text/css" href="{{ asset('admin/plugins/datepicker/less/datepicker.less') }}">
<link href="{{ asset('admin/plugins/datepicker/css/datepicker.css') }}" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<div class="card shadow-none" style="margin-bottom:0.6rem;">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0">Total Invoices in Cart <i class="bi bi-cart"></i> ({!! isset($invoice) ? count($invoice) : '0' !!})</h6>
    <button class="btn btn-primary" id="invoice_total"> </button>
    </div>

<div class="card-body pb-0">
    <div class="table-responsive">
        <table id="example" class="table table-bordered align-middle" style="width:100%">
            <thead class="table-light">
                <tr>
                    <th>Invoice  No</th>
                    <th>Invoice Date</th>
                    <th>Invoice Value</th>
                    <th>Way Bill No</th>
                    <th>Way Bill Date</th>
                    <th>Way Exp Date</th>
                    <th class="thbutton">Edit</th>
                    <th class="thbutton">Delete</th>
                </tr>
            </thead>
            <tbody>
                @php
                $i = 1;
                $invoice_value = 0;
                @endphp
                @if (isset($invoice) && count($invoice) > 0)
                @foreach ($invoice  as $key => $list)
                <tr class="cart-invoice" >
                    <td >{{ $list['consignor_invoice_no'] ?? '' }} </td>
                    <td class="text-center">{{ $list['consignor_invoice_date'] ?? '' }}</td>
                    <td class="text-center">{{ convertDecimelPoint($list['consignor_invoice_value'] ?? ($list['consignor_invoice_value'] ?? '')) }}</td>   
                    <td class="text-center">{{ $list['way_bill_no'] ?? '' }}</td>
                    <td class="text-center">{{ $list['way_bill_date'] ?? '' }}</td>
                    <td class="text-center">{{ $list['way_bill_expiry_date'] ?? '' }}</td>
                    <td>
                            <button data-id="{{ $list->id }}" class="btn btn-outline-secondary edit-invoice" data-bs-toggle="modal" data-bs-target="#commonModal" title="Edit">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                    </td>
                    <td class="text-center">
                        <a style="line-height:24px;" data-url="{{route('invoice-delete')}}" data-type='invoice' data-id="{{$list->id}}"  class="btn btn-danger deleteDataCustom" href="#" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="left" title="Delete">
                            <i class="bi bi-trash text-white"></i>
                        </a>
                    </td>
                    {{--@php $invoice_value += preg_replace("/[^0-9.]/", "", $list['consignor_invoice_value']); @endphp --}}
                </tr>
                @php $i++; @endphp
                @endforeach
                @else
                <tr>
                    <td colspan="9">No Data Found</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="{{ asset('admin/plugins/datepicker/js/bootstrap-datepicker.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.10/js/intlTelInput.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#invoice_total').html('Total Amount in cart  {!! $invoice_value !!} ')
    });

        $(function () {
        $('#bill_date').datepicker({
            dateFormat: 'dd/mm/yy'
        })
        .on('changeDate', function (ev) {
             $(this).datepicker('hide');
        })

    });

    $(function () {
        $('#way_bill_date').datepicker({
            dateFormat: 'dd/mm/yy'
        })
        .on('changeDate', function (ev) {
             $(this).datepicker('hide');
        })

    });
    
    $(function () {
        $('#way_exp_date').datepicker({
            dateFormat: 'dd/mm/yy'
        })
        .on('changeDate', function (ev) {
             $(this).datepicker('hide');
        })

    });

</script>
