@extends('admin.layouts.master')
@section('title', 'نظرة المخزون')

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <div class="content-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1"><i class="ti ti-archive me-1"></i> إدارة أرصدة المخزون</h4>
                    <p class="text-muted mb-0">لوحة احترافية لمتابعة رصيد كل منتج داخل كل مخزن مع تنبيهات فورية وسرعة وصول لحركات المخزون.</p>
                </div>
                @can('stock.adjust')
                    <a href="{{ route('admin.product-stocks.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> إضافة حركة مخزون
                    </a>
                @endcan
            </div>

            <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">
                            <p class="text-muted mb-2">إجمالي أرصدة المنتجات</p>
                            <h4 class="mb-0">{{ number_format($stats['total']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">مخزون منخفض</p>
                            <h4 class="text-warning mb-0">{{ number_format($stats['low_stock']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">نفاد كامل</p>
                            <h4 class="text-danger mb-0">{{ number_format($stats['out_of_stock']) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body">
                            <p class="text-muted mb-2">القيمة التقديرية</p>
                            <h4 class="text-primary mb-0">{{ number_format((float) $stats['estimated_value'], 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3 shadow-sm border-0">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">المخزن</label>
                            <select id="filter-warehouse" class="form-select">
                                <option value="">الكل</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">التصنيف</label>
                            <select id="filter-category" class="form-select">
                                <option value="">الكل</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">العلامة التجارية</label>
                            <select id="filter-brand" class="form-select">
                                <option value="">الكل</option>
                                @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">حالة الرصيد</label>
                            <select id="filter-stock-status" class="form-select">
                                <option value="">الكل</option>
                                <option value="good">جيد</option>
                                <option value="low">منخفض</option>
                                <option value="out">نفاد</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="product-stocks-table" class="table table-hover align-middle w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>المنتج</th>
                                    <th>المخزن</th>
                                    <th>التصنيف</th>
                                    <th>العلامة</th>
                                    <th>الحالي</th>
                                    <th>المحجوز</th>
                                    <th>المتاح</th>
                                    <th>متوسط التكلفة</th>
                                    <th>القيمة</th>
                                    <th>الحالة</th>
                                    <th>آخر تحديث</th>
                                    <th class="text-center">الإجراءات</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    const table = $('#product-stocks-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: '{{ route('admin.product-stocks.index') }}',
            data: function (d) {
                d.warehouse_id = $('#filter-warehouse').val();
                d.category_id = $('#filter-category').val();
                d.brand_id = $('#filter-brand').val();
                d.stock_status = $('#filter-stock-status').val();
            }
        },
        columns: [
            {
                data: null,
                name: 'product',
                render: function (data, type, row) {
                    return '<div>'
                        + '<div class="fw-semibold">' + (row.product || '—') + '</div>'
                        + '<small class="text-muted">SKU: ' + (row.sku || '—') + (row.unit ? ' | الوحدة: ' + row.unit : '') + '</small>'
                        + '</div>';
                }
            },
            {
                data: null,
                name: 'warehouse',
                render: function (data, type, row) {
                    return '<div>' + (row.warehouse || '—')
                        + '<div class="text-muted small">' + (row.warehouse_code || '—') + '</div></div>';
                }
            },
            {data: 'category', name: 'category', defaultContent: '—'},
            {data: 'brand', name: 'brand', defaultContent: '—'},
            {data: 'quantity', name: 'quantity', className: 'text-end'},
            {data: 'reserved_quantity', name: 'reserved_quantity', className: 'text-end'},
            {data: 'available_quantity', name: 'available_quantity', className: 'text-end'},
            {data: 'average_cost', name: 'average_cost', className: 'text-end'},
            {data: 'stock_value', name: 'stock_value', className: 'text-end'},
            {data: 'stock_alert_status', name: 'stock_alert_status', orderable: false, searchable: false},
            {data: 'updated_at', name: 'updated_at', className: 'text-nowrap'},
            {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center'}
        ],
        drawCallback: function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
    });

    $('#filter-warehouse, #filter-category, #filter-brand, #filter-stock-status').on('change', function () {
        table.ajax.reload();
    });
});
</script>
@endpush