@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">Receipts</li>
                </ol>
            </nav>
        </div>
        <div class="table-responsive">

            <table id="orders" class="table table-custom table-lg table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th>Sl No</th>
                        <th>Smart Receipt Id</th>
                        <th>Carrier</th>
                        <th>Purchase Order</th>
                        <th>Customer Ref 1</th>
                        <th>Customer Ref 2</th>
                        <th>Type</th>
                        <th>Type ID</th>
                        <th>Create Date</th>
                        <th>Comment</th>
                        <th>Tracking</th>
                        <th>Arrival Date</th>
                        <th>Status Code</th>
                        <th>Confirmation Date</th>

                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
    <script>
        $(document).ready(function (){

            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('receipts.index') }}",
                    },
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "searchable": false,
                            "data": null,
                            "defaultContent": '<img src="{{url('assets/images/details_open.png')}}"/>'
                        },
                        {
                            "data": "id", searchable:false, orderable: false ,render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        { data: 'receipt_id', name: 'receipt_id', orderable: true, searchable:true },
                        { data: 'carrier', name: 'carrier', orderable: false, searchable:false, default:'-' },
                        { data: 'purchase_order', name: 'purchase_order', orderable: false, searchable:false },
                        { data: 'cr1', name: 'cr1', orderable: false, searchable:false },
                        { data: 'cr2', name: 'cr2', orderable: false, searchable:false },
                        { data: 'type', name: 'type', orderable: false, searchable:false },
                        { data: 'type_id', name: 'type_id', orderable: false, searchable:false },
                        { data: 'create_date', name: 'create_date', orderable: false, searchable:false },
                        { data: 'comment', name: 'comment', orderable: false, searchable:false },
                        { data: 'tracking', name: 'tracking', orderable: false, searchable:false },
                        { data: 'arrival_date', name: 'arrival_date', orderable: false, searchable:false },
                        { data: 'status_code', name: 'status_code', orderable: false, searchable:false },
                        { data: 'confirmation_date', name: 'confirmation_date', 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"
                        },
                    ]
                });
            }
            $('#orders tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var tableId = row.data().id;
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    $('.sub-table-class').remove();
                    $('.shown').removeClass();
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');

                    // Open this row
                    row.child(template(row.data())).show();
                    initTable(tableId, row.data());
                    tr.addClass('shown');
                    tr.next().find('td').addClass('no-padding bg-gray');
                    tr.next('tr').addClass('sub-table-class');
                }
            });
            function initTable ( tableId ,data) {

                var url = '{{route("receipts.show", ":id")}}';
                url = url.replace(':id', tableId);
                $('#' + tableId).DataTable({
                    "processing": true,
                    "lengthChange": true,
                    "serverSide": true,
                    "dom": '<"clear">plrti',
                    'stateSave': true,
                    "autoWidth": false,
                    ajax:url,
                    columns: [
                        {data: 'sku', name: 'sku', orderable: false, searchable:false },
                        {data: 'quantity', name: 'quantity', orderable: false, searchable:false },
                    ]
                })
            }
        });
    </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>Sku</th>
                <th>Quantity</th>
            </tr>
            </thead>
        </table>
    </div>
</script>