@extends('admin.layouts.master')

@section('title', 'كارت الصنف — ' . $product->name_ar)

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
    /* ===== Product Hero ===== */
    .card-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #075985 100%);
        border-radius: 20px; color: #fff; padding: 1.8rem 2rem;
        position: relative; overflow: hidden;
    }
    .card-hero::before {
        content: ''; position: absolute; inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .product-avatar {
        width: 70px; height: 70px; border-radius: 18px;
        background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
        display: inline-flex; align-items: center; justify-content: center; font-size: 2rem;
        border: 2px solid rgba(255,255,255,.2);
    }
    .spec-tag {
        display: inline-block; background: rgba(255,255,255,.12); border-radius: 8px;
        padding: .2rem .65rem; font-size: .78rem; border: 1px solid rgba(255,255,255,.15);
    }
    /* ===== KPI cards ===== */
    .kpi-card { border: 0; border-radius: 16px; box-shadow: 0 6px 20px rgba(15,23,42,.07); transition: transform .2s; }
    .kpi-card:hover { transform: translateY(-2px); }
    .kpi-card .kpi-icon { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
    .kpi-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
    /* ===== Table shell ===== */
    .mvt-shell { border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.07); overflow: hidden; }
    .mvt-shell .card-header { background: #fff; border-bottom: 1px solid #eef2f7; }
    #movements-table thead th { white-space: nowrap; background: #f1f5f9; color: #374151; font-size: .82rem; }
    #movements-table tbody td { vertical-align: middle; font-size: .88rem; }
    /* warehouse pill select */
    .wh-pill { cursor: pointer; border: 2px solid transparent; border-radius: 50px; padding: .3rem .9rem; font-size: .82rem; font-weight: 600; transition: all .2s; background: #f1f5f9; color: #374151; }
    .wh-pill.active { border-color: #0d6efd; background: #eff6ff; color: #0d6efd; }
    .wh-pill:hover { border-color: #93c5fd; }
    /* Direction badge */
    .dir-in  { background: #d1fae5 !important; color: #065f46 !important; }
    .dir-out { background: #fee2e2 !important; color: #7f1d1d !important; }
</style>
@endsection

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

    {{-- ===== PRODUCT HERO ===== --}}
    <div class="card-hero mb-4">
        <div class="d-flex flex-wrap align-items-start gap-3 mb-3 position-relative">
            <span class="product-avatar flex-shrink-0">
                <i class="ti ti-layers-intersect"></i>
            </span>
            <div class="flex-grow-1">
                <div class="small opacity-75 mb-1">كارت الصنف</div>
                <h3 class="mb-1 text-white fw-bold">{{ $product->name_ar }}</h3>
                <div class="d-flex flex-wrap gap-2 mt-2">
                    @if($product->sku)
                    <span class="spec-tag"><i class="ti ti-barcode me-1"></i>{{ $product->sku }}</span>
                    @endif
                    @if($product->category)
                    <span class="spec-tag"><i class="ti ti-tag me-1"></i>{{ $product->category->name_ar }}</span>
                    @endif
                    @if($product->material)
                    <span class="spec-tag"><i class="ti ti-box me-1"></i>{{ $product->material->name_ar }}</span>
                    @endif
                    @if($product->thickness)
                    <span class="spec-tag"><i class="ti ti-ruler me-1"></i>سُمك: {{ $product->thickness->name_ar }}</span>
                    @endif
                    @if($product->size)
                    <span class="spec-tag"><i class="ti ti-dimensions me-1"></i>مقاس: {{ $product->size->name_ar }}</span>
                    @endif
                    @if($product->color)
                    <span class="spec-tag"><i class="ti ti-palette me-1"></i>{{ $product->color->name_ar }}</span>
                    @endif
                    @if($product->type)
                    <span class="spec-tag"><i class="ti ti-category me-1"></i>{{ $product->type->name_ar }}</span>
                    @endif
                    @if($product->unit)
                    <span class="spec-tag"><i class="ti ti-weight me-1"></i>{{ $product->unit->name_ar }}</span>
                    @endif
                </div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @can('stock_movements.view')
                    <a href="{{ route('admin.inventory.movements.index', ['product_id' => $product->id]) }}" class="btn btn-outline-light btn-sm fw-semibold flex-shrink-0">
                        <i class="ti ti-history me-1"></i>كل حركات الصنف
                    </a>
                @endcan
                <a href="{{ route('admin.inventory.balances.index') }}" class="btn btn-light btn-sm fw-semibold flex-shrink-0">
                    <i class="ti ti-arrow-right me-1"></i>رجوع للأرصدة
                </a>
            </div>
        </div>

        {{-- Service flags --}}
        @if($product->supports_cutting_service || $product->supports_forming_service || $product->allows_fractional_sale)
        <div class="d-flex flex-wrap gap-2 position-relative">
            @if($product->supports_cutting_service)
            <span class="badge bg-info-subtle text-info border border-info border-opacity-25 px-3 py-2">
                <i class="ti ti-cut me-1"></i>يدعم خدمة القطع
            </span>
            @endif
            @if($product->supports_forming_service)
            <span class="badge bg-purple-subtle text-purple border border-opacity-25 px-3 py-2" style="background:#f3e8ff;color:#7c3aed;border-color:#c4b5fd;">
                <i class="ti ti-tool me-1"></i>يدعم خدمة التشكيل
            </span>
            @endif
            @if($product->allows_fractional_sale)
            <span class="badge bg-success-subtle text-success border border-success border-opacity-25 px-3 py-2">
                <i class="ti ti-divide me-1"></i>يُباع بالكسور
            </span>
            @endif
        </div>
        @endif
    </div>

    {{-- ===== WAREHOUSE SELECTOR (multiple warehouses) ===== --}}
    @if($warehouses->count() > 1)
    <div class="card mb-4" style="border:0;border-radius:16px;box-shadow:0 4px 15px rgba(15,23,42,.05)">
        <div class="card-body py-3">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <span class="fw-bold small text-muted"><i class="ti ti-building-warehouse me-1"></i>اختر المخزن:</span>
                <div class="d-flex flex-wrap gap-2" id="wh-selector">
                    @foreach($warehouses as $wh)
                    <button class="wh-pill {{ $loop->first ? 'active' : '' }}" data-id="{{ $wh->id }}">
                        {{ $wh->name_ar }}
                        @if($wh->code)<span class="ms-1 opacity-60">({{ $wh->code }})</span>@endif
                    </button>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @else
    <input type="hidden" id="wh-hidden" value="{{ $defaultWarehouse?->id }}">
    @endif

    {{-- ===== KPI CARDS ===== --}}
    <div class="row g-3 mb-4" id="kpi-row">
        <div class="col-6 col-lg-3">
            <div class="card kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="kpi-icon bg-primary-subtle text-primary"><i class="ti ti-calculator"></i></span>
                    <div>
                        <div class="text-muted small mb-1">الرصيد الحالي</div>
                        <div class="kpi-num text-primary" id="kpi-balance">{{ number_format((float) $balance, 2) }}</div>
                        <div class="small text-muted">{{ $product->unit?->name_ar ?? '' }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="kpi-icon bg-success-subtle text-success"><i class="ti ti-arrow-down-left"></i></span>
                    <div>
                        <div class="text-muted small mb-1">إجمالي الوارد</div>
                        <div class="kpi-num text-success" id="kpi-in">{{ number_format($movementsStats['in_qty'], 2) }}</div>
                        <div class="small text-muted">{{ $product->unit?->name_ar ?? '' }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="kpi-icon bg-danger-subtle text-danger"><i class="ti ti-arrow-up-right"></i></span>
                    <div>
                        <div class="text-muted small mb-1">إجمالي الصادر</div>
                        <div class="kpi-num text-danger" id="kpi-out">{{ number_format($movementsStats['out_qty'], 2) }}</div>
                        <div class="small text-muted">{{ $product->unit?->name_ar ?? '' }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="card kpi-card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    @php
                        $statusClass = $balance <= 0 ? 'text-danger' : ($balance < $product->minimum_stock_quantity ? 'text-warning' : 'text-success');
                        $statusIconBg = $balance <= 0 ? 'bg-danger-subtle' : ($balance < $product->minimum_stock_quantity ? 'bg-warning-subtle' : 'bg-success-subtle');
                        $statusText = $balance <= 0 ? 'نفد المخزون' : ($balance < $product->minimum_stock_quantity ? 'عجز في الرصيد' : 'رصيد طبيعي');
                        $statusIcon = $balance <= 0 ? 'ti-cube-off' : ($balance < $product->minimum_stock_quantity ? 'ti-alert-triangle' : 'ti-circle-check');
                    @endphp
                    <span class="kpi-icon {{ $statusIconBg }} {{ $statusClass }}"><i class="ti {{ $statusIcon }}"></i></span>
                    <div>
                        <div class="text-muted small mb-1">الحالة</div>
                        <div class="kpi-num {{ $statusClass }}" style="font-size:1.1rem;" id="kpi-status">{{ $statusText }}</div>
                        <div class="small text-muted">حد التنبيه: {{ number_format((float)$product->minimum_stock_quantity, 2) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== MOVEMENTS TABLE ===== --}}
    <div class="card mvt-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-history me-2 text-primary"></i>سجل حركات الصنف</h5>
                <small class="text-muted">آخر 500 حركة — يُحدَّث تلقائيًا عند تغيير المخزن.</small>
            </div>
            <span class="badge bg-primary-subtle text-primary py-2 px-3 rounded-pill">
                <i class="ti ti-list me-1"></i><span id="mvt-count">0</span> حركة
            </span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="movements-table" class="table table-hover align-middle mb-0 w-100">
                    <thead>
                    <tr>
                        <th class="ps-4">التاريخ</th>
                        <th>نوع الحركة</th>
                        <th class="text-center">الاتجاه</th>
                        <th class="text-center">الكمية</th>
                        <th class="text-center">الرصيد بعد الحركة</th>
                        <th class="text-center">تكلفة الوحدة</th>
                        <th>رقم المرجع</th>
                        <th>بواسطة</th>
                        <th>ملاحظات</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 }}';

    /* ===== Movements DataTable ===== */
    const table = $('#movements-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: '{{ route('admin.inventory.cards.data', $product) }}',
            data: function (d) { d.warehouse_id = activeWarehouse; }
        },
        columns: [
            { data: 'movement_date', width: '135px', className: 'ps-4' },
            { data: 'movement_type' },
            { data: 'direction',    className: 'text-center', orderable: false },
            { data: 'quantity',     className: 'text-center' },
            { data: 'balance_after',className: 'text-center fw-semibold' },
            { data: 'unit_cost',    className: 'text-center' },
            { data: 'reference',    orderable: false },
            { data: 'created_by' },
            { data: 'notes',        orderable: false }
        ],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        order: [[0, 'desc']],
        pageLength: 25,
        drawCallback: function () {
            const info = this.api().page.info();
            $('#mvt-count').text(info.recordsDisplay.toLocaleString('ar-EG'));
        }
    });

    /* ===== Warehouse selector ===== */
    $('#wh-selector').on('click', '.wh-pill', function () {
        $('#wh-selector .wh-pill').removeClass('active');
        $(this).addClass('active');
        activeWarehouse = $(this).data('id');
        table.ajax.reload();
        loadKpi();
    });

    /* ===== KPI refresh on warehouse switch ===== */
    function loadKpi() {
        $.get('{{ route('admin.inventory.cards.data', $product) }}', { warehouse_id: activeWarehouse }, function (r) {
            // We don't reload the full stats from this endpoint, but we can use stockMovements
            // Just reload the table; full KPI reload requires a dedicated endpoint
        });
    }
});
</script>
@endsection