@extends('layouts.app')
@section('title', 'Service catalog')

@section('content')
    <div class="page-head">
        <div><h1>Service catalog</h1><p>Plans, speed profiles, add-ons and tax rates.</p></div>
        <button type="button" class="btn" data-modal="plan-modal">+ New plan</button>
    </div>

    <div class="tabs" id="catalog-tabs">
        <a href="#plans" class="active" data-tab>Plans ({{ $plans->count() }})</a>
        <a href="#speeds" data-tab>Speed profiles ({{ $speeds->count() }})</a>
        <a href="#addons" data-tab>Add-ons ({{ $addons->count() }})</a>
        <a href="#taxes" data-tab>Taxes ({{ $taxes->count() }})</a>
    </div>

    <div id="plans" class="tab-pane">
        <div class="card">
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Plan</th><th>Technology</th><th class="num">Price</th><th>Speed</th>
                            <th class="num">Subscribers</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><span class="badge info">{{ $plan->serviceType?->technology ?? '—' }}</span></td>
                                <td class="num strong">{{ money($plan->price) }}
                                    <div class="tiny muted">/{{ str_replace('_',' ',$plan->billing_period) }}</div></td>
                                <td class="small">{{ $plan->speed_label }}</td>
                                <td class="num">{{ $plan->services()->where('status', 'active')->count() }}</td>
                                <td><span class="badge {{ status_color($plan->is_active ? 'active' : 'inactive') }}">
                                    {{ $plan->is_active ? 'active' : 'inactive' }}</span>
                                    @if ($plan->is_full)<span class="badge danger">FULL</span>@endif</td>
                                <td class="right nowrap">
                                    <button type="button" class="btn xs secondary" data-modal="edit-plan-{{ $plan->id }}">Edit</button>
                                    <form method="POST" action="{{ route('settings.catalog.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="7">
                                @include('components.empty-state', ['icon' => '&#128230;', 'title' => 'No plans defined',
                                    'action' => '<button type="button" class="btn sm" data-modal="plan-modal">+ New plan</button>'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="speeds" class="tab-pane">
        <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 class="num">Priority</th>
                            <th class="num">Quota</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($speeds as $speed)
                            <tr>
                                <td><strong>{{ $speed->name }}</strong></td>
                                <td class="num">{{ round($speed->download_kbps / 1024, 1) }} / {{ round($speed->upload_kbps / 1024, 1) }} Mbps</td>
                                <td class="num">{{ $speed->priority }}</td>
                                <td class="num">{{ $speed->monthly_quota_gb ? $speed->monthly_quota_gb.' GB' : 'Unlimited' }}</td>
                                <td><span class="badge {{ status_color($speed->is_active ? 'active' : 'inactive') }}">
                                    {{ $speed->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#9889;', 'title' => 'No speed profiles'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="addons" class="tab-pane">
        <div class="card">
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Add-on</th><th class="num">Price</th><th>Billing</th><th class="num">Subscribers</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($addons as $addon)
                            <tr>
                                <td><strong>{{ $addon->name }}</strong>
                                    <div class="tiny muted">{{ $addon->description }}</div></td>
                                <td class="num">{{ money($addon->price) }}</td>
                                <td class="small">{{ title_case_words($addon->billing_type) }}</td>
                                <td class="num">{{ $addon->serviceAddons()->count() }}</td>
                                <td><span class="badge {{ status_color($addon->is_active ? 'active' : 'inactive') }}">
                                    {{ $addon->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#10133;', 'title' => 'No add-ons defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="taxes" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>Tax rates</h3>
                <button type="button" class="btn sm secondary" data-modal="tax-modal">+ New tax</button></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Tax</th><th class="num">Rate</th><th>Code</th><th>Default</th><th>Status</th><th></th></tr></thead>
                        <tbody>
                        @forelse ($taxes as $tax)
                            <tr>
                                <td><strong>{{ $tax->name }}</strong></td>
                                <td class="num strong">{{ rtrim(rtrim(number_format($tax->rate, 2), '0'), '.') }}%</td>
                                <td class="mono tiny">{{ $tax->code }}</td>
                                <td><span class="badge {{ $tax->is_default ? 'success' : 'muted' }}">{{ $tax->is_default ? 'default' : '—' }}</span></td>
                                <td><span class="badge {{ status_color($tax->is_active ? 'active' : 'inactive') }}">
                                    {{ $tax->is_active ? 'active' : 'inactive' }}</span></td>
                                <td class="right">
                                    <form method="POST" action="{{ route('settings.catalog.taxes.destroy', $tax) }}"
                                          data-confirm="Delete the tax {{ $tax->name }}?">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn xs danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#128178;', 'title' => 'No tax rates configured'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Plan modal --}}
    <div class="modal-backdrop" id="plan-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.catalog.plans.store') }}">
                @csrf
                <div class="modal-head"><h3>New 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="Home Fibre 50/20"></div>
                        <div class="field"><label>Description</label>
                            <input type="text" name="description"></div>
                        <div class="field"><label>Service type <span class="req">*</span></label>
                            <select name="service_type_id" required>
                                <option value="">Select…</option>
                                @foreach ($serviceTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }} ({{ $type->technology }})</option>
                                @endforeach
                            </select></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="field"><label>Setup fee</label>
                            <input type="number" name="setup_fee" step="0.01" min="0" value="0"></div>
                        <div class="field"><label>Billing period <span class="req">*</span></label>
                            <select name="billing_period" required>
                                @foreach (['monthly','quarterly','semi_annual','annual'] as $p)
                                    <option value="{{ $p }}">{{ title_case_words($p) }}</option>
                                @endforeach
                            </select></div>
                        <div class="form-grid">
                            <div class="field"><label>Download (kbps)</label>
                                <input type="number" name="download_kbps" min="0" value="51200"></div>
                            <div class="field"><label>Upload (kbps)</label>
                                <input type="number" name="upload_kbps" min="0" value="20480"></div>
                        </div>
                        <div class="field"><label>Monthly quota (GB)</label>
                            <input type="number" name="monthly_quota_gb" min="0" step="1" placeholder="0 = unlimited"></div>
                        <div class="field"><label>Speed profile</label>
                            <select name="speed_profile_id">
                                <option value="">Inherit from plan speeds</option>
                                @foreach ($speeds as $speed)
                                    <option value="{{ $speed->id }}">{{ $speed->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 plan</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Tax modal --}}
    <div class="modal-backdrop" id="tax-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.catalog.taxes.store') }}">
                @csrf
                <div class="modal-head"><h3>New tax rate</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>Tax name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="VAT"></div>
                        <div class="field"><label>Tax code</label>
                            <input type="text" name="code" class="mono" placeholder="VAT"></div>
                        <div class="field"><label>Rate (%) <span class="req">*</span></label>
                            <input type="number" name="rate" step="0.01" min="0" max="100" required value="15"></div>
                        <label class="check"><input type="checkbox" name="is_default" value="1"> Set as default</label>
                        <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 tax</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Edit plan modals --}}
    @foreach ($plans as $plan)
        <div class="modal-backdrop" id="edit-plan-{{ $plan->id }}">
            <div class="modal">
                <form method="POST" action="{{ route('settings.catalog.plans.update', $plan) }}">
                    @csrf @method('PUT')
                    <div class="modal-head"><h3>Edit {{ $plan->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>Plan name <span class="req">*</span></label>
                                <input type="text" name="name" required value="{{ $plan->name }}"></div>
                            <div class="field"><label>Description</label>
                                <input type="text" name="description" value="{{ $plan->description }}"></div>
                            <div class="field"><label>Price <span class="req">*</span></label>
                                <input type="number" name="price" step="0.01" min="0" required value="{{ $plan->price }}"></div>
                            <div class="field"><label>Setup fee</label>
                                <input type="number" name="setup_fee" step="0.01" min="0" value="{{ $plan->setup_fee }}"></div>
                            <div class="form-grid">
                                <div class="field"><label>Download (kbps)</label>
                                    <input type="number" name="download_kbps" min="0" value="{{ $plan->download_kbps }}"></div>
                                <div class="field"><label>Upload (kbps)</label>
                                    <input type="number" name="upload_kbps" min="0" value="{{ $plan->upload_kbps }}"></div>
                            </div>
                            <div class="field"><label>Monthly quota (GB)</label>
                                <input type="number" name="monthly_quota_gb" min="0" step="1" value="{{ $plan->monthly_quota_gb }}"></div>
                            <label class="check"><input type="checkbox" name="is_active" value="1" @checked($plan->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 plan</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endsection

@push('scripts')
<script>
(function () {
    var tabs = document.querySelectorAll('#catalog-tabs a[data-tab]');
    var panes = document.querySelectorAll('.tab-pane');
    function activate(hash) {
        tabs.forEach(function (t) { t.classList.toggle('active', t.getAttribute('href') === hash); });
        panes.forEach(function (p) { p.style.display = ('#' + p.id) === hash ? '' : 'none'; });
    }
    tabs.forEach(function (t) {
        t.addEventListener('click', function (e) {
            e.preventDefault();
            history.replaceState(null, '', t.getAttribute('href'));
            activate(t.getAttribute('href'));
        });
    });
    activate(location.hash && document.querySelector(location.hash + '.tab-pane') ? location.hash : '#plans');
})();
</script>
@endpush