@extends('layouts.admin')
@section('content')
    <div class="main-card">
        @include('admin.partials.page-header', [
            'icon' => 'bi bi-cart-check',
            'title' => 'All Orders',
            'subtitle' => 'Relograde Products',
        
            'show_import' => true,
            'import_id' => 'btnImportProducts',
        
            'show_export' => true,
            'export_id' => 'btnExportProducts',
        
            'show_refresh' => true,
        ])

        @include('admin.partials.advanced-filter', [
            'filters' => [
                [
                    'col' => 'col-md-3',
                    'text_id' => 'order-status-text',
                    'menu_id' => 'orderStatusFilter',
                    'placeholder' => 'Order Status',
                    'search' => true,
                    'options' => [
                        ['label' => 'Pending', 'value' => 'pending'],
                        ['label' => 'Finished', 'value' => 'finished'],
                        ['label' => 'Cancelled', 'value' => 'cancelled'],
                    ],
                ],
                [
                    'col' => 'col-md-3',
                    'text_id' => 'payment-status-text',
                    'menu_id' => 'paymentStatusFilter',
                    'placeholder' => 'Payment Status',
                    'search' => true,
                    'options' => [
                        ['label' => 'Paid', 'value' => 'paid'],
                        ['label' => 'Unpaid', 'value' => 'unpaid'],
                    ],
                ],
            ],
        ])

        <div class="table-responsive-custom">
            <table id="orderTable" class="table modern-lead-table align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>TRX</th>
                        <th>Reference</th>
                        <th>Order Status</th>
                        <th>Payment Status</th>
                        <th>Total</th>
                        <th>Currency</th>
                        <th>State</th>
                        <th>Provider Date</th>
                        <th>Created At</th>
                        <th width="120">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            window.orderTable = initModernDataTable({
                tableId: '#orderTable',
                ajax: {
                    url: "{{ route('admin.orders.data') }}",
                    data: function(d) {
                        d.order_status = vsGetValue('orderStatusFilter');
                        d.payment_status = vsGetValue('paymentStatusFilter');
                    }
                },
                columns: [{
                        data: 'trx'
                    },
                    {
                        data: 'reference'
                    },
                    {
                        data: 'order_status_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'payment_status_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'price_amount'
                    },
                    {
                        data: 'price_currency'
                    },
                    {
                        data: 'state'
                    },
                    {
                        data: 'provider_created_at'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

        });

        $(document).on('click', '.deleteOrder', function() {

            let id = $(this).data('id');
            let row = $(this).closest('tr');

            confirmDelete(function() {

                showLoader('Deleting Order...');

                $.ajax({
                    url: "{{ route('admin.orders.delete', ':id') }}"
                        .replace(':id', id),
                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {

                        Swal.close();

                        showSuccess(
                            'Deleted!',
                            response.message
                        );

                        const dt = window.orderTable.getInstance();

                        dt.row(row).remove().draw(false);
                    },
                    error: function(xhr) {

                        Swal.close();

                        showError(
                            'Failed!',
                            xhr.responseJSON?.message ??
                            'Something went wrong'
                        );
                    }
                });
            });
        });
    </script>
@endpush