@extends('admin.layouts.master')

@section('title', 'أوامر تجهيز الطلبات')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
    .prep-hero {
        background: linear-gradient(135deg, #0f172a 0%, #14532d 100%);
        color: #fff;
        border-radius: 22px;
        padding: 24px;
    }
    .prep-stat-card {
        border: 1px solid #ebf0f5;
        border-radius: 16px;
        background: #fff;
    }
    .prep-stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    #preparations-table td,
    #preparations-table th {
        vertical-align: middle;
    }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="prep-hero mb-3">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <div class="small opacity-75 mb-1">لوحة تشغيل احترافية لتجهيز الطلبات</div>
                    <h3 class="mb-1 text-white">أوامر تجهيز الألواح</h3>
                    <p class="mb-0 opacity-75">تابع أوامر القص والتشكيل والتسليم للأكريليك والبولي كاربونيت بصورة عربية واضحة ومختلفة عن السوق.</p>
                </div>
                @can('order_preparations.create')
                    <a href="{{ route('admin.order_preparations.create') }}" class="btn btn-light">
                        <i class="ti ti-plus me-1"></i>إضافة أمر تجهيز احترافي
                    </a>
                @endcan
            </div>
        </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="row g-3 mb-3">
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-primary-subtle text-primary"><i class="ti ti-packages"></i></span>
                        <div><div class="text-muted small">إجمالي الأوامر</div><div class="fw-bold" id="stat-total">{{ number_format($stats['total']) }}</div></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-secondary-subtle text-secondary"><i class="ti ti-sparkles"></i></span>
                        <div><div class="text-muted small">جديد</div><div class="fw-bold" id="stat-new">{{ number_format($stats['new']) }}</div></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-warning-subtle text-warning"><i class="ti ti-cut"></i></span>
                        <div><div class="text-muted small">جاري التقطيع</div><div class="fw-bold" id="stat-cutting">{{ number_format($stats['cutting']) }}</div></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-info-subtle text-info"><i class="ti ti-tool"></i></span>
                        <div><div class="text-muted small">جاري التشكيل</div><div class="fw-bold" id="stat-forming">{{ number_format($stats['forming']) }}</div></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-success-subtle text-success"><i class="ti ti-circle-check"></i></span>
                        <div><div class="text-muted small">جاهز</div><div class="fw-bold" id="stat-ready">{{ number_format($stats['ready']) }}</div></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="prep-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="prep-stat-icon bg-dark-subtle text-dark"><i class="ti ti-truck-delivery"></i></span>
                        <div><div class="text-muted small">تم التسليم</div><div class="fw-bold" id="stat-delivered">{{ number_format($stats['delivered']) }}</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h5 class="mb-1">فلاتر تشغيلية</h5>
                    <small class="text-muted">فلتر حسب الحالة والمخزن والمسؤول ومواصفات اللوح ومصدر الطلب.</small>
                </div>
                <button type="button" id="reset-filters" class="btn btn-outline-secondary btn-sm"><i class="ti ti-refresh me-1"></i>إعادة ضبط</button>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-status" class="form-label">الحالة</label>
                        <select id="filter-status" class="form-select">
                            <option value="">كل الحالات</option>
                            @foreach(
                                \App\Models\OrderPreparation::STATUSES as $statusKey => $statusLabel
                            )
                                <option value="{{ $statusKey }}">{{ $statusLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-warehouse" class="form-label">المخزن</label>
                        <select id="filter-warehouse" class="form-select">
                            <option value="">كل المخازن</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}">{{ $warehouse->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-prepared-by" class="form-label">المسؤول</label>
                        <select id="filter-prepared-by" class="form-select">
                            <option value="">كل المسؤولين</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-source" class="form-label">مصدر الطلب</label>
                        <select id="filter-source" class="form-select">
                            <option value="">الكل</option>
                            <option value="invoice">فاتورة بيع</option>
                            <option value="external">طلب خارجي</option>
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-material" class="form-label">الخامة</label>
                        <select id="filter-material" class="form-select">
                            <option value="">كل الخامات</option>
                            @foreach($materials as $material)
                                <option value="{{ $material->id }}">{{ $material->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-thickness" class="form-label">السمك</label>
                        <select id="filter-thickness" class="form-select">
                            <option value="">كل السماكات</option>
                            @foreach($thicknesses as $thickness)
                                <option value="{{ $thickness->id }}">{{ $thickness->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-size" class="form-label">المقاس</label>
                        <select id="filter-size" class="form-select">
                            <option value="">كل المقاسات</option>
                            @foreach($sizes as $size)
                                <option value="{{ $size->id }}">{{ $size->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-from-date" class="form-label">من تاريخ</label>
                        <input id="filter-from-date" type="date" class="form-control">
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label for="filter-to-date" class="form-label">إلى تاريخ</label>
                        <input id="filter-to-date" type="date" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h5 class="mb-1">جدول أوامر التجهيز</h5>
                    <small class="text-muted">عرض تنفيذي يوضح المصدر، المواصفات، المسؤولية التشغيلية، والكميات.</small>
                </div>
                <span class="badge bg-light-primary text-primary px-3 py-2">Ajax DataTable عربي</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="preparations-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>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@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 tableElement = $('#preparations-table');
  const table = tableElement.DataTable({
    ajax:{
      url:'{{ route('admin.order_preparations.data') }}',
      data:function(d){
        d.status = $('#filter-status').val();
        d.warehouse_id = $('#filter-warehouse').val();
        d.prepared_by = $('#filter-prepared-by').val();
        d.source = $('#filter-source').val();
        d.material_id = $('#filter-material').val();
        d.thickness_id = $('#filter-thickness').val();
        d.size_id = $('#filter-size').val();
        d.from_date = $('#filter-from-date').val();
        d.to_date = $('#filter-to-date').val();
      }
    },
    columns:[
      {data:'preparation_info'},
      {data:'reference'},
      {data:'specs'},
      {data:'operations'},
      {data:'quantities'},
      {data:'status'},
      {data:'actions',orderable:false,searchable:false}
    ],
    order:[[0,'desc']],
    pageLength:25,
    language:{
      sProcessing:'جاري التحميل...',
      sLengthMenu:'عرض _MENU_ سجل',
      sZeroRecords:'لا توجد بيانات مطابقة',
      sInfo:'عرض _START_ إلى _END_ من أصل _TOTAL_ سجل',
      sInfoEmpty:'عرض 0 إلى 0 من أصل 0 سجل',
      sInfoFiltered:'(تمت التصفية من إجمالي _MAX_ سجل)',
      sSearch:'بحث عام:',
      oPaginate:{sFirst:'الأول',sPrevious:'السابق',sNext:'التالي',sLast:'الأخير'}
    }
  });

  $('#filter-status, #filter-warehouse, #filter-prepared-by, #filter-source, #filter-material, #filter-thickness, #filter-size, #filter-from-date, #filter-to-date').on('change', function(){
    table.ajax.reload();
  });

  $('#reset-filters').on('click', function(){
    $('#filter-status, #filter-warehouse, #filter-prepared-by, #filter-source, #filter-material, #filter-thickness, #filter-size, #filter-from-date, #filter-to-date').val('');
    table.ajax.reload();
  });

  tableElement.on('xhr.dt', function(e, settings, json){
    if (!json || !json.stats) {
      return;
    }

    $('#stat-total').text(Number(json.stats.total || 0).toLocaleString('ar-EG'));
    $('#stat-new').text(Number(json.stats.new || 0).toLocaleString('ar-EG'));
    $('#stat-cutting').text(Number(json.stats.cutting || 0).toLocaleString('ar-EG'));
    $('#stat-forming').text(Number(json.stats.forming || 0).toLocaleString('ar-EG'));
    $('#stat-ready').text(Number(json.stats.ready || 0).toLocaleString('ar-EG'));
    $('#stat-delivered').text(Number(json.stats.delivered || 0).toLocaleString('ar-EG'));
  });
});
</script>
@endsection