@php
    $diasSemana = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
    $horas = ['09:30','10:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00'];

    $diasSeleccionados = [];
    foreach ([1, 2, 3] as $numero) {
        $oldDias = old('dia_' . $numero);
        if (is_array($oldDias)) {
            $diasSeleccionados[$numero] = $oldDias;
        } else {
            $valor = $client->{'dia_' . $numero};
            $diasSeleccionados[$numero] = $valor
                ? array_values(array_filter(array_map('trim', explode(',', $valor))))
                : [];
        }
    }
@endphp

@if ($errors->any())
    <div class="mb-6 rounded-md bg-red-50 p-4 text-red-700">
        <strong>Revisa estos campos:</strong>
        <ul class="mt-2 list-disc pl-5">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<h3 class="text-lg font-bold text-gray-700 mb-4">Datos del alumno/a</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div>
        <label for="nombre" class="block text-sm font-medium text-gray-700">Nombre</label>
        <input type="text" name="nombre" id="nombre" value="{{ old('nombre', $client->nombre) }}" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="apellidos" class="block text-sm font-medium text-gray-700">Apellidos</label>
        <input type="text" name="apellidos" id="apellidos" value="{{ old('apellidos', $client->apellidos) }}" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
        <input type="email" name="email" id="email" value="{{ old('email', $client->email) }}" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="email_2" class="block text-sm font-medium text-gray-700">Email 2 (Opcional)</label>
        <input type="email" name="email_2" id="email_2" value="{{ old('email_2', $client->email_2) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="fecha_nacimiento" class="block text-sm font-medium text-gray-700">Fecha de nacimiento</label>
        <input type="date" name="fecha_nacimiento" id="fecha_nacimiento" value="{{ old('fecha_nacimiento', $client->fecha_nacimiento) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="telefono_1" class="block text-sm font-medium text-gray-700">Teléfono 1 (Opcional)</label>
        <input type="tel" name="telefono_1" id="telefono_1" value="{{ old('telefono_1', $client->telefono_1) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div>
        <label for="telefono_2" class="block text-sm font-medium text-gray-700">Teléfono 2 (Opcional)</label>
        <input type="tel" name="telefono_2" id="telefono_2" value="{{ old('telefono_2', $client->telefono_2) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
    <div class="md:col-span-2">
        <label for="tutor" class="block text-sm font-medium text-gray-700">Tutor/madre/padre (Opcional)</label>
        <input type="text" name="tutor" id="tutor" value="{{ old('tutor', $client->tutor) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
    </div>
</div>

<hr class="my-6">
<h3 class="text-xl font-bold text-gray-700 mb-4">Actividades</h3>

@foreach ([1, 2, 3] as $numero)
    @php
        $actividadActual = old('actividad_' . $numero, $client->{'actividad_' . $numero});
        $horaActual = old('hora_' . $numero, $client->{'hora_' . $numero});
    @endphp

    <div class="p-4 border border-gray-200 rounded-md mb-4">
        <label for="actividad_{{ $numero }}" class="block text-sm font-medium text-gray-700">
            Actividad {{ $numero }} {{ $numero > 1 ? '(Opcional)' : '' }}
        </label>
        <select name="actividad_{{ $numero }}" id="actividad_{{ $numero }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option value="">{{ $numero === 1 ? 'Selecciona una actividad' : 'Sin actividad' }}</option>
            @foreach ($classes->groupBy(fn($class) => $class->categoria ?: 'OTRAS') as $categoria => $clasesCategoria)
                <optgroup label="{{ $categoria }}">
                    @foreach ($clasesCategoria as $class)
                        <option value="{{ $class->id }}" {{ (string) $actividadActual === (string) $class->id ? 'selected' : '' }}>
                            {{ ucwords(strtolower($class->nombre)) }}@if($class->descripcion) ({{ $class->descripcion }})@endif
                        </option>
                    @endforeach
                </optgroup>
            @endforeach
        </select>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
            <div class="min-w-0">
                <span class="block text-sm font-medium text-gray-700 mb-2">Días (Opcional)</span>
                <div class="flex flex-wrap gap-x-3 gap-y-2">
                    @foreach ($diasSemana as $dia)
                        <label class="inline-flex items-center whitespace-nowrap">
                            <input type="checkbox" name="dia_{{ $numero }}[]" value="{{ $dia }}"
                                {{ in_array($dia, $diasSeleccionados[$numero], true) ? 'checked' : '' }}
                                class="rounded border-gray-300 text-fuchsia-700 focus:ring-fuchsia-500">
                            <span class="ml-2 text-sm">{{ $dia }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div>
                <label for="hora_{{ $numero }}" class="block text-sm font-medium text-gray-700">Hora (Opcional)</label>
                <select name="hora_{{ $numero }}" id="hora_{{ $numero }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                    <option value="">Selecciona una hora</option>
                    @foreach ($horas as $hora)
                        <option value="{{ $hora }}" {{ $horaActual === $hora ? 'selected' : '' }}>{{ $hora }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
@endforeach

<hr class="my-6">
<h3 class="text-lg font-bold text-gray-700 mb-4">Información importante</h3>
<div class="space-y-6">
    <div>
        <label class="block text-sm font-medium text-gray-700">¿Padece alguna enfermedad?</label>
        <div class="mt-2 flex gap-6">
            <label class="inline-flex items-center">
                <input type="radio" name="padece_enfermedad" value="1" id="enfermedad_si" required
                    {{ (string) old('padece_enfermedad', (int) $client->padece_enfermedad) === '1' ? 'checked' : '' }}
                    class="form-radio text-fuchsia-700 focus:ring-fuchsia-500">
                <span class="ml-2 text-sm">Sí</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" name="padece_enfermedad" value="0" id="enfermedad_no"
                    {{ (string) old('padece_enfermedad', $client->exists ? (int) $client->padece_enfermedad : 0) === '0' ? 'checked' : '' }}
                    class="form-radio text-fuchsia-700 focus:ring-fuchsia-500">
                <span class="ml-2 text-sm">No</span>
            </label>
        </div>
    </div>

    <div id="enfermedad_especificacion_div" style="display:none;">
        <label for="enfermedad_especificacion" class="block text-sm font-medium text-gray-700">Especificación de la enfermedad</label>
        <textarea name="enfermedad_especificacion" id="enfermedad_especificacion" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('enfermedad_especificacion', $client->enfermedad_especificacion) }}</textarea>
    </div>

    <div>
        <label for="comentarios" class="block text-sm font-medium text-gray-700">Comentarios (Opcional)</label>
        <textarea name="comentarios" id="comentarios" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('comentarios', $client->comentarios) }}</textarea>
    </div>

    <div class="p-4 border border-gray-200 rounded-md">
        <p class="font-medium text-gray-700 mb-3">Autorización de uso de imagen</p>
        <div class="flex flex-col sm:flex-row gap-4">
            <label class="inline-flex items-center">
                <input type="radio" name="autorizacion_imagen" value="1" required
                    {{ (string) old('autorizacion_imagen', $client->exists ? (int) $client->autorizacion_imagen : '') === '1' ? 'checked' : '' }}
                    class="form-radio text-fuchsia-700 focus:ring-fuchsia-500">
                <span class="ml-2 text-sm">Sí autoriza</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" name="autorizacion_imagen" value="0"
                    {{ (string) old('autorizacion_imagen', $client->exists ? (int) $client->autorizacion_imagen : '') === '0' ? 'checked' : '' }}
                    class="form-radio text-fuchsia-700 focus:ring-fuchsia-500">
                <span class="ml-2 text-sm">No autoriza</span>
            </label>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4">
        <label class="flex items-center">
            <input type="checkbox" name="acepto_datos_personales" value="1"
                {{ old('acepto_datos_personales', $client->acepto_datos_personales) ? 'checked' : '' }}
                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
            <span class="ml-2 text-sm text-gray-600">Aceptó el uso de datos personales con fines administrativos internos</span>
        </label>
        <label class="flex items-center">
            <input type="checkbox" name="acepto_condiciones" value="1"
                {{ old('acepto_condiciones', $client->acepto_condiciones) ? 'checked' : '' }}
                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
            <span class="ml-2 text-sm text-gray-600">Aceptó las condiciones y normas</span>
        </label>
    </div>
</div>

<div class="mt-8 flex justify-end">
    <a href="{{ route('admin.clients.index') }}" class="bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 px-4 rounded mr-2">Cancelar</a>
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Guardar Cliente</button>
</div>

<script>
    const actividades = [1, 2, 3];

    function tieneActividad(select) {
        return select && select.value !== '' && select.value !== '0';
    }

    function actualizarDiaHora(numero) {
        const actividad = document.getElementById(`actividad_${numero}`);
        const dias = document.querySelectorAll(`input[name="dia_${numero}[]"]`);
        const hora = document.getElementById(`hora_${numero}`);
        const seleccionada = tieneActividad(actividad);

        dias.forEach(dia => {
            dia.disabled = !seleccionada;
            if (!seleccionada) dia.checked = false;
        });

        if (hora) {
            hora.disabled = !seleccionada;
            if (!seleccionada) hora.value = '';
        }
    }

    function actualizarActividadesDisponibles() {
        const valoresSeleccionados = actividades
            .map(numero => document.getElementById(`actividad_${numero}`)?.value)
            .filter(valor => valor && valor !== '0');

        actividades.forEach(numero => {
            const select = document.getElementById(`actividad_${numero}`);
            if (!select) return;
            const valorActual = select.value;

            Array.from(select.options).forEach(option => {
                if (!option.value || option.value === '0') {
                    option.disabled = false;
                    return;
                }
                option.disabled = valoresSeleccionados.includes(option.value) && option.value !== valorActual;
            });
        });
    }

    function actualizarFormulario() {
        actividades.forEach(actualizarDiaHora);
        actualizarActividadesDisponibles();
    }

    actividades.forEach(numero => {
        document.getElementById(`actividad_${numero}`)?.addEventListener('change', actualizarFormulario);
    });

    const enfermedadSi = document.getElementById('enfermedad_si');
    const enfermedadNo = document.getElementById('enfermedad_no');
    const especificacionDiv = document.getElementById('enfermedad_especificacion_div');

    function toggleEnfermedadEspecificacion() {
        if (!especificacionDiv || !enfermedadSi) return;
        especificacionDiv.style.display = enfermedadSi.checked ? 'block' : 'none';
    }

    enfermedadSi?.addEventListener('change', toggleEnfermedadEspecificacion);
    enfermedadNo?.addEventListener('change', toggleEnfermedadEspecificacion);

    actualizarFormulario();
    toggleEnfermedadEspecificacion();
</script>