@extends('layouts.app')

@section('content')
@php $isEdit = ($mode ?? '') === 'edit'; @endphp

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

    .sd-form-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-form-card .card-header {
        background:#f8fafc; border-bottom:1px solid var(--sb-border,#e2e8f0);
        padding:13px 18px; font-size:.84rem; font-weight:700; color:var(--sb-text-primary,#0f172a);
        display:flex; align-items:center; gap:8px;
    }
    .sd-form-card .card-body { padding:20px; }

    .sd-form-label { font-size:.78rem; font-weight:600; color:var(--sb-text-secondary,#64748b); margin-bottom:5px; }
    .sd-form-help  { font-size:.72rem; color:#94a3b8; margin-top:3px; }
</style>

<div class="sd-form-header">
    <div>
        <h1 class="sd-form-title">{{ $isEdit ? 'Edit Speed Dial' : 'New Speed Dial' }}</h1>
        <p class="sd-form-sub">{{ $isEdit ? 'Update the feature code and destination.' : 'Create a feature code that routes to a destination when dialed.' }}</p>
    </div>
    <a href="{{ route('apps.speed-dials.index') }}" class="btn btn-outline-secondary btn-sm">← Back to Speed Dials</a>
</div>

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Please fix the following:</strong>
        <ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form method="POST"
      action="{{ $isEdit ? route('apps.speed-dials.update', $row->id) : route('apps.speed-dials.store') }}">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <div class="sd-form-card mb-3">
        <div class="card-header">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><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>
            Speed Dial Configuration
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Label <span class="text-danger">*</span></label>
                    <input name="label" value="{{ old('label', $row->label ?? '') }}" class="form-control form-control-sm" required placeholder="e.g. Hannes Cell">
                    <div class="sd-form-help">A friendly name for this speed dial.</div>
                    @error('label')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Dial Code <span class="text-danger">*</span></label>
                    <input name="code" value="{{ old('code', $row->code ?? '') }}" class="form-control form-control-sm" required placeholder="e.g. 500 or *51">
                    <div class="sd-form-help">What users dial to reach this destination. Allowed: <code>* # 0-9</code></div>
                    @error('code')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Destination Type <span class="text-danger">*</span></label>
                    @php $dt = old('dst_type', $row->dst_type ?? 'extension'); @endphp
                    <select name="dst_type" class="form-select form-select-sm" required id="sd-dst-type">
                        <option value="extension"      {{ $dt==='extension'?'selected':'' }}>Extension</option>
                        <option value="external"       {{ $dt==='external'?'selected':'' }}>External Number</option>
                        <option value="ring_group"     {{ $dt==='ring_group'?'selected':'' }}>Ring Group</option>
                        <option value="queue"          {{ $dt==='queue'?'selected':'' }}>Queue</option>
                        <option value="ivr"            {{ $dt==='ivr'?'selected':'' }}>IVR</option>
                        <option value="time_condition" {{ $dt==='time_condition'?'selected':'' }}>Time Condition</option>
                        <option value="custom"         {{ $dt==='custom'?'selected':'' }}>Custom (context,exten,priority)</option>
                    </select>
                    @error('dst_type')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Destination Value <span class="text-danger">*</span></label>
                    <input name="dst_value" value="{{ old('dst_value', $row->dst_value ?? '') }}" class="form-control form-control-sm" list="sd-dst-list" required placeholder="1002 / 0827855735 / from-internal,1234,1">
                    <div class="sd-form-help">Extension number, external number, group/queue number, IVR ID, or custom Goto target.</div>
                    @error('dst_value')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Timeout (seconds)</label>
                    <input type="number" name="timeout" min="5" max="120" value="{{ old('timeout', $row->timeout ?? 30) }}" class="form-control form-control-sm">
                    <div class="sd-form-help">How long to ring before giving up (5–120 seconds).</div>
                    @error('timeout')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">CID Prepend (optional)</label>
                    <input name="prepend_cid" value="{{ old('prepend_cid', $row->prepend_cid ?? '') }}" class="form-control form-control-sm" placeholder="e.g. SD">
                    <div class="sd-form-help">Prefix added to caller ID name when this speed dial is used (e.g. "[SD] John Smith").</div>
                    @error('prepend_cid')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="sd-form-label">Missed Call Email (optional)</label>
                    <input type="email" name="notify_email" value="{{ old('notify_email', $row->notify_email ?? '') }}" class="form-control form-control-sm" placeholder="e.g. standby@company.com">
                    <div class="sd-form-help">For after-hours diverts: if a call routed to this speed dial is missed, email this address the original caller's number (clickable to dial back).</div>
                    @error('notify_email')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="col-12">
                    <div class="form-check form-switch mt-2">
                        <input class="form-check-input" type="checkbox" name="bypass_pin" value="1" id="bypassPin"
                            {{ old('bypass_pin', $row->bypass_pin ?? 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="bypassPin">Bypass PIN Code</label>
                    </div>
                    <div class="sd-form-help">When enabled, dialing this speed dial will not prompt for a PIN code (even if the extension requires one for outbound calls).</div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between">
        @if($isEdit)
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="if(confirm('Delete this speed dial?')) document.getElementById('deleteForm').submit();">Delete Speed Dial</button>
        @else
            <div></div>
        @endif
        <div class="d-flex gap-2">
            <a href="{{ route('apps.speed-dials.index') }}" class="btn btn-outline-secondary btn-sm">Cancel</a>
            <button type="submit" class="btn btn-primary btn-sm">{{ $isEdit ? 'Save Changes' : 'Create Speed Dial' }}</button>
        </div>
    </div>
</form>

@if($isEdit)
<form id="deleteForm" action="{{ route('apps.speed-dials.destroy', $row->id) }}" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>
@endif

{{-- Autocomplete datalist --}}
<datalist id="sd-dst-list">
    @foreach(($extensions ?? []) as $e)
        <option value="{{ $e }}">Ext {{ $e }}</option>
    @endforeach
    @foreach(($ring_groups ?? []) as $rg)
        <option value="{{ $rg }}">Ring Group {{ $rg }}</option>
    @endforeach
    @foreach(($queues ?? []) as $name => $num)
        <option value="{{ $num }}">Queue {{ $name }} ({{ $num }})</option>
    @endforeach
    @foreach(($ivrs ?? []) as $id => $name)
        <option value="{{ $id }}">IVR {{ $name }}</option>
    @endforeach
</datalist>
@endsection