@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>
    .movements-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
        color: #fff;
        border-radius: 20px;
        padding: 24px;
    }
    .movement-stat-card {
        border: 1px solid #ebf0f5;
        border-radius: 16px;
        background: #fff;
    }
    .movement-stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    #stock-movements-table td,
    #stock-movements-table th {
        vertical-align: middle;
    }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="movements-hero mb-3">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <div class="small opacity-75 mb-1">لوحة متابعة عربية لحركة الألواح</div>
                    <h3 class="mb-1 text-white">سجل حركات المخزون</h3>
                    <p class="mb-0 opacity-75">تابع الوارد والصادر والتسويات لحظيًا مع مرجع الحركة وكارت الصنف والمستند الأصلي.</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('admin.inventory.movements.create') }}" class="btn btn-light">
                        <i class="ti ti-plus me-1"></i>إضافة حركة باحترافية
                    </a>
                    @can('inventory_balances.view')
                        <a href="{{ route('admin.inventory.balances.index') }}" class="btn btn-outline-light">
                            <i class="ti ti-stack me-1"></i>الأرصدة الحالية
                        </a>
                    @endcan
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="row g-3 mb-3">
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-primary-subtle text-primary"><i class="ti ti-history"></i></span>
                        <div>
                            <div class="text-muted small">إجمالي الحركات</div>
                            <div class="fw-bold" id="stat-total">{{ number_format($stats['total']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-success-subtle text-success"><i class="ti ti-arrow-down-left"></i></span>
                        <div>
                            <div class="text-muted small">حركات واردة</div>
                            <div class="fw-bold" id="stat-inbound">{{ number_format($stats['inbound']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-danger-subtle text-danger"><i class="ti ti-arrow-up-right"></i></span>
                        <div>
                            <div class="text-muted small">حركات صادرة</div>
                            <div class="fw-bold" id="stat-outbound">{{ number_format($stats['outbound']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-info-subtle text-info"><i class="ti ti-truck-delivery"></i></span>
                        <div>
                            <div class="text-muted small">مشتريات</div>
                            <div class="fw-bold" id="stat-purchases">{{ number_format($stats['purchases']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-warning-subtle text-warning"><i class="ti ti-receipt-2"></i></span>
                        <div>
                            <div class="text-muted small">مبيعات</div>
                            <div class="fw-bold" id="stat-sales">{{ number_format($stats['sales']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-6">
                <div class="movement-stat-card p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <span class="movement-stat-icon bg-secondary-subtle text-secondary"><i class="ti ti-adjustments"></i></span>
                        <div>
                            <div class="text-muted small">تسويات</div>
                            <div class="fw-bold" id="stat-adjustments">{{ number_format($stats['adjustments']) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h5 class="mb-1">فلاتر احترافية</h5>
                    <small class="text-muted">فلترة الحركات حسب المخزن، نوع اللوح، السمك، التاريخ، والمرجع.</small>
                </div>
                <button type="button" id="reset-filters" class="btn btn-outline-secondary btn-sm">
                    <i class="ti ti-refresh me-1"></i>إعادة ضبط الفلاتر
                </button>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-warehouse">المخزن</label>
                        <select id="filter-warehouse" class="form-select">
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" @selected(request('warehouse_id', $defaultWarehouse?->id) == $warehouse->id)>{{ $warehouse->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-product">الصنف</label>
                        <select id="filter-product" class="form-select">
                            <option value="">كل الأصناف</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" @selected((int) request('product_id') === $product->id)>{{ $product->name_ar }}{{ $product->sku ? ' - '.$product->sku : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-material">الخامة</label>
                        <select id="filter-material" class="form-select">
                            <option value="">كل الخامات</option>
                            @foreach($materials as $material)
                                <option value="{{ $material->id }}">{{ $material->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-thickness">السمك</label>
                        <select id="filter-thickness" class="form-select">
                            <option value="">كل السماكات</option>
                            @foreach($thicknesses as $thickness)
                                <option value="{{ $thickness->id }}">{{ $thickness->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-size">المقاس</label>
                        <select id="filter-size" class="form-select">
                            <option value="">كل المقاسات</option>
                            @foreach($sizes as $size)
                                <option value="{{ $size->id }}">{{ $size->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-direction">الاتجاه</label>
                        <select id="filter-direction" class="form-select">
                            <option value="">الكل</option>
                            <option value="in">وارد</option>
                            <option value="out">صادر</option>
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-type">نوع الحركة</label>
                        <select id="filter-type" class="form-select">
                            <option value="">كل الأنواع</option>
                            <option value="purchase_in">وارد شراء</option>
                            <option value="sale_out">صادر بيع</option>
                            <option value="sale_return_in">مرتجع مبيعات</option>
                            <option value="purchase_return_out">مرتجع مشتريات</option>
                            <option value="adjustment_in">تسوية زيادة</option>
                            <option value="adjustment_out">تسوية عجز</option>
                            <option value="opening_balance">رصيد افتتاحي</option>
                            <option value="transfer_in">تحويل وارد</option>
                            <option value="transfer_out">تحويل صادر</option>
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-from-date">من تاريخ</label>
                        <input type="date" id="filter-from-date" class="form-control" value="{{ request('from_date') }}">
                    </div>
                    <div class="col-lg-2 col-md-4">
                        <label class="form-label" for="filter-to-date">إلى تاريخ</label>
                        <input type="date" id="filter-to-date" class="form-control" value="{{ request('to_date') }}">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label" for="filter-reference">رقم المرجع</label>
                        <input type="text" id="filter-reference" class="form-control" value="{{ request('reference_number') }}" placeholder="مثال: INV أو ADJ">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h5 class="mb-1">جدول الحركات</h5>
                    <small class="text-muted">عرض تنفيذي للحركة مع ربط مباشر بالمستند المرجعي وكارت الصنف.</small>
                </div>
                <span class="badge bg-light-primary text-primary px-3 py-2">بحث + فلترة + تفاصيل</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="stock-movements-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>
                            <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 () {
        const tableElement = $('#stock-movements-table');
        const table = tableElement.DataTable({
            ajax: {
                url: '{{ route('admin.inventory.movements.data') }}',
                data: function (d) {
                    d.warehouse_id = $('#filter-warehouse').val();
                    d.product_id = $('#filter-product').val();
                    d.material_id = $('#filter-material').val();
                    d.thickness_id = $('#filter-thickness').val();
                    d.size_id = $('#filter-size').val();
                    d.direction = $('#filter-direction').val();
                    d.movement_type = $('#filter-type').val();
                    d.from_date = $('#filter-from-date').val();
                    d.to_date = $('#filter-to-date').val();
                    d.reference_number = $('#filter-reference').val();
                }
            },
            columns: [
                {data: 'movement_date'},
                {data: 'product'},
                {data: 'classification'},
                {data: 'movement_type'},
                {data: 'direction'},
                {data: 'quantity'},
                {data: 'balance_after'},
                {data: 'costing'},
                {data: 'reference'},
                {data: 'creator'},
                {data: 'notes'},
                {data: 'actions', orderable: false, searchable: false}
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            language: {
                sProcessing: 'جاري التحميل...',
                sLengthMenu: 'عرض _MENU_ سجل',
                sZeroRecords: 'لا توجد بيانات مطابقة',
                sInfo: 'عرض _START_ إلى _END_ من أصل _TOTAL_ سجل',
                sInfoEmpty: 'عرض 0 إلى 0 من أصل 0 سجل',
                sInfoFiltered: '(تمت التصفية من إجمالي _MAX_ سجل)',
                sSearch: 'بحث عام:',
                oPaginate: {
                    sFirst: 'الأول',
                    sPrevious: 'السابق',
                    sNext: 'التالي',
                    sLast: 'الأخير'
                }
            }
        });

        $('#filter-warehouse, #filter-product, #filter-material, #filter-thickness, #filter-size, #filter-direction, #filter-type, #filter-from-date, #filter-to-date').on('change', function () {
            table.ajax.reload();
        });

        let referenceTimeout = null;
        $('#filter-reference').on('input', function () {
            clearTimeout(referenceTimeout);
            referenceTimeout = setTimeout(function () {
                table.ajax.reload();
            }, 400);
        });

        $('#reset-filters').on('click', function () {
            $('#filter-warehouse').val('{{ $defaultWarehouse?->id }}');
            $('#filter-product, #filter-material, #filter-thickness, #filter-size, #filter-direction, #filter-type, #filter-from-date, #filter-to-date, #filter-reference').val('');
            table.ajax.reload();
        });

        tableElement.on('xhr.dt', function (e, settings, json) {
            if (!json || !json.stats) {
                return;
            }

            $('#stat-total').text(Number(json.stats.total || 0).toLocaleString('ar-EG'));
            $('#stat-inbound').text(Number(json.stats.inbound || 0).toLocaleString('ar-EG'));
            $('#stat-outbound').text(Number(json.stats.outbound || 0).toLocaleString('ar-EG'));
            $('#stat-purchases').text(Number(json.stats.purchases || 0).toLocaleString('ar-EG'));
            $('#stat-sales').text(Number(json.stats.sales || 0).toLocaleString('ar-EG'));
            $('#stat-adjustments').text(Number(json.stats.adjustments || 0).toLocaleString('ar-EG'));
        });
    });
</script>
@endsection