<x-app-layout>
    <x-slot name="header">
        Modificar Solicitud de Servicio #{{ $solicitud->numero }}
    </x-slot>

    <div class="bg-white shadow-lg rounded-sm border border-slate-200">
        <header class="px-5 py-4 border-b border-slate-100">
            <h2 class="font-semibold text-slate-800">Formulario de Modificación</h2>
        </header>

        <div class="p-5">
            <form method="POST" action="{{ route('solicitudes.update', $solicitud->id) }}" x-data="{ tipoMantenimiento: '{{ old('tipo_mantenimiento', $solicitud->tipo_mantenimiento) }}' }">
                @csrf
                @method('PUT')



                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <!-- Departamento a Enviar -->
                    <div>
                        <label class="block text-sm font-medium text-slate-800 mb-1" for="departamento_id">Departamento
                            a Enviar <span class="text-rose-500">*</span></label>
                        <select id="departamento_id" name="departamento_id" class="form-select w-full" required>
                            <option value="" disabled>Seleccione un departamento...</option>
                            @foreach($departamentos as $depto)
                                <option value="{{ $depto->id }}" {{ old('departamento_id', $solicitud->departamento_id) == $depto->id ? 'selected' : '' }}>
                                    {{ $depto->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('departamento_id')
                            <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ubicación Solicitud -->
                    <div>
                        <label class="block text-sm font-medium text-slate-800 mb-1" for="area_trabajo_id">Ubicación
                            Solicitud <span class="text-rose-500">*</span></label>
                        <select id="area_trabajo_id" name="area_trabajo_id" class="form-select w-full" required>
                            <option value="" disabled>Seleccione un área / ubicación...</option>
                            @foreach($areas as $area)
                                <option value="{{ $area->id }}" {{ old('area_trabajo_id', $solicitud->area_trabajo_id) == $area->id ? 'selected' : '' }}>
                                    {{ $area->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('area_trabajo_id')
                            <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- ── Campos específicos de Mantenimiento (FOR-DMPE-008) ── --}}
                    @if(($moduloActivo ?? 'tecnologia') === 'mantenimiento')
                        <!-- Tipo de Mantenimiento -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="tipo_mantenimiento">Tipo de Mantenimiento</label>
                            <select id="tipo_mantenimiento" name="tipo_mantenimiento" class="form-select w-full" x-model="tipoMantenimiento">
                                <option value="" disabled selected>Seleccione...</option>
                                @foreach($tiposMantenimiento as $tipo)
                                    <option value="{{ $tipo }}" {{ old('tipo_mantenimiento', $solicitud->tipo_mantenimiento) === $tipo ? 'selected' : '' }}>{{ $tipo }}</option>
                                @endforeach
                            </select>
                            @error('tipo_mantenimiento')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Condición del Equipo -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="condicion_equipo">Condición Actual del Equipo</label>
                            <select id="condicion_equipo" name="condicion_equipo" class="form-select w-full">
                                <option value="" disabled selected>Seleccione...</option>
                                @foreach($condicionesEquipo as $condicion)
                                    <option value="{{ $condicion }}" {{ old('condicion_equipo', $solicitud->condicion_equipo) === $condicion ? 'selected' : '' }}>{{ $condicion }}</option>
                                @endforeach
                            </select>
                            @error('condicion_equipo')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Equipo -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="equipo">Equipo</label>
                            <input id="equipo" name="equipo" type="text" class="form-input w-full" value="{{ old('equipo', $solicitud->equipo) }}" placeholder="Nombre o modelo del equipo">
                            @error('equipo')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- N° Activo -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="numero_activo">N° Activo</label>
                            <input id="numero_activo" name="numero_activo" type="text" class="form-input w-full" value="{{ old('numero_activo', $solicitud->numero_activo) }}" placeholder="Número de activo fijo / inventario">
                            @error('numero_activo')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Serial -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="serial">Serial</label>
                            <input id="serial" name="serial" type="text" class="form-input w-full" value="{{ old('serial', $solicitud->serial) }}" placeholder="Número de serial">
                            @error('serial')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Placa -->
                        <div>
                            <label class="block text-sm font-medium text-slate-800 mb-1" for="placa">Placa</label>
                            <input id="placa" name="placa" type="text" class="form-input w-full" value="{{ old('placa', $solicitud->placa) }}" placeholder="Número de placa (vehículos)">
                            @error('placa')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Tipo de Falla (Checkboxes) -->
                        <div class="md:col-span-2" x-show="tipoMantenimiento === 'CORRECTIVO'" x-transition>
                            <label class="block text-sm font-medium text-slate-800 mb-1">Tipo de Falla</label>
                            <div class="flex flex-wrap gap-4 mt-2 p-3 bg-slate-50 border border-slate-200 rounded-sm">
                                @php
                                    $selectedFallas = old('tipo_falla', $solicitud->tipo_falla ?? []);
                                    if (!is_array($selectedFallas)) {
                                        $selectedFallas = [$selectedFallas];
                                    }
                                @endphp
                                @foreach($tiposFalla as $falla)
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="tipo_falla[]" value="{{ $falla }}" class="form-checkbox text-amber-600 focus:ring-amber-500 rounded border-slate-300"
                                            {{ in_array($falla, $selectedFallas) ? 'checked' : '' }}>
                                        <span class="ml-2 text-sm text-slate-700 font-medium">{{ $falla }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @error('tipo_falla')
                                <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    @endif

                    <!-- Causa del Problema -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-slate-800 mb-1" for="descripcion">Descripción del
                            Problema o Servicio <span class="text-rose-500">*</span></label>
                        <textarea id="descripcion" name="descripcion" class="form-textarea w-full" rows="4"
                            required>{{ old('descripcion', $solicitud->descripcion) }}</textarea>
                        @error('descripcion')
                            <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Warning Text -->
                    <div class="col-span-1 md:col-span-2 text-center mt-2 mb-2">
                        <p class="text-gray-600 font-bold text-lg">Por favor, colocar en la observación un correo o
                            teléfono de contacto</p>
                    </div>

                    <!-- Observaciones Adicionales -->
                    <div class="col-span-1 md:col-span-2">
                        <label class="block text-sm font-medium text-slate-800 mb-1"
                            for="observaciones">Observaciones</label>
                        <textarea id="observaciones" name="observaciones" class="form-textarea w-full"
                            rows="2">{{ old('observaciones', $solicitud->observaciones) }}</textarea>
                        @error('observaciones')
                            <p class="text-xs mt-1 text-rose-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="flex items-center justify-end space-x-3 mt-8 border-t border-slate-200 pt-5">
                    <a href="{{ route('solicitudes.index') }}"
                        class="btn border-slate-200 hover:border-slate-300 text-slate-600">Cancelar</a>
                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md px-4 py-2 flex items-center shadow-md transition duration-150">
                        <svg class="w-4 h-4 fill-current shrink-0 mr-2" viewBox="0 0 16 16">
                            <path
                                d="M14.3 2.3L5 11.6 1.7 8.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0z" />
                        </svg>
                        <span>Actualizar Solicitud</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</x-app-layout>
