<!doctype html>
<html lang="pt-BR">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="Página de pedidos do cliente da Loja Online.">

    <title>Meus Pedidos | Loja Online</title>

    <base href="/loja_online/public/">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

    <!-- CSS do projeto -->
    <link rel="stylesheet" href="assets/css/site.css">

</head>


<body class="bg-light">


    <!-- ============================================================
         NAV
    ============================================================= -->

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">

        <div class="container">

            <a class="navbar-brand fw-bold" href="cliente/painel">

                <i class="bi bi-person-circle me-2"></i>

                Minha Conta

            </a>


            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuCliente"
                aria-controls="menuCliente" aria-expanded="false" aria-label="Abrir menu">

                <span class="navbar-toggler-icon"></span>

            </button>


            <div class="collapse navbar-collapse" id="menuCliente">

                <ul class="navbar-nav ms-auto align-items-lg-center">


                    <li class="nav-item">

                        <a class="nav-link" href="cliente/painel">

                            <i class="bi bi-speedometer2 me-1"></i>

                            Painel

                        </a>

                    </li>


                    <li class="nav-item">

                        <a class="nav-link" href="cliente/perfil">

                            <i class="bi bi-person me-1"></i>

                            Perfil

                        </a>

                    </li>


                    <li class="nav-item">

                        <a class="nav-link active" href="cliente/pedidos">

                            <i class="bi bi-bag-check me-1"></i>

                            Pedidos

                        </a>

                    </li>


                    <li class="nav-item">

                        <a class="nav-link" href="cliente/enderecos">

                            <i class="bi bi-geo-alt me-1"></i>

                            Endereços

                        </a>

                    </li>


                    <li class="nav-item">

                        <a class="nav-link" href="cliente/seguranca">

                            <i class="bi bi-shield-lock me-1"></i>

                            Segurança

                        </a>

                    </li>


                    <li class="nav-item ms-lg-3">

                        <a class="btn btn-outline-light btn-sm" href="cliente/logout">

                            <i class="bi bi-box-arrow-right me-1"></i>

                            Sair

                        </a>

                    </li>


                </ul>

            </div>

        </div>

    </nav>


    <!-- ============================================================
         MAIN
    ============================================================= -->

    <main class="py-5">

        <div class="container">


            <!-- ====================================================
                 TÍTULO
            ===================================================== -->

            <div class="row mb-4">

                <div class="col-12">

                    <h1 class="h3 fw-bold mb-1">

                        <i class="bi bi-bag-check text-primary me-2"></i>

                        Meus Pedidos

                    </h1>

                    <p class="text-muted mb-0">

                        Consulte seus pedidos e acompanhe o andamento
                        das suas compras.

                    </p>

                </div>

            </div>


            <!-- ====================================================
                 FILTROS
            ===================================================== -->

            <div class="card border-0 shadow-sm mb-4">

                <div class="card-body">

                    <div class="row g-3 align-items-end">


                        <!-- BUSCA -->

                        <div class="col-12 col-md-5">

                            <label for="buscarPedido" class="form-label">

                                Buscar pedido

                            </label>

                            <div class="input-group">

                                <span class="input-group-text">

                                    <i class="bi bi-search"></i>

                                </span>

                                <input type="text" class="form-control" id="buscarPedido"
                                    placeholder="Número do pedido">

                            </div>

                        </div>


                        <!-- STATUS -->

                        <div class="col-12 col-md-4">

                            <label for="statusPedido" class="form-label">

                                Status

                            </label>

                            <select class="form-select" id="statusPedido">

                                <option value="">
                                    Todos os pedidos
                                </option>

                                <option value="aguardando">
                                    Aguardando pagamento
                                </option>

                                <option value="pago">
                                    Pagamento aprovado
                                </option>

                                <option value="preparacao">
                                    Em preparação
                                </option>

                                <option value="enviado">
                                    Enviado
                                </option>

                                <option value="entregue">
                                    Entregue
                                </option>

                                <option value="cancelado">
                                    Cancelado
                                </option>

                            </select>

                        </div>


                        <!-- BOTÃO -->

                        <div class="col-12 col-md-3">

                            <button type="button" class="btn btn-primary w-100">

                                <i class="bi bi-funnel me-1"></i>

                                Filtrar

                            </button>

                        </div>


                    </div>

                </div>

            </div>


            <!-- ====================================================
                 PEDIDO 1
            ===================================================== -->

            <div class="card border-0 shadow-sm mb-4">


                <!-- CABEÇALHO DO PEDIDO -->

                <div class="card-header bg-white py-3">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">


                        <div>

                            <h2 class="h5 fw-bold mb-1">

                                Pedido #000125

                            </h2>

                            <small class="text-muted">

                                Realizado em 15/08/2026 às 14:32

                            </small>

                        </div>


                        <span class="badge text-bg-warning px-3 py-2">

                            <i class="bi bi-box-seam me-1"></i>

                            Em preparação

                        </span>


                    </div>

                </div>


                <!-- CONTEÚDO -->

                <div class="card-body">


                    <!-- PRODUTO -->

                    <div class="row align-items-center g-3">


                        <div class="col-4 col-md-2">

                            <img src="assets/img/produtos/abajur-led.jpg" class="img-fluid rounded border"
                                alt="Abajur LED Touch">

                        </div>


                        <div class="col-8 col-md-5">

                            <h3 class="h6 fw-bold mb-1">

                                Abajur LED Touch

                            </h3>

                            <p class="text-muted small mb-1">

                                Casa e Decoração

                            </p>

                            <small>

                                Quantidade: 1

                            </small>

                        </div>


                        <div class="col-6 col-md-2">

                            <small class="text-muted d-block">

                                Preço

                            </small>

                            <strong>

                                R$ 119,90

                            </strong>

                        </div>


                        <div class="col-6 col-md-3 text-md-end">

                            <a href="cliente/pedido?id=125" class="btn btn-outline-primary">

                                <i class="bi bi-eye me-1"></i>

                                Ver pedido

                            </a>

                        </div>


                    </div>


                    <hr>


                    <!-- RESUMO -->

                    <div class="row">


                        <div class="col-12 col-md-6">

                            <small class="text-muted d-block">

                                Forma de pagamento

                            </small>

                            <strong>

                                Cartão de crédito

                            </strong>

                        </div>


                        <div class="col-12 col-md-6 text-md-end mt-3 mt-md-0">

                            <small class="text-muted d-block">

                                Total do pedido

                            </small>

                            <span class="fs-5 fw-bold text-success">

                                R$ 119,90

                            </span>

                        </div>


                    </div>


                </div>

            </div>


            <!-- ====================================================
                 PEDIDO 2
            ===================================================== -->

            <div class="card border-0 shadow-sm mb-4">


                <div class="card-header bg-white py-3">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">


                        <div>

                            <h2 class="h5 fw-bold mb-1">

                                Pedido #000124

                            </h2>

                            <small class="text-muted">

                                Realizado em 10/08/2026 às 09:15

                            </small>

                        </div>


                        <span class="badge text-bg-primary px-3 py-2">

                            <i class="bi bi-truck me-1"></i>

                            Enviado

                        </span>


                    </div>

                </div>


                <div class="card-body">


                    <div class="row align-items-center g-3">


                        <div class="col-4 col-md-2">

                            <img src="assets/img/produtos/fone.jpg" class="img-fluid rounded border"
                                alt="Fone Bluetooth">

                        </div>


                        <div class="col-8 col-md-5">

                            <h3 class="h6 fw-bold mb-1">

                                Fone Bluetooth

                            </h3>

                            <p class="text-muted small mb-1">

                                Eletrônicos

                            </p>

                            <small>

                                Quantidade: 1

                            </small>

                        </div>


                        <div class="col-6 col-md-2">

                            <small class="text-muted d-block">

                                Preço

                            </small>

                            <strong>

                                R$ 199,90

                            </strong>

                        </div>


                        <div class="col-6 col-md-3 text-md-end">

                            <a href="cliente/pedido?id=124" class="btn btn-outline-primary">

                                <i class="bi bi-eye me-1"></i>

                                Ver pedido

                            </a>

                        </div>


                    </div>


                    <hr>


                    <div class="row">


                        <div class="col-12 col-md-6">

                            <small class="text-muted d-block">

                                Forma de pagamento

                            </small>

                            <strong>

                                PIX

                            </strong>

                        </div>


                        <div class="col-12 col-md-6 text-md-end mt-3 mt-md-0">

                            <small class="text-muted d-block">

                                Total do pedido

                            </small>

                            <span class="fs-5 fw-bold text-success">

                                R$ 199,90

                            </span>

                        </div>


                    </div>


                </div>

            </div>


            <!-- ====================================================
                 PEDIDO 3
            ===================================================== -->

            <div class="card border-0 shadow-sm mb-4">


                <div class="card-header bg-white py-3">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">


                        <div>

                            <h2 class="h5 fw-bold mb-1">

                                Pedido #000123

                            </h2>

                            <small class="text-muted">

                                Realizado em 02/08/2026 às 18:45

                            </small>

                        </div>


                        <span class="badge text-bg-success px-3 py-2">

                            <i class="bi bi-check-circle me-1"></i>

                            Entregue

                        </span>


                    </div>

                </div>


                <div class="card-body">


                    <div class="row align-items-center g-3">


                        <div class="col-4 col-md-2">

                            <img src="assets/img/produtos/mouse.jpg" class="img-fluid rounded border"
                                alt="Mouse Sem Fio">

                        </div>


                        <div class="col-8 col-md-5">

                            <h3 class="h6 fw-bold mb-1">

                                Mouse Sem Fio

                            </h3>

                            <p class="text-muted small mb-1">

                                Informática

                            </p>

                            <small>

                                Quantidade: 2

                            </small>

                        </div>


                        <div class="col-6 col-md-2">

                            <small class="text-muted d-block">

                                Preço unitário

                            </small>

                            <strong>

                                R$ 89,90

                            </strong>

                        </div>


                        <div class="col-6 col-md-3 text-md-end">

                            <a href="cliente/pedido?id=123" class="btn btn-outline-primary">

                                <i class="bi bi-eye me-1"></i>

                                Ver pedido

                            </a>

                        </div>


                    </div>


                    <hr>


                    <div class="row">


                        <div class="col-12 col-md-6">

                            <small class="text-muted d-block">

                                Forma de pagamento

                            </small>

                            <strong>

                                Cartão de crédito

                            </strong>

                        </div>


                        <div class="col-12 col-md-6 text-md-end mt-3 mt-md-0">

                            <small class="text-muted d-block">

                                Total do pedido

                            </small>

                            <span class="fs-5 fw-bold text-success">

                                R$ 179,80

                            </span>

                        </div>


                    </div>


                </div>

            </div>


            <!-- ====================================================
                 PAGINAÇÃO
            ===================================================== -->

            <nav aria-label="Navegação dos pedidos" class="mt-4">

                <ul class="pagination justify-content-center">


                    <li class="page-item disabled">

                        <a class="page-link" href="#">

                            Anterior

                        </a>

                    </li>


                    <li class="page-item active">

                        <a class="page-link" href="#">

                            1

                        </a>

                    </li>


                    <li class="page-item">

                        <a class="page-link" href="#">

                            2

                        </a>

                    </li>


                    <li class="page-item">

                        <a class="page-link" href="#">

                            3

                        </a>

                    </li>


                    <li class="page-item">

                        <a class="page-link" href="#">

                            Próxima

                        </a>

                    </li>


                </ul>

            </nav>


        </div>

    </main>


    <!-- ============================================================
         FOOTER
    ============================================================= -->

    <footer class="bg-dark text-white mt-5">

        <div class="container py-4">

            <div class="row align-items-center">


                <div class="col-12 col-md-6 text-center text-md-start">

                    <strong>

                        Loja Online

                    </strong>

                    <p class="small text-white-50 mb-0">

                        Sua loja online com segurança e praticidade.

                    </p>

                </div>


                <div class="col-12 col-md-6 text-center text-md-end mt-3 mt-md-0">


                    <a href="" class="text-white text-decoration-none me-3">

                        Loja

                    </a>


                    <a href="produtos" class="text-white text-decoration-none me-3">

                        Produtos

                    </a>


                    <a href="cliente/pedidos" class="text-white text-decoration-none">

                        Meus Pedidos

                    </a>


                </div>


            </div>


            <hr class="border-secondary">


            <div class="text-center">

                <small class="text-white-50">

                    &copy; 2026 Loja Online.
                    Todos os direitos reservados.

                </small>

            </div>

        </div>

    </footer>


    <!-- Bootstrap JS -->

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


</body>

</html>