@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Archived Orders</p>
                    </div>
                </div>
            </div>
            <div class="row py-4 pt-sm-4 pb-sm-5">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped" id="archivedOrders">
                            <thead>
                                <tr>
                                    <th scope="col">Order Date <img src="{{ asset('assets/images/filter-icon.svg') }}"
                                            data-toggle="modal" data-target="#orderdate" alt=""
                                            id="datePickerClick"></th>
                                    <th scope="col">Channel <img src="{{ asset('assets/images/filter-icon.svg') }}"
                                            data-toggle="modal" data-target="#saleschannel" alt=""
                                            id="customChannel"></th>
                                    <th scope="col">Order ID <img src="{{ asset('assets/images/filter-icon.svg') }}"
                                            data-toggle="modal" data-target="#orderid" alt=""></th>
                                    {{-- <th scope="col">Status</th> --}}
                                    <th scope="col">Product Details <img
                                            src="{{ asset('assets/images/filter-icon.svg') }}" data-toggle="modal"
                                            data-target="#productdetail" alt=""></th>
                                    <th scope="col">Payment <img src="{{ asset('assets/images/filter-icon.svg') }}"
                                            data-toggle="modal" data-target="#paymentmode" alt="" alt="">
                                    </th>
                                    <th scope="col">Customer Details</th>
                                    <th scope="col">Pickup Address</th>
                                    <th scope="col">Dimension & Weight</th>
                                    <th scope="col" style="width: 110px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let archivedOrders = $("#archivedOrders").DataTable({
            "language": {
                "zeroRecords": "No record(s) found."
            },
            "autoWidth": false,
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [
                [1, 'asc']
            ],
            processing: true,
            serverSide: true,
            lengthChange: true,
            order: [0, 'asc'],
            searchable: true,
            bStateSave: false,

            ajax: {
                url: "{{ url('all/archived-orders/table') }}",
                data: function(d) {}
            },

            columns: [{
                    data: 'start_date',
                    name: 'start_date',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'channel',
                    name: 'channel',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'order_id',
                    name: 'order_id',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                // {
                //     data: 'order_status',
                //     name: 'order_status',
                //     searchable: true,
                //     orderable: true,
                //     defaultContent: 'NA'
                // },
                {
                    data: 'products',
                    name: 'products',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'payment',
                    name: 'payment',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'customers',
                    name: 'customers',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'pickupaddress',
                    name: 'pickupaddress',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'dimensions',
                    name: 'dimensions',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
            select: {
                style: 'multi',
            },
        });

        $(document).on('click', '.reorder-button', function() {
            var id = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Sure!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        method: 'POST',
                        url: "{{ url('orders/re-order') }}",
                        data: {
                            'id': id,
                            '_token': '{{ csrf_token() }}'
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.status_code == 200) {
                                Swal.fire(
                                    'Updated!',
                                    data.message,
                                    'success'
                                )
                                archivedOrders.ajax.reload();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!',
                                });
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection