@csrf
<div class="space-y-6">

    @php
        $user = Auth::user();
        $isCongresoRestricted = $user->isAdminCongreso() && $user->congreso_id;
        $selectedCongresoId = old('congreso_id', $plantilla->congreso_id ?? ($isCongresoRestricted ? $user->congreso_id : ''));
    @endphp

    <div>
        <x-input-label for="congreso_id" value="Congreso al que pertenece" />
        <select id="congreso_id" name="congreso_id"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
            required {{ $isCongresoRestricted ? 'disabled' : '' }}>
            @if($congresos->isEmpty())
                <option value="">No hay congresos disponibles</option>
            @else
                <option value="">Selecciona un congreso</option>
                @foreach($congresos as $congresoOption)
                    <option value="{{ $congresoOption->id }}" {{ $selectedCongresoId == $congresoOption->id ? 'selected' : '' }}>
                        {{ $congresoOption->nombre }}
                </option>
            @endforeach
        @endif
                </select>
        @if($isCongresoRestricted)
            <input type="hidden" name="congreso_id" value="{{ $selectedCongresoId }}">
        @endif
        <x-input-error class="mt-2" :messages="$errors->get('congreso_id')" />
            </div>

                <div>
        <x-input-label for="titulo" value="Título de la Constancia" />
        <x-text-input id="titulo" name="titulo" type="text" class="mt-1 block w-full" :value="old('titulo', $plantilla->titulo ?? '')" required />
        <x-input-error class="mt-2" :messages="$errors->get('titulo')" />
                </div>

                <div>
        <x-input-label for="contenido" value="Contenido (Texto)" />
        <textarea id="contenido" name="contenido" rows="8"
            class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full">{{ old('contenido', $plantilla->contenido ?? '') }}</textarea>
        <p class="mt-2 text-sm text-gray-500">
            Usa placeholders:
            <code class="text-blue-600">[NOMBRE_PARTICIPANTE]</code>,
            <code class="text-blue-600">[NOMBRE_CONGRESO]</code>
        </p>
        <x-input-error class="mt-2" :messages="$errors->get('contenido')" />
                </div>
    <div>
        <x-input-label for="fondo_path" value="Imagen de Fondo (Diseño/Membrete)" />
        <input id="fondo_path" name="fondo_path" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('fondo_path')" />
        @if (isset($plantilla) && $plantilla->fondo_path)
        <div class="mt-4">
                <p>Fondo actual:</p>
                <img src="{{ asset('storage/' . $plantilla->fondo_path) }}" alt="Fondo" class="h-40 w-auto rounded border">
        </div>
        @endif
                </div>

                <div>
        <x-input-label for="firma_path_1" value="Firma (Imagen PNG con transparencia)" />
        <input id="firma_path_1" name="firma_path_1" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('firma_path_1')" />
        @if (isset($plantilla) && $plantilla->firma_path_1)
            <div class="mt-4">
                <p>Firmante 1:</p>
                <img src="{{ asset('storage/' . $plantilla->firma_path_1) }}" alt="Firma"
                    class="h-20 w-auto rounded bg-gray-200 p-2">
                </div>
        @endif
        </div>
                <div>
        <x-input-label for="firma_path_2" value="Firma (Imagen PNG con transparencia)" />
        <input id="firma_path_2" name="firma_path_2" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('firma_path_2')" />
        @if (isset($plantilla) && $plantilla->firma_path_2)
            <div class="mt-4">
                <p>Firmante 2:</p>
                <img src="{{ asset('storage/' . $plantilla->firma_path_2) }}" alt="Firma"
                    class="h-20 w-auto rounded bg-gray-200 p-2">
                </div>
        @endif
                </div>
    <div>
        <x-input-label for="firma_path_3" value="Firma (Imagen PNG con transparencia)" />
        <input id="firma_path_3" name="firma_path_3" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('firma_path_3')" />
        @if (isset($plantilla) && $plantilla->firma_path_3)
            <div class="mt-4">
                <p>Firmante 3:</p>
                <img src="{{ asset('storage/' . $plantilla->firma_path_3) }}" alt="Firma"
                    class="h-20 w-auto rounded bg-gray-200 p-2">
                </div>
        @endif
                </div>

    <div class="mt-6 pt-6 border-t border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Ajustes de Posición (en Píxeles)</h3>
        <p class="mt-1 text-sm text-gray-600">Define dónde aparecerán los elementos en el PDF. Usa la "Vista Previa"
            para ajustar.</p>

        {{-- Name Position --}}
        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Nombre del Participante</label>
            <div class="grid grid-cols-3 gap-4 mt-2">
                <div>
                    <x-input-label for="nombre_top" value="Distancia desde Arriba (top)" />
                    <x-text-input id="nombre_top" name="nombre_top" type="number" class="mt-1 block w-full"
                        :value="old('nombre_top', $plantilla->nombre_top ?? 250)" />
        </div>
                <div>
                    <x-input-label for="nombre_left" value="Distancia desde Izquierda (left)" />
                    <x-text-input id="nombre_left" name="nombre_left" type="number" class="mt-1 block w-full"
                        :value="old('nombre_left', $plantilla->nombre_left ?? 100)" />
    </div>
                <div>
                    <x-input-label for="nombre_width" value="Ancho (width)" />
                    <x-text-input id="nombre_width" name="nombre_width" type="number" class="mt-1 block w-full"
                        :value="old('nombre_width', $plantilla->nombre_width ?? 600)" />
    </div>
</div>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <div>
                <x-input-label for="nombre_font_family" value="Fuente del Nombre" />
                <x-font-select name="nombre_font_family" :value="$plantilla->nombre_font_family ?? null" default="Times New Roman, serif" />
                <x-input-error class="mt-2" :messages="$errors->get('nombre_font_family')" />
            </div>

                <div>
                    <x-input-label for="nombre_font_size" value="Tamaño (px)" />
                    <x-text-input id="nombre_font_size" name="nombre_font_size" type="number" class="mt-1 block w-full"
                        :value="old('nombre_font_size', $plantilla->nombre_font_size ?? 28)" />
                </div>
                <div>
                    <x-input-label for="nombre_color" value="Color" />
                    <input id="nombre_color" name="nombre_color" type="color"
                        class="mt-1 block w-full h-10 border border-gray-300 rounded-md"
                        value="{{ old('nombre_color', $plantilla->nombre_color ?? '#000000') }}" />
                </div>
            </div>
        </div>

        {{-- Signature Height --}}
        <div class="mt-4">
            <x-input-label for="firma_height" value="Altura General de Firmas (height)" />
            <x-text-input id="firma_height" name="firma_height" type="number" class="mt-1 block w-full"
                :value="old('firma_height', $plantilla->firma_height ?? 80)" />
        </div>

        {{-- Posicion de la firma 1 --}}
        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Firma 1</label>
            <div class="grid grid-cols-2 gap-4 mt-2">
                <div>
                    <x-input-label for="firma1_bottom" value="Distancia desde Abajo (bottom)" />
                    <x-text-input id="firma1_bottom" name="firma1_bottom" type="number" class="mt-1 block w-full"
                        :value="old('firma1_bottom', $plantilla->firma1_bottom ?? 150)" />
                </div>
                <div>
                    <x-input-label for="firma1_left" value="Distancia desde Izquierda (left)" />
                    <x-text-input id="firma1_left" name="firma1_left" type="number" class="mt-1 block w-full"
                        :value="old('firma1_left', $plantilla->firma1_left ?? 150)" />
                </div>
            </div>
        </div>

       {{-- Posicion de la firma 2 --}}
        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Firma 2</label>
            <div class="grid grid-cols-2 gap-4 mt-2">
                <div>
                    <x-input-label for="firma2_bottom" value="Distancia desde Abajo (bottom)" />
                    <x-text-input id="firma2_bottom" name="firma2_bottom" type="number" class="mt-1 block w-full"
                        :value="old('firma2_bottom', $plantilla->firma2_bottom ?? 150)" />
                </div>
                <div>
                    <x-input-label for="firma2_right" value="Distancia desde Derecha (right)" />
                    <x-text-input id="firma2_right" name="firma2_right" type="number" class="mt-1 block w-full"
                        :value="old('firma2_right', $plantilla->firma2_right ?? 150)" />
                </div>
            </div>
        </div>

        {{-- Posicion de la firma 3 --}}
        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Firma 3 (Centrada)</label>
            <div class="grid grid-cols-2 gap-4 mt-2">
                <div>
                    <x-input-label for="firma3_bottom" value="Distancia desde Abajo (bottom)" />
                    <x-text-input id="firma3_bottom" name="firma3_bottom" type="number" class="mt-1 block w-full"
                        :value="old('firma3_bottom', $plantilla->firma3_bottom ?? 100)" />
                </div>
                <div>
                    <x-input-label for="firma3_left" value="Posición Horizontal (%)" />
                    <x-text-input id="firma3_left" name="firma3_left" type="number" class="mt-1 block w-full"
                        :value="old('firma3_left', $plantilla->firma3_left ?? 50)" />
                    <label for="firma3_center" class="inline-flex items-center mt-2">
                        <input id="firma3_center" name="firma3_center" type="checkbox"
                            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" value="1"
                            @checked(old('firma3_center', $plantilla->firma3_center ?? true))>
                        <span class="ml-2 text-sm text-gray-600">Centrar Horizontalmente</span>
                    </label>
                </div>
            </div>
        </div>

    </div>
    <div class="flex items-center gap-4">
        <x-primary-button>{{ $buttonText }}</x-primary-button>
        <a href="{{ route('admin.plantillas.index') }}" class="text-gray-600 hover:text-gray-900">Cancelar</a>
    </div>
</div>