@extends('layouts.main')

@section('title', 'Cadastro de Produtos')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="mb-0">Cadastro de Produtos</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#adicionarProdutoModal">
        Adicionar Produto
    </button>
</div>

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-todos-tab" data-bs-toggle="pill" data-bs-target="#pills-todos" type="button" role="tab" aria-controls="pills-todos" aria-selected="true">Todos</button>
    </li>
    @foreach ($categorias as $categoria)
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-{{ $categoria->id }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ $categoria->id }}" type="button" role="tab" aria-controls="pills-{{ $categoria->id }}" aria-selected="false">{{ $categoria->nome }}</button>
    </li>
    @endforeach
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-todos" role="tabpanel" aria-labelledby="pills-todos-tab">
        <div class="row">
            @foreach ($produtos as $produto)
            <div class="col-md-3 mb-4">
                <div class="card h-100">
                    <div class="card-img-container">
                        <img src="{{ $produto->imagem_path ? asset('storage/' . $produto->imagem_path) : 'https://via.placeholder.com/150' }}" class="card-img-top" alt="{{ $produto->nome }}">
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $produto->nome }}</h5>
                        <p class="card-text">R$ {{ number_format($produto->preco, 2, ',', '.') }}</p>
                        <p class="card-text text-muted">{{ $produto->categoria->nome }}</p>
                        <div class="mt-auto d-flex justify-content-between">
                            <a href="/produtos/{{ $produto->id }}/editar" class="btn btn-warning btn-sm text-white">Editar</a>
                            
                            <form action="/produtos/{{ $produto->id }}" method="POST" class="d-inline-block">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja remover este produto?')">Remover</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    
    @foreach ($categorias as $categoria)
    <div class="tab-pane fade" id="pills-{{ $categoria->id }}" role="tabpanel" aria-labelledby="pills-{{ $categoria->id }}-tab">
        <div class="row">
            @foreach ($produtos as $produto)
                @if ($produto->categoria_id == $categoria->id)
                <div class="col-md-3 mb-4">
                    <div class="card h-100">
                        <div class="card-img-container">
                            <img src="{{ $produto->imagem_path ? asset('storage/' . $produto->imagem_path) : 'https://via.placeholder.com/150' }}" class="card-img-top" alt="{{ $produto->nome }}">
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ $produto->nome }}</h5>
                            <p class="card-text">R$ {{ number_format($produto->preco, 2, ',', '.') }}</p>
                            <p class="card-text text-muted">{{ $produto->categoria->nome }}</p>
                            <div class="mt-auto d-flex justify-content-between">
                                <a href="/produtos/{{ $produto->id }}/editar" class="btn btn-warning btn-sm text-white">Editar</a>
                                
                                <form action="/produtos/{{ $produto->id }}" method="POST" class="d-inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Tem certeza que deseja remover este produto?')">Remover</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach
        </div>
    </div>
    @endforeach
</div>

<div class="modal fade" id="adicionarProdutoModal" tabindex="-1" aria-labelledby="adicionarProdutoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="adicionarProdutoModalLabel">Adicionar Novo Produto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/produtos" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome do Produto</label>
                        <input type="text" class="form-control" id="nome" name="nome" required>
                    </div>
                    <div class="mb-3">
                        <label for="preco" class="form-label">Preço</label>
                        <input type="number" step="0.01" class="form-control" id="preco" name="preco" required>
                    </div>
                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoria</label>
                        <select class="form-select" id="categoria" name="categoria_id" required>
                            <option value="">Selecione uma categoria</option>
                            @foreach ($categorias as $categoria)
                            <option value="{{ $categoria->id }}">{{ $categoria->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="imagem" class="form-label">Imagem do Produto</label>
                        <input type="file" class="form-control" id="imagem" name="imagem">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Salvar Produto</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection