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

@section('content')
    <div class="page-head">
        <div><h1>Hotspot locations</h1><p>Where vouchers can be redeemed.</p></div>
        <div class="page-actions">
            <a href="{{ route('hotspot.index') }}" class="btn secondary">&larr; Back to hotspot</a>
            <button type="button" class="btn" data-modal="location-modal">+ New location</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Location</th><th>Address</th><th>NAS / AP</th><th class="num">Vouchers sold</th>
                        <th class="num">Revenue</th><th class="num">Sessions</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($locations as $location)
                        <tr>
                            <td><strong>{{ $location->name }}</strong>
                                <div class="tiny muted">{{ $location->city }}</div></td>
                            <td class="small">{{ $location->address ?: '—' }}</td>
                            <td class="mono tiny">{{ $location->nas_ip ?: '—' }}</td>
                            <td class="num">{{ $location->vouchers()->where('status', '!=', 'available')->count() }}</td>
                            <td class="num">{{ money($location->vouchers()->where('status', '!=', 'available')->sum('price')) }}</td>
                            <td class="num">{{ $location->sessions()->count() }}</td>
                            <td><span class="badge {{ status_color($location->is_active ? 'active' : 'inactive') }}">
                                {{ $location->is_active ? 'active' : 'inactive' }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            @include('components.empty-state', ['icon' => '&#9741;', 'title' => 'No hotspot locations',
                                'action' => '<button type="button" class="btn sm" data-modal="location-modal">+ New location</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="location-modal">
        <div class="modal">
            <form method="POST" action="{{ route('hotspot.locations.store') }}">
                @csrf
                <div class="modal-head"><h3>New hotspot location</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>Location name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="e.g. Osu Café Hub"></div>
                        <div class="field"><label>Address</label>
                            <input type="text" name="address"></div>
                        <div class="field"><label>City</label>
                            <input type="text" name="city"></div>
                        <div class="field"><label>NAS IP / AP address</label>
                            <input type="text" name="nas_ip" class="mono" placeholder="10.0.5.10"></div>
                        <div class="field"><label>SSID</label>
                            <input type="text" name="ssid"></div>
                        <div class="field"><label>Branch</label>
                            <select name="branch_id">
                                <option value="">Head office</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select></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 location</button>
                </div>
            </form>
        </div>
    </div>
@endsection