@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>
    .category-hero {
        background: linear-gradient(135deg, #1d3557 0%, #2a9d8f 100%);
        color: #fff;
        border-radius: 16px;
        padding: 22px;
    }
    .stat-card {
        border: 1px solid #eef1f4;
        border-radius: 12px;
    }
    .stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    #categories-table td,
    #categories-table th {
        vertical-align: middle;
    }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="category-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('categories.create')
                    <a href="{{ route('admin.categories.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-md-3">
                <div class="stat-card p-3 h-100">
                    <div class="d-flex align-items-center gap-2">
                        <span class="stat-icon bg-primary-light text-primary"><i class="ti ti-category"></i></span>
                        <div>
                            <div class="text-muted small">إجمالي الفئات</div>
                            <div class="fw-bold fs-5">{{ number_format($stats['total']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-3 h-100">
                    <div class="d-flex align-items-center gap-2">
                        <span class="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 fs-5">{{ number_format($stats['active']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-3 h-100">
                    <div class="d-flex align-items-center gap-2">
                        <span class="stat-icon bg-info-light text-info"><i class="ti ti-sitemap"></i></span>
                        <div>
                            <div class="text-muted small">فئات رئيسية</div>
                            <div class="fw-bold fs-5">{{ number_format($stats['root']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-3 h-100">
                    <div class="d-flex align-items-center gap-2">
                        <span class="stat-icon bg-warning-light text-warning"><i class="ti ti-git-branch"></i></span>
                        <div>
                            <div class="text-muted small">فئات فرعية</div>
                            <div class="fw-bold fs-5">{{ number_format($stats['sub']) }}</div>
                        </div>
                    </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="categories-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>
                            </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 () {
        $('#categories-table').DataTable({
            ajax: '{{ route('admin.categories.data') }}',
            columns: [
                {data: 'id'},
                {data: 'code'},
                {data: 'name_ar'},
                {data: 'parent'},
                {data: 'products_count'},
                {data: 'display_order'},
                {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: 'الأخير'
                }
            }
        });
    });
</script>
@endsection