@extends('layouts.app')
@section('title', 'Serial: '.$serial->serial_no)
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('serials.index') }}">Serials</a></li>
<li class="breadcrumb-item active" style="font-family:monospace;">{{ $serial->serial_no }}</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-start">
    <div>
        <h1 class="page-title" style="font-family:monospace;">{{ $serial->serial_no }}</h1>
        <p class="page-subtitle">{{ $serial->productVariant?->display_name }}</p>
    </div>
    @can_permission('inventory.adjust')
    <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#updateStatusModal">
        <i class="bi bi-pencil me-1"></i> Update Status
    </button>
    @endcan_permission
</div>

@if($timeline)
<div class="row g-3">
    <div class="col-12">
        @php
        $statusBg = ['in_stock'=>'#d1fae5','sold'=>'#dbeafe','returned'=>'#fef3c7','damaged'=>'#fee2e2','warranty_claim'=>'#ede9fe'];
        $statusTxt= ['in_stock'=>'#065f46','sold'=>'#1e3a5f','returned'=>'#78350f','damaged'=>'#7f1d1d','warranty_claim'=>'#4c1d95'];
        @endphp
        <div style="background:{{ $statusBg[$timeline['status']] ?? '#f1f5f9' }};border-radius:14px;padding:1.25rem 1.5rem;">
            <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:{{ $statusTxt[$timeline['status']] ?? '#64748b' }};">Current Status</div>
            <div style="font-size:1.5rem;font-weight:800;color:{{ $statusTxt[$timeline['status']] ?? '#1e293b' }};">{{ $timeline['status_name'] }}</div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card"><div class="card-header"><i class="bi bi-box-seam me-2"></i>Product</div>
        <div class="card-body p-0"><table class="table table-sm mb-0" style="font-size:.875rem;">
            <tr><td class="text-muted" style="width:40%;">Product</td><td class="fw-600">{{ $timeline['product_name'] }}</td></tr>
            <tr><td class="text-muted">Variant</td><td>{{ $timeline['variant_name'] }}</td></tr>
            <tr><td class="text-muted">Brand</td><td>{{ $timeline['brand'] }}</td></tr>
            <tr><td class="text-muted">Category</td><td>{{ $timeline['category'] }}</td></tr>
            <tr><td class="text-muted">SKU</td><td><code style="font-size:.78rem;">{{ $timeline['sku'] }}</code></td></tr>
        </table></div></div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card"><div class="card-header"><i class="bi bi-cart-check me-2"></i>Purchase</div>
        <div class="card-body p-0"><table class="table table-sm mb-0" style="font-size:.875rem;">
            <tr><td class="text-muted" style="width:40%;">Supplier</td><td class="fw-600">{{ $timeline['supplier_name'] ?? '—' }}</td></tr>
            <tr><td class="text-muted">Invoice</td><td><code style="font-size:.78rem;">{{ $timeline['purchase_invoice'] ?? '—' }}</code></td></tr>
            <tr><td class="text-muted">Date</td><td>{{ $timeline['purchase_date'] ? \Carbon\Carbon::parse($timeline['purchase_date'])->format('d M Y') : '—' }}</td></tr>
            <tr><td class="text-muted">Cost</td><td>{{ $timeline['purchase_cost'] ? '৳'.number_format($timeline['purchase_cost'],2) : '—' }}</td></tr>
        </table></div></div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card"><div class="card-header"><i class="bi bi-receipt me-2"></i>Sale</div>
        <div class="card-body p-0"><table class="table table-sm mb-0" style="font-size:.875rem;">
            <tr><td class="text-muted" style="width:40%;">Customer</td><td class="fw-600">{{ $timeline['customer_name'] ?? '—' }}</td></tr>
            <tr><td class="text-muted">Phone</td><td>{{ $timeline['customer_phone'] ?? '—' }}</td></tr>
            <tr><td class="text-muted">Invoice</td><td><code style="font-size:.78rem;">{{ $timeline['sale_invoice'] ?? '—' }}</code></td></tr>
            <tr><td class="text-muted">Date</td><td>{{ $timeline['sale_date'] ? \Carbon\Carbon::parse($timeline['sale_date'])->format('d M Y') : '—' }}</td></tr>
            <tr><td class="text-muted">Price</td><td>{{ $timeline['selling_price'] ? '৳'.number_format($timeline['selling_price'],2) : '—' }}</td></tr>
        </table></div></div>
    </div>
</div>
@endif

{{-- Update Status Modal --}}
<div class="modal fade" id="updateStatusModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content" style="border-radius:14px;border:none;">
        <form method="POST" action="{{ route('serials.update-status', $serial) }}">@csrf
            <div class="modal-header border-0 pb-0"><h5 class="modal-title">Update Status</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Status</label>
                    <select name="status" class="form-select" required>
                        @foreach(\App\Models\SerialNumber::STATUSES as $val => $label)
                        <option value="{{ $val }}" {{ $serial->status === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Notes</label>
                    <textarea name="notes" class="form-control" rows="2" placeholder="Optional notes">{{ $serial->notes }}</textarea>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Status</button>
            </div>
        </form>
    </div></div>
</div>
@endsection