@extends('layouts.app')

@section('contents')
    <div class="content ">
        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{url('dashboard')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Invoiced Sale</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-3 mb-4 d-print-none">

            <div class="col-md-3">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" placeholder="Date Range" name="datepicker" type="text"
                               id="datepicker">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <select class="form-control" name="category" id="category">
                            <option value="">All Category</option>
                            @foreach($categories as $category)
                                <option value="{{$category['id']}}">{{$category['category_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <select class="form-control" name="customer" id="customer">
                            <option value="">All Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{$customer['printavo_id']}}">{{$customer['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="invoice">
            <div class="text-end">
                <h4 class="fw-bold">Total/Page : $<span id="page_total"></span></h4>
            </div>
        </div>
        <div class="table-responsive">

            <table id="orders" class="table table-custom table-lg table-striped">
                <thead>
                <tr>
                    <th>Sl No</th>
                    <th>Order Number</th>
                    <th>Customer</th>
                    <th>Company Name</th>
                    <th>Invoice Date</th>
                    <th>Order status</th>
                    <th>Category</th>
                    <th>Sale Tax</th>
                    <th>Total w/o Tax</th>
                    <th>Total</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@push('script')
@endpush
@push('script')
    <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.12.1/api/sum().js"></script>
    <script>
        $(document).ready(function () {
            var start = moment().startOf('year');
            var end = moment().endOf('year');
            $('#datepicker').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'This Month Last Year': [moment().subtract(1, 'year').startOf('month'), moment().subtract(1, 'year').endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    'Current Financial Year': [moment().startOf('month'), moment().startOf('month').subtract(1, 'days').add(1, 'year')],
                    'Last Financial Year': [moment().month(3).startOf('month').subtract(1, 'year'), moment().month(3).startOf('month').subtract(1, 'days')]
                },

            }, callbackSetDate());

            function callbackSetDate() {
                $('#datepicker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                // updateExportFilters();
                $('#export_start_date').val(start.format('YYYY-MM-DD'))
                $('#export_end_date').val(end.format('YYYY-MM-DD'))
                $('#export_date_type').val($('#date_type_dropdown').val())
            }

            if ($("#orders").length) {

                var i = 1;
                var template = Handlebars.compile($("#details-template").html());
                var table = $("#orders").DataTable({
                    "processing": true,
                    "lengthChange": true,
                    "serverSide": true,
                    "dom": '<"dt-buttons"Bf><"clear">lirtp',
                    "paging": true,
                    "scrollX": false,
                    // "responsive":true,
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    pageLength: 100,
                    'stateSave': true,
                    "autoWidth": false,

                    "ajax": {
                        url: "{{ route('invoice-sale') }}",
                        type: 'GET',
                        data: function (d) {
                            var start = '';
                            var end = '';
                            if ($('#datepicker').val() != '') {
                                start = $('#datepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
                                end = $('#datepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
                            }
                            d.start_date = start;
                            d.end_date = end;
                            d.search_date_type = $('#date_type_dropdown').val();
                            d.category_id = $('#category').val();
                            d.customer_id = $('#customer').val();

                        },

                    },
                    columns: [
                        {
                            "data": "id",
                            searchable: false,
                            orderable: false,
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {data: 'order_number', name: 'order_number', orderable: false, searchable: true, default: '-'},
                        {data: 'customer_name', name: 'customer_name', orderable: false, searchable: true},
                        {data: 'customers.company', name: 'customers.company', orderable: false, searchable: false},
                        {data: 'invoice_date', name: 'invoice_date', orderable: false, searchable: false},
                        {data: 'order_status_name', name: 'order_status_name', orderable: false, searchable: false},
                        {data: 'category.category', name: 'category.category', orderable: false, searchable: false},
                        {data: 'sale_tax', name: 'sale_tax', orderable: false, searchable: false},
                        {
                            data: 'order_total', name: 'order_total', render: function (data, type, row, meta) {
                                return '$' + row.order_total
                            },
                            orderable: false, searchable: false
                        },
                        {
                            data: 'order_subtotal', name: 'order_subtotal', render: function (data, type, row, meta) {
                                return '$' + row.order_subtotal
                            },
                            orderable: false, searchable: false
                        },
                    ],
                    columnDefs: [{
                        "defaultContent": "-",
                        "targets": "_all"
                    }],
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var input = document.createElement("input");
                            $(input).appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    column.search($(this).val(), false, false, true).draw();
                                });
                        });
                    },
                    "fnDrawCallback": function (oSettings) {
                        var array = this.api().columns(8).data()[0];
                        let sum = 0;
                        for (let i = 0; i < array.length; i++) {
                            sum = parseFloat(sum) + parseFloat(array[i]);
                        }


                        var api = this.api();
 
                        // Remove the formatting to get integer data for summation
                        var intVal = function (i) {
                            return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                        };

                        // Total over all pages
                        total = api
                            .column(9)
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);

                        // Total over this page
                        pageTotal = api
                            .column(9, { page: 'current' })
                            .data()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0);
                        $("#page_total").html(pageTotal.toFixed(2) + ' ( Total : $'+total.toFixed(2)+' )');


                        $(".btn-delete").click(function () {
                            swal({
                                title: "Are you sure want to delete ?",
                                icon: "warning",
                                buttons: true,
                                dangerMode: true,
                            }).then((willDelete) => {
                                if (willDelete) {
                                    var address = $(this).data('value');
                                    delete_location(address);
                                }
                            });
                        });
                    },
                    buttons: [
                        {
                            extend: "copy",
                            className: "btn-sm"
                        },
                        {
                            extend: "csv",
                            className: "btn-sm"
                        },
                        {
                            extend: "excel",
                            className: "btn-sm"
                        },
                        {
                            extend: "pdfHtml5",
                            className: "btn-sm"
                        },
                        {
                            extend: "print",
                            className: "btn-sm"
                        },
                        {
                            extend: "colvis",
                            className: "btn-sm"
                        },
                    ]
                });
            }
            $('#datepicker, #date_type_dropdown, #category, #customer').on('change', function (data) {
                updateExportFilters();
                table.ajax.reload();
            });

            function updateExportFilters() {
                var start = '';
                var end = '';

                if ($('#datepicker').val() != '') {
                    start = $('#datepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    end = $('#datepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
                }
                date_type = $('#date_type_dropdown').val();

                $('#export_start_date').val(start);
                $('#export_end_date').val(end);
                $('#export_date_type').val(date_type);
            }
        });
    </script>
@endpush

<script id="details-template" type="text/x-handlebars-template">
    <div class="label label-info " style="margin-top: 5px;  margin-left: 12px; text-align:center; "><span
                style="font-weight: 500;color: #007eff; font-size: 14px;" SNAP PRODUCTS<span
                style="">@{{order_num}}</span></span></div>
    <div class="table-responsive ">
        <table class="table details-table table-striped table-bordered" id="@{{id}}"
               style="color: #73879C; font-size: 12px !important; font-weight: 400;  line-height: 1.471;">
            <thead>
            <tr>
                <th>Inventory Id</th>
                <th>Quantity</th>
                <th>Description</th>
                <th>Category</th>
                <th>Weight</th>
            </tr>
            </thead>
        </table>
    </div>
</script>