@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>
        .products-hero {
            background: linear-gradient(135deg, #243b55 0%, #141e30 100%);
            color: #fff;
            border-radius: 16px;
            padding: 24px;
        }
        .products-stat-card {
            border: 1px solid #eef1f4;
            border-radius: 12px;
            background: #fff;
        }
        .products-stat-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        #products-table td,
        #products-table th {
            vertical-align: middle;
        }
    </style>
@endsection

@section('content')
    <div class="pc-container">
        <div class="pc-content">
            <div class="products-hero mb-3">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h4 class="mb-1 text-white">كتالوج منتجات الألواح</h4>
                        <p class="mb-0 small opacity-75">متابعة احترافية لأصناف الأكريليك والبولي كاربونيت من التسعير حتى كارت الصنف.</p>
                    </div>
                    @can('products.create')
                        <a href="{{ route('admin.products.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="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-primary-light text-primary"><i class="ti ti-package"></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="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-success-light text-success"><i class="ti ti-circle-check"></i></span>
                            <div>
                                <div class="text-muted small">الأصناف المفعلة</div>
                                <div class="fw-bold" id="stat-active">{{ number_format($stats['active']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-6">
                    <div class="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-info-light text-info"><i class="ti ti-sparkles"></i></span>
                            <div>
                                <div class="text-muted small">ألواح أكريليك</div>
                                <div class="fw-bold" id="stat-acrylic">{{ number_format($stats['acrylic']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-6">
                    <div class="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-warning-light text-warning"><i class="ti ti-layers-linked"></i></span>
                            <div>
                                <div class="text-muted small">بولي كاربونيت</div>
                                <div class="fw-bold" id="stat-poly">{{ number_format($stats['polycarbonate']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-6">
                    <div class="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-light-success text-success"><i class="ti ti-cut"></i></span>
                            <div>
                                <div class="text-muted small">يدعم التقطيع</div>
                                <div class="fw-bold" id="stat-cutting">{{ number_format($stats['with_cutting']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 col-6">
                    <div class="products-stat-card p-3 h-100">
                        <div class="d-flex align-items-center gap-2">
                            <span class="products-stat-icon bg-light-info text-info"><i class="ti ti-pencil"></i></span>
                            <div>
                                <div class="text-muted small">يدعم التشكيل</div>
                                <div class="fw-bold" id="stat-forming">{{ number_format($stats['with_forming']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">فلاتر احترافية</h5>
                    <small class="text-muted">اختر مواصفات اللوح للوصول السريع للصنف المطلوب</small>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <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 $item)
                                    <option value="{{ $item->id }}">{{ $item->name_ar }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-4">
                            <label for="filter-type" class="form-label">النوع</label>
                            <select id="filter-type" class="form-select">
                                <option value="">كل الأنواع</option>
                                @foreach($types as $item)
                                    <option value="{{ $item->id }}">{{ $item->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 $item)
                                    <option value="{{ $item->id }}">{{ $item->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 $item)
                                    <option value="{{ $item->id }}">{{ $item->name_ar }}</option>
                                @endforeach
                            </select>
                        </div>
                        <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>
                                <option value="active">مفعل</option>
                                <option value="inactive">غير مفعل</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-4 d-flex align-items-end">
                            <button id="filters-reset" class="btn btn-outline-secondary w-100" type="button">
                                <i class="ti ti-refresh me-1"></i>إعادة الضبط
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">قائمة الأصناف</h5>
                    <small class="text-muted">بحث سريع + فرز + عرض كارت الصنف بنقرة واحدة</small>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="products-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>
    </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 table = $('#products-table').DataTable({
                ajax: {
                    url: '{{ route('admin.products.data') }}',
                    data: function (d) {
                        d.material_id = $('#filter-material').val();
                        d.type_id = $('#filter-type').val();
                        d.thickness_id = $('#filter-thickness').val();
                        d.size_id = $('#filter-size').val();
                        d.status = $('#filter-status').val();
                    }
                },
                columns: [
                    {data: 'id'},
                    {data: 'sku'},
                    {data: 'name_ar'},
                    {data: 'classification'},
                    {data: 'specs'},
                    {data: 'pricing'},
                    {data: 'services'},
                    {data: 'status'},
                    {data: 'actions', orderable: false, searchable: false}
                ],
                order: [[0, 'desc']],
                language: {
                    sProcessing: 'جاري التحميل...',
                    sLengthMenu: 'عرض _MENU_ سجل',
                    sZeroRecords: 'لا توجد بيانات مطابقة',
                    sInfo: 'عرض _START_ إلى _END_ من أصل _TOTAL_ سجل',
                    sInfoEmpty: 'عرض 0 إلى 0 من أصل 0 سجل',
                    sInfoFiltered: '(تمت التصفية من إجمالي _MAX_ سجل)',
                    sSearch: 'بحث:',
                    oPaginate: {
                        sFirst: 'الأول',
                        sPrevious: 'السابق',
                        sNext: 'التالي',
                        sLast: 'الأخير'
                    }
                }
            });

            $('#filter-material, #filter-type, #filter-thickness, #filter-size, #filter-status').on('change', function () {
                table.ajax.reload();
            });

            $('#filters-reset').on('click', function () {
                $('#filter-material, #filter-type, #filter-thickness, #filter-size, #filter-status').val('');
                table.ajax.reload();
            });

            $('#products-table').on('xhr.dt', function (e, settings, json) {
                if (!json || !json.stats) {
                    return;
                }

                $('#stat-total').text(Number(json.stats.total || 0).toLocaleString('ar-EG'));
                $('#stat-active').text(Number(json.stats.active || 0).toLocaleString('ar-EG'));
                $('#stat-acrylic').text(Number(json.stats.acrylic || 0).toLocaleString('ar-EG'));
                $('#stat-poly').text(Number(json.stats.polycarbonate || 0).toLocaleString('ar-EG'));
                $('#stat-cutting').text(Number(json.stats.with_cutting || 0).toLocaleString('ar-EG'));
                $('#stat-forming').text(Number(json.stats.with_forming || 0).toLocaleString('ar-EG'));
            });
        });
    </script>
@endsection