@extends('layouts.app')

@section('content')
<style>
    /* ── Device type grid ── */
    .dt-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    @media (max-width: 767px) { .dt-grid { grid-template-columns: repeat(2, 1fr); } }

    .dt-card-wrap { position: relative; }
    .dt-card-wrap input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

    .dt-card {
        border: 2px solid #e2e8f0; border-radius: 14px;
        padding: 24px 16px 20px;
        cursor: pointer; text-align: center;
        transition: border-color .15s, box-shadow .15s, background .15s;
        background: #fff; user-select: none;
        display: flex; flex-direction: column; align-items: center;
        position: relative; overflow: hidden;
    }
    .dt-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 10px rgba(0,0,0,.08); }

    /* checkmark tick — hidden by default */
    .dt-card::after {
        content: '';
        position: absolute; top: 10px; right: 10px;
        width: 20px; height: 20px; border-radius: 50%;
        background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
        opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
    }

    .dt-card-icon {
        width: 52px; height: 52px; border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 14px; flex-shrink: 0;
    }
    .dt-card-icon svg { width: 24px; height: 24px; }
    .dt-card-title { font-size: .88rem; font-weight: 700; color: #0f172a; }
    .dt-card-sub   { font-size: .73rem; color: #94a3b8; margin-top: 3px; }
    .dt-card-badge {
        display: none; margin-top: 12px;
        font-size: .67rem; font-weight: 700; padding: 3px 10px;
        border-radius: 999px; letter-spacing: .04em;
    }

    /* ── selected states ── */
    input#dt-sip:checked   ~ .dt-card { border-color: #2563eb; background: rgba(37,99,235,.04);  box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
    input#dt-web:checked   ~ .dt-card { border-color: #0891b2; background: rgba(6,182,212,.04);  box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
    input#dt-mobile:checked~ .dt-card { border-color: #7c3aed; background: rgba(124,58,237,.04); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
    input#dt-teams:checked ~ .dt-card { border-color: #d97706; background: rgba(245,158,11,.04); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

    /* show checkmark on selected */
    input#dt-sip:checked   ~ .dt-card::after { opacity: 1; transform: scale(1); background-color: #2563eb; }
    input#dt-web:checked   ~ .dt-card::after { opacity: 1; transform: scale(1); background-color: #0891b2; }
    input#dt-mobile:checked~ .dt-card::after { opacity: 1; transform: scale(1); background-color: #7c3aed; }
    input#dt-teams:checked ~ .dt-card::after { opacity: 1; transform: scale(1); background-color: #d97706; }

    input#dt-sip:checked   ~ .dt-card .dt-card-badge { display: inline-block; background: rgba(37,99,235,.12); color: #2563eb; }
    input#dt-web:checked   ~ .dt-card .dt-card-badge { display: inline-block; background: rgba(6,182,212,.12);  color: #0891b2; }
    input#dt-mobile:checked~ .dt-card .dt-card-badge { display: inline-block; background: rgba(124,58,237,.12); color: #7c3aed; }
    input#dt-teams:checked ~ .dt-card .dt-card-badge { display: inline-block; background: rgba(245,158,11,.12); color: #d97706; }

    /* ── Form card ── */
    .create-card {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 16px;
    }
    .create-card-header {
        padding: 14px 20px; border-bottom: 1px solid #f1f5f9;
        display: flex; align-items: center; gap: 9px;
    }
    .create-card-header .title { font-size: .9rem; font-weight: 700; color: #0f172a; }
    .create-card-header .sub   { font-size: .78rem; color: #64748b; margin-top: 1px; }
    .create-card-body { padding: 20px; }
    .create-label { font-size: .78rem; font-weight: 600; color: #475569; margin-bottom: 4px; display: block; }

    /* ── Auto-config bar ── */
    .autoconf-bar {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
        padding: 14px 20px; display: flex; align-items: center; gap: 0;
        flex-wrap: wrap; margin-bottom: 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .autoconf-bar-label {
        font-size: .75rem; font-weight: 700; color: #64748b;
        padding-right: 20px; border-right: 1px solid #e2e8f0;
        margin-right: 20px; flex-shrink: 0;
        display: flex; flex-direction: column;
    }
    .autoconf-bar-label span { font-size: .65rem; font-weight: 400; color: #94a3b8; margin-top: 1px; }
    .autoconf-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; margin-right: 24px; }
    .autoconf-item svg { width: 13px; height: 13px; color: #94a3b8; flex-shrink: 0; }
    .autoconf-item .ac-label { color: #94a3b8; font-weight: 500; }
    .autoconf-item .ac-val   { font-weight: 700; color: #334155; font-family: monospace; font-size: .76rem; }
    .autoconf-item .ac-badge {
        padding: 2px 8px; border-radius: 5px; font-size: .69rem; font-weight: 700;
        background: rgba(37,99,235,.1); color: #2563eb;
    }

    /* ── Action bar ── */
    .create-action-bar {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
        padding: 14px 20px; display: flex; align-items: center; justify-content: flex-end;
        gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }

    /* step numbers */
    .step-num {
        width: 22px; height: 22px; border-radius: 50%; background: #2563eb;
        color: #fff; font-size: .7rem; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
</style>

{{-- ── Page header ── --}}
<div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
    <div>
        <h1 style="font-size:1.35rem;font-weight:700;color:#0f172a;margin:0 0 4px;">Create Extension</h1>
        <div style="font-size:.82rem;color:#64748b;">Configure a new PJSIP extension with device-specific settings.</div>
    </div>
    <a href="{{ route('extensions.index') }}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1">
        <x-lucide-arrow-left class="w-4 h-4" /> Back to List
    </a>
</div>

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
        <div class="fw-semibold mb-1 d-flex align-items-center gap-2">
            <x-lucide-alert-circle class="w-4 h-4" /> Please fix the following errors:
        </div>
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $error)<li style="font-size:.83rem;">{{ $error }}</li>@endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form method="POST" action="{{ route('extensions.store') }}" id="createExtForm">
@csrf

{{-- ── Step 1: Device Type ── --}}
<div class="create-card">
    <div class="create-card-header">
        <span class="step-num">1</span>
        <div>
            <div class="title">Device Type</div>
            <div class="sub">Select the type of device — transport, codecs and WebRTC will be auto-configured.</div>
        </div>
    </div>
    <div class="create-card-body">
        <div class="dt-grid">

            {{-- SIP Phone --}}
            <div class="dt-card-wrap">
                <input type="radio" name="device_type" id="dt-sip" value="sip_phone"
                       {{ old('device_type', 'sip_phone') === 'sip_phone' ? 'checked' : '' }}>
                <label class="dt-card" for="dt-sip">
                    <div class="dt-card-icon" style="background:rgba(37,99,235,.1);">
                        <x-lucide-phone style="color:#2563eb;" />
                    </div>
                    <div class="dt-card-title">SIP Phone</div>
                    <div class="dt-card-sub">Hardware / Softphone</div>
                    <span class="dt-card-badge">Selected</span>
                </label>
            </div>

            {{-- Web Phone --}}
            <div class="dt-card-wrap">
                <input type="radio" name="device_type" id="dt-web" value="web_phone"
                       {{ old('device_type') === 'web_phone' ? 'checked' : '' }}>
                <label class="dt-card" for="dt-web">
                    <div class="dt-card-icon" style="background:rgba(6,182,212,.1);">
                        <x-lucide-monitor style="color:#0891b2;" />
                    </div>
                    <div class="dt-card-title">Web Phone</div>
                    <div class="dt-card-sub">Browser WebRTC</div>
                    <span class="dt-card-badge">Selected</span>
                </label>
            </div>

            {{-- Mobile App --}}
            <div class="dt-card-wrap">
                <input type="radio" name="device_type" id="dt-mobile" value="mobile_app"
                       {{ old('device_type') === 'mobile_app' ? 'checked' : '' }}>
                <label class="dt-card" for="dt-mobile">
                    <div class="dt-card-icon" style="background:rgba(124,58,237,.1);">
                        <x-lucide-smartphone style="color:#7c3aed;" />
                    </div>
                    <div class="dt-card-title">Mobile App</div>
                    <div class="dt-card-sub">iOS / Android</div>
                    <span class="dt-card-badge">Selected</span>
                </label>
            </div>

            {{-- Teams --}}
            <div class="dt-card-wrap">
                <input type="radio" name="device_type" id="dt-teams" value="teams"
                       {{ old('device_type') === 'teams' ? 'checked' : '' }}>
                <label class="dt-card" for="dt-teams">
                    <div class="dt-card-icon" style="background:rgba(245,158,11,.1);">
                        <x-lucide-users style="color:#d97706;" />
                    </div>
                    <div class="dt-card-title">Teams</div>
                    <div class="dt-card-sub">MS Teams Integration</div>
                    <span class="dt-card-badge">Selected</span>
                </label>
            </div>

        </div>
    </div>
</div>

{{-- ── Step 2: Extension Details ── --}}
<div class="create-card">
    <div class="create-card-header">
        <span class="step-num">2</span>
        <div>
            <div class="title">Extension Details</div>
            <div class="sub">Core identity and credentials for this extension.</div>
        </div>
    </div>
    <div class="create-card-body">
        <div class="row g-3">

            <div class="col-12 col-md-4">
                <label class="create-label">Extension Number <span style="color:#ef4444;">*</span></label>
                <input type="text" name="id" id="extNumber" value="{{ old('id') }}"
                       class="form-control @error('id') is-invalid @enderror"
                       placeholder="e.g. 1009" required autofocus
                       style="font-family:monospace;font-weight:700;font-size:1rem;"
                       oninput="updateMailboxHint(this.value)">
                @error('id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <div style="font-size:.72rem;color:#94a3b8;margin-top:3px;">Must be a unique numeric extension (e.g. 1001–1999).</div>
            </div>

            <div class="col-12 col-md-4">
                <label class="create-label">Display Name</label>
                <input type="text" name="display_name" value="{{ old('display_name') }}"
                       class="form-control" placeholder="e.g. John Doe">
                <div style="font-size:.72rem;color:#94a3b8;margin-top:3px;">Optional friendly name for caller ID.</div>
            </div>

            <div class="col-12 col-md-4">
                <label class="create-label">SIP Password <span style="color:#ef4444;">*</span></label>
                <div class="input-group">
                    <input type="text" name="password" id="sipPassword" value="{{ old('password') }}"
                           class="form-control @error('password') is-invalid @enderror"
                           required autocomplete="off" placeholder="Min. 8 characters">
                    <button type="button" class="btn btn-outline-secondary" onclick="generatePassword()">
                        <x-lucide-refresh-cw style="width:14px;height:14px;" />
                    </button>
                </div>
                @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <div class="col-12 col-md-4">
                <label class="create-label">Context</label>
                <select name="context" class="form-select">
                    <option value="from-internal" {{ old('context', 'from-internal') === 'from-internal' ? 'selected' : '' }}>from-internal (standard)</option>
                    <option value="from-external" {{ old('context') === 'from-external' ? 'selected' : '' }}>from-external</option>
                </select>
            </div>

            <div class="col-12 col-md-4">
                <label class="create-label">Transport</label>
                <select name="transport" id="transportSelect" class="form-select">
                    <option value="transport-udp" {{ old('transport', 'transport-udp') === 'transport-udp' ? 'selected' : '' }}>UDP — Standard SIP Phones</option>
                    <option value="transport-tcp" {{ old('transport') === 'transport-tcp' ? 'selected' : '' }}>TCP — Reliable delivery</option>
                    <option value="transport-wss" {{ old('transport') === 'transport-wss' ? 'selected' : '' }}>WSS (TLS) — WebRTC / Secure</option>
                </select>
            </div>

            <div class="col-12 col-md-4">
                <label class="create-label">Max Simultaneous Registrations</label>
                <input type="number" name="max_contacts" id="maxContactsInput" value="{{ old('max_contacts') }}"
                       class="form-control" min="1" max="10" placeholder="Auto">
                <div style="font-size:.72rem;color:#94a3b8;margin-top:3px;">
                    <span id="maxContactsHelp">Auto-defaults: 1 for desk phones, 5 for WebRTC.</span>
                </div>
            </div>

            <div class="col-12 col-md-6">
                <label class="create-label">Voicemail Access Code</label>
                <input type="text" name="voicemail_extension" value="{{ old('voicemail_extension') }}"
                       class="form-control" placeholder="e.g. *97">
                <div style="font-size:.72rem;color:#94a3b8;margin-top:3px;">Leave blank to skip voicemail setup.</div>
            </div>

            <div class="col-12 col-md-6">
                <label class="create-label">Mailbox</label>
                <input type="text" name="mailboxes" id="mailboxField" value="{{ old('mailboxes') }}"
                       class="form-control" placeholder="e.g. 1009&#64;default">
                <div style="font-size:.72rem;color:#94a3b8;margin-top:3px;" id="mailboxHint">
                    Auto-filled from extension number. Format: <code>1009&#64;default</code>.
                </div>
            </div>

        </div>
    </div>
</div>

{{-- ── Auto-configured settings bar ── --}}
<div class="autoconf-bar" id="autoconfBar">
    <div class="autoconf-bar-label">
        Auto-Config
        <span>Applied automatically</span>
    </div>

    <div class="autoconf-item">
        <x-lucide-wifi />
        <span class="ac-label">Transport</span>
        <span class="ac-badge" id="ac-transport">UDP</span>
    </div>
    <div class="autoconf-item">
        <x-lucide-music />
        <span class="ac-label">Codecs</span>
        <span class="ac-val" id="ac-codecs">ulaw, alaw</span>
    </div>
    <div class="autoconf-item">
        <x-lucide-hash />
        <span class="ac-label">DTMF</span>
        <span class="ac-val" id="ac-dtmf">rfc4733</span>
    </div>
    <div class="autoconf-item">
        <x-lucide-globe />
        <span class="ac-label">WebRTC</span>
        <span class="ac-badge" id="ac-webrtc" style="background:rgba(148,163,184,.1);color:#94a3b8;">No</span>
    </div>
    <div class="autoconf-item">
        <x-lucide-shield />
        <span class="ac-label">Encryption</span>
        <span class="ac-val" id="ac-enc">None</span>
    </div>
</div>

{{-- ── Action bar ── --}}
<div class="create-action-bar">
    <a href="{{ route('extensions.index') }}" class="btn btn-outline-secondary btn-sm">Cancel</a>
    <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center gap-2">
        <x-lucide-plus-circle style="width:15px;height:15px;" /> Create Extension
    </button>
</div>

</form>

<script>
const dtConfig = {
    sip_phone:  { transport: 'transport-udp', acTransport: 'UDP',     codecs: 'ulaw, alaw',     dtmf: 'rfc4733', webrtc: false, enc: 'None',      defaultMaxContacts: 1 },
    web_phone:  { transport: 'transport-wss', acTransport: 'WSS/TLS', codecs: 'opus, ulaw',     dtmf: 'auto',    webrtc: true,  enc: 'DTLS/SRTP', defaultMaxContacts: 5 },
    mobile_app: { transport: 'transport-wss', acTransport: 'WSS/TLS', codecs: 'opus, ulaw',     dtmf: 'auto',    webrtc: true,  enc: 'DTLS/SRTP', defaultMaxContacts: 3 },
    teams:      { transport: 'transport-tcp', acTransport: 'TCP/TLS', codecs: 'ulaw, alaw, g722', dtmf: 'rfc4733', webrtc: false, enc: 'TLS',       defaultMaxContacts: 1 },
};

function applyDeviceType(type) {
    const cfg = dtConfig[type];
    if (!cfg) return;

    document.getElementById('transportSelect').value = cfg.transport;
    document.getElementById('ac-transport').textContent = cfg.acTransport;
    document.getElementById('ac-codecs').textContent    = cfg.codecs;
    document.getElementById('ac-dtmf').textContent      = cfg.dtmf;
    document.getElementById('ac-enc').textContent       = cfg.enc;

    const webrtcEl   = document.getElementById('ac-webrtc');
    webrtcEl.textContent = cfg.webrtc ? 'Yes' : 'No';
    webrtcEl.style.background = cfg.webrtc ? 'rgba(34,197,94,.1)' : 'rgba(148,163,184,.1)';
    webrtcEl.style.color      = cfg.webrtc ? '#16a34a'            : '#94a3b8';

    document.getElementById('ac-transport').style.background =
        cfg.webrtc ? 'rgba(6,182,212,.1)' : 'rgba(37,99,235,.1)';
    document.getElementById('ac-transport').style.color =
        cfg.webrtc ? '#0891b2' : '#2563eb';

    // Update Max Contacts placeholder/help based on device type
    const maxEl = document.getElementById('maxContactsInput');
    const maxHelpEl = document.getElementById('maxContactsHelp');
    if (maxEl) {
        maxEl.placeholder = cfg.defaultMaxContacts;
        if (!maxEl.value) maxEl.value = '';  // keep blank to use server-side default
    }
    if (maxHelpEl) {
        if (cfg.webrtc) {
            maxHelpEl.innerHTML = 'Recommended: <strong>' + cfg.defaultMaxContacts + '</strong> for ' + (type === 'web_phone' ? 'WebRTC (multiple browser tabs)' : 'mobile app (multiple devices)') + '.';
        } else {
            maxHelpEl.innerHTML = 'Recommended: <strong>1</strong> for ' + (type === 'teams' ? 'Microsoft Teams' : 'desk phones') + '.';
        }
    }
}

document.querySelectorAll('input[name="device_type"]').forEach(radio => {
    radio.addEventListener('change', function() { applyDeviceType(this.value); });
});

// run on load for checked value
const checkedDt = document.querySelector('input[name="device_type"]:checked');
if (checkedDt) applyDeviceType(checkedDt.value);

// Mailbox auto-hint
function updateMailboxHint(val) {
    const hint = document.getElementById('mailboxHint');
    const field = document.getElementById('mailboxField');
    const at = '@';
    if (val) {
        hint.innerHTML = 'Auto-filled from extension number. Format: <code>' + val + at + 'default</code>.';
        if (!field.value) field.placeholder = 'e.g. ' + val + at + 'default';
    }
}

function generatePassword() {
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%';
    let pass = '';
    for (let i = 0; i < 16; i++) pass += chars.charAt(Math.floor(Math.random() * chars.length));
    document.getElementById('sipPassword').value = pass;
}
</script>
@endsection