@extends('admin.layouts.app')

@section('title', 'Categorias')

@section('content')
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">
                    <i class="fas fa-tags"></i>
                    Gerenciamento de Categorias
                </h1>
                <div>
                    <a href="{{ route('admin.categorias.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Nova Categoria
                    </a>
                    <a href="{{ route('admin.categorias.importar.form') }}" class="btn btn-outline-info">
                        <i class="fas fa-file-import"></i> Importar CSV
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Total</h5>
                            <h2>{{ $estatisticas['total'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-tags fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Ativas</h5>
                            <h2>{{ $estatisticas['ativas'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Com Produtos</h5>
                            <h2>{{ $estatisticas['com_produtos'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-box fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Destacadas</h5>
                            <h2>{{ $estatisticas['ativas'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-star fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.categorias.index') }}">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="busca">Buscar</label>
                            <input type="text" class="form-control" id="busca" name="busca" 
                                   placeholder="Nome ou descrição..." 
                                   value="{{ request('busca') }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">Todos</option>
                                <option value="ativa" {{ request('status') == 'ativa' ? 'selected' : '' }}>Ativa</option>
                                <option value="inativa" {{ request('status') == 'inativa' ? 'selected' : '' }}>Inativa</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Filtrar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div class="d-grid">
                                <a href="{{ route('admin.categorias.index') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times"></i> Limpar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista de Categorias -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-list"></i> Lista de Categorias
                <span class="badge bg-secondary">{{ $categorias->total() }}</span>
            </h5>
        </div>
        <div class="card-body">
            @if($categorias->count() > 0)
                <div class="row">
                    @foreach($categorias as $categoria)
                        <div class="col-md-4 col-lg-3 mb-3">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    @if($categoria->imagem)
                                        <img src="{{ asset('storage/' . $categoria->imagem) }}" 
                                             alt="{{ $categoria->nome }}" 
                                             class="rounded-circle mb-3" 
                                             width="80" height="80"
                                             style="object-fit: cover;">
                                    @else
                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" 
                                             style="width: 80px; height: 80px;">
                                            <i class="fas fa-tag text-white fa-2x"></i>
                                        </div>
                                    @endif
                                    
                                    <h6 class="card-title">{{ $categoria->nome }}</h6>
                                    
                                    @if($categoria->descricao)
                                        <p class="card-text">
                                            <small class="text-muted">{{ Str::limit($categoria->descricao, 50) }}</small>
                                        </p>
                                    @endif
                                    
                                    <div class="mb-2">
                                        @switch($categoria->status)
                                            @case('ativa')
                                                <span class="badge bg-success">Ativa</span>
                                                @break
                                            @case('inativa')
                                                <span class="badge bg-danger">Inativa</span>
                                                @break
                                        @endswitch
                                        
                                        @if($categoria->destacar)
                                            <span class="badge bg-warning">
                                                <i class="fas fa-star"></i> Destaque
                                            </span>
                                        @endif
                                    </div>
                                    
                                    <div class="mb-3">
                                        <small class="text-muted">
                                            <i class="fas fa-box"></i> 
                                            {{ $categoria->produtos_count }} produtos
                                        </small>
                                        @if($categoria->ordem)
                                            <br><small class="text-muted">
                                                <i class="fas fa-sort"></i> Ordem: {{ $categoria->ordem }}
                                            </small>
                                        @endif
                                    </div>
                                    
                                    <div class="btn-group w-100" role="group">
                                        <a href="{{ route('admin.categorias.show', $categoria) }}" 
                                           class="btn btn-sm btn-outline-primary" 
                                           title="Visualizar">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.categorias.edit', $categoria) }}" 
                                           class="btn btn-sm btn-outline-warning" 
                                           title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" 
                                                class="btn btn-sm btn-outline-danger" 
                                                title="Excluir"
                                                onclick="confirmarExclusao({{ $categoria->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <form id="form-excluir-{{ $categoria->id }}" 
                                  action="{{ route('admin.categorias.destroy', $categoria) }}" 
                                  method="POST" 
                                  style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    @endforeach
                </div>

                <!-- Paginação -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div>
                        <small class="text-muted">
                            Mostrando {{ $categorias->firstItem() }} a {{ $categorias->lastItem() }} 
                            de {{ $categorias->total() }} resultados
                        </small>
                    </div>
                    <div>
                        {{ $categorias->links() }}
                    </div>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-tags fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Nenhuma categoria encontrada</h5>
                    <p class="text-muted">Comece criando sua primeira categoria.</p>
                    <a href="{{ route('admin.categorias.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Criar Categoria
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Dashboard GPS -->
<div class="fixed-bottom" style="right: 20px; bottom: 20px; z-index: 1000;">
    <a href="{{ route('admin.gps.dashboard') }}" 
       class="btn btn-info rounded-circle" 
       style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;"
       title="Dashboard GPS">
        <i class="fas fa-map-marked-alt fa-lg"></i>
    </a>
</div>

@endsection

@section('scripts')
<script>
function confirmarExclusao(id) {
    if (confirm('Tem certeza que deseja excluir esta categoria? Esta ação não pode ser desfeita.')) {
        document.getElementById('form-excluir-' + id).submit();
    }
}

// Auto-refresh para updates em tempo real
@if(request()->filled('status') || request()->filled('busca'))
// Se há filtros ativos, não fazer auto-refresh
@else
// Auto-refresh a cada 2 minutos
setInterval(function() {
    // Apenas atualizar se não estiver com modal aberto ou formulário ativo
    if (!document.querySelector('.modal.show') && !document.querySelector('input:focus')) {
        location.reload();
    }
}, 120000);
@endif
</script>
@endsection