<?php
require_once("funcoes.php");

$carrinho = listarCarrinho();

if (isset($_GET["remover"])) {
    removerDoCarrinho($_GET["remover"]);
    header("Location: carrinho.php");
    exit;
}

if (isset($_GET["limpar"])) {
    limparCarrinho();
    header("Location: carrinho.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Carrinho - Mercadinho Pajeú</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap & Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #8B0000 0%, #A20000 50%, #8B0000 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .navbar {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%) !important;
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1040;
            box-shadow: 0 4px 20px rgba(162, 0, 0, 0.3);
            padding: 8px 0;
            border-bottom: 3px solid #ffc107;
        }
        .navbar-brand {
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 1px;
            color: #fff !important;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .navbar-logo {
            height: 42px;
            width: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .cart-container {
            max-width: 900px;
            margin: 30px auto;
            padding: 20px;
            background: linear-gradient(135deg, rgba(162, 0, 0, 0.9) 0%, rgba(139, 0, 0, 0.9) 100%);
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,.4);
            flex-grow: 1;
        }
        .cart-top-title {
            color: #ffc107;
            font-weight: bold;
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .cart-top-title i {
            color: #ffc107;
            margin-right: 10px;
        }
        .cart-table th, .cart-table td {
            vertical-align: middle;
            text-align: center;
            color: #fff;
        }
        .cart-table th {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            color: #ffc107;
            border-color: rgba(255, 193, 7, 0.3) !important;
            font-weight: 600;
        }
        .cart-table tbody tr {
            background-color: rgba(255, 255, 255, 0.05);
            transition: background-color 0.3s ease;
        }
        .cart-table tbody tr:hover {
            background-color: rgba(255, 193, 7, 0.1);
        }
        .cart-table .text-dark {
            color: #000 !important;
        }
        .btn-remove {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            color: #fff;
            border: none;
            border-radius: 50%;
            padding: 8px 12px;
            font-size: 1.1rem;
            transition: all .3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .btn-remove:hover {
            background: linear-gradient(135deg, #8B0000 0%, #A20000 100%);
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        .cart-total {
            font-size: 1.4rem;
            font-weight: bold;
            color: #ffc107;
        }
        .cart-total-desconto {
            font-size: 1.3rem;
            font-weight: bold;
            color: #ffc107;
        }
        .cart-actions .btn {
            width: 48%;
            font-size: 1.07rem;
            border-radius: 10px;
            padding: 12px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-warning {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            border: none;
            color: #fff;
        }
        .btn-warning:hover {
            background: linear-gradient(135deg, #8B0000 0%, #A20000 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .btn-secondary {
            background: linear-gradient(135deg, #888 0%, #999 100%);
            border: none;
            color: #fff;
        }
        .btn-secondary:hover {
            background: linear-gradient(135deg, #999 0%, #888 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .whatsapp-btn {
            background: linear-gradient(135deg, #ffc107 0%, #ffcd39 100%);
            color: #333;
            font-size: 1.2rem;
            border: none;
            width: 100%;
            margin-top: 18px;
            border-radius: 10px;
            padding: 15px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .whatsapp-btn:hover {
            background: linear-gradient(135deg, #ffcd39 0%, #ffc107 100%);
            color: #333;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        .empty-cart-icon {
            font-size: 5rem;
            color: #ffc107;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .empty-cart-text {
            color: #fff;
            font-size: 1.5rem;
        }
        .btn-primary {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            border: 2px solid #ffc107;
            color: #ffc107;
            border-radius: 10px;
            padding: 12px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #ffc107 0%, #ffcd39 100%);
            color: #333;
            border-color: #ffcd39;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
        }
        /* Modal */
        .modal-content {
            border-radius: 16px;
            border: 2px solid #ffc107;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            color: #fff;
        }
        .modal-header {
            background: linear-gradient(135deg, #A20000 0%, #8B0000 100%);
            color: #ffc107;
            border-radius: 16px 16px 0 0;
            border-bottom: 2px solid #ffc107;
        }
        .modal-title {
            color: #ffc107;
        }
        .modal-body {
            background: rgba(255,255,255,0.1);
        }
        .modal-body .form-label {
            color: #ffc107;
            font-weight: 600;
        }
        .modal-body .form-control, .modal-body .form-select {
            background-color: rgba(255,255,255,0.1);
            border: 1px solid rgba(255, 193, 7, 0.3);
            color: #fff;
        }
        .modal-body .form-control::placeholder {
            color: rgba(255,255,255,0.7);
        }
        .modal-body .form-control:focus, .modal-body .form-select:focus {
            border-color: #ffc107;
            box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
            background-color: rgba(255,255,255,0.15);
        }
        .modal-body .form-select option {
            background-color: #8B0000;
            color: #fff;
        }
        .modal-footer {
            border-top: 1px solid rgba(255, 193, 7, 0.3);
        }
        .btn-close {
            filter: invert(1);
        }
        @media (max-width: 600px) {
            .navbar-brand { font-size: 1.3rem; }
            .cart-table th, .cart-table td { font-size: 0.95em; }
            .cart-actions .btn { font-size: 1rem; }
            .cart-total { font-size: 1.1rem; }
            .cart-container { max-width: 99vw; margin-top: 20px; }
        }
        footer {
            background: linear-gradient(135deg, #8B0000 0%, #A20000 100%);
            color: #ffc107;
            padding: 30px 0;
            text-align: center;
            margin-top: auto; /* Empurra o footer para o final da página */
            position: relative;
            border-top: 3px solid #ffc107;
        }
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #A20000, #ffc107, #A20000);
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <img src="logo2.jpg" alt="Logo Mercadinho Pajeú" class="navbar-logo">
            Mercadinho Pajeú
        </a>
    </div>
</nav>
<div class="container cart-container px-1 px-md-3">
    <h1 class="mb-4 text-center cart-top-title">
        <i class="bi bi-cart4"></i> Seu Carrinho
    </h1>
    <?php if ($carrinho): ?>
        <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle cart-table bg-white shadow-sm rounded">
            <thead>
                <tr>
                    <th>Produto</th>
                    <th>Código</th>
                    <th>Preço</th>
                    <th>Qtd</th>
                    <th>Subtotal</th>
                    <th>Ação</th>
                </tr>
            </thead>
            <tbody>
                <?php $total = 0; foreach($carrinho as $item):
                    $subtotal = $item["preco"] * $item["quantidade"];
                    $total += $subtotal;
                ?>
                <tr>
                    <td class="text-nowrap text-dark"><?php echo htmlspecialchars($item["nome"]); ?></td>
                    <td class="text-dark"><?php echo htmlspecialchars($item["codigo"]); ?></td>
                    <td class="text-dark">R$ <?php echo number_format($item["preco"], 2, ",", "."); ?></td>
                    <td class="text-dark"><?php echo $item["quantidade"]; ?></td>
                    <td class="text-dark">R$ <?php echo number_format($subtotal, 2, ",", "."); ?></td>
                    <td>
                        <a href="?remover=<?php echo $item["id"]; ?>" class="btn-remove" title="Remover"><i class="bi bi-trash"></i></a>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="4" class="text-end cart-total">Total:</th>
                    <th colspan="2" class="cart-total" id="cart-total-val">R$ <?php echo number_format($total, 2, ",", "."); ?></th>
                </tr>
                <tr id="tr-desconto" style="display:none;">
                    <th colspan="4" class="text-end cart-total-desconto">Total com 10% de desconto:</th>
                    <th colspan="2" class="cart-total-desconto" id="cart-total-desc"></th>
                </tr>
            </tfoot>
        </table>
        </div>
        <div class="d-flex flex-wrap gap-2 justify-content-center cart-actions mb-4">
            <a href="carrinho.php?limpar=1" class="btn btn-warning"><i class="bi bi-x-circle"></i> Limpar Carrinho</a>
            <a href="index.php" class="btn btn-secondary"><i class="bi bi-shop"></i> Continuar Comprando</a>
        </div>
        <!-- Botão que abre o modal para finalizar pedido -->
        <button type="button" class="btn whatsapp-btn shadow-sm mb-5" data-bs-toggle="modal" data-bs-target="#modalNomeCliente">
            <i class="bi bi-whatsapp"></i> Finalizar Pedido no WhatsApp
        </button>
        <!-- Modal para nome do cliente, endereço e forma de pagamento -->
        <div class="modal fade" id="modalNomeCliente" tabindex="-1" aria-labelledby="modalNomeClienteLabel" aria-hidden="true">
          <div class="modal-dialog">
            <form method="post" action="finalizar_pedido.php">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="modalNomeClienteLabel">Finalizar Pedido</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                  <div class="mb-3">
                    <label for="nome_cliente" class="form-label">Seu nome:</label>
                    <input type="text" class="form-control" id="nome_cliente" name="nome_cliente" required>
                  </div>
                  <div class="mb-3">
                    <label for="endereco_cliente" class="form-label">Endereço para entrega:</label>
                    <input type="text" class="form-control" id="endereco_cliente" name="endereco_cliente" required>
                  </div>
                  <div class="mb-3">
                    <label for="forma_pagamento" class="form-label">Forma de pagamento:</label>
                    <select class="form-select" id="forma_pagamento" name="forma_pagamento" required>
                        <option value="">Selecione...</option>
                        <option value="dinheiro">Dinheiro</option>
                        <option value="cartao">Cartão</option>
                        <option value="pix">Pix</option>
                    </select>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn whatsapp-btn w-100">Enviar Pedido</button>
                </div>
              </div>
            </form>
          </div>
        </div>
    <?php else: ?>
        <div class="text-center py-5">
            <div class="empty-cart-icon"><i class="bi bi-cart-x"></i></div>
            <h4 class="mb-3 empty-cart-text">Seu carrinho está vazio.</h4>
            <a href="index.php" class="btn btn-primary btn-lg mb-4"><i class="bi bi-shop"></i> Ver Catálogo</a>
        </div>
    <?php endif; ?>
</div>
<footer>
    <div class="container">
        &copy; <?php echo date("Y"); ?> Mercadinho Pajeú. Todos os direitos reservados.
    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Exibe o total sem desconto, independentemente da forma de pagamento
document.addEventListener("DOMContentLoaded", function() {
    var select = document.getElementById("forma_pagamento");
    if (select) {
        select.addEventListener("change", function() {
            document.getElementById("tr-desconto").style.display = "none";
        });
    }
});
</script>
</body>
</html>