@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