@extends('layouts.app')
@section('title', $batch->name)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $batch->name }}</h1>
            <p><span class="mono">{{ $batch->batch_number }}</span>
                &middot; {{ $batch->plan?->name }}
                &middot; {{ $batch->location?->name }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('hotspot.batch.export', $batch) }}" class="btn secondary">Export CSV</a>
            <button type="button" class="btn" onclick="window.print()">Print sheet</button>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Total vouchers', 'value' => $batch->quantity, 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Available', 'value' => $batch->vouchers()->where('status', 'available')->count(),
            'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Sold', 'value' => $batch->vouchers()->where('status', 'sold')->count(), 'href' => '#'])
        @include('components.kpi', ['label' => 'Used', 'value' => $batch->vouchers()->where('status', 'used')->count(), 'href' => '#'])
        @include('components.kpi', ['label' => 'Revenue', 'value' => money($batch->vouchers()->where('status', '!=', 'available')->sum('price')),
            'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Valid until', 'value' => $batch->valid_until?->format('d M Y') ?? '—', 'href' => '#'])
    </div>

    <div class="card">
        <div class="card-head"><h3>Vouchers in this batch</h3>
            <span class="sub">{{ $batch->vouchers()->count() }} code(s)</span></div>
        <div class="card-body">
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;">
                @foreach ($batch->vouchers as $voucher)
                    <div style="border:1px dashed var(--ink-300);border-radius:8px;padding:.6rem;text-align:center;
                                {{ $voucher->status === 'available' ? '' : 'opacity:.55;' }}">
                        <div class="mono strong" style="font-size:1rem;letter-spacing:.06em;">{{ $voucher->code }}</div>
                        <div class="tiny muted">{{ money($voucher->price) }} &middot; {{ $voucher->status }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection