@extends('admin.app')
@section('title') Vendor Reports @endsection
@section('styles')
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/b-2.2.2/b-html5-2.2.2/sb-1.3.2/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
    .top {
        display: flex;
        align-items: center;
    }

    .ui-datepicker-calendar {
        display: none;
    }

    .btn-secondary, .btn-light {
        background-color: #F8931F;
        border-style: none;
        color: #fff;
    }
</style>

@endsection
@section('content')
<div class="product-status mg-b-30">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="product-status-wrap">
            <h4 class="heading_h4" style="margin-left: -5px;"><i class="fas fa-file-alt"></i> Vendor Report</h4>
            <div id="filter_cash_report">
                <div>
                    <a href="{{ route('admin.vendorReports.export').'?date='.request()->get('date')}}" class="btn btn-secondary buttons-csv buttons-html5">Export</a>
                    <input name="month-picker" id="month-picker">
                    <a href="{{ route('admin.vendorReports') }}">clear</a>
                </div>
                <table id="vendorReport" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>Vendor Id</th>
                            <th>Vendor Name</th>
                            <th>Total no of Delivery</th>
                            <th>Total KM Travels</th>
                            <th>Total Fare</th>
                            <th>Total Of Extra Charges</th>
                            <th>Total Amount</th>
                            <th>Total cash Collected</th>
                            <th>Total order</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vendors as $vendor)
                        <tr>
                            <td>{{ $vendor->vendor_id }}</td>
                            <td>{{ $vendor->vendor_name }}</td>
                            <td>{{ $vendor->total_delivered }}</td>

                            <td>{{ $vendor->total_km }} KM</td>
                            <td>${{ $vendor->total_fare }} </td>
                            <td>${{ $vendor->total_extra_charges }} </td>
                            <td>${{ $vendor->total_amount  }}</td>
                            <td>$0.0 </td>
                            <td>{{ $vendor->total_orders }}</td>
                        </tr>
                        @endforeach
                    </tbody>

                    <tr class="totald">
                        <td><b>Total</b></td>
                        <td></td>
                        <td>{{ $total->total_delivered }}</td>
                        <td>{{ $total->total_km }} KM</td>
                        <td>${{ $total->total_fare }}</td>
                        <td>${{ $total->total_extra_charges }}</td>
                        <td>${{ $total->total_amount  }}</td>
                        <td>$0.0</td>
                        <td>{{ $total->total_orders }}</td>
                    </tr>
                </table>

            </div>
            <div>
                {!! $vendors->links() !!}
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
{{-- For CSV/PDF/Excel Report Download & Buttons --}}
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>

{{-- For Search Builder --}}
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/b-2.2.2/b-html5-2.2.2/sb-1.3.2/datatables.min.js"></script>

<script>
    $(document).ready(function() {
        let monthPicker = $('#month-picker');
        $(function() {

            monthPicker.datepicker({
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                onClose: function(dateText, inst) {


                    function isDonePressed() {
                        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                    }

                    if (isDonePressed()) {
                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');

                        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
                    }
                },
                beforeShow: function(input, inst) {

                    inst.dpDiv.addClass('month_year_datepicker')

                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length - 4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
                        $(this).datepicker('setDate', new Date(year, month - 1, 1));
                        $(".ui-datepicker-calendar").hide();
                    }
                }
            })
        });

        monthPicker.change(function(e) {
            window.location = `{{ route('admin.vendorReports') }}?date=${e.target.value}`;
        })
    });
    /*
    $(document).ready( function () {
        var table = $('#vendorReport').DataTable({
            language: {
                searchBuilder: {
                    add: '+',
                    title: 'Condition Search',
                },
            },
            dom: "<'row top'<'col-sm-6'Q><'col-sm-3 text-center'B><'col-sm-3'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'il><'col-sm-7'p>>",
            buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [ 'csv', 'excel', 'pdf' ],
                },
            ],
            "pageLength": 50
        });
        table.buttons().container()
        .appendTo( '#vendorReport_wrapper .col-md-6:eq(0)' );
    } );
    */
</script>
@endpush