@extends('admin.layouts.masterlayout')
@section('styles')
<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />

@endsection
@section('content')
<div class="main-content">
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Orders</div>

    </div>

    <div class="card">
        <div class="card-body">
            <div class="product-table">
                <div class="table-responsive">
                    <table id="orderTable" class="table table-bordered align-middle">

                        <thead class="text-nowrap">
                            <tr>
                                <th>#</th>
                                <th>Invoice No</th>
                                <th>User Details</th>
                                <th>Product Details</th>
                                <th>Total Qty</th>
                                <th>Total Amount</th>
                                <th>Payment Status</th>
                                <th>Shipping address</th>
                                <th>Delivery Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    $(document).ready(function() {

        $('#orderTable').DataTable({

            processing: true,
            serverSide: true,
            // ✅ IMPORTANT: Show length + export buttons
            dom: '<"d-flex justify-content-between align-items-center mb-2"lBf>rtip',

            // ✅ LENGTH MENU (Show entries dropdown)
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            pageLength: 10, // default

            // ✅ EXPORT BUTTON
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: '<div class="d-flex align-items-center gap-2"><i class="material-icons-outlined fs-6">download</i> Export CSV</div>',
                    className: 'btn',
                    title: 'Orders_List',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ],

            ajax: "{{ route('order.list') }}",

            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'invoice' },
                { data: 'user_details' },
                { data: 'products' },
                { data: 'total_qty' },
                { data: 'total_amount' },
                { data: 'status', orderable: false },
                { data: 'shipping_address', orderable: false, searchable: false },
                { data: 'delivery_status', orderable: false, searchable: false },
                { data: 'action', orderable: false, searchable: false }
            ]

        });

    });
    $(document).on('change', '.order-status-dropdown', function () {

        let orderId = $(this).data('id');
        let status = $(this).val();

        $.ajax({
            url: "{{ route('order.update.status') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: orderId,
                status: status
            },
            success: function (res) {
                if (res.status) {
                    toastr.success(res.message);
                } else {
                    toastr.error(res.message);
                }
            },
            error: function () {
                toastr.error("Something went wrong!");
            }
        });
    });
</script>
@endpush