@extends('layouts.app')

@section('content')
<style>
    .ob-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
    .ob-card-header { padding:14px 20px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px; }
    .ob-card-header .title { font-weight:700; font-size:.88rem; color:#0f172a; }
    .ob-card-body { padding:20px; }
    .ob-label { font-size:.75rem; font-weight:600; color:#374151; margin-bottom:4px; display:block; }
    .ob-hint { font-size:.7rem; color:#94a3b8; margin-top:2px; }
</style>

<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
    <div>
        <h4 class="mb-0" style="font-weight:800;">New Outbound Route</h4>
        <div class="text-secondary small mt-1">Configure a new outbound dial pattern and trunk.</div>
    </div>
    <a href="{{ route('trunks.outbound') }}" class="btn btn-outline-secondary btn-sm">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;"><polyline points="15 18 9 12 15 6"/></svg>
        Back
    </a>
</div>

@if ($errors->any())
    <div class="alert alert-danger"><ul class="mb-0 ps-3">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

<form method="POST" action="{{ route('trunks.outbound.store') }}">
    @csrf
    <div class="row g-3">
        <div class="col-12 col-lg-7">
            <div class="ob-card">
                <div class="ob-card-header">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="m18 8 4 4-4 4"/><path d="M2 12h20"/></svg>
                    <div><div class="title">Route Details</div></div>
                </div>
                <div class="ob-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="ob-label">Route Name <span class="text-danger">*</span></label>
                            <input name="name" value="{{ old('name') }}" class="form-control" required placeholder="e.g. Local Calls">
                        </div>
                        <div class="col-md-6">
                            <label class="ob-label">Description</label>
                            <input name="description" value="{{ old('description') }}" class="form-control" placeholder="Optional description">
                        </div>
                        <div class="col-md-6">
                            <label class="ob-label">Dial Pattern <span class="text-danger">*</span></label>
                            <input name="pattern" value="{{ old('pattern') }}" class="form-control font-monospace" required placeholder="_0[6-8]XXXXXXXX">
                            <div class="ob-hint">Asterisk pattern e.g. _0[6-8]XXXXXXXX, _00., _+27XXXXXXXXX</div>
                        </div>
                        <div class="col-md-3">
                            <label class="ob-label">Strip Digits</label>
                            <input type="number" name="strip" min="0" max="10" value="{{ old('strip', 0) }}" class="form-control">
                            <div class="ob-hint">Remove N digits from front</div>
                        </div>
                        <div class="col-md-3">
                            <label class="ob-label">Priority</label>
                            <input type="number" name="priority" value="{{ old('priority', 10) }}" class="form-control">
                            <div class="ob-hint">Lower = matched first</div>
                        </div>
                        <div class="col-md-4">
                            <label class="ob-label">Prepend</label>
                            <input name="prepend" value="{{ old('prepend') }}" class="form-control font-monospace" placeholder="e.g. 27">
                            <div class="ob-hint">Added after stripping</div>
                        </div>
                        <div class="col-md-4">
                            <label class="ob-label">Prefix</label>
                            <input name="prefix" value="{{ old('prefix') }}" class="form-control font-monospace" placeholder="e.g. +">
                        </div>
                        <div class="col-md-4">
                            <label class="ob-label">CallerID Match</label>
                            <input name="match_cid" value="{{ old('match_cid') }}" class="form-control font-monospace" placeholder="Any">
                            <div class="ob-hint">Restrict to specific CID</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-5">
            <div class="ob-card mb-3">
                <div class="ob-card-header">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><path d="M4 14h6v6H4z"/><path d="M14 4h6v6h-6z"/><path d="M7 17v-3a4 4 0 0 1 4-4h3"/><path d="m14 10 3-3-3-3"/></svg>
                    <div><div class="title">Trunk & Routing</div></div>
                </div>
                <div class="ob-card-body">
                    <div class="mb-3">
                        <label class="ob-label">SIP Trunk <span class="text-danger">*</span></label>
                        <select name="trunk" class="form-select" required>
                            <option value="">Select trunk...</option>
                            @foreach($trunks as $value => $label)
                                <option value="{{ $value }}" {{ old('trunk') == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="ob-label">PIN Code</label>
                        <input name="pin_code" value="{{ old('pin_code') }}" class="form-control font-monospace" placeholder="Leave empty to disable">
                    </div>
                    <div>
                        <label class="ob-label">Notes</label>
                        <input name="notes" value="{{ old('notes') }}" class="form-control" placeholder="Internal notes">
                    </div>
                </div>
            </div>

            <div class="ob-card">
                <div class="ob-card-header">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    <div><div class="title">Options</div></div>
                </div>
                <div class="ob-card-body">
                    <div class="d-flex flex-column gap-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="enabled" value="1" id="sw-enabled" {{ old('enabled', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="sw-enabled">Route Enabled</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="require_pin" value="1" id="sw-pin" {{ old('require_pin') ? 'checked' : '' }}>
                            <label class="form-check-label" for="sw-pin">Require PIN to Dial</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="emergency" value="1" id="sw-emerg" {{ old('emergency') ? 'checked' : '' }}>
                            <label class="form-check-label" for="sw-emerg">Emergency Route (bypass restrictions)</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-3">
        <a href="{{ route('trunks.outbound') }}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-2px;margin-right:4px;"><path d="M12 5v14M5 12h14"/></svg>
            Create Route
        </button>
    </div>
</form>
@endsection