@extends('layouts.app')
@section('content')
<style>
    .sd-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
    .sd-page-title  { font-size:1.45rem; font-weight:700; color:var(--sb-text-primary,#0f172a); margin:0; }
    .sd-page-sub    { font-size:.8rem; color:var(--sb-text-secondary,#64748b); margin-top:2px; }

    .sd-table-card {
        background:#fff; border:1px solid var(--sb-border,#e2e8f0); border-radius:14px;
        box-shadow:0 2px 10px rgba(15,23,42,.06); overflow:hidden;
    }
    .sd-table { width:100%; border-collapse:collapse; font-size:.845rem; }
    .sd-table thead tr { border-bottom:1px solid var(--sb-border,#e2e8f0); background:#f8fafc; }
    .sd-table th {
        padding:10px 14px; font-size:.7rem; font-weight:700; text-transform:uppercase;
        letter-spacing:.06em; color:#94a3b8; white-space:nowrap; text-align:left;
    }
    .sd-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .sd-table tbody tr:last-child td { border-bottom:0; }
    .sd-table tbody tr:hover { background:#f8fafc; }

    .sd-code { font-family:ui-monospace,monospace; font-size:.82rem; background:#f1f5f9; color:#475569; padding:3px 8px; border-radius:6px; font-weight:600; }
    .sd-type-pill { display:inline-block; padding:2px 9px; border-radius:4px; font-size:.7rem; font-weight:700; }
    .sd-type-extension { background:rgba(37,99,235,.1); color:#1d4ed8; }
    .sd-type-external  { background:rgba(22,163,74,.1); color:#15803d; }
    .sd-type-ring_group { background:rgba(124,58,237,.1); color:#6d28d9; }
    .sd-type-queue     { background:rgba(6,182,212,.1); color:#0e7490; }
    .sd-type-ivr       { background:rgba(245,158,11,.1); color:#b45309; }
    .sd-type-time_condition { background:rgba(99,102,241,.1); color:#4338ca; }
    .sd-type-custom    { background:rgba(100,116,139,.1); color:#475569; }

    .sd-actions { display:flex; gap:6px; justify-content:flex-end; }
</style>

<div class="sd-page-header">
    <div>
        <h1 class="sd-page-title">Speed Dials</h1>
        <p class="sd-page-sub">Feature codes that route to extensions, ring groups, queues, or external numbers.</p>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <a href="{{ route('apps.speed-dials.create') }}" class="btn btn-primary btn-sm">+ New Speed Dial</a>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="sd-table-card">
    <table class="sd-table">
        <thead>
            <tr>
                <th>Code</th>
                <th>Label</th>
                <th>Type</th>
                <th>Destination</th>
                <th>Timeout</th>
                <th>CID Prepend</th>
                <th class="text-end">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($rows as $r)
                @php
                    $typeLabels = [
                        'extension' => 'Extension',
                        'external' => 'External',
                        'ring_group' => 'Ring Group',
                        'queue' => 'Queue',
                        'ivr' => 'IVR',
                        'time_condition' => 'Time Condition',
                        'custom' => 'Custom',
                    ];
                @endphp
                <tr>
                    <td><span class="sd-code">{{ $r->code }}</span></td>
                    <td><strong>{{ $r->label }}</strong></td>
                    <td><span class="sd-type-pill sd-type-{{ $r->dst_type }}">{{ $typeLabels[$r->dst_type] ?? $r->dst_type }}</span></td>
                    <td><code>{{ $r->dst_value }}</code></td>
                    <td>{{ $r->timeout }}s</td>
                    <td>{{ $r->prepend_cid ?: '—' }}</td>
                    <td>
                        <div class="sd-actions">
                            <a href="{{ route('apps.speed-dials.edit', $r->id) }}" class="btn btn-outline-primary btn-sm">Edit</a>
                            <form action="{{ route('apps.speed-dials.destroy', $r->id) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('Delete speed dial {{ $r->code }} ({{ $r->label }})?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-outline-danger btn-sm">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div style="color:#94a3b8;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="mb-2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                            <div style="font-size:.85rem;">No speed dials configured yet.</div>
                            <a href="{{ route('apps.speed-dials.create') }}" class="btn btn-primary btn-sm mt-3">Create your first speed dial</a>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection