@extends('layouts.app')

@section('title', 'Create SIP Trunk')

@section('content')
<style>
    .trunk-create-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
    .trunk-create-title  { font-size:1.4rem; font-weight:800; color:var(--sb-text-primary,#0f172a); margin:0; }
    .trunk-create-sub    { font-size:.8rem; color:var(--sb-text-secondary,#64748b); margin-top:4px; }
    .trunk-provider-bar  { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 18px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 1px 4px rgba(15,23,42,.05); }
    .trunk-provider-icon { width:38px; height:38px; border-radius:10px; background:rgba(99,102,241,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .trunk-type-badge    { padding:4px 12px; border-radius:6px; background:rgba(139,92,246,.1); color:#7c3aed; font-size:.78rem; font-weight:700; border:1px solid rgba(139,92,246,.2); }
</style>

    {{-- ── PAGE HEADER ── --}}
    <div class="trunk-create-header">
        <div>
            <h1 class="trunk-create-title">Create SIP Trunk</h1>
            <div class="trunk-create-sub">Build a realtime PJSIP trunk with Teams-ready options and clean signalling controls.</div>
        </div>
        <a href="{{ route('trunks.index') }}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1 mt-1">
            <x-lucide-arrow-left style="width:13px;height:13px;" /> Back to Trunks
        </a>
    </div>

    {{-- ── PROVIDER INFO BAR ── --}}
    <div class="trunk-provider-bar">
        <div class="d-flex align-items-center gap-3">
            <div class="trunk-provider-icon">
                <x-lucide-plus-circle style="width:18px;height:18px;color:#6366f1;" />
            </div>
            <div>
                <div style="font-size:.84rem;font-weight:700;color:#0f172a;">New Trunk</div>
                <div style="font-size:.78rem;color:#64748b;">Configure a new SIP/PJSIP trunk for inbound and outbound calls.</div>
            </div>
        </div>
        <div class="d-flex align-items-center gap-3">
            <span style="font-size:.78rem;color:#64748b;">Trunk Type</span>
            <span class="trunk-type-badge">SIP (PJSIP)</span>
        </div>
    </div>

    {{-- ── ALERTS ── --}}
    @if ($errors->any())
        <div class="alert border-0 mb-3 py-2" style="background:rgba(239,68,68,.08);color:#dc2626;font-size:.84rem;">
            <strong>Please fix:</strong>
            <ul class="mb-0 ps-3 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    {{-- ── FORM ── --}}
    <form method="POST" action="{{ route('trunks.store') }}">
        @csrf

        @include('trunks._form', [
            'isEdit'   => false,
            'endpoint' => null,
            'auth'     => null,
            'aor'      => null,
            'reg'      => null,
            'codecs'   => $codecs ?? [],
        ])

        <div class="d-flex align-items-center gap-2 mt-4 pt-3" style="border-top:1px solid #e2e8f0;">
            <button type="submit" class="btn btn-primary d-flex align-items-center gap-1">
                <x-lucide-plus style="width:14px;height:14px;" /> Create Trunk
            </button>
            <a href="{{ route('trunks.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>

@endsection