@extends('layouts.app')

@section('title', 'Batch Recall')

@section('content')
@php
    $qty = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
    $today = today();
    $filtered = $search !== '' || $from || $to || $expiry || $stock;
    $chips = [
        ['Expired, still on the shelf', ['expiry' => 'expired', 'stock' => 'in'], 'danger'],
        ['Expiring within 90 days', ['expiry' => 'soon', 'stock' => 'in'], 'warning'],
        ['Received this month', ['received_from' => $today->copy()->startOfMonth()->toDateString(), 'received_to' => $today->toDateString()], 'primary'],
        ['In stock', ['stock' => 'in'], 'success'],
    ];
    $isChip = fn (array $params) => collect($params)->every(fn ($v, $k) => request($k) == $v)
        && collect(['q', 'received_from', 'received_to', 'expiry', 'stock'])->diff(array_keys($params))->every(fn ($k) => !request()->filled($k));
@endphp
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-1">Batch recall</h4>
            <p class="text-muted small mb-0">Every batch received. Click a batch to see what is left on the shelf and which customers it was sold to.</p>
        </div>
        <div class="d-flex gap-2"><x-report-buttons /></div>
    </div>

    <!-- Search and filters -->
    <form method="GET" action="{{ route('reports.batches') }}" class="br-card mb-3" id="batchFilters">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-lg-4">
                <label class="form-label small fw-semibold mb-1" for="q">Batch, product or SKU</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="search" name="q" id="q" class="form-control" value="{{ $search }}" autocomplete="off" autofocus>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label small fw-semibold mb-1" for="received_from">Received from</label>
                <input type="date" name="received_from" id="received_from" class="form-control form-control-sm" value="{{ $from?->toDateString() }}">
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label small fw-semibold mb-1" for="received_to">Received to</label>
                <input type="date" name="received_to" id="received_to" class="form-control form-control-sm" value="{{ $to?->toDateString() }}">
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label small fw-semibold mb-1" for="expiry">Expiry</label>
                <select name="expiry" id="expiry" class="form-select form-select-sm">
                    <option value="">Any</option>
                    @foreach(\App\Http\Controllers\BatchReportController::EXPIRY_FILTERS as $value => $label)
                        <option value="{{ $value }}" @selected($expiry === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-lg-1">
                <label class="form-label small fw-semibold mb-1" for="stock">Stock</label>
                <select name="stock" id="stock" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="in" @selected($stock === 'in')>In stock</option>
                    <option value="out" @selected($stock === 'out')>Sold out</option>
                </select>
            </div>
            <div class="col-12 col-lg-1 d-flex gap-1">
                <button class="btn btn-primary btn-sm flex-fill" title="Apply"><i class="bi bi-funnel"></i></button>
                @if($filtered)
                    <a href="{{ route('reports.batches') }}" class="btn btn-outline-secondary btn-sm" title="Clear"><i class="bi bi-x-lg"></i></a>
                @endif
            </div>
        </div>
        <div class="br-chips mt-2">
            @foreach($chips as [$label, $params, $tone])
                <a href="{{ route('reports.batches', $params) }}" class="btn btn-sm {{ $isChip($params) ? "btn-$tone" : "btn-outline-$tone" }}">{{ $label }}</a>
            @endforeach
        </div>
    </form>

    <!-- Summary -->
    <div class="row g-3 mb-3">
        @foreach([
            ['Batches', number_format($summary['batches']), 'bi-upc-scan', 'secondary'],
            ['Units in stock', $qty($summary['in_stock']), 'bi-box-seam', 'primary'],
            ['Expired, on the shelf', number_format($summary['expired_on_shelf']), 'bi-calendar-x', $summary['expired_on_shelf'] ? 'danger' : 'success'],
            ['Expiring within 90 days', number_format($summary['expiring_soon']), 'bi-hourglass-split', $summary['expiring_soon'] ? 'warning' : 'success'],
        ] as [$label, $value, $icon, $tone])
            <div class="col-6 col-xl-3">
                <div class="br-card br-stat h-100">
                    <span class="br-icon bg-{{ $tone }}-subtle text-{{ $tone }}"><i class="bi {{ $icon }}"></i></span>
                    <div><div class="small text-muted">{{ $label }}</div><div class="fs-5 fw-bold">{{ $value }}</div></div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Batches -->
    <div class="br-card p-0">
        @if($list->isEmpty())
            <div class="text-center text-muted py-5">
                <i class="bi bi-upc-scan fs-1 d-block mb-2"></i>
                {{ $filtered ? 'No batches match.' : 'No batches received yet.' }}
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 br-table">
                    <thead class="table-light small">
                        <tr><th>Batch</th><th>Product</th><th>Received</th><th>Expiry</th>
                            <th class="text-end">Received</th><th class="text-end">Sold</th><th class="text-end">In stock</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($list as $batch)
                        @php
                            $url = $batch->batch_no ? route('reports.batches', ['batch_no' => $batch->batch_no]) : route('reports.batches', ['batch' => $batch->id]);
                            $days = $batch->expiry_date ? (int) $today->diffInDays($batch->expiry_date, false) : null;
                            $tone = $days === null ? 'secondary' : ($days < 0 ? 'danger' : ($days <= 90 ? 'warning' : 'success'));
                        @endphp
                        <tr data-href="{{ $url }}" tabindex="0" class="{{ $days !== null && $days < 0 && $batch->quantity > 0 ? 'table-danger' : '' }}">
                            <td class="fw-bold text-nowrap">{{ $batch->batch_no ?? 'No number' }}</td>
                            <td>
                                <div class="fw-semibold">{{ $batch->product?->name ?? 'Deleted product' }}</div>
                                <div class="small text-muted">{{ $batch->product?->sku }}{{ $batch->product?->category ? ' · ' . $batch->product->category->name : '' }}</div>
                            </td>
                            <td class="text-nowrap small">{{ $batch->received_at?->format('d M Y') ?? '-' }}</td>
                            <td class="text-nowrap">
                                @if($batch->expiry_date)
                                    <span class="badge bg-{{ $tone }}-subtle text-{{ $tone }} border">{{ $batch->expiry_date->format('d M Y') }}</span>
                                    <div class="small text-muted">{{ $days < 0 ? 'expired ' . abs($days) . ' days ago' : ($days === 0 ? 'expires today' : 'in ' . $days . ' days') }}</div>
                                @else
                                    <span class="text-muted small">None</span>
                                @endif
                            </td>
                            <td class="text-end">{{ $qty($batch->received_quantity) }}</td>
                            <td class="text-end">{{ $qty($sold[$batch->id] ?? 0) }}</td>
                            <td class="text-end fw-bold {{ $batch->quantity > 0 ? '' : 'text-muted' }}">{{ $qty($batch->quantity) }}</td>
                            <td class="text-end"><a href="{{ $url }}" class="btn btn-sm btn-outline-primary">Recall view</a></td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @if($list->hasPages())<div class="p-3">{{ $list->links() }}</div>@endif
        @endif
    </div>
</div>

<style>
    .br-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); padding: 1rem 1.1rem; }
    .br-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
    .br-stat { display: flex; gap: .8rem; align-items: center; }
    .br-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
    .br-table tbody tr { cursor: pointer; }
</style>

<script>
    (function () {
        // A whole row opens the batch
        document.querySelectorAll('.br-table tbody tr[data-href]').forEach(function (row) {
            row.addEventListener('click', function (e) { if (!e.target.closest('a')) location.href = row.dataset.href; });
            row.addEventListener('keydown', function (e) { if (e.key === 'Enter') location.href = row.dataset.href; });
        });
        // Filters apply as they change; the search after a short pause in typing
        const form = document.getElementById('batchFilters');
        form.querySelectorAll('select, input[type="date"]').forEach(function (el) { el.addEventListener('change', function () { form.submit(); }); });
        let timer;
        const q = document.getElementById('q');
        q.addEventListener('input', function () { clearTimeout(timer); timer = setTimeout(function () { form.submit(); }, 600); });
        // Keep the cursor at the end of the search after the page reloads
        if (q.value) { q.setSelectionRange(q.value.length, q.value.length); }
    })();
</script>
@endsection