@extends('layouts.app')

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

@section('content')
<style>
    .tc-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
    .tc-title  { font-size:1.35rem; font-weight:800; color:var(--sb-text-primary,#0f172a); margin:0; }
    .tc-sub    { font-size:.8rem; color:var(--sb-text-secondary,#64748b); margin-top:3px; }
    .tc-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>

<div class="tc-header">
    <div>
        <h1 class="tc-title">Create SIP Trunk</h1>
        <div class="tc-sub">Configure a new PJSIP trunk for inbound and outbound calls.</div>
    </div>
    <div class="d-flex align-items-center gap-2">
        <span class="tc-badge">SIP / PJSIP</span>
        <a href="{{ route('trunks.sip-trunks.index') }}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1">
            <x-lucide-arrow-left style="width:13px;height:13px;" /> Back
        </a>
    </div>
</div>

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

@if(session('success'))
    <div class="alert border-0 mb-3 py-2" style="background:rgba(34,197,94,.08);color:#15803d;font-size:.84rem;border-radius:8px;">
        {{ session('success') }}
    </div>
@endif

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

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

</form>

@endsection