@extends('layouts.edit')

<x-app-layout>
    <x-slot name="header"></x-slot>
    <div class="py-20">
        <div class="bg-white overflow-hidden shadow-2xl sm:rounded-lg p-4 max-w-7xl mx-auto my-4 border">
            <h2 class="font-semibold mb-4 text-center text-2xl">Editar Usuario</h2>
            <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

                <!-- 📌 Información del Usuario (No editable) -->
                <div class="w-full">
                    <!-- Nombre de la Tabla -->
                    <h2 class="text-xl font-bold text-center mb-4 text-gray-800">Información del Usuario</h2>

                    <!-- Tabla de Respuestas -->
                    <table class="w-full text-sm border border-gray-200 rounded-lg shadow-md">
                        <tbody>
                            <tr class="bg-gray-100 border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Cédula:</td>
                                <td class="px-4 py-2">{{ old('cedula', $user->cedula) }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Primer Nombre:</td>
                                <td class="px-4 py-2">{{ old('primer_nombre', $user->primer_nombre) }}</td>
                            </tr>
                            <tr class="bg-gray-100 border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Segundo Nombre:</td>
                                <td class="px-4 py-2">{{ old('segundo_nombre', $user->segundo_nombre) }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Primer Apellido:</td>
                                <td class="px-4 py-2">{{ old('primer_apellido', $user->primer_apellido) }}</td>
                            </tr>
                            <tr class="bg-gray-100 border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Segundo Apellido:</td>
                                <td class="px-4 py-2">{{ old('segundo_apellido', $user->segundo_apellido) }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Correo electrónico:</td>
                                <td class="px-4 py-2">{{ old('email', $user->email) }}</td>
                            </tr>
                            <tr class="bg-gray-100 border-b">
                                <td class="font-semibold px-4 py-2 text-gray-700">Departamento:</td>
                                <td class="px-4 py-2">{{ old('departamento', $user->departamento) }}</td>
                            </tr>
                            <tr>
                                <td class="font-semibold px-4 py-2 text-gray-700">Cargo:</td>
                                <td class="px-4 py-2 ">{{ old('cargo', $user->cargo) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- ✏️ Formulario de Edición (Solo campos editables) -->
                <div class="border rounded-lg shadow-md p-4 bg-white">
                    <h3 class="text-lg font-semibold mb-3 text-center">Editar Información</h3>

                    <form action="{{ route('admin.updateUser', $user->id) }}" method="POST" class="space-y-4">
                        @csrf
                        @method('PUT')


                        <!-- Extensión -->
                        <div>
                            <label for="extension" class="block text-sm font-medium text-gray-700">Extensión</label>
                            <x-input type="text" class="mt-1 block w-full" id="extension" name="extension"
                                value="{{ old('extension', $user->extension) }}"></x-input>
                        </div>

                        @hasrole(['admin-sistema'])
                            <!-- Rol -->
                            <div>
                                <label for="rol" class="block text-sm font-medium text-gray-700">Rol</label>
                                <select class="form-control mt-1 block w-full border-gray-300 rounded-md" id="rol"
                                    name="rol">
                                    <option value="">{{ __('Seleccione un rol') }}</option>
                                    @foreach ($roles as $rol)
                                        <option value="{{ $rol->name }}"
                                            {{ old('rol', $user->rol) == $rol->name ? 'selected' : '' }}>
                                            {{ $rol->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endhasrole

                        <!-- Botones para Guardar o Cancelar -->
                        <div class="flex justify-center gap-4 mt-6">
                            <x-button type="button"
                            onclick="event.preventDefault();
                                     window.location.href='{{ route('admin.users') }}';
                                     toastr.success('Operación realizada con éxito');"
                            class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                      Actualizar
                  </x-button>


                            <a href="{{ route('admin.users') }}"
                                class="px-6 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition">
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</x-app-layout>