@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Dial Pattern Tester</h1>
        <a href="{{ route('trunks.outbound') }}" class="text-indigo-600 hover:underline">Outbound Routes</a>
    </div>

    <form method="GET" action="{{ route('tools.dialtest') }}" class="bg-white shadow rounded-lg p-4 mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-1" for="number">Number to test</label>
        <div class="flex gap-2">
            <input type="text" id="number" name="number" value="{{ old('number', $number) }}"
                   placeholder="+27115550123"
                   class="flex-1 rounded border-gray-300 focus:ring-indigo-500 focus:border-indigo-500" />
            <button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Test</button>
        </div>
        <p class="mt-2 text-xs text-gray-500">
            Supports patterns like <code>_NXXNXXXXXX</code>, <code>_0Z.</code>, and <code>regex:/^00[1-9]\d+$/</code>.
        </p>
    </form>

    @if($number !== '')
        <div class="mb-6">
            @if($first)
                <div class="bg-green-50 border border-green-200 rounded p-4">
                    <div class="text-sm text-green-900">
                        <span class="font-semibold">Match:</span>
                        Route <span class="font-semibold">{{ $first['route']->name }}</span>
                        (pattern <code>{{ $first['pattern'] }}</code>) will be used.
                    </div>
                    <div class="mt-2 grid sm:grid-cols-2 gap-3 text-sm">
                        <div><span class="text-gray-500">Original:</span> <span class="font-mono">{{ $number }}</span></div>
                        <div><span class="text-gray-500">Strip:</span> {{ $first['strip'] }}</div>
                        <div><span class="text-gray-500">Prepend:</span> <span class="font-mono">{{ $first['prepend'] ?: '—' }}</span></div>
                        <div><span class="text-gray-500">Final:</span> <span class="font-mono">{{ $first['final'] }}</span></div>
                        <div><span class="text-gray-500">Selected trunk:</span> <span class="font-mono">{{ $first['selected_trunk'] ?: '—' }}</span></div>
                        <div class="sm:col-span-2"><span class="text-gray-500">Dial string:</span>
                            @if($first['pjsip'])
                                <span class="font-mono" id="dialString">{{ $first['pjsip'] }}</span>
                                <button type="button" id="copyBtn" class="ml-2 text-indigo-600 hover:underline">Copy</button>
                            @else
                                <span class="font-mono">—</span>
                            @endif
                        </div>
                    </div>
                </div>
            @else
                <div class="bg-yellow-50 border border-yellow-200 rounded p-4 text-yellow-900">
                    No outbound route matches <span class="font-mono">{{ $number }}</span>.
                </div>
            @endif
        </div>

        <div class="bg-white shadow rounded-lg overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Route</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Pattern</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Strip</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Prepend</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Final</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Trunk Order</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dial</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse ($results as $r)
                        <tr>
                            <td class="px-4 py-2 text-sm text-gray-900">{{ $r['route']->name }}</td>
                            <td class="px-4 py-2 text-sm font-mono">{{ $r['pattern'] }}</td>
                            <td class="px-4 py-2 text-sm">{{ $r['strip'] }}</td>
                            <td class="px-4 py-2 text-sm font-mono">{{ $r['prepend'] ?: '—' }}</td>
                            <td class="px-4 py-2 text-sm font-mono">{{ $r['final'] }}</td>
                            <td class="px-4 py-2 text-sm font-mono">
                                @if(!empty($r['trunks']))
                                    {{ implode(', ', $r['trunks']) }}
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-4 py-2 text-sm font-mono">{{ $r['pjsip'] ?: '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-4 py-6 text-center text-gray-500">No matching routes.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif
</div>

@if($number !== '' && $first && $first['pjsip'])
<script>
document.getElementById('copyBtn')?.addEventListener('click', () => {
    const s = document.getElementById('dialString')?.textContent || '';
    navigator.clipboard.writeText(s).then(() => {
        const btn = document.getElementById('copyBtn');
        btn.textContent = 'Copied';
        setTimeout(() => btn.textContent = 'Copy', 1200);
    });
});
</script>
@endif
@endsection