@extends('layouts.admin')

@section('title', 'Gestión de Personal Administrativo')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Formulario de Creación -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                <i class="fas fa-user-plus text-blue-600"></i>
                Nuevo Personal
            </h2>

            @if($errors->any())
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li class="text-sm">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('admin.users.store-personal') }}" method="POST">
                @csrf

                <!-- Nombre -->
                <div class="mb-5">
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                        Nombre Completo *
                    </label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ old('name') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Juan Pérez"
                        required
                    >
                </div>

                <!-- Rol -->
                <div class="mb-5">
                    <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">
                        Rol *
                    </label>
                    <select id="role" name="role" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                        <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Administrador</option>
                        <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Usuario</option>
                    </select>
                </div>

                <!-- Email -->
                <div class="mb-5">
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                        Correo Electrónico *
                    </label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        value="{{ old('email') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="juan@example.com"
                        required
                    >
                </div>

                <!-- Teléfono -->
                <div class="mb-5">
                    <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">
                        Teléfono
                    </label>
                    <input 
                        type="tel" 
                        id="phone" 
                        name="phone" 
                        value="{{ old('phone') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="+51 999 999 999"
                    >
                </div>

                <!-- Contraseña -->
                <div class="mb-5">
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                        Contraseña *
                    </label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Mínimo 8 caracteres"
                        required
                    >
                    <p class="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
                </div>

                <!-- Confirmar Contraseña -->
                <div class="mb-6">
                    <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">
                        Confirmar Contraseña *
                    </label>
                    <input 
                        type="password" 
                        id="password_confirmation" 
                        name="password_confirmation" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Repite la contraseña"
                        required
                    >
                </div>

                <!-- Botón Enviar -->
                <button 
                    type="submit" 
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition transform hover:scale-105"
                >
                    <i class="fas fa-save mr-2"></i> Crear Personal
                </button>
            </form>
        </div>
    </div>

    <!-- Lista de Personal -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                <h2 class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fas fa-users-cog"></i>
                    Personal Administrativo
                    <span class="ml-2 bg-blue-800 px-3 py-1 rounded-full text-sm">{{ $personalAdmins->count() }}</span>
                </h2>
            </div>

            @if($personalAdmins->isEmpty())
                <div class="p-8 text-center">
                    <i class="fas fa-inbox text-6xl text-gray-300 mb-4 block"></i>
                    <p class="text-gray-500 text-lg">No hay personal administrativo registrado</p>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Nombre</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase hidden sm:table-cell">Email</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase hidden md:table-cell">Teléfono</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase">Fecha Creación</th>
                                <th class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach($personalAdmins as $admin)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-bold">
                                            {{ substr($admin->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <p class="font-bold text-gray-900">{{ $admin->name }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 hidden sm:table-cell">
                                    <p class="text-sm text-gray-600">{{ $admin->email }}</p>
                                </td>
                                <td class="px-6 py-4 hidden md:table-cell">
                                    <p class="text-sm text-gray-600">{{ $admin->phone ?? '-' }}</p>
                                </td>
                                <td class="px-6 py-4">
                                    <p class="text-sm text-gray-600">{{ $admin->created_at->locale('es')->format('d M, Y') }}</p>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <a href="{{ route('admin.users.edit-personal', $admin->id) }}" class="inline-flex items-center px-3 py-2 bg-yellow-100 hover:bg-yellow-600 text-yellow-600 hover:text-white rounded-lg text-sm font-semibold transition mr-2">
                                        <i class="fas fa-edit mr-1"></i>
                                        <span class="hidden sm:inline">Editar</span>
                                    </a>
                                    <form action="{{ route('admin.users.delete-personal', $admin->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button 
                                            type="submit" 
                                            onclick="return confirm('¿Estás seguro de eliminar a ' + '{{ $admin->name }}' + '?')"
                                            class="inline-flex items-center px-3 py-2 bg-red-100 hover:bg-red-600 text-red-600 hover:text-white rounded-lg text-sm font-semibold transition"
                                        >
                                            <i class="fas fa-trash mr-1"></i>
                                            <span class="hidden sm:inline">Eliminar</span>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Mensaje de Éxito -->
@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const message = "{{ session('success') }}";
        if (message) {
            alert(message);
        }
    });
</script>
@endif

@endsection