@extends('admin.layouts.master')
@section('title', 'المنتجات')

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">

            {{-- HEADER --}}
            <div class="content-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1"><i class="ti ti-box me-1 text-primary"></i>إدارة المنتجات</h4>
                    <p class="text-muted mb-0">قائمة شاملة بجميع منتجات نظام نقطة البيع مع إمكانية البحث والتصفية.</p>
                </div>
                @can('products.create')
                <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                    <i class="ti ti-plus me-1"></i>إضافة منتج جديد
                </a>
                @endcan
            </div>

            {{-- STATS --}}
            <div class="row g-3 mb-4">
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-box fs-4 text-primary"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">إجمالي المنتجات</p>
                                <h4 class="mb-0 fw-bold">{{ number_format($stats['total']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-success bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-check fs-4 text-success"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">المنتجات المفعّلة</p>
                                <h4 class="mb-0 fw-bold text-success">{{ number_format($stats['active']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-danger bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-x fs-4 text-danger"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">المنتجات المعطّلة</p>
                                <h4 class="mb-0 fw-bold text-danger">{{ number_format($stats['inactive']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-warning bg-opacity-10 p-3 flex-shrink-0">
                                <i class="ti ti-archive fs-4 text-warning"></i>
                            </div>
                            <div>
                                <p class="text-muted mb-1 small">يُتابَع مخزونها</p>
                                <h4 class="mb-0 fw-bold text-warning">{{ number_format($stats['tracked']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TABLE --}}
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="row g-2 align-items-center mb-3">
                        <div class="col-md-3">
                            <label for="status_filter" class="form-label fw-semibold mb-1">تصفية حسب الحالة</label>
                            <select id="status_filter" class="form-select">
                                <option value="">الكل</option>
                                <option value="active">مفعّلة فقط</option>
                                <option value="inactive">معطّلة فقط</option>
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="products-table" class="table table-hover align-middle w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>المنتج</th>
                                    <th>SKU</th>
                                    <th>التصنيف</th>
                                    <th>العلامة</th>
                                    <th>الوحدة</th>
                                    <th class="text-end">سعر البيع</th>
                                    <th class="text-center">الحالة</th>
                                    <th>تاريخ الإضافة</th>
                                    <th class="text-center" style="width:120px">الإجراءات</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const canUpdate = @json(auth()->user()?->can('products.update'));

    const table = $('#products-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        order: [[0, 'asc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.products.index') }}',
            data: function (d) {
                d.status_filter = $('#status_filter').val();
            }
        },
        columns: [
            {
                data: null,
                name: 'name',
                render: function (data, type, row) {
                    return '<div class="fw-semibold">' + $('<div>').text(row.name).html() + '</div>'
                         + '<small class="text-muted">#' + row.id + '</small>';
                }
            },
            { data: 'sku', name: 'sku', render: data => '<code>' + $('<div>').text(data).html() + '</code>' },
            { data: 'category', name: 'category', orderable: false, searchable: false },
            { data: 'brand',    name: 'brand',    orderable: false, searchable: false },
            { data: 'unit',     name: 'unit',     orderable: false, searchable: false },
            { data: 'sale_price', name: 'sale_price', className: 'text-end fw-semibold' },
            {
                data: 'is_active',
                name: 'is_active',
                orderable: false,
                searchable: false,
                className: 'text-center',
                render: function (data) {
                    return Number(data) === 1
                        ? '<span class="badge bg-success rounded-pill px-3">مفعّل</span>'
                        : '<span class="badge bg-danger rounded-pill px-3">معطّل</span>';
                }
            },
            { data: 'created_at', name: 'created_at', className: 'text-nowrap' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ]
    });

    $('#status_filter').on('change', function () {
        table.ajax.reload();
    });
});
</script>
@endpush