@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>
    /* ===== Hero ===== */
    .balances-hero {
        background: linear-gradient(135deg, #1e3a5f 0%, #0d6efd 55%, #0284c7 100%);
        border-radius: 20px; padding: 1.8rem 2rem; color: #fff;
        position: relative; overflow: hidden;
    }
    .balances-hero::before {
        content: ''; position: absolute; inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM36 0v4h-2V0h-4v2h4v4h2V2h4V0h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: .6;
    }
    .balances-hero .hero-icon {
        width: 64px; height: 64px; background: rgba(255,255,255,.15); border-radius: 16px;
        display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; backdrop-filter: blur(4px);
    }
    /* ===== Stat cards ===== */
    .balance-stat { border: 0; border-radius: 18px; box-shadow: 0 8px 25px rgba(15,23,42,.06); transition: transform .2s ease, box-shadow .2s ease; }
    .balance-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(15,23,42,.1); }
    .balance-stat .icon-wrap { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
    .stat-num { font-size: 2rem; font-weight: 700; line-height: 1; }
    /* ===== Filter card ===== */
    .filter-card { border: 0; border-radius: 18px; box-shadow: 0 6px 20px rgba(15,23,42,.05); background: #f8fbff; }
    /* ===== Table shell ===== */
    .table-shell { border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.07); overflow: hidden; }
    .table-shell .card-header { background: #fff; border-bottom: 1px solid #eef2f7; }
    #balances-table thead th { white-space: nowrap; background: #f1f5f9; color: #374151; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
    #balances-table tbody td { vertical-align: middle; }
    .progress { border-radius: 50px; }
    /* Status chips */
    .chip-filter { cursor: pointer; border: 2px solid transparent; border-radius: 50px; padding: .25rem .85rem; font-size: .8rem; font-weight: 600; transition: all .2s; user-select: none; }
    .chip-filter.active, .chip-filter:hover { border-color: currentColor; background: rgba(var(--bs-primary-rgb),.05); }
    /* Warehouse pills */
    .warehouse-pills .nav-link { border-radius: 50px !important; font-size: .82rem; }
</style>
@endsection

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

    {{-- ===== HERO ===== --}}
    <div class="balances-hero mb-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div class="d-flex align-items-center gap-3 position-relative">
            <span class="hero-icon"><i class="ti ti-building-warehouse"></i></span>
            <div>
                <div class="small opacity-75 mb-1">نظام إدارة المخزون — الألواح الأكريليك والبولي كاربونيت</div>
                <h3 class="mb-1 text-white fw-bold">أرصدة المنتجات في المخزون</h3>
                <p class="mb-0 opacity-80 small">تابع رصيد كل لوح أكريليك وبولي كاربونيت، لحظةً بلحظة، مع تنبيهات ذكية لمستويات العجز وإعادة الطلب.</p>
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap position-relative">
            @can('inventory_balances.view')
            <a href="{{ route('admin.inventory.reports.shortage') }}" class="btn btn-light btn-sm fw-semibold">
                <i class="ti ti-alert-triangle me-1 text-warning"></i>تقرير العجز
            </a>
            @endcan
            @can('stock_adjustments.create')
            <a href="{{ route('admin.inventory.adjustments.create') }}" class="btn btn-warning btn-sm fw-bold">
                <i class="ti ti-adjustments me-1"></i>إنشاء تسوية
            </a>
            @endcan
        </div>
    </div>

    {{-- ===== STATS CARDS ===== --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card balance-stat h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="icon-wrap bg-primary-subtle text-primary"><i class="ti ti-package"></i></span>
                    <div>
                        <div class="text-muted small mb-1">إجمالي المنتجات</div>
                        <div class="stat-num text-primary" id="stat-total">{{ number_format($totalProducts) }}</div>
                        <div class="small text-muted mt-1">منتج نشط بالمخزون</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card balance-stat h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="icon-wrap bg-success-subtle text-success"><i class="ti ti-circle-check"></i></span>
                    <div>
                        <div class="text-muted small mb-1">رصيد طبيعي</div>
                        <div class="stat-num text-success" id="stat-ok">—</div>
                        <div class="small text-muted mt-1">فوق حد التنبيه</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card balance-stat h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="icon-wrap bg-warning-subtle text-warning"><i class="ti ti-alert-triangle"></i></span>
                    <div>
                        <div class="text-muted small mb-1">رصيد عجز</div>
                        <div class="stat-num text-warning" id="stat-deficit">—</div>
                        <div class="small text-muted mt-1">تحت حد التنبيه</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card balance-stat h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="icon-wrap bg-danger-subtle text-danger"><i class="ti ti-cube-off"></i></span>
                    <div>
                        <div class="text-muted small mb-1">نفد المخزون</div>
                        <div class="stat-num text-danger" id="stat-zero">—</div>
                        <div class="small text-muted mt-1">رصيد صفر أو أقل</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== FILTERS ===== --}}
    <div class="card filter-card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <div>
                    <h6 class="mb-1 fw-bold"><i class="ti ti-filter me-1 text-primary"></i>فلاتر البحث</h6>
                    <small class="text-muted">اختر المخزن والفئة وحالة الرصيد للوصول السريع إلى المنتج المطلوب.</small>
                </div>
                <button type="button" id="reset-filters" class="btn btn-outline-secondary btn-sm">
                    <i class="ti ti-rotate me-1"></i>إعادة تعيين
                </button>
            </div>
            <div class="row g-3 align-items-end">
                {{-- Warehouses --}}
                <div class="col-md-4">
                    <label class="form-label fw-semibold mb-2">المخزن</label>
                    @if($warehouses->count() > 1)
                    <ul class="nav nav-pills flex-wrap gap-1 warehouse-pills mb-0" id="warehouse-tabs">
                        @foreach($warehouses as $wh)
                        <li class="nav-item">
                            <button class="nav-link {{ $loop->first ? 'active' : '' }}" data-id="{{ $wh->id }}">
                                <i class="ti ti-building-warehouse me-1"></i>{{ $wh->name_ar }}
                                @if($wh->code)
                                <span class="badge bg-light text-secondary ms-1 fw-normal">{{ $wh->code }}</span>
                                @endif
                            </button>
                        </li>
                        @endforeach
                    </ul>
                    @else
                    <div class="fw-semibold text-primary py-1">
                        <i class="ti ti-building-warehouse me-1"></i>{{ $warehouses->first()?->name_ar ?? '—' }}
                    </div>
                    <input type="hidden" id="active-warehouse-hidden" value="{{ $defaultWarehouse?->id }}">
                    @endif
                </div>
                {{-- Category --}}
                <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 $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                {{-- Stock Status chips --}}
                <div class="col-md-5">
                    <label class="form-label fw-semibold">حالة الرصيد</label>
                    <div class="d-flex flex-wrap gap-2 mt-1">
                        <span class="chip-filter active text-secondary" data-status="">
                            <i class="ti ti-list me-1"></i>الكل
                        </span>
                        <span class="chip-filter text-success" data-status="ok">
                            <i class="ti ti-circle-check me-1"></i>طبيعي
                        </span>
                        <span class="chip-filter text-warning" data-status="deficit">
                            <i class="ti ti-alert-triangle me-1"></i>عجز
                        </span>
                        <span class="chip-filter text-danger" data-status="zero">
                            <i class="ti ti-cube-off me-1"></i>نفد
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== TABLE ===== --}}
    <div class="card table-shell">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2 py-3 px-4">
            <div>
                <h5 class="mb-0 fw-bold"><i class="ti ti-table me-2 text-primary"></i>جدول أرصدة المنتجات</h5>
                <small class="text-muted">يتحدث تلقائيًا عند تغيير المخزن أو الفلاتر — بدون إعادة تحميل الصفحة.</small>
            </div>
            <span class="badge bg-primary-subtle text-primary py-2 px-3 rounded-pill">
                <i class="ti ti-database me-1"></i><span id="table-count">0</span> منتج
            </span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="balances-table" class="table table-hover align-middle mb-0 w-100">
                    <thead>
                    <tr>
                        <th class="ps-4">#</th>
                        <th>الكود</th>
                        <th>المنتج / المواصفات</th>
                        <th>الفئة</th>
                        <th class="text-center">الوحدة</th>
                        <th>الرصيد الحالي</th>
                        <th class="text-center">حد التنبيه</th>
                        <th class="text-center">الحالة</th>
                        <th class="text-center">الإجراءات</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </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 () {
    let activeWarehouse = '{{ $defaultWarehouse?->id }}';
    let activeStatus = '';

    /* -------- DataTable -------- */
    const table = $('#balances-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: '{{ route('admin.inventory.balances.data') }}',
            data: function (d) {
                d.warehouse_id = activeWarehouse;
                d.category_id  = $('#filter-category').val();
                d.stock_status = activeStatus;
            }
        },
        columns: [
            { data: 'id',       width: '45px', className: 'ps-4 text-muted fw-semibold' },
            { data: 'sku',      width: '110px' },
            { data: 'name_ar' },
            { data: 'category' },
            { data: 'unit',    width: '80px', className: 'text-center' },
            { data: 'balance', width: '170px' },
            { data: 'minimum', width: '105px', className: 'text-center' },
            { data: 'status',  width: '120px', className: 'text-center' },
            { data: 'actions', orderable: false, searchable: false, className: 'text-center', width: '100px' }
        ],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        order: [[2, 'asc']],
        pageLength: 25,
        drawCallback: function () {
            const info = this.api().page.info();
            $('#table-count').text(info.recordsDisplay.toLocaleString('ar-EG'));
        }
    });

    /* -------- Warehouse tabs -------- */
    $('#warehouse-tabs').on('click', '.nav-link', function () {
        $('#warehouse-tabs .nav-link').removeClass('active');
        $(this).addClass('active');
        activeWarehouse = $(this).data('id');
        loadStats();
        table.ajax.reload();
    });

    /* -------- Category -------- */
    $('#filter-category').on('change', function () { table.ajax.reload(); });

    /* -------- Status chips -------- */
    $(document).on('click', '.chip-filter', function () {
        $('.chip-filter').removeClass('active');
        $(this).addClass('active');
        activeStatus = $(this).data('status');
        table.ajax.reload();
    });

    /* -------- Reset -------- */
    $('#reset-filters').on('click', function () {
        $('#filter-category').val('');
        $('.chip-filter').removeClass('active');
        $('.chip-filter[data-status=""]').addClass('active');
        activeStatus = '';
        table.ajax.reload();
    });

    /* -------- Stats loader -------- */
    function loadStats() {
        $.get('{{ route('admin.inventory.balances.stats') }}', { warehouse_id: activeWarehouse }, function (r) {
            animateNum('stat-total',   r.total);
            animateNum('stat-ok',      r.ok);
            animateNum('stat-deficit', r.deficit);
            animateNum('stat-zero',    r.zero);
        });
    }

    function animateNum(id, target) {
        const el = document.getElementById(id);
        if (!el) return;
        const start = parseInt(el.textContent.replace(/[^\d]/g, '')) || 0;
        const step = Math.ceil(Math.abs(target - start) / 20) || 1;
        let current = start;
        const interval = setInterval(() => {
            if (current === target) { clearInterval(interval); return; }
            current = current < target ? Math.min(current + step, target) : Math.max(current - step, target);
            el.textContent = current.toLocaleString('ar-EG');
        }, 30);
    }

    loadStats();
});
</script>
@endsection