@extends('layouts.app')
@section('title', 'Serial Numbers')
@section('breadcrumb')
<li class="breadcrumb-item active">Serial Numbers</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-upc-scan me-2" style="color:#1d4ed8;"></i>Serial Numbers</h1>
        <p class="page-subtitle">Track every serialised unit in the system</p>
    </div>
    <a href="{{ route('serials.search') }}" class="btn btn-primary">
        <i class="bi bi-search me-1"></i> Serial Search
    </a>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-12 col-md-5">
                <input type="text" name="search" class="form-control" placeholder="Search by serial number..." value="{{ $search }}">
            </div>
            <div class="col-6 col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    @foreach($statuses as $val => $label)
                    <option value="{{ $val }}" {{ $status == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto d-flex gap-1">
                <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                <a href="{{ route('serials.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">Serial Numbers ({{ $serials->total() }})</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Serial No.</th>
                        <th>Product / Variant</th>
                        <th>Status</th>
                        <th>Purchased From</th>
                        <th>Sold To</th>
                        <th>Date In</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($serials as $serial)
                    <tr>
                        <td>
                            <a href="{{ route('serials.show', $serial) }}" style="font-family:monospace;font-weight:700;color:#1d4ed8;text-decoration:none;font-size:0.9rem;">
                                {{ $serial->serial_no }}
                            </a>
                        </td>
                        <td>
                            <div style="font-weight:600;font-size:0.875rem;">{{ $serial->productVariant?->product?->name }}</div>
                            <div style="font-size:0.78rem;color:#64748b;">{{ $serial->productVariant?->variant_name }}</div>
                        </td>
                        <td>
                            @php
                            $sc = ['in_stock'=>'success','sold'=>'primary','returned'=>'warning','damaged'=>'danger','warranty_claim'=>'info'];
                            @endphp
                            <span class="badge bg-{{ $sc[$serial->status] ?? 'secondary' }}">{{ $serial->status_name }}</span>
                        </td>
                        <td style="font-size:0.825rem;">
                            {{ $serial->purchaseItem?->purchase?->supplier?->name ?? '—' }}
                            @if($serial->purchaseItem?->purchase)
                            <small class="text-muted d-block">{{ $serial->purchaseItem->purchase->invoice_no }}</small>
                            @endif
                        </td>
                        <td style="font-size:0.825rem;">
                            {{ $serial->saleItem?->sale?->customer?->name ?? ($serial->status === 'sold' ? 'Walk-in' : '—') }}
                            @if($serial->saleItem?->sale)
                            <small class="text-muted d-block">{{ $serial->saleItem->sale->invoice_no }}</small>
                            @endif
                        </td>
                        <td style="font-size:0.78rem;color:#94a3b8;">{{ $serial->created_at->format('d M Y') }}</td>
                        <td>
                            <a href="{{ route('serials.show', $serial) }}" class="btn btn-sm btn-outline-info" title="View Timeline">
                                <i class="bi bi-diagram-3"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center py-5 text-muted"><i class="bi bi-upc-scan" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>No serial numbers found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($serials->hasPages())<div class="card-footer">{{ $serials->links() }}</div>@endif
</div>
@endsection