@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Outbound Routes</h4>
        <div class="text-secondary small mt-1">Manage dial patterns, trunk selection, and outbound routing policy.</div>
    </div>
    <div class="mt-2 mt-md-0">
        <a href="{{ route('trunks.outbound.create') }}" class="btn btn-primary btn-sm">+ New Route</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

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Dial Pattern</th>
                        <th>Trunk</th>
                        <th class="text-center">Priority</th>
                        <th class="text-center">Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($routes as $r)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $r->name }}</div>
                                <div class="small text-secondary">{{ $r->description ?: '' }}</div>
                            </td>
                            <td>
                                <code style="font-size:.82rem;">{{ $r->pattern ?? $r->dial_pattern }}</code>
                                @if($r->prepend)
                                    <span class="small text-muted ms-1">(prepend: {{ $r->prepend }})</span>
                                @endif
                                @if($r->strip)
                                    <span class="small text-muted ms-1">(strip: {{ $r->strip }})</span>
                                @endif
                            </td>
                            <td><code style="font-size:.82rem;">{{ $r->trunk }}</code></td>
                            <td class="text-center">{{ $r->priority ?? 10 }}</td>
                            <td class="text-center">
                                <span class="badge {{ $r->enabled ? 'bg-success' : 'bg-secondary' }}">{{ $r->enabled ? 'Active' : 'Disabled' }}</span>
                                @if($r->require_pin)
                                    <span class="badge bg-warning bg-opacity-10 text-warning">PIN</span>
                                @endif
                                @if($r->emergency)
                                    <span class="badge bg-danger bg-opacity-10 text-danger">Emergency</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('trunks.outbound.edit', $r->id) }}" class="btn btn-outline-primary btn-sm">Edit</a>
                                    <form method="POST" action="{{ route('trunks.outbound.toggle', $r->id) }}" class="d-inline">
                                        @csrf
                                        <button class="btn btn-outline-secondary btn-sm">{{ $r->enabled ? 'Disable' : 'Enable' }}</button>
                                    </form>
                                    <form method="POST" action="{{ route('trunks.outbound.destroy', $r->id) }}" class="d-inline" onsubmit="return confirm('Delete route: {{ $r->name }}?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-outline-danger btn-sm">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-secondary py-4">
                                No outbound routes configured. Click "+ New Route" to create one.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection