@extends('layout.backend')
@section('title', 'Nova Especialidade')

@section('scripts')
@parent
@vite(['resources/js/speciality.js'])
@endsection

@section('content')

<x-form.header.button-bar>
    <x-form.header.button-back :route="route('specialities.index')" />
</x-form.header.button-bar>

<x-form.body title="Nova Especialidade" icon="fa-heartbeat"
    :form-action="route('specialities.store')"
    form-method="POST">

    {{-- ── Identificação ───────────────────────────────────────── --}}
    <x-form.section heading="Identificação" margins="mt-0 mb-2 px-2 pb-1" />

    <x-form.text name="name" :required="true" class="col-12 col-md-8"
        tooltip="Nome desta especialidade no sistema">
        Nome da Especialidade
    </x-form.text>

    <x-form.select name="bethelSpeciality_id" :items="$specialities"
        id="speciality_id" control-class="disableSelect2"
        :required="true" class="col-12 col-md-4"
        tooltip="Vínculo com a especialidade do manual hlc-9">
        Referência <em>hlc-9</em>
    </x-form.select>

    {{-- ── Informações da referência (populadas via JS) ─────────── --}}
    @include('backend.specialities._hlc9-card')

    {{-- ── Membros designados ───────────────────────────────────── --}}
    <x-form.section heading="Membros Designados" margins="mt-2 mb-2 px-2 pb-1" />

    <x-form.select name="new_hlc_users" :items="$hlcUsers" multiple
        :value="[]"
        placeholder="Escolha os membros COLIH"
        tooltip="Membros da COLIH designados para acompanhar esta especialidade"
        class="col-12 col-md-6">
        <i class="fas fa-user-shield mr-1 text-primary"></i> Membros COLIH
    </x-form.select>

    <x-form.select name="new_assist_users" :items="$assistUsers" multiple
        :value="[]"
        placeholder="Escolha os assistentes"
        tooltip="Assistentes designados para acompanhar esta especialidade"
        class="col-12 col-md-6">
        <i class="fas fa-user-friends mr-1 text-success"></i> Assistentes
    </x-form.select>

</x-form.body>

@endsection