@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">orders</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="status" id="status">
                        <option value="invoice">Invoice</option>
                        <option value="quote">Quote</option>
                    </select>
                </div>
            </div>
        </div>
        @can('client-dropdown')
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group">
                    <select class="form-control" name="client" id="client">
                        @foreach($clients as $client)
                        <option value="{{$client['id']}}">{{$client['name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        @endcan
    </div>
    <div class="table-responsive">

        <table id="orders" class="table table-custom table-lg table-striped">
            <thead>
                <tr>
                    <th>Sl No</th>
                    <th>Visual Id</th>
                    <th>Customer Name</th>
                    <th>Amount Outstanding </th>
                    <th>Amount Paid </th>
                    <th>Order Sub Total</th>
                    <th>Customer Due</th>
                    <th>Invoice Date</th>
                    <th>Payment Due</th>
                    <th>Payment Status</th>
                    <th>Order status</th>
                    <th>Actions</th>

                </tr>
            </thead>
        </table>
    </div>
</div>
@include('admin.reports.orders.modal')
@endsection
@push('script')
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
<script>
    $(document).ready(function () {
 $(document).on("click",".check-in",function() {

   var url = "{{ route('order-list') }}";
    var id = $(this).data('id');
    $("#compose").modal('show');

});

        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,
                    'stateSave': true,
                    "autoWidth": false,

                    "ajax": {
                        url: "{{ route('order-list') }}",
                        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.status = $('#status').val();
                            d.client = $('#client').val();
                        },
                    },
                    columns: [
                    {
                        "data": "id", searchable:false, orderable: false ,render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'visual_id', name: 'visual_id', orderable: true, searchable:true },
                    { data: 'customer_name', name: 'customer_name', orderable: false, searchable:false, default:'-' },
                    { data: 'amount_outstanding', name: 'amount_outstanding',render: function (data, type, row, meta) {
                     return '$'+row.amount_outstanding
                 },
                 orderable: false, searchable:false
             },
             { data: 'amount_paid', name: 'amount_paid', render: function (data, type, row, meta) {
                return '$'+row.amount_paid
            },
            orderable: false, searchable:false },
            { data: 'order_subtotal', name: 'order_subtotal', render: function (data, type, row, meta) {
                return '$'+row.order_subtotal
            },
            orderable: false, searchable:false },
            { data: 'customer_due_date', name: 'customer_due_date', render: function (data, type, row, meta) {
                return row.customer_due_date
            },
            orderable: false, searchable:false },
            { data: 'invoice_date', name: 'invoice_date', orderable: false, searchable:false },
            { data: 'payment_due_date', name: 'payment_due_date', orderable: false, searchable:false },
            { data: 'payment_status', name: 'payment_status', orderable: false, searchable:false },
            { data: 'order_status_name', name: 'order_status_name', orderable: false, searchable:false },
            { data: 'view', name: 'view', 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) {
                $(".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"
            },
            ]
        });
}
$("#datepicker, #date_type_dropdown, #status, #client").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>