@extends('admin.layouts.master')

@section('title', __('admin.stock'))
@section('page_title', __('admin.stock'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.stock') }}</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $stats['total_skus'] }}</h3><p>عدد المنتجات النشطة في المخزون</p>
            </div>
            <div class="icon"><i class="fas fa-cubes"></i></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $stats['total_warehouses'] }}</h3><p>المستودعات النشطة</p>
            </div>
            <div class="icon"><i class="fas fa-warehouse"></i></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="small-box bg-{{ $stats['low_stock_count'] > 0 ? 'danger' : 'secondary' }}">
            <div class="inner">
                <h3>{{ $stats['low_stock_count'] }}</h3><p>منتجات وصلت الحد الأدنى</p>
            </div>
            <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-cubes"></i> الحالة الحالية للمخزون</h3>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="small mb-1">{{ __('admin.warehouses') }}</label>
                <select class="form-control form-control-sm filter-input" id="filter_warehouse_id">
                    <option value="">— {{ __('admin.warehouses') }} —</option>
                    @foreach($warehouses as $w)
                        <option value="{{ $w->id }}">{{ $w->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <div class="icheck-primary">
                    <input type="checkbox" id="filter_low_stock_only">
                    <label for="filter_low_stock_only">المنخفض فقط</label>
                </div>
            </div>
        </div>

        <table id="stockTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>SKU</th>
                    <th>{{ __('admin.products') }}</th>
                    <th>variant</th>
                    <th>{{ __('admin.warehouses') }}</th>
                    <th>متاح</th>
                    <th>محجوز</th>
                    <th>متوسط التكلفة</th>
                    <th>آخر حركة</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const table = $('#stockTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.stock.data') }}',
            data: d => {
                d.warehouse_id   = $('#filter_warehouse_id').val();
                d.low_stock_only = $('#filter_low_stock_only').is(':checked') ? 1 : 0;
            }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id',               name: 'id', width: '60px' },
            { data: 'sku',              name: 'sku', orderable: false },
            { data: 'product_name',     name: 'product.name_ar', orderable: false },
            { data: 'variant_name',     name: 'variant.name', orderable: false, searchable: false },
            { data: 'warehouse_name',   name: 'warehouse.name', orderable: false },
            { data: 'available_qty',    name: 'available_qty' },
            { data: 'reserved_qty',     name: 'reserved_qty' },
            { data: 'avg_cost',         name: 'avg_cost' },
            { data: 'last_movement_at', name: 'last_movement_at' },
        ]
    });
    $('.filter-input, #filter_low_stock_only').on('change', () => table.ajax.reload());
});
</script>
@endpush