@extends('admin.layouts.app')

@section('title', 'Produtos')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Produtos</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Produtos</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <!-- Filtros -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Filtros de Busca</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.produtos.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Buscar</label>
                                    <input type="text" name="search" class="form-control" 
                                           value="{{ request('search') }}" placeholder="Nome do produto...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Categoria</label>
                                    <select name="categoria" class="form-control">
                                        <option value="">Todas as categorias</option>
                                        @foreach($categorias as $categoria)
                                            <option value="{{ $categoria->id }}" 
                                                {{ request('categoria') == $categoria->id ? 'selected' : '' }}>
                                                {{ $categoria->nome }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Status</label>
                                    <select name="status" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="disponivel" {{ request('status') == 'disponivel' ? 'selected' : '' }}>
                                            Disponível
                                        </option>
                                        <option value="indisponivel" {{ request('status') == 'indisponivel' ? 'selected' : '' }}>
                                            Indisponível
                                        </option>
                                        <option value="promocao" {{ request('status') == 'promocao' ? 'selected' : '' }}>
                                            Em Promoção
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Ordenar por</label>
                                    <select name="sort" class="form-control">
                                        <option value="nome" {{ request('sort') == 'nome' ? 'selected' : '' }}>Nome</option>
                                        <option value="preco" {{ request('sort') == 'preco' ? 'selected' : '' }}>Preço</option>
                                        <option value="created_at" {{ request('sort') == 'created_at' ? 'selected' : '' }}>Data</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Buscar
                                </button>
                                <a href="{{ route('admin.produtos.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Limpar
                                </a>
                                <a href="{{ route('admin.produtos.create') }}" class="btn btn-success float-right">
                                    <i class="fas fa-plus"></i> Novo Produto
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Lista de Produtos -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Lista de Produtos ({{ $produtos->total() }})</h3>
                    <div class="card-tools">
                        <div class="input-group input-group-sm" style="width: 150px;">
                            <input type="text" id="searchTable" class="form-control float-right" placeholder="Buscar na tabela...">
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-default">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-hover" id="produtosTable">
                        <thead>
                            <tr>
                                <th>Imagem</th>
                                <th>Nome</th>
                                <th>Categoria</th>
                                <th>Preço</th>
                                <th>Estoque</th>
                                <th>Status</th>
                                <th width="200">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($produtos as $produto)
                                <tr>
                                    <td>
                                        @if($produto->imagem_thumb)
                                            <img src="{{ Storage::url($produto->imagem_thumb) }}" 
                                                 alt="{{ $produto->nome }}" 
                                                 class="img-thumbnail" 
                                                 style="width: 50px; height: 50px; object-fit: cover;">
                                        @else
                                            <div class="bg-secondary text-center rounded" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                                <i class="fas fa-image text-white"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $produto->nome }}</strong>
                                        @if($produto->destaque)
                                            <span class="badge badge-warning ml-1">Destaque</span>
                                        @endif
                                        @if($produto->is_vegano)
                                            <span class="badge badge-success ml-1">Vegano</span>
                                        @endif
                                        @if($produto->sem_gluten)
                                            <span class="badge badge-info ml-1">Sem Glúten</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge" style="background-color: {{ $produto->categoria->cor ?? '#6c757d' }}">
                                            {{ $produto->categoria->nome }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($produto->preco_promocional)
                                            <div class="text-decoration-line-through text-muted">
                                                R$ {{ number_format($produto->preco, 2, ',', '.') }}
                                            </div>
                                            <strong class="text-success">
                                                R$ {{ number_format($produto->preco_promocional, 2, ',', '.') }}
                                            </strong>
                                            <div class="text-warning">
                                                <small>{{ $produto->porcentagem_desconto }}% OFF</small>
                                            </div>
                                        @else
                                            <strong>R$ {{ number_format($produto->preco, 2, ',', '.') }}</strong>
                                        @endif
                                    </td>
                                    <td>
                                        @if($produto->status_estoque == 'esgotado')
                                            <span class="badge badge-danger">Esgotado</span>
                                        @elseif($produto->status_estoque == 'baixo')
                                            <span class="badge badge-warning">Baixo ({{ $produto->estoque_atual }})</span>
                                        @else
                                            <span class="badge badge-success">{{ $produto->estoque_atual }}</span>
                                        @endif
                                        <small class="text-muted d-block">Mín: {{ $produto->estoque_minimo }}</small>
                                    </td>
                                    <td>
                                        @if($produto->disponivel)
                                            <span class="badge badge-success">
                                                <i class="fas fa-check"></i> Disponível
                                            </span>
                                        @else
                                            <span class="badge badge-danger">
                                                <i class="fas fa-times"></i> Indisponível
                                            </span>
                                        @endif
                                        @if($produto->promocao)
                                            <div class="badge badge-warning mt-1">
                                                <i class="fas fa-tag"></i> Promoção
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.produtos.show', $produto) }}" 
                                               class="btn btn-info btn-sm" title="Visualizar">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.produtos.edit', $produto) }}" 
                                               class="btn btn-warning btn-sm" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" 
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Mais ações">
                                                <i class="fas fa-cog"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <form method="POST" 
                                                      action="{{ route('admin.produtos.toggle-status', $produto) }}" 
                                                      class="d-inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="dropdown-item">
                                                        <i class="fas fa-toggle-{{ $produto->disponivel ? 'on' : 'off' }}"></i>
                                                        {{ $produto->disponivel ? 'Desativar' : 'Ativar' }}
                                                    </button>
                                                </form>
                                                
                                                @if(!$produto->promocao)
                                                    <a href="#" class="dropdown-item" 
                                                       data-toggle="modal" 
                                                       data-target="#modal-promocao-{{ $produto->id }}">
                                                        <i class="fas fa-tag"></i> Ativar Promoção
                                                    </a>
                                                @else
                                                    <form method="POST" 
                                                          action="{{ route('admin.produtos.toggle-promocao', $produto) }}" 
                                                          class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-times"></i> Finalizar Promoção
                                                        </button>
                                                    </form>
                                                @endif

                                                <form method="POST" 
                                                      action="{{ route('admin.produtos.toggle-destaque', $produto) }}" 
                                                      class="d-inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="dropdown-item">
                                                        <i class="fas fa-star"></i>
                                                        {{ $produto->destaque ? 'Remover Destaque' : 'Destacar' }}
                                                    </button>
                                                </form>

                                                <a href="#" class="dropdown-item" 
                                                   data-toggle="modal" 
                                                   data-target="#modal-estoque-{{ $produto->id }}">
                                                    <i class="fas fa-boxes"></i> Ajustar Estoque
                                                </a>

                                                <div class="dropdown-divider"></div>
                                                
                                                <a href="#" class="dropdown-item text-success" 
                                                   data-toggle="modal" 
                                                   data-target="#modal-clonar-{{ $produto->id }}">
                                                    <i class="fas fa-copy"></i> Clonar
                                                </a>

                                                <form method="POST" 
                                                      action="{{ route('admin.produtos.destroy', $produto) }}" 
                                                      class="d-inline"
                                                      onsubmit="return confirm('Tem certeza que deseja excluir este produto?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="dropdown-item text-danger">
                                                        <i class="fas fa-trash"></i> Excluir
                                                    </button>
                                                </form>
                                            </div>
                                        </div>

                                        <!-- Modais para ações -->
                                        @include('admin.produtos.modals', ['produto' => $produto])
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-search fa-2x mb-3"></i>
                                            <p>Nenhum produto encontrado</p>
                                            <a href="{{ route('admin.produtos.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus"></i> Criar primeiro produto
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($produtos->hasPages())
                    <div class="card-footer">
                        {{ $produtos->appends(request()->query())->links() }}
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Filtro rápido na tabela
    $('#searchTable').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('#produtosTable tbody tr').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });

    // Auto-submit form when filters change
    $('select[name="categoria"], select[name="status"], select[name="sort"]').on('change', function() {
        $(this).closest('form').submit();
    });
});
</script>
@endpush