@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-header .subtitle { font-size:.75rem; color:#64748b; }
    .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;">Edit Outbound Route</h4>
        <div class="text-secondary small mt-1">{{ $route->name }} — update dial patterns, trunk, and route settings.</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 (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 ($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.update', $route->id) }}">
    @csrf
    @method('PUT')

    <div class="row g-3">
        {{-- Left column --}}
        <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', $route->name) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="ob-label">Description</label>
                            <input name="description" value="{{ old('description', $route->description) }}" class="form-control" placeholder="Optional">
                        </div>
                        <div class="col-md-6">
                            <label class="ob-label">Dial Pattern <span class="text-danger">*</span></label>
                            <input name="pattern" value="{{ old('pattern', $route->pattern ?? $route->dial_pattern) }}" class="form-control font-monospace" required>
                            <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', $route->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', $route->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', $route->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', $route->prefix) }}" class="form-control font-monospace" placeholder="e.g. +">
                            <div class="ob-hint">Added before number</div>
                        </div>
                        <div class="col-md-4">
                            <label class="ob-label">CallerID Match</label>
                            <input name="match_cid" value="{{ old('match_cid', $route->match_cid ?? $route->callerid_match) }}" class="form-control font-monospace" placeholder="Any">
                            <div class="ob-hint">Restrict to specific CID</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right column --}}
        <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>
                            @foreach($trunks as $value => $label)
                                <option value="{{ $value }}" {{ old('trunk', $route->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', $route->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', $route->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', (bool)($route->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', (int)($route->require_pin ?? 0)) ? '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', (int)($route->emergency ?? 0)) ? 'checked' : '' }}>
                            <label class="form-check-label" for="sw-emerg">Emergency Route (bypass restrictions)</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Actions --}}
    <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="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Save Changes
        </button>
    </div>
</form>
@endsection