@extends('layouts.app')

@section('title', __('messages.items'))
@section('page_title', __('messages.items'))
@section('breadcrumb')<li class="breadcrumb-item active">{{ __('messages.items') }}</li>@endsection

@push('styles')
<style>
.items-stat {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem 1.2rem;
    border-right: 4px solid var(--c, #007bff);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    height: 100%;
}
.items-stat .num   { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--c, #007bff); }
.items-stat .lbl   { font-size: .85rem; color: #6c757d; margin-top: .35rem; }
.items-stat .icn   { float: left; font-size: 2.2rem; opacity: .25; color: var(--c, #007bff); }

#items-table .item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-left: .65rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}
#items-table tbody tr { transition: background .12s; }
#items-table tbody td { vertical-align: middle; padding: .55rem .75rem; }
.filter-card { background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%); }
.filter-card .form-group { margin-bottom: .5rem; }
.filter-card label { font-size: .8rem; color: #6c757d; margin-bottom: .15rem; }
</style>
@endpush

@section('content')

{{-- ============== Stats Cards ============== --}}
<div class="row mb-3">
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #007bff">
            <i class="fas fa-pills icn"></i>
            <div class="num">{{ $stats['total'] }}</div>
            <div class="lbl">إجمالى الأصناف</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #28a745">
            <i class="fas fa-check-circle icn"></i>
            <div class="num">{{ $stats['active'] }}</div>
            <div class="lbl">نشطة</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #6c757d">
            <i class="fas fa-pause-circle icn"></i>
            <div class="num">{{ $stats['inactive'] }}</div>
            <div class="lbl">معطّلة</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #ffc107">
            <i class="fas fa-prescription-bottle-alt icn"></i>
            <div class="num">{{ $stats['prescription'] }}</div>
            <div class="lbl">بوصفة طبية</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #dc3545">
            <i class="fas fa-shield-alt icn"></i>
            <div class="num">{{ $stats['controlled'] }}</div>
            <div class="lbl">مقيّدة / مخدّرات</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-2">
        <div class="items-stat" style="--c: #e83e8c">
            <i class="fas fa-exclamation-triangle icn"></i>
            <div class="num">{{ $stats['low_stock'] }}</div>
            <div class="lbl">منخفضة المخزون</div>
        </div>
    </div>
</div>

{{-- ============== Filters Bar ============== --}}
<div class="card filter-card mb-3">
    <div class="card-body py-2">
        <div class="row align-items-end">
            <div class="col-md-3 form-group">
                <label><i class="fas fa-tags"></i> التصنيف</label>
                <select id="f-category" class="form-control form-control-sm select2">
                    <option value="">— كل التصنيفات —</option>
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label><i class="fas fa-industry"></i> الشركة المصنّعة</label>
                <select id="f-manufacturer" class="form-control form-control-sm select2">
                    <option value="">— كل الشركات —</option>
                    @foreach ($manufacturers as $m)
                        <option value="{{ $m->id }}">{{ $m->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label><i class="fas fa-prescription"></i> النوع</label>
                <select id="f-drug-type" class="form-control form-control-sm">
                    <option value="">— كل الأنواع —</option>
                    <option value="otc">بدون وصفة</option>
                    <option value="prescription">بوصفة</option>
                    <option value="controlled">مقيّدة</option>
                    <option value="narcotic">مخدّرات</option>
                    <option value="cosmetic">تجميل</option>
                    <option value="supplement">مكمّلات</option>
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label><i class="fas fa-toggle-on"></i> الحالة</label>
                <select id="f-status" class="form-control form-control-sm">
                    <option value="">— الكل —</option>
                    <option value="active">نشطة فقط</option>
                    <option value="inactive">معطّلة فقط</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-secondary btn-sm btn-block" onclick="resetFilters()"><i class="fas fa-undo"></i> تفريغ الفلاتر</button>
            </div>
        </div>
    </div>
</div>

{{-- ============== Items Table ============== --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title m-0"><i class="fas fa-list text-primary"></i> قائمة الأصناف</h5>
        <div>
            @can('items.create')
            <a href="{{ route('items.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> {{ __('messages.add_new') }}</a>
            @endcan
        </div>
    </div>
    <div class="card-body p-0">
        <table id="items-table" class="table table-hover w-100 m-0">
            <thead class="thead-light">
                <tr>
                    <th width="3%">#</th>
                    <th width="9%">{{ __('messages.code') }}</th>
                    <th width="28%">الصنف</th>
                    <th width="11%">{{ __('messages.item_categories') }}</th>
                    <th width="12%">{{ __('messages.manufacturers') }}</th>
                    <th width="6%">{{ __('messages.unit') }}</th>
                    <th width="9%">{{ __('messages.drug_type') }}</th>
                    <th width="7%">السعر</th>
                    <th width="5%">المخزون</th>
                    <th width="5%">{{ __('messages.status') }}</th>
                    <th width="5%">{{ __('messages.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
const itemsTable = $('#items-table').DataTable(dtArabicConfig({
    ajax: {
        url: '{{ route('items.data') }}',
        data: function (d) {
            d.category_id     = $('#f-category').val();
            d.manufacturer_id = $('#f-manufacturer').val();
            d.drug_type       = $('#f-drug-type').val();
            d.status          = $('#f-status').val();
        },
    },
    columns: [
        { data: 'id' },
        { data: 'code' },
        { data: 'item_display',      name: 'name' },
        { data: 'category_name',     name: 'category.name' },
        { data: 'manufacturer_name', name: 'manufacturer.name' },
        { data: 'base_unit_name',    name: 'baseUnit.name' },
        { data: 'drug_type_label',   name: 'drug_type', orderable: true, searchable: false },
        { data: 'selling_price',     name: 'default_selling_price', className: 'text-left' },
        { data: 'stock',             orderable: false, searchable: false, className: 'text-center' },
        { data: 'is_active_label',   name: 'is_active', orderable: true, searchable: false, className: 'text-center' },
        { data: 'actions',           orderable: false, searchable: false, className: 'text-center' },
    ],
    order: [[0, 'desc']],
}));

// تطبيق الفلاتر تلقائياً عند التغيير
$('#f-category, #f-manufacturer, #f-drug-type, #f-status').on('change', function () {
    itemsTable.ajax.reload();
});

function resetFilters() {
    $('#f-category, #f-manufacturer').val('').trigger('change.select2');
    $('#f-drug-type, #f-status').val('');
    itemsTable.ajax.reload();
}
</script>
@endpush