<div>
    {{-- Header fijo --}}
    <div class="fixed top-0 left-0 right-0 w-full bg-white flex items-center justify-between p-4 z-50 border-b border-gray-200">
        <div class="flex items-center">
            <img src="{{ Storage::url('images_static/tresipunt-square.svg') }}" alt="Logo" class="w-10 h-10 mr-3">
            <h1 class="text-2xl font-bold">Crear tutorial</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.tutorials.version.show', [$product, $tutorialVersion]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="tutorial-create-form"
                    wire:loading.attr="disabled"
                    class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove>Crear tutorial</span>
                <span wire:loading>Guardando...</span>
            </button>
        </div>
    </div>

    {{-- Contenido --}}
    <div class="w-full px-20 pt-24 pb-8">
        <div class="mx-auto max-w-5xl">
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">

                {{-- Información del producto y versión --}}
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Producto</label>
                            <p class="font-semibold text-gray-900">{{ $product->name }}</p>
                            <p class="text-xs text-gray-600 font-mono">{{ $product->slug }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Versión</label>
                            <p class="font-mono font-semibold text-gray-900">{{ $tutorialVersion->version }}</p>
                        </div>
                    </div>
                </div>

                <form wire:submit="save" id="tutorial-create-form" class="space-y-6">
                    {{-- Plataforma --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Plataforma *</label>
                        <select wire:model="platform"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('platform') border-red-500 @enderror">
                            <option value="youtube">YouTube</option>
                            <option value="vimeo">Vimeo</option>
                        </select>
                        @error('platform')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- El vídeo: se pega la URL o el id --}}
                    {{-- **Lo que uno tiene copiado es la URL.** Antes este campo pedía el id
                         pelado, así que había que abrir el enlace, buscar el trozo que es el
                         id, copiarlo sin el `&t=42s` que YouTube pega detrás y elegir la
                         plataforma a mano. Ahora se pega la URL entera y se resuelve sola.

                         Y es el único campo que puede estar mal **sin fallar aquí**: se
                         guarda cualquier cadena, el tutorial se sirve igual, y el vídeo no
                         se ve en la plataforma del cliente. --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">URL del vídeo o su ID *</label>
                        <input type="text" wire:model.live.debounce.400ms="videoid"
                            placeholder="Pega aquí la URL de YouTube o Vimeo"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('videoid') border-red-500 @enderror">
                        @error('videoid')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror

                        @if ($urlReconocida)
                            {{-- Se dice que se ha cambiado la plataforma, porque el usuario no
                                 lo ha pedido: un campo que se modifica solo y sin avisar
                                 desconcierta más de lo que ayuda. --}}
                            <p class="mt-1.5 text-xs" style="color:var(--success-500);">
                                Reconocido: se ha puesto el ID y la plataforma
                                <strong class="font-semibold">{{ $platform === 'vimeo' ? 'Vimeo' : 'YouTube' }}</strong>.
                            </p>
                        @endif

                        <div class="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
                            @if ($urlDelVideo)
                                {{-- Comprobar y copiar: la URL es la misma que la API manda al
                                     cliente en `video_url`, así que lo que se copia de aquí es
                                     lo que él va a abrir. --}}
                                <a href="{{ $urlDelVideo }}" target="_blank" rel="noopener"
                                   class="font-semibold" style="color:var(--text-link);">Comprobar el vídeo</a>

                                <span x-data="{ copiado: false }" class="inline-flex items-center gap-1">
                                    <button type="button"
                                            @click="copiarAlPortapapeles('{{ $urlDelVideo }}').then(ok => { if (ok) { copiado = true; setTimeout(() => copiado = false, 2000) } })"
                                            class="font-semibold" style="color:var(--text-link);">
                                        Copiar la URL
                                    </button>
                                    <span x-show="copiado" x-cloak style="color:var(--success-500);">copiada</span>
                                </span>
                            @endif

                            @if ($videoid !== '' && ! $idPareceValido)
                                {{-- No se bloquea el guardado —puede haber ids que no encajen
                                     en el patrón— pero se dice, porque el síntoma llega tarde
                                     y lejos: un hueco en blanco en el Moodle del cliente. --}}
                                <span style="color:var(--warning-500);">
                                    Este ID no tiene la forma habitual de
                                    {{ $platform === 'vimeo' ? 'Vimeo (solo números)' : 'YouTube (11 caracteres)' }}:
                                    comprueba que el vídeo se abre.
                                </span>
                            @elseif (! $urlDelVideo)
                                <span class="text-gray-500">
                                    Pega la URL del vídeo y se rellenan el ID y la plataforma.
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Título --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Título *</label>
                        <input type="text" wire:model="title"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('title') border-red-500 @enderror">
                        @error('title')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Descripción --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Descripción</label>
                        <textarea wire:model="desc" rows="3"
                            class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('desc') border-red-500 @enderror"></textarea>
                        @error('desc')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Estado y Orden --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {{-- Estado --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Estado *</label>
                            <select wire:model="status"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('status') border-red-500 @enderror">
                                <option value="draft">Borrador</option>
                                <option value="published">Publicado</option>
                                <option value="archived">Archivado</option>
                            </select>
                            @error('status')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Sort Order --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Orden</label>
                            <input type="number" wire:model="sort_order" min="0"
                                class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('sort_order') border-red-500 @enderror">
                            @error('sort_order')
                                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-gray-500 mt-1">Viene puesto el que le toca: quedará el último de la lista. Cámbialo si tiene que ir en otro sitio.</p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
