@extends('admin.layouts.master')
@section('title', 'الطلبات')

@section('page-header')
    <div class="row align-items-center">
        <div class="col">
            <div class="page-pretitle">المبيعات</div>
            <h2 class="page-title"><i class="ti ti-package ms-1"></i> الطلبات</h2>
        </div>
        <div class="col-auto">
            <a href="{{ route('admin.orders.create') }}" class="btn btn-primary">
                <i class="ti ti-plus ms-1"></i> طلب جديد
            </a>
        </div>
    </div>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <div class="row g-2 w-100">
            <div class="col-md-4">
                <select class="form-select" id="filterStatus">
                    <option value="">— كل الحالات —</option>
                    @foreach(['draft'=>'مسودة','approved'=>'معتمد','in_production'=>'قيد الإنتاج','completed'=>'جاهز','delivered'=>'مسلَّم','cancelled'=>'ملغي'] as $k=>$v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-vcenter table-striped" id="t" style="width:100%">
            <thead>
                <tr>
                    <th>#</th><th>رقم الطلب</th><th>العميل</th><th>الفرع</th>
                    <th>تاريخ الطلب</th><th>التسليم</th><th>الإجمالي</th>
                    <th>المدفوع</th><th>المتبقي</th><th>الحالة</th><th>الأولوية</th><th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
const dt = $('#t').DataTable({
    processing: true, serverSide: true, responsive: true, order: [[0,'desc']],
    language: window.dtArabic,
    ajax: {
        url: '{{ route('admin.orders.index') }}',
        data: function (d) { d.filter_status = $('#filterStatus').val(); }
    },
    columns: [
        { data: 'id', name: 'id' },
        { data: 'order_no', name: 'order_no' },
        { data: 'customer_name', name: 'customer.name' },
        { data: 'branch_name', name: 'branch.name' },
        { data: 'order_date_f', name: 'order_date' },
        { data: 'delivery_date_f', name: 'delivery_date' },
        { data: 'total_formatted', name: 'total_amount' },
        { data: 'paid_formatted', name: 'paid_amount' },
        { data: 'remaining_formatted', name: 'remaining_amount' },
        { data: 'status_badge', name: 'status' },
        { data: 'priority_badge', name: 'priority' },
        { data: 'actions', name: 'actions', orderable: false, searchable: false },
    ]
});
$('#filterStatus').on('change', () => dt.draw());
</script>
@endpush