@extends('admin.layouts.master')

@section('title', 'الشحنات')

@section('content')
<div class="pc-container"><div class="pc-content">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">إدارة الشحنات</h4>
        @can('shipments.create')
            <a href="{{ route('admin.shipments.create') }}" class="btn btn-primary">إضافة شحنة</a>
        @endcan
    </div>

    @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

    <div class="card mb-3"><div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label">فلترة بالحالة</label>
                <select id="status-filter" class="form-select">
                    <option value="">الكل</option>
                    @foreach(\App\Models\Shipment::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div></div>

    <div class="card"><div class="card-body">
        <table id="shipments-table" class="table table-striped table-bordered w-100">
            <thead>
                <tr>
                    <th>#</th>
                    <th>رقم الشحنة</th>
                    <th>رقم الفاتورة</th>
                    <th>العميل</th>
                    <th>تاريخ الشحن</th>
                    <th>التسليم المتوقع</th>
                    <th>تكلفة الشحن</th>
                    <th>الحالة</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
        </table>
    </div></div>
</div></div>
@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function(){
  const table = $('#shipments-table').DataTable({
    ajax:{
      url:'{{ route('admin.shipments.data') }}',
      data:function(d){
        d.status = $('#status-filter').val();
      }
    },
    columns:[
      {data:'id'},
      {data:'shipment_number'},
      {data:'invoice_number'},
      {data:'customer'},
      {data:'shipment_date'},
      {data:'expected_delivery_date'},
      {data:'shipping_cost'},
      {data:'status'},
      {data:'actions', orderable:false, searchable:false}
    ],
    language:{url:'//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json'},
    order:[[0,'desc']]
  });

  $('#status-filter').on('change', function(){
    table.ajax.reload();
  });
});
</script>
@endsection