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

@section('content')
    <div class="page-head">
        <div><h1>Hotspot plans</h1><p>Time, data and speed caps applied to voucher RADIUS sessions.</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="plan-modal">+ New plan</button>
        </div>
    </div>

    <div class="card">
        <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 limit</th><th class="num">Data limit</th>
                        <th class="num">Down / Up</th><th class="num">Vouchers</th><th>Status</th><th></th></tr>
                    </thead>
                    <tbody>
                    @forelse ($plans as $plan)
                        <tr>
                            <td><strong>{{ $plan->name }}</strong>
                                <div class="tiny muted">{{ $plan->description }}</div></td>
                            <td class="num strong">{{ 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="num">{{ $plan->vouchers()->count() }}</td>
                            <td><span class="badge {{ status_color($plan->is_active ? 'active' : 'inactive') }}">{{ $plan->is_active ? 'active' : 'inactive' }}</span></td>
                            <td class="right">
                                <form method="POST" action="{{ route('hotspot.plans.destroy', $plan) }}"
                                      data-confirm="Delete the plan {{ $plan->name }}?">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn xs danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8">
                            @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 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></div>
                        <div class="field"><label>Description</label>
                            <input type="text" name="description"></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