@extends('layouts.master')

@section('title', 'Gerir Categorias')

@section('content')
<div class="container">
    <h2>Gerir Categorias</h2>

    <!-- Botão para abrir modal de criar nova categoria -->
    <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
        Nova Categoria
    </button>
    <form method="GET" action="{{ route('pages-starter') }}" class="mb-3">
        <div class="input-group">
            <input type="text" name="search" class="form-control" placeholder="Buscar por Nome, Tipo, Criado em ou Ícone..." value="{{ request('search') }}">
            <button type="submit" class="btn btn-primary">Buscar</button>
        </div>
    </form>
    
    
    
    
    <style>
    .drop-area {
        border: 2px dashed #ccc;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
    }
    
    .drop-area.drag-over {
        background-color: #f0f0f0;
    }
    </style>
    
    
    
    <!-- Verifica se existem categorias -->
    @if ($categories->count() > 0)
        <table class="table">
            <thead>
                <tr>
                    <th>Ícone</th>
                    <th>Nome</th>
                    <th>Tipo</th>
                    <th>Criado em</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($categories as $category)
                <tr>

                    <td>
                        <img src="{{ Str::startsWith($category->icon, 'http') ? $category->icon : asset('storage/'.$category->icon) }}" width="40" alt="Ícone">
                    </td>
                    <td>{{ $category->name }}</td>
                    <td>{{ ucfirst($category->type) }}</td> <!-- Mostra 'Produto' ou 'Serviço' -->
                    <td>{{ $category->created_at->format('d/m/Y H:i') }}</td>
                    <td>
                        <!-- Botão Editar (abre modal) -->
                        <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editCategoryModal{{ $category->id }}">Editar</button>

                        <!-- Botão Excluir (abre modal) -->
                        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal{{ $category->id }}">Excluir</button>
                    </td>
                </tr>

                <!-- Modal de Edição -->
                <div class="modal fade" id="editCategoryModal{{ $category->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Editar Categoria</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form action="{{ route('categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="modal-body">
                                    
                                    <label>Ícone Atual</label><br>
                                        @if ($category->icon)
                                            <img src="{{ asset('storage/'.$category->icon) }}" width="80" alt="Ícone Atual">
                                        @else
                                            <p>Sem ícone disponível.</p>
                                        @endif

                                        <input type="file" name="icon" class="form-control">

                                    
                                    <label>Nome</label>
                                    <input type="text" name="name" class="form-control" value="{{ $category->name }}" required>

                                    <label>Tipo</label>
                                    <select name="type" class="form-control" required>
                                        <option value="product" {{ $category->type == 'product' ? 'selected' : '' }}>Produto</option>
                                        <option value="service" {{ $category->type == 'service' ? 'selected' : '' }}>Serviço</option>
                                    </select>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-success">Salvar</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Modal de Exclusão -->


                
                <div class="modal fade" id="deleteCategoryModal{{ $category->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirmar Exclusão</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <p>Tem certeza que deseja excluir a categoria <strong>{{ $category->name }}</strong>?</p>
                            </div>
                            <div class="modal-footer">
                                <form id="deleteForm{{ $category->id }}" action="{{ route('pages-starter.destroycategoria', $category->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                </form>
                                
                                <button type="button" class="btn btn-danger" onclick="document.getElementById('deleteForm{{ $category->id }}').submit();">
                                    Excluir
                                </button>
                                
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </tbody>
        </table>

        <!-- Paginação -->
        {{ $categories->links('vendor.pagination.bootstrap-5') }}
        <style>
    .pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.pagination .page-item {
    margin: 0 3px;
}

.pagination .page-link {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
}

</style>
    @else
        <p>Nenhuma categoria cadastrada.</p>
    @endif
</div>

<!-- Modal de Criação -->
<div class="modal fade" id="createCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nova Categoria</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('pages-starter.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <label>Ícone</label>
                    <input type="file" name="icon" class="form-control">
                    
                    <label>Nome</label>
                    <input type="text" name="name" class="form-control" required>

                    <label>Tipo</label>
                    <select name="type" class="form-control" required>
                        <option value="product">Produto</option>
                        <option value="service">Serviço</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Salvar</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>

                </div>
            </form>
        </div>
    </div>
</div>

@endsection