{{-- resources/views/especies/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Espécies')

@section('header-title', 'Espécies')
@section('header-subtitle', 'Gerencie as espécies cadastradas')

@section('header-actions')
<a href="{{ route('especies.create') }}" 
   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    <i class="fas fa-plus mr-2"></i>Nova Espécie
</a>
@endsection

@section('filters')
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
    <form method="GET" action="{{ route('especies.index') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label for="search" class="block text-sm font-medium text-gray-700">Buscar</label>
            <input type="text" name="search" id="search" 
                   value="{{ request('search') }}"
                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                   placeholder="Descrição...">
        </div>
        
        <div>
            <label for="user_id" class="block text-sm font-medium text-gray-700">Responsável</label>
            <select name="user_id" id="user_id" 
                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                <option value="">Todos</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                        {{ $user->name }}
                    </option>
                @endforeach
            </select>
        </div>
        
        <div class="flex items-end space-x-2">
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-filter mr-2"></i>Filtrar
            </button>
            <a href="{{ route('especies.index') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-sync mr-2"></i>Limpar
            </a>
        </div>
    </form>
</div>
@endsection

@section('content')
<div class="bg-white shadow overflow-hidden sm:rounded-md">
    @if($especies->isEmpty())
        <div class="text-center py-12">
            <i class="fas fa-dragon text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Nenhuma espécie encontrada</h3>
            <p class="text-gray-500 mb-6">Comece cadastrando sua primeira espécie.</p>
            <a href="{{ route('especies.create') }}" 
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                <i class="fas fa-plus mr-2"></i>Cadastrar Espécie
            </a>
        </div>
    @else
        <ul class="divide-y divide-gray-200">
            @foreach($especies as $especie)
            <li class="hover:bg-gray-50 transition duration-150 ease-in-out">
                <div class="px-4 py-4 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-indigo-100">
                                    <i class="fas fa-dragon text-indigo-600"></i>
                                </div>
                                <div class="ml-4">
                                    <div class="flex items-center">
                                        <h4 class="text-sm font-medium text-gray-900 truncate">
                                            {{ $especie->descricao }}
                                        </h4>
                                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                            {{ $especie->subEspecies->count() }} subesp.
                                        </span>
                                    </div>
                                    <div class="mt-1">
                                        <div class="flex items-center text-sm text-gray-500">
                                            <i class="fas fa-user mr-1"></i>
                                            <span>{{ $especie->user->name }}</span>
                                            <span class="mx-1">•</span>
                                            <i class="fas fa-calendar mr-1"></i>
                                            <span>Criado em {{ $especie->created_at->format('d/m/Y') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <a href="{{ route('especies.show', $especie) }}" 
                               class="inline-flex items-center p-1.5 border border-gray-300 rounded-full text-gray-400 hover:text-indigo-600 hover:border-indigo-600 bg-white hover:bg-indigo-50 transition duration-150 ease-in-out"
                               title="Visualizar">
                                <i class="fas fa-eye h-4 w-4"></i>
                            </a>
                            <a href="{{ route('especies.edit', $especie) }}" 
                               class="inline-flex items-center p-1.5 border border-gray-300 rounded-full text-gray-400 hover:text-blue-600 hover:border-blue-600 bg-white hover:bg-blue-50 transition duration-150 ease-in-out"
                               title="Editar">
                                <i class="fas fa-edit h-4 w-4"></i>
                            </a>
                            <button type="button" 
                                    onclick="confirmDelete('{{ route('especies.destroy', $especie) }}', '{{ $especie->descricao }}')"
                                    class="inline-flex items-center p-1.5 border border-gray-300 rounded-full text-gray-400 hover:text-red-600 hover:border-red-600 bg-white hover:bg-red-50 transition duration-150 ease-in-out"
                                    title="Excluir">
                                <i class="fas fa-trash h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
        
        <!-- Pagination -->
        @if($especies->hasPages())
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            {{ $especies->withQueryString()->links() }}
        </div>
        @endif
    @endif
</div>
@endsection

@push('scripts')
<script>
function confirmDelete(url, name) {
    if (confirm(`Tem certeza que deseja excluir a espécie "${name}"?`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        form.innerHTML = `
            @csrf
            @method('DELETE')
        `;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endpush