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

@section('content')
    <div class="page-head">
        <div><h1>Hotspot &amp; vouchers</h1><p>Time-limited and data-capped access sold over the counter or online.</p></div>
        <div class="page-actions">
            <a href="{{ route('hotspot.vouchers') }}" class="btn secondary">Vouchers</a>
            <button type="button" class="btn secondary" data-modal="sell-modal">Sell a voucher</button>
            <button type="button" class="btn" data-modal="batch-modal">Generate batch</button>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Active sessions', 'value' => number_format($counts['sessions']), 'variant' => 'good',
            'href' => '#sessions'])
        @include('components.kpi', ['label' => 'Vouchers available', 'value' => number_format($counts['available']), 'variant' => 'info',
            'href' => route('hotspot.vouchers', ['status' => 'available'])])
        @include('components.kpi', ['label' => 'Sold', 'value' => number_format($counts['sold']), 'href' => route('hotspot.vouchers', ['status' => 'sold'])])
        @include('components.kpi', ['label' => 'Revenue', 'value' => money($counts['revenue']), 'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Locations', 'value' => $counts['locations'], 'href' => route('hotspot.locations')])
        @include('components.kpi', ['label' => 'Plans', 'value' => $counts['plans'], 'href' => route('hotspot.plans')])
    </div>

    <div class="grid grid-2 mb-2">
        <div class="card">
            <div class="card-head"><h3>Redemptions — 14 days</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($redemptions)->map(fn ($p) => [
                        'label' => \Carbon\Carbon::parse($p['date'])->format('d M'),
                        'value' => $p['total'],
                    ])->all(),
                    'type' => 'bar', 'format' => 'number', 'height' => 190,
                ])
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Hotspot plans</h3>
                <button type="button" class="btn sm secondary" data-modal="plan-modal">+ New plan</button></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Plan</th><th class="num">Price</th><th class="num">Time</th><th class="num">Data</th><th class="num">Speed</th><th></th></tr></thead>
                        <tbody>
                        @forelse ($plans as $plan)
                            <tr>
                                <td><strong>{{ $plan->name }}</strong></td>
                                <td class="num">{{ money($plan->price) }}</td>
                                <td class="num">{{ $plan->time_limit_min ? $plan->time_limit_min.' min' : 'Unlimited' }}</td>
                                <td class="num">{{ $plan->data_limit_mb ? human_bytes($plan->data_limit_mb * 1048576) : 'Unlimited' }}</td>
                                <td class="num small">{{ $plan->download_limit ? round($plan->download_limit / 1024).' / '.round($plan->upload_limit / 1024).' Mbps' : '—' }}</td>
                                <td class="right">
                                    <span class="badge {{ status_color($plan->is_active ? 'active' : 'inactive') }}">{{ $plan->is_active ? 'active' : 'inactive' }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6">
                                @include('components.empty-state', ['icon' => '&#9741;', 'title' => 'No hotspot plans',
                                    'action' => '<button type="button" class="btn sm" data-modal="plan-modal">+ New plan</button>'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card" id="sessions">
        <div class="card-head"><h3>Recent hotspot sessions</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Username</th><th>Location</th><th>Started</th><th>Stopped</th><th class="num">Duration</th>
                        <th class="num">Traffic</th><th>IP</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($sessions as $session)
                        <tr>
                            <td class="mono strong">{{ $session->username }}</td>
                            <td class="small">{{ $session->location?->name ?? '—' }}</td>
                            <td class="small nowrap">{{ $session->started_at?->format('d M H:i') ?? '—' }}</td>
                            <td class="small nowrap">{{ $session->stopped_at?->format('d M H:i') ?? '—' }}</td>
                            <td class="num">{{ $session->duration_label }}</td>
                            <td class="num">{{ human_bytes($session->total_octets) }}</td>
                            <td class="mono tiny">{{ $session->framed_ip ?: '—' }}</td>
                            <td><span class="badge {{ status_color($session->is_online ? 'active' : 'inactive') }}">
                                {{ $session->is_online ? 'online' : 'closed' }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="8">
                            @include('components.empty-state', ['icon' => '&#9741;', 'title' => 'No hotspot sessions yet'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($sessions->hasPages())<div class="card-foot">{{ $sessions->links('partials.pagination') }}</div>@endif
    </div>

    {{-- Modals --}}
    <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 placeholder="e.g. Weekend promo — Osu"></div>
                        <div class="field"><label>Plan <span class="req">*</span></label>
                            <select name="plan_id" required>
                                <option value="">Select a plan…</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 a location…</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" placeholder="Plan price"></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 vouchers</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="sell-modal">
        <div class="modal">
            <form method="POST" action="{{ route('hotspot.vouchers.sell-by-code') }}">
                @csrf
                <div class="modal-head"><h3>Sell a voucher</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>Voucher code <span class="req">*</span></label>
                            <input type="text" name="code" class="mono" required placeholder="XXXX-XXXX"></div>
                        <div class="field"><label>Amount received <span class="req">*</span></label>
                            <input type="number" name="amount" step="0.01" min="0" required></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>

    <div class="modal-backdrop" id="plan-modal">
        <div class="modal">
            <form method="POST" action="{{ route('hotspot.plans.store') }}">
                @csrf
                <div class="modal-head"><h3>New hotspot plan</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>Plan name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="1 Hour / 1 GB"></div>
                        <div class="field"><label>Price <span class="req">*</span></label>
                            <input type="number" name="price" step="0.01" min="0" required></div>
                        <div class="form-grid">
                            <div class="field"><label>Time limit (minutes)</label>
                                <input type="number" name="time_limit_min" min="0" placeholder="0 = unlimited"></div>
                            <div class="field"><label>Data limit (MB)</label>
                                <input type="number" name="data_limit_mb" min="0" placeholder="0 = unlimited"></div>
                        </div>
                        <div class="form-grid">
                            <div class="field"><label>Download (kbps)</label>
                                <input type="number" name="download_limit" min="0" value="10240"></div>
                            <div class="field"><label>Upload (kbps)</label>
                                <input type="number" name="upload_limit" min="0" value="5120"></div>
                        </div>
                        <label class="check"><input type="checkbox" name="is_active" value="1" checked> Active</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create plan</button>
                </div>
            </form>
        </div>
    </div>
@endsection