@extends('layouts.app')
@section('title', 'Vouchers')

@section('content')
    <div class="page-head">
        <div><h1>Vouchers</h1><p>{{ $vouchers->total() }} voucher(s) in this view.</p></div>
        <div class="page-actions">
            <form method="POST" action="{{ route('hotspot.expire') }}">@csrf
                <button type="submit" class="btn secondary">Expire overdue</button>
            </form>
            <button type="button" class="btn" data-modal="batch-modal">Generate batch</button>
        </div>
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Code, batch, customer…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach (['available','sold','used','expired','void'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Batch</label>
            <select name="batch" data-auto-submit>
                <option value="">All batches</option>
                @foreach ($batches as $batch)
                    <option value="{{ $batch->id }}" @selected(($filters['batch'] ?? '') == $batch->id)>{{ $batch->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Code</th><th>Batch</th><th>Plan</th><th class="num">Price</th><th>Status</th>
                        <th>Sold to</th><th>Redeemed</th><th>Expires</th><th></th></tr>
                    </thead>
                    <tbody>
                    @forelse ($vouchers as $voucher)
                        <tr>
                            <td>
                                <a href="#" data-copy="{{ $voucher->code }}" class="mono strong">{{ $voucher->code }}</a>
                                <button type="button" class="btn xs ghost" data-copy="{{ $voucher->code }}">copy</button>
                            </td>
                            <td class="small">{{ $voucher->batch?->name ?? '—' }}</td>
                            <td class="small">{{ $voucher->plan?->name ?? '—' }}</td>
                            <td class="num">{{ money($voucher->price) }}</td>
                            <td><span class="badge {{ status_color(match ($voucher->status) {
                                'available' => 'active', 'sold' => 'pending', 'used' => 'paid',
                                'expired' => 'suspended', default => 'cancelled' }) }}">
                                <span class="dot"></span>{{ $voucher->status }}</span></td>
                            <td class="small">{{ $voucher->customer_name ?: '—' }}
                                @if ($voucher->customer_phone)<div class="tiny muted">{{ $voucher->customer_phone }}</div>@endif</td>
                            <td class="small nowrap">{{ $voucher->redeemed_at?->format('d M H:i') ?? '—' }}</td>
                            <td class="small nowrap">{{ $voucher->expires_at?->format('d M Y') ?? '—' }}</td>
                            <td class="right nowrap">
                                @if ($voucher->status === 'available')
                                    <button type="button" class="btn xs secondary" data-modal="sell-{{ $voucher->id }}">Sell</button>
                                @endif
                                @if (! in_array($voucher->status, ['void', 'used']))
                                    <form method="POST" action="{{ route('hotspot.vouchers.void', $voucher) }}"
                                          data-confirm="Void voucher {{ $voucher->code }}?">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn xs danger">Void</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#127903;', 'title' => 'No vouchers found',
                                'message' => 'Generate a batch to start selling access.',
                                'action' => '<button type="button" class="btn sm" data-modal="batch-modal">Generate batch</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($vouchers->hasPages())<div class="card-foot">{{ $vouchers->links('partials.pagination') }}</div>@endif
    </div>

    @foreach ($vouchers as $voucher)
        <div class="modal-backdrop" id="sell-{{ $voucher->id }}">
            <div class="modal">
                <form method="POST" action="{{ route('hotspot.vouchers.sell', $voucher) }}">
                    @csrf
                    <div class="modal-head"><h3>Sell {{ $voucher->code }}</h3>
                        <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                    <div class="modal-body">
                        <div class="form-grid cols-1">
                            <div class="field"><label>Amount received <span class="req">*</span></label>
                                <input type="number" name="amount" step="0.01" min="0" required value="{{ $voucher->price }}"></div>
                            <div class="field"><label>Payment method <span class="req">*</span></label>
                                <select name="method" required>
                                    @foreach (['cash','mobile_money','card','bank_transfer'] as $m)
                                        <option value="{{ $m }}">{{ title_case_words($m) }}</option>
                                    @endforeach
                                </select></div>
                            <div class="field"><label>Customer name</label>
                                <input type="text" name="customer_name"></div>
                            <div class="field"><label>Customer phone</label>
                                <input type="tel" name="customer_phone"></div>
                        </div>
                    </div>
                    <div class="modal-foot">
                        <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                        <button type="submit" class="btn">Record sale</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <div class="modal-backdrop" id="batch-modal">
        <div class="modal">
            <form method="POST" action="{{ route('hotspot.generate') }}">
                @csrf
                <div class="modal-head"><h3>Generate a voucher batch</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Batch name <span class="req">*</span></label>
                            <input type="text" name="name" required></div>
                        <div class="field"><label>Plan <span class="req">*</span></label>
                            <select name="plan_id" required>
                                <option value="">Select…</option>
                                @foreach ($plans as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }} — {{ money($plan->price) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Location <span class="req">*</span></label>
                            <select name="location_id" required>
                                <option value="">Select…</option>
                                @foreach ($locations as $location)
                                    <option value="{{ $location->id }}">{{ $location->name }}</option>
                                @endforeach
                            </select></div>
                        <div class="form-grid">
                            <div class="field"><label>Quantity <span class="req">*</span></label>
                                <input type="number" name="quantity" min="1" max="1000" required value="50"></div>
                            <div class="field"><label>Sale price</label>
                                <input type="number" name="price" step="0.01" min="0"></div>
                        </div>
                        <div class="field"><label>Valid until</label>
                            <input type="date" name="valid_until" value="{{ now()->addMonth()->toDateString() }}"></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Generate</button>
                </div>
            </form>
        </div>
    </div>
@endsection