@extends('layouts.app')
@section('title', 'Speed profiles')

@section('content')
    <div class="page-head">
        <div><h1>Speed profiles</h1><p>RADIUS group records that shape live traffic on the NAS.</p></div>
        <button type="button" class="btn" data-modal="profile-modal">+ New profile</button>
    </div>

    <div class="alert info">
        <span>&#9432;</span>
        <div class="grow">
            Each profile writes a <code>Mikrotik-Rate-Limit</code> row into <code>radgroupreply</code>.
            Applying a profile to a live subscriber sends a Change-of-Authorization.
        </div>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Profile</th><th class="num">Down / Up</th><th>Burst</th><th class="num">Priority</th>
                        <th class="num">Quota</th><th class="num">Subscribers</th><th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($profiles as $profile)
                        <tr>
                            <td>
                                <strong>{{ $profile->name }}</strong>
                                <div class="tiny muted">{{ $profile->description }}</div>
                            </td>
                            <td class="num strong">{{ round($profile->download_kbps / 1024, 1) }} / {{ round($profile->upload_kbps / 1024, 1) }} Mbps</td>
                            <td class="small">
                                @if ($profile->burst_download_kbps)
                                    {{ round($profile->burst_download_kbps / 1024, 1) }} Mbps / {{ $profile->burst_time }}s
                                @else
                                    <span class="muted">None</span>
                                @endif
                            </td>
                            <td class="num">{{ $profile->priority }}</td>
                            <td class="num">{{ $profile->monthly_quota_gb ? $profile->monthly_quota_gb.' GB' : 'Unlimited' }}</td>
                            <td class="num">{{ $profile->services()->count() }}</td>
                            <td><span class="badge {{ status_color($profile->is_active ? 'active' : 'inactive') }}">{{ $profile->is_active ? 'active' : 'inactive' }}</span></td>
                            <td class="right nowrap">
                                <button type="button" class="btn xs secondary" data-modal="edit-{{ $profile->id }}">Edit</button>
                                <form method="POST" action="{{ route('radius.profiles.destroy', $profile) }}"
                                      data-confirm="Delete the profile {{ $profile->name }}? Subscribers using it keep their last applied shaping.">
                                    @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' => '&#9889;', 'title' => 'No speed profiles',
                                'message' => 'Define the shaping tiers your NAS will enforce.',
                                'action' => '<button type="button" class="btn sm" data-modal="profile-modal">+ New profile</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="profile-modal">
        <div class="modal">
            <form method="POST" action="{{ route('radius.profiles.store') }}">
                @csrf
                <div class="modal-head"><h3>New speed profile</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>Profile name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="e.g. Home 50/20"></div>
                        <div class="field"><label>Description</label>
                            <input type="text" name="description"></div>
                        <div class="form-grid">
                            <div class="field"><label>Download (kbps) <span class="req">*</span></label>
                                <input type="number" name="download_kbps" min="64" required value="51200"></div>
                            <div class="field"><label>Upload (kbps) <span class="req">*</span></label>
                                <input type="number" name="upload_kbps" min="64" required value="20480"></div>
                        </div>
                        <div class="form-grid">
                            <div class="field"><label>Burst down (kbps)</label>
                                <input type="number" name="burst_download_kbps" min="0" value="0"></div>
                            <div class="field"><label>Burst up (kbps)</label>
                                <input type="number" name="burst_upload_kbps" min="0" value="0"></div>
                        </div>
                        <div class="form-grid">
                            <div class="field"><label>Burst threshold down (kbps)</label>
                                <input type="number" name="burst_threshold_down" min="0" value="0"></div>
                            <div class="field"><label>Burst threshold up (kbps)</label>
                                <input type="number" name="burst_threshold_up" min="0" value="0"></div>
                        </div>
                        <div class="form-grid">
                            <div class="field"><label>Burst time (seconds)</label>
                                <input type="number" name="burst_time" min="0" value="16"></div>
                            <div class="field"><label>Priority (1 = highest)</label>
                                <input type="number" name="priority" min="1" max="8" value="8"></div>
                        </div>
                        <div class="field"><label>Monthly quota (GB)</label>
                            <input type="number" name="monthly_quota_gb" min="0" step="1" placeholder="Leave blank for unlimited"></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 profile</button>
                </div>
            </form>
        </div>
    </div>

    @foreach ($profiles as $profile)
        <div class="modal-backdrop" id="edit-{{ $profile->id }}">
            <div class="modal">
                <form method="POST" action="{{ route('radius.profiles.update', $profile) }}">
                    @csrf @method('PUT')
                    <div class="modal-head"><h3>Edit {{ $profile->name }}</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>Profile name <span class="req">*</span></label>
                                <input type="text" name="name" required value="{{ $profile->name }}"></div>
                            <div class="field"><label>Description</label>
                                <input type="text" name="description" value="{{ $profile->description }}"></div>
                            <div class="form-grid">
                                <div class="field"><label>Download (kbps) <span class="req">*</span></label>
                                    <input type="number" name="download_kbps" min="64" required value="{{ $profile->download_kbps }}"></div>
                                <div class="field"><label>Upload (kbps) <span class="req">*</span></label>
                                    <input type="number" name="upload_kbps" min="64" required value="{{ $profile->upload_kbps }}"></div>
                            </div>
                            <div class="form-grid">
                                <div class="field"><label>Burst down (kbps)</label>
                                    <input type="number" name="burst_download_kbps" min="0" value="{{ $profile->burst_download_kbps }}"></div>
                                <div class="field"><label>Burst up (kbps)</label>
                                    <input type="number" name="burst_upload_kbps" min="0" value="{{ $profile->burst_upload_kbps }}"></div>
                            </div>
                            <div class="field"><label>Monthly quota (GB)</label>
                                <input type="number" name="monthly_quota_gb" min="0" step="1" value="{{ $profile->monthly_quota_gb }}"></div>
                            <label class="check"><input type="checkbox" name="is_active" value="1" @checked($profile->is_active)> Active</label>
                        </div>
                    </div>
                    <div class="modal-foot">
                        <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                        <button type="submit" class="btn">Save profile</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endsection