@extends('layouts.app')

@section('title', 'Admin - Usuarios')
@section('content')

@vite('resources/css/scss/data_picker.scss')

<div class="p-4 w-full">
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <h1 class="text-3xl font-bold mb-6 dark:text-gray-400">Listado de Usuarios</h1>
        <a href="{{ route('admin.users.create') }}"
            class="bg-sky-600 hover:bg-sky-700 text-white px-3 py-1 text-sm rounded">
            Crear
        </a>
    </div>

    @include('../../validaciones')

    <!-- Tabla de usuarios -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">

        <!-- Formulario de búsqueda y filtros -->
        <form method="GET" action="{{ route('admin.users') }}" class="mt-4">
            <div class="flex flex-wrap gap-2 items-center">
                <input id="nombre" type="text" name="name" placeholder="Buscar por nombre" value="{{ request('name') }}"
                    class="border border-gray-300 dark:border-gray-200 p-1 text-sm rounded-md dark:bg-gray-700 dark:text-white 
                       focus:ring-2 focus:ring-blue-900 dark:focus:ring-blue-400" />

                <input id="from_date" name="from_date" value="{{ request('from_date') }}" class="datepicker border border-gray-300 dark:border-gray-600 p-1 text-sm rounded-md dark:bg-gray-700 dark:text-white 
                       focus:ring-2 focus:ring-blue-900 dark:focus:ring-blue-400" placeholder="Desde" />

                <input id="to_date" name="to_date" value="{{ request('to_date') }}" class="datepicker border border-gray-300 dark:border-gray-600 p-1 text-sm rounded-md dark:bg-gray-700 dark:text-white 
                       focus:ring-2 focus:ring-blue-900 dark:focus:ring-blue-400" placeholder="Hasta" />

                <div class="flex space-x-2 mt-2">
                    <button type="submit" class="bg-sky-600 hover:bg-sky-700 text-white px-3 py-1 text-sm rounded">
                        Filtrar
                    </button>
                    <button type="button" id="resetFilters"
                        class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 text-sm rounded">
                        Ver Todo
                    </button>
                </div>
            </div>
        </form>



        <!-- Botones para exportar -->
        <div class="flex space-x-2 mt-4 mb-2">
            <a href="{{ route('admin.users.export', ['format' => 'pdf', 'name' => request('name'), 'from_date' => request('from_date'), 'to_date' => request('to_date')]) }}"
                class="bg-teal-600 hover:bg-teal-700 text-white px-3 py-1 text-sm rounded">
                Exportar a PDF
            </a>
            <a href="{{ route('admin.users.export', ['format' => 'excel', 'name' => request('name'), 'from_date' => request('from_date'), 'to_date' => request('to_date')]) }}"
                class="bg-sky-600 hover:bg-sky-700 text-white px-3 py-1 text-sm rounded">
                Exportar a Excel
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gradient-to-r from-cyan-600 to-cyan-700 text-cyan-200 text-left">
                        <th class="p-3">Imagen</th>
                        <th class="p-3">Nombre</th>
                        <th class="p-3">Email</th>
                        <th class="p-3">Fecha de Creación</th>
                        <th class="p-3 text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                    <tr
                        class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition">
                        <td class="p-3">
                            @if ($user->avatar)
                            <div class="mt-2">
                                <img src="{{ asset('storage/avatars/'.$user->id.'/'.$user->avatar) }}"
                                    class="w-12 h-12 rounded-full object-cover" alt="Avatar">
                            </div>
                            @else
                            <i class="fas fa-user fa-2x dark:text-gray-400"></i>
                            @endif
                        </td>
                        <td class="p-3 dark:text-gray-400">{{ $user->name }}</td>
                        <td class="p-3 dark:text-gray-400">{{ $user->email }}</td>
                        <td class="p-3 dark:text-gray-400">{{ $user->created_at->format('d/m/Y H:i') }}</td>
                        <td class="p-3 text-center">
                            @if ($user->token == null)
                            <form method="POST" action="{{ route('admin.generate_token', $user->id) }}" class="inline">
                                @csrf
                                <button type="submit"
                                    class="text-sky-500 hover:text-sky-700 dark:text-sky-600 mx-2 cursor-pointer"
                                    style="background: none; border: none;">
                                    <i class="fas fa-key"></i>
                                </button>
                            </form>
                            @endif
                            <a href="{{ route('admin.users.show', $user->id) }}"
                                class="text-sky-500 hover:text-sky-700 dark:text-sky-600 mx-2">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('admin.users.edit', $user->id) }}"
                                class="text-teal-500 hover:text-teal-700 dark:text-teal-600 mx-2">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST"
                                class="inline deleteForm">
                                @csrf
                                @method('DELETE')
                                <button style="cursor:pointer" type="submit"
                                    class="text-red-600 hover:text-red-800 dark:text-red-700 mx-2 deleteButton">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-300">
                            No hay usuarios que coincidan con la búsqueda.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>


    </div>

</div>
@endsection

@vite('resources/js/datepicker_filtros.js')
@vite('resources/js/alert.js')