@extends('admin.layouts.master')

@section('title', 'تفاصيل حركة المخزون')

@section('css')
<style>
    .movement-show-hero {
        background: linear-gradient(135deg, #111827 0%, #1d4ed8 100%);
        border-radius: 22px;
        padding: 1.8rem;
        color: #fff;
    }
    .info-card,
    .stat-card {
        border: 0;
        border-radius: 20px;
        box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1rem;
    }
    .info-box {
        border: 1px solid #e8eef5;
        border-radius: 16px;
        padding: 1rem;
        background: #fff;
    }
    .info-box .label {
        font-size: .74rem;
        color: #6b7280;
        font-weight: 700;
        margin-bottom: .4rem;
    }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="movement-show-hero mb-4 d-flex flex-wrap justify-content-between align-items-start gap-3">
            <div>
                <div class="small opacity-75 mb-1">ملف حركة مخزنية</div>
                <h3 class="mb-2 text-white">{{ $movementTypeLabel }}</h3>
                <div class="d-flex flex-wrap gap-2 align-items-center">
                    {!! $movement->movement_direction === 'in'
                        ? '<span class="badge bg-success">وارد</span>'
                        : '<span class="badge bg-danger">صادر</span>' !!}
                    <span class="badge bg-light text-dark">{{ $movement->warehouse?->name_ar ?? '-' }}</span>
                    <span class="badge bg-dark-subtle text-dark">{{ $movement->movement_date?->format('Y-m-d h:i A') ?? '-' }}</span>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @can('products.view')
                    <a href="{{ route('admin.inventory.cards.show', $movement->product) }}" class="btn btn-light fw-bold">كارت الصنف</a>
                @endcan
                @if($source['url'])
                    <a href="{{ $source['url'] }}" class="btn btn-outline-light border-white text-white">المستند المرجعي</a>
                @endif
                <a href="{{ route('admin.inventory.movements.index', ['product_id' => $movement->product_id, 'warehouse_id' => $movement->warehouse_id]) }}" class="btn btn-outline-light border-white text-white">العودة للسجل</a>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-md-6 col-xl-3">
                <div class="card stat-card h-100"><div class="card-body">
                    <div class="text-muted small">الكمية</div>
                    <div class="fs-3 fw-bold">{{ number_format((float) $movement->quantity, 2) }}</div>
                    <div class="small text-muted">{{ $movement->unit?->name_ar ?? '-' }}</div>
                </div></div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card stat-card h-100"><div class="card-body">
                    <div class="text-muted small">الرصيد بعد الحركة</div>
                    <div class="fs-3 fw-bold">{{ number_format((float) $movement->balance_after_movement, 2) }}</div>
                    <div class="small text-muted">الرصيد الحالي بالمخزن: {{ number_format((float) $warehouseBalance, 2) }}</div>
                </div></div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card stat-card h-100"><div class="card-body">
                    <div class="text-muted small">تكلفة الوحدة</div>
                    <div class="fs-4 fw-bold">{{ number_format((float) $movement->unit_cost, 2) }} ج.م</div>
                </div></div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card stat-card h-100"><div class="card-body">
                    <div class="text-muted small">إجمالي التكلفة</div>
                    <div class="fs-4 fw-bold">{{ number_format((float) $movement->total_cost, 2) }} ج.م</div>
                    <div class="small text-muted">{{ $directionLabel }}</div>
                </div></div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-xl-8">
                <div class="card info-card mb-4">
                    <div class="card-header py-3 px-4">
                        <h5 class="mb-1">بيانات الحركة</h5>
                        <small class="text-muted">كل التفاصيل التنفيذية الخاصة بهذه الحركة المخزنية.</small>
                    </div>
                    <div class="card-body p-4">
                        <div class="info-grid">
                            <div class="info-box"><div class="label">رقم الحركة</div><div class="fw-bold">#{{ $movement->id }}</div></div>
                            <div class="info-box"><div class="label">نوع الحركة</div><div class="fw-bold">{{ $movementTypeLabel }}</div></div>
                            <div class="info-box"><div class="label">اتجاه الحركة</div><div class="fw-bold">{{ $directionLabel }}</div></div>
                            <div class="info-box"><div class="label">التاريخ</div><div class="fw-bold">{{ $movement->movement_date?->format('Y-m-d h:i A') ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">المخزن</div><div class="fw-bold">{{ $movement->warehouse?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">تم بواسطة</div><div class="fw-bold">{{ $movement->creator?->name ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">رقم المرجع</div><div class="fw-bold">{{ $movement->reference_number ?: 'بدون مرجع' }}</div></div>
                            <div class="info-box"><div class="label">الكمية المكافئة بالألواح</div><div class="fw-bold">{{ number_format((float) $movement->equivalent_sheet_quantity, 2) }}</div></div>
                        </div>

                        <hr>

                        <div>
                            <div class="text-muted small mb-1">ملاحظات الحركة</div>
                            <div class="fw-semibold">{{ $movement->notes_ar ?: 'لا توجد ملاحظات إضافية على هذه الحركة.' }}</div>
                        </div>
                    </div>
                </div>

                <div class="card info-card mb-4">
                    <div class="card-header py-3 px-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h5 class="mb-1">الصنف المرتبط</h5>
                            <small class="text-muted">بيانات اللوح أو الصنف الذي تأثر بهذه الحركة.</small>
                        </div>
                        @can('products.view')
                            <a href="{{ route('admin.products.show', $movement->product) }}" class="btn btn-light-primary btn-sm">عرض الصنف</a>
                        @endcan
                    </div>
                    <div class="card-body p-4">
                        <div class="info-grid">
                            <div class="info-box"><div class="label">اسم الصنف</div><div class="fw-bold">{{ $movement->product?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">الكود</div><div class="fw-bold">{{ $movement->product?->sku ?: '-' }}</div></div>
                            <div class="info-box"><div class="label">الفئة</div><div class="fw-bold">{{ $movement->product?->category?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">الخامة</div><div class="fw-bold">{{ $movement->product?->material?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">النوع</div><div class="fw-bold">{{ $movement->product?->type?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">المقاس</div><div class="fw-bold">{{ $movement->product?->size?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">السمك</div><div class="fw-bold">{{ $movement->product?->thickness?->name_ar ?? '-' }}</div></div>
                            <div class="info-box"><div class="label">اللون</div><div class="fw-bold">{{ $movement->product?->color?->name_ar ?? '-' }}</div></div>
                        </div>
                    </div>
                </div>

                <div class="card info-card">
                    <div class="card-header py-3 px-4">
                        <h5 class="mb-1">المستند المرجعي</h5>
                        <small class="text-muted">من أين خرجت هذه الحركة ولماذا تعتبر معتمدة مهنيًا.</small>
                    </div>
                    <div class="card-body p-4">
                        <div class="info-grid">
                            <div class="info-box"><div class="label">نوع المستند</div><div class="fw-bold">{{ $source['label'] }}</div></div>
                            <div class="info-box"><div class="label">رقم المستند</div><div class="fw-bold">{{ $source['number'] }}</div></div>
                            <div class="info-box"><div class="label">المنهج المحاسبي</div><div class="fw-bold">الحركة مرتبطة بمستند فعلي لضمان التتبع الكامل</div></div>
                        </div>

                        @if($source['url'])
                            <div class="mt-3">
                                <a href="{{ $source['url'] }}" class="btn btn-primary">فتح المستند المرجعي</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card info-card mb-4">
                    <div class="card-header py-3 px-4">
                        <h5 class="mb-1">قراءة سريعة</h5>
                    </div>
                    <div class="card-body p-4 small text-muted d-flex flex-column gap-3">
                        <div><i class="ti ti-check me-1 text-success"></i>الحركات الواردة ترفع الرصيد والحركات الصادرة تخصمه مباشرة.</div>
                        <div><i class="ti ti-check me-1 text-success"></i>ربط الحركة بالمستند المرجعي يسهل مراجعة أي اختلاف في رصيد ألواح الأكريليك أو البولي كاربونيت.</div>
                        <div><i class="ti ti-check me-1 text-success"></i>أفضل مكان لمراجعة التسلسل الكامل لاحقًا هو <strong>كارت الصنف</strong>.</div>
                    </div>
                </div>

                <div class="card info-card">
                    <div class="card-header py-3 px-4">
                        <h5 class="mb-1">إجراءات سريعة</h5>
                    </div>
                    <div class="card-body p-4 d-grid gap-2">
                        @can('products.view')
                            <a href="{{ route('admin.inventory.cards.show', $movement->product) }}" class="btn btn-outline-primary">فتح كارت الصنف</a>
                        @endcan
                        <a href="{{ route('admin.inventory.movements.index', ['product_id' => $movement->product_id]) }}" class="btn btn-outline-info">كل حركات هذا الصنف</a>
                        <a href="{{ route('admin.inventory.movements.create') }}" class="btn btn-outline-success">إضافة حركة من المصدر</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection