<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- Pace.js CSS (Tema Minimalista) -->
    <link href="https://cdn.jsdelivr.net/npm/pace-js@latest/themes/black/pace-theme-minimal.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Pace.js Script -->
    <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
    <style>
        body {
            /* padding-top: 80px; */
        }

        .dropdown-menu {
            display: none;
            /* Esconde o submenu por padrão */
        }

        .dropdown:hover .dropdown-menu {
            display: block;
            /* Exibe o submenu ao passar o mouse sobre o item pai */
        }

        /* PACE */
        /* This is a compiled file, you should be editing the file in the templates directory */
        .pace {
            -webkit-pointer-events: none;
            pointer-events: none;

            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .pace-inactive {
            display: none;
        }

        .pace .pace-progress {
            background: #fb923c;
            position: fixed;
            z-index: 2000;
            top: 0;
            right: 100%;
            width: 100%;
            height: 2px;
        }
    </style>
</head>

<body x-data="catalogoProdutos()" x-init="init()">

    <nav class="p-2 mb-4" x-bind:style="{ backgroundColor: navbarBgColor, color: navbarTextColor}">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <i class="fa fa-usd" aria-hidden="true"></i> Pedido minímo: R$ 10,00
                </div>
                <div class="col-auto">
                    <i class="fa fa-user" aria-hidden="true"></i> Olá Elias
                </div>
            </div>
        </div>
    </nav>
    <div id="desktop-logo">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <div class="d-flex gap-2 align-items-center">
                        <img class="rounded-circle" :src="brandImgSrc" alt="" style="width: 60px;height: 60px;">
                        <div class="fs-3 text-wrap fw-bold" x-text="brandName">Mens Collections.</div>
                    </div>
                </div>
                <div class="col">
                    <div class="d-flex align-items-center h-100 px-4">
                        <input type="text" class="form-control form-control-lg" x-model="termoBusca"
                            @input="filtrarProdutos()" placeholder="" />
                    </div>
                </div>
                <div class="col-auto">
                    <a href="" class="text-decoration-none"><span class="fs-1"><i class="fa fa-shopping-bag"
                                aria-hidden="true"></i></span></a>
                </div>
            </div>
        </div>
    </div>
    <div id="desktop-navbar" class=" border-top border-bottom mt-4 mb-4 py-2 bg-white">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="d-flex h-100 align-items-center">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link link-dark " aria-current="page" href="#">
                                    <i class="fa fa-home" aria-hidden="true"></i> Início
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link link-dark dropdown-toggle" href="#" id="navbarColorDropdown"
                                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-list" aria-hidden="true"></i> Categorias
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarColorDropdown">
                                    <li x-on:click="categoriaSelecionada = ''; filtrarProdutos()">
                                        <a class="dropdown-item" href="#">Todas</a>
                                    </li>
                                    <template x-for="categoria in categorias" :key="categoria">
                                        <li x-on:click="categoriaSelecionada = categoria; filtrarProdutos()">
                                            <a class="dropdown-item" href="#" x-text="categoria"></a>
                                        </li>
                                    </template>
                                    <!-- <template x-for="categoria in categorias" :key="categoria">
                                        <li @click.prevent="loadProductsByCategory(category.id)">
                                            <a class="dropdown-item" href="#" x-text="category"></a>
                                        </li>
                                    </template> -->
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link link-dark" href="#">
                                    <i class="fa fa-tags" aria-hidden="true"></i> Ofertas
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link link-dark" href="#">
                                    <i class="fa fa-envelope" aria-hidden="true"></i> Contato
                                </a>
                            </li>
                            <!-- <li class="nav-item ">
                                <a class="btn btn-light" aria-current="page" href="#"><i class="fa fa-home"
                                        aria-hidden="true"></i>
                                    INÍCIO</a>
                            </li>
                            <li class="nav-item ">
                                <a class="btn btn-light" aria-current="page" href="#"><i class="fa fa-tags"
                                        aria-hidden="true"></i>
                                    OFERTAS</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" href="#"
                                    role="button" aria-expanded="false"><i class="fa fa-list" aria-hidden="true"></i>
                                    CATEGORIAS</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarColorDropdown" x-data="categoryApp()">
                                    <template x-for="category in categories" :key="category.id">
                                        <li @click.prevent="loadProductsByCategory(category.id)">
                                            <a class="dropdown-item" href="#" x-text="category.name"></a>
                                        </li>
                                    </template>
                                </ul>
                            </li>
                            <li class="nav-item ">
                                <a class="btn btn-light" aria-current="page" href="#"><i class="fa fa-phone"
                                        aria-hidden="true"></i>
                                    CONTATO</a>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="w-100 h-100 d-flex align-items-center">
                        <span class="bg-success text-white px-3 py-1 rounded">ABERTO </span>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="d-flex gap-3">
                        <a href="" class="text-decoration-none link-dark fs-2"><i class="fa-brands fa-whatsapp"></i></a>
                        <a href="" class="text-decoration-none link-dark fs-2"><i class="fa-brands fa-facebook"></i></a>
                        <a href="" class="text-decoration-none link-dark fs-2"><i
                                class="fa-brands fa-instagram"></i></a>
                        <a href="" class="text-decoration-none link-dark fs-2"><i
                                class="fa-solid fa-location-dot"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Barra de Busca e Filtro de Categorias -->
    <!-- <div class="container my-4">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Buscar produtos..." x-model="termoBusca"
                @input="filtrarProdutos()">
            <select class="form-select" x-model="categoriaSelecionada" @change="filtrarProdutos()">
                <option value="">Todas as Categorias</option>
                <template x-for="categoria in categorias" :key="categoria">
                    <option x-text="categoria" :value="categoria"></option>
                </template>
            </select>
            <button class="btn btn-outline-secondary" type="button" @click="filtrarProdutos()">Buscar</button>
        </div>
    </div> -->

    <div class="container">
        <!-- Slideshow -->
        <div id="carouselExample" class="carousel slide my-4" data-bs-ride="carousel">
            <div class="carousel-inner" x-ref="carouselInner">
                <template x-for="(slide, index) in slides" :key="slide.id">
                    <div class="carousel-item" :class="{ active: index === 0 }">
                        <img :src="slide.imagem" class="d-block w-100 rounded" :alt="slide.titulo">
                    </div>
                </template>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>

    <!-- Lista de Produtos -->
    <div class="container">
        <div class="row">
            <template x-for="produto in produtosPaginated" :key="produto.id">
                <div class="col-md-3 mb-4">
                    <div class="card h-100">
                        <img :src="produto.imagem" class="card-img-top" :alt="produto.nome">
                        <div class="card-body">
                            <h5 class="card-title" x-text="produto.nome"></h5>
                            <p class="card-text text-muted" x-text="produto.descricao"></p>
                            <h6 class="text-primary" x-text="`R$ ${produto.preco.toFixed(2)}`"></h6>
                            <div class="d-grid"><a :href="`detalhes.html?id=${produto.id}`" class="btn mt-2"
                                    :style="{ backgroundColor: actBtnBgColor,color: actBtnTextColor }"
                                    x-text="actBtnTextLabel">Ver Detalhes</a></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <template x-if="loading">
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Carregando...</span>
                </div>
            </div>
        </template>

        <template x-if="!produtosPaginated.length && !loading">
            <div class="alert alert-warning">
                Nenhum produto encontrado.
            </div>
        </template>

        <!-- Paginação -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mt-4">
                <li class="page-item" :class="{ disabled: paginaAtual === 1 }" >
                    <a class="page-link" href="#" @click.prevent="mudarPagina(paginaAtual - 1)" :style="{ color: navbarBgColor }"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
                </li>
                <template x-for="pagina in totalPaginas" :key="pagina">
                    <li class="page-item" :class="{ active: pagina === paginaAtual }">
                        <a class="page-link" href="#" @click.prevent="mudarPagina(pagina)" x-text="pagina"></a>
                    </li>
                </template>
                <li class="page-item" :class="{ disabled: paginaAtual === totalPaginas }">
                    <a class="page-link" href="#" @click.prevent="mudarPagina(paginaAtual + 1)"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                </li>
            </ul>
        </nav>
    </div>
    <footer class="p-2 mb-4" x-bind:style="{ backgroundColor: navbarBgColor, color: navbarTextColor}">
        <div class="container">
            <div class="row">
                <div class="col text-center p-2">
                    <p class="p-0 m-0" x-text="brandName">,</p>
                    <p class="p-0 m-0">Rua México, Nº 123,</p>
                    <p class="p-0 m-0">Jardim Gisela, CEP: 85905-370, Guaratinguetá/São Paulo</p>

                </div>
            </div>
        </div>
    </footer>

    <!-- Offcanvas -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasSobre" aria-labelledby="offcanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasLabel">Sobre Nós</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>Aqui você pode colocar informações sobre a empresa, como a missão, visão e valores, ou detalhes de
                contato.</p>
            <p>Entre em contato conosco pelo email: contato@empresa.com</p>
        </div>
    </div>

    <script>
        function catalogoProdutos() {
            return {
                produtos: [],
                produtosFiltrados: [],
                produtosPaginated: [],
                categorias: [],
                categoriaSelecionada: '',
                termoBusca: '',
                loading: true,
                paginaAtual: 1,
                produtosPorPagina: 4,
                slides: [],

                brandName: '',
                brandImgSrc: '',
                navbarBgColor: '',
                navbarTextColor: '',
                actBtnBgColor: '',
                actBtnTextColor: '',
                actBtnTextLabel: '',

                async carregarProdutos() {
                    try {
                        const resposta = await fetch('produtos.json'); // Substitua pelo URL da sua API
                        if (!resposta.ok) throw new Error('Erro ao carregar produtos');
                        this.produtos = await resposta.json();
                        this.produtosFiltrados = this.produtos;

                        // Extrai categorias únicas
                        this.categorias = [...new Set(this.produtos.map(produto => produto.categoria))];

                        // Atualiza a exibição inicial
                        this.atualizarProdutosPaginated();
                    } catch (erro) {
                        console.error('Erro ao carregar produtos:', erro);
                    }
                },

                async carregarSlides() {
                    try {
                        const resposta = await fetch('slides.json'); // Substitua pelo URL da sua API
                        if (!resposta.ok) throw new Error('Erro ao carregar slides');
                        this.slides = await resposta.json();
                    } catch (erro) {
                        console.error('Erro ao carregar slides:', erro);
                    }
                },

                async carregarConfiguracoes() {
                    try {
                        const resposta = await fetch('configuracoes.json'); // Substitua pelo URL da sua API
                        if (!resposta.ok) throw new Error('Erro ao carregar configurações');
                        const configuracoes = await resposta.json();
                        this.brandName = configuracoes.brandName;
                        this.brandImgSrc = configuracoes.brandImgSrc;
                        this.navbarBgColor = configuracoes.navbarBgColor;
                        this.navbarTextColor = configuracoes.navbarTextColor;
                        this.actBtnBgColor = configuracoes.actBtnBgColor;
                        this.actBtnTextColor = configuracoes.actBtnTextColor;
                        this.actBtnTextLabel = configuracoes.actBtnTextLabel;
                    } catch (erro) {
                        console.error('Erro ao carregar configurações:', erro);
                    }
                },

                filtrarProdutos() {
                    const termo = this.termoBusca.toLowerCase();
                    this.produtosFiltrados = this.produtos.filter(produto =>
                        produto.nome.toLowerCase().includes(termo) &&
                        (this.categoriaSelecionada ? produto.categoria === this.categoriaSelecionada : true)
                    );
                    this.paginaAtual = 1; // Resetar para a primeira página após a filtragem
                    this.atualizarProdutosPaginated();
                },

                atualizarProdutosPaginated() {
                    const inicio = (this.paginaAtual - 1) * this.produtosPorPagina;
                    const fim = inicio + this.produtosPorPagina;
                    this.produtosPaginated = this.produtosFiltrados.slice(inicio, fim);
                },

                mudarPagina(novaPagina) {
                    if (novaPagina < 1 || novaPagina > this.totalPaginas) return;
                    this.paginaAtual = novaPagina;
                    this.atualizarProdutosPaginated();
                },

                get totalPaginas() {
                    return Math.ceil(this.produtosFiltrados.length / this.produtosPorPagina);
                },

                mostrarOffcanvas() {
                    const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasSobre'));
                    offcanvas.show();
                },

                async init() {
                    this.loading = true;
                    await Promise.all([this.carregarProdutos(), this.carregarSlides(), this.carregarConfiguracoes()]);
                    this.loading = false;
                }
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>



    <!-- Configurações do Pace.js -->
    <script>
        paceOptions = {
            ajax: true,
            document: true,
            eventLag: false
        };
    </script>
</body>

</html>