@extends('merchant.templates.layout')

@section('head')
    <link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        #dataTable thead th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .4px;
            color: #64748b;
            font-weight: 600;
            background: #f8fafc;
            white-space: nowrap;
        }
        #dataTable td { font-size: 13px; vertical-align: middle; }
        .action-btn-group { display: inline-flex; gap: 4px; }
    </style>
@endsection

@section('content')
    <div class="row"><div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
                <h5 class="card-title mb-0">{{ $page_heading }}</h5>
                <div class="d-flex gap-2 align-items-center">
                    <select id="statusFilter" class="form-select form-select-sm" style="width:200px;">
                        <option value="">All Status</option>
                        @foreach(config('global.order_statuses') as $k => $v)
                            <option value="{{ $k }}">{{ $v['text'] }}</option>
                        @endforeach
                    </select>

                    <a href="{{ route('merchant.orders.create') }}" class="btn btn-primary d-inline-flex align-items-center gap-2" style="height: 36px; padding: 0 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap;">
                        <i class="ri-add-line" style="font-size: 16px;"></i>
                        <span>New Order</span>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-nowrap table-hover align-middle" id="dataTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Reference</th>
                                <th>Cargo Company</th>
                                <th>Qty</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div></div>
@endsection

@section('script')
    <script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function () {
            $('#statusFilter').select2({ minimumResultsForSearch: -1 });

            const table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("merchant.orders.list") }}',
                    data: d => { d.status_filter = $('#statusFilter').val(); }
                },
                columns: [
                    { data: 'DT_RowIndex',    searchable: false, orderable: false, width: '40px' },
                    { data: 'reference_col',  name: 'order_reference' },
                    { data: 'cargo_col',      searchable: false, orderable: false },
                    { data: 'qty_col',        searchable: false, orderable: false },
                    { data: 'amount_col',     searchable: false, orderable: false },
                    { data: 'status_badge',   searchable: false, orderable: false },
                    { data: 'created_col',    name: 'created_at' },
                    { data: 'action',         searchable: false, orderable: false, className: 'text-end' }
                ],
                order: [[6, 'desc']],
                pageLength: 10
            });

            $('#statusFilter').on('change', () => table.ajax.reload());

            $(document).on('click', '.delete-btn', function () {
                const url = $(this).data('url');
                Swal.fire({
                    title: 'Remove draft?',
                    text: 'This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete',
                    confirmButtonColor: '#d33'
                }).then(r => {
                    if (!r.isConfirmed) return;
                    $.ajax({
                        url: url, type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function (res) {
                            toastr.success(res.message);
                            table.ajax.reload(null, false);
                        },
                        error: function (xhr) {
                            toastr.error(xhr.responseJSON?.message || 'Failed');
                        }
                    });
                });
            });
        });
    </script>
@endsection