@extends('layouts.app')
@section('title', 'Support configuration')

@section('content')
    <div class="page-head">
        <div><h1>Support configuration</h1><p>Categories, SLA policies, SMS templates and cancellation reasons.</p></div>
    </div>

    <div class="tabs" id="support-tabs">
        <a href="#categories" class="active" data-tab>Categories ({{ $categories->count() }})</a>
        <a href="#sla" data-tab>SLA policies ({{ $slaPolicies->count() }})</a>
        <a href="#sms" data-tab>SMS templates ({{ $smsTemplates->count() }})</a>
        <a href="#reasons" data-tab>Cancellation reasons ({{ $reasons->count() }})</a>
    </div>

    <div id="categories" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>Ticket categories</h3>
                <button type="button" class="btn sm secondary" data-modal="category-modal">+ New category</button></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Category</th><th>Module</th><th class="num">First response</th>
                            <th class="num">Resolution</th><th class="num">Tickets</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($categories as $category)
                            <tr>
                                <td><strong>{{ $category->name }}</strong>
                                    <div class="tiny muted">{{ $category->description }}</div></td>
                                <td><span class="badge info">{{ $category->module }}</span></td>
                                <td class="num">{{ $category->sla_first_response_min ? round($category->sla_first_response_min / 60, 1).' h' : '—' }}</td>
                                <td class="num">{{ $category->sla_resolution_min ? round($category->sla_resolution_min / 60, 1).' h' : '—' }}</td>
                                <td class="num">{{ $category->tickets()->count() }}</td>
                                <td><span class="badge {{ status_color($category->is_active ? 'active' : 'inactive') }}">
                                    {{ $category->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#128194;', 'title' => 'No categories defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="sla" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>SLA policies</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Policy</th><th>Priority</th><th class="num">First response</th>
                            <th class="num">Resolution</th><th class="num">Tickets</th></tr></thead>
                        <tbody>
                        @forelse ($slaPolicies as $policy)
                            <tr>
                                <td><strong>{{ $policy->name }}</strong></td>
                                <td><span class="badge {{ $policy->priority === 'urgent' ? 'danger' : 'muted' }}">{{ $policy->priority }}</span></td>
                                <td class="num">{{ round($policy->first_response_min / 60, 1) }} h</td>
                                <td class="num">{{ round($policy->resolution_min / 60, 1) }} h</td>
                                <td class="num">{{ $policy->tickets()->count() }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#9201;', 'title' => 'No SLA policies defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="sms" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>SMS templates</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Template</th><th>Subject</th><th>Body</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($smsTemplates as $template)
                            <tr>
                                <td><strong>{{ $template->name }}</strong></td>
                                <td class="small">{{ $template->subject }}</td>
                                <td class="small">{{ \Illuminate\Support\Str::limit($template->body, 80) }}</td>
                                <td><span class="badge {{ status_color($template->is_active ? 'active' : 'inactive') }}">
                                    {{ $template->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4">@include('components.empty-state', ['icon' => '&#128241;', 'title' => 'No SMS templates defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="reasons" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>Cancellation reasons</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Reason</th><th>Category</th><th class="num">Used</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($reasons as $reason)
                            <tr>
                                <td><strong>{{ $reason->reason }}</strong></td>
                                <td><span class="badge info">{{ title_case_words($reason->category) }}</span></td>
                                <td class="num">{{ $reason->services()->count() }}</td>
                                <td><span class="badge {{ status_color($reason->is_active ? 'active' : 'inactive') }}">
                                    {{ $reason->is_active ? 'active' : 'inactive' }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4">@include('components.empty-state', ['icon' => '&#10060;', 'title' => 'No cancellation reasons defined'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="category-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.support.categories.store') }}">
                @csrf
                <div class="modal-head"><h3>New ticket category</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>Category name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="No internet"></div>
                        <div class="field"><label>Module</label>
                            <select name="module">
                                @foreach (['support','billing','network','installation'] as $m)
                                    <option value="{{ $m }}">{{ title_case_words($m) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Description</label>
                            <input type="text" name="description"></div>
                        <div class="field"><label>First response SLA (minutes)</label>
                            <input type="number" name="sla_first_response_min" min="0" value="60"></div>
                        <div class="field"><label>Resolution SLA (minutes)</label>
                            <input type="number" name="sla_resolution_min" min="0" value="480"></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 category</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var tabs = document.querySelectorAll('#support-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 : '#categories');
})();
</script>
@endpush