<?php
session_start();
$mensagem_sucesso = $_SESSION['mensagem_sucesso'] ?? '';
$mensagem_erro = $_SESSION['mensagem_erro'] ?? '';
unset($_SESSION['mensagem_sucesso'], $_SESSION['mensagem_erro']);

require 'includes/db.php';

if (!isset($_SESSION['usuario_id'])) {
    header("Location: login.php");
    exit();
}

if (isset($_SESSION['usuario_dados'])) {
    $usuario = $_SESSION['usuario_dados'];
    unset($_SESSION['usuario_dados']); // Limpa após uso
}



$id_usuario = $_SESSION['usuario_id'];

$stmt = $pdo->prepare("SELECT * FROM usuarios WHERE id = ?");
$stmt->execute([$id_usuario]);
$usuario = $stmt->fetch();

if (!$usuario) {
    session_destroy();
    header("Location: login.php?erro=usuario_inexistente");
    exit();
}

$nome = $usuario['nome'];
$email = $usuario['email'];
$telefone = $usuario['telefone'] ?? '';
$morada = $usuario['morada'] ?? '';
$emails_alternativos = $usuario['emails_alternativos'] ?? '';
$telefones_alternativos = $usuario['telefones_alternativos'] ?? '';

// Buscar reservas do usuário
$stmt = $pdo->prepare("SELECT * FROM reservas WHERE id_usuario = ?");
$stmt->execute([$id_usuario]);
$reservas = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Dashboard do Cliente</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/phpstyle.css">
  <link rel="stylesheet" href="css/perfil-php.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="bg-light">
  <header class="header" id="navigation-menu">
    <div class="container">
      <nav>
        <a href="index.html" class="logo"><img src="image/logo.png" alt=""></a>
        <ul class="nav-menu">
          <li><a href="index.html" class="nav-link">Voltar à Página Inicial</a></li>
          <li><a href="quartos.php" class="nav-link">Quartos</a></li>
          <li><a href="sobre.html" class="nav-link">Sobre nós</a></li>
        </ul>
        <div class="hambuger">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
      </nav>
    </div>
  </header>

  <script>
    const hambuger = document.querySelector('.hambuger');
    const navMenu = document.querySelector('.nav-menu');
    hambuger.addEventListener("click", () => {
      hambuger.classList.toggle("active");
      navMenu.classList.toggle("active");
    });
    document.querySelectorAll('.nav-link').forEach(n => n.addEventListener("click", () => {
      hambuger.classList.remove("active");
      navMenu.classList.remove("active");
    }));
  </script>

  <hr class="my-4">

  <div class="container mt-5">
    <h1 style="color: gray">PAINEL DO USUÁRIO</h1>
    <div class="text-end mb-3">
      <a href="logout.php" class="btn btn-outline-danger">Terminar Sessão</a>
    </div>

    <div class="card">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0">Olá, <?= htmlspecialchars($nome) ?> 👋</h4>
      </div>
      <div class="card-body">
        <?php if ($mensagem_sucesso): ?>
          <div class="alert alert-success alert-dismissible fade show" role="alert">
            <?= htmlspecialchars($mensagem_sucesso) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
          </div>
        <?php endif; ?>

        <?php if ($mensagem_erro): ?>
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <?= htmlspecialchars($mensagem_erro) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
          </div>
        <?php endif; ?>

        <!-- Abas -->
        <ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="reservas-tab" data-bs-toggle="tab" data-bs-target="#reservas" type="button" role="tab">Minhas Reservas</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="perfil-tab" data-bs-toggle="tab" data-bs-target="#perfil" type="button" role="tab">Editar Perfil</button>
          </li>
        </ul>

        <!-- Conteúdo das Abas -->
        <div class="tab-content pt-3" id="dashboardTabsContent">
          <!-- Aba Reservas -->
          <div class="tab-pane fade show active" id="reservas" role="tabpanel">
            <a href="reservar.php" class="btn btn-primary mb-3">+ Nova Reserva</a>
            <?php if (count($reservas) > 0): ?>
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                  <thead class="table-light">
                    <tr>
                      <th>Check-in</th>
                      <th>Check-out</th>
                      <th>Tipo de Quarto</th>
                      <th>Valor Total (Kz)</th>
                      <th>Ações</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php foreach ($reservas as $reserva): ?>
                      <tr>
                        <td><?= date('d/m/Y', strtotime($reserva['data_entrada'])) ?></td>
                        <td><?= date('d/m/Y', strtotime($reserva['data_saida'])) ?></td>
                        <td><?= htmlspecialchars($reserva['tipo_quarto']) ?></td>
                        <td><?= number_format($reserva['valor_total'], 2, ',', '.') ?> Kz</td>
                        <td>
                          <a href="cancelar_reserva.php?id=<?= $reserva['id'] ?>" class="btn btn-sm btn-danger" onclick="return confirm('Tem certeza que deseja cancelar esta reserva?')">Cancelar</a>
                        </td>
                      </tr>
                    <?php endforeach; ?>
                  </tbody>
                </table>
              </div>
            <?php else: ?>
              <p class="text-muted">Você ainda não possui reservas.</p>
            <?php endif; ?>
          </div>

          <!-- Aba Perfil -->
          <div class="tab-pane fade" id="perfil" role="tabpanel">
            <form action="update_perfil.php" method="POST" onsubmit="return validarCamposObrigatorios();">
              <div class="mb-3">
                <label for="nome" class="form-label">Nome</label>
                <input type="text" class="form-control" id="nome" name="nome" value="<?= htmlspecialchars($nome) ?>" required>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">E-mail Principal</label>
                <input type="email" class="form-control" id="email" name="email" value="<?= htmlspecialchars($email) ?>" required>
              </div>
              <div class="mb-3">
                <label for="emails_alternativos" class="form-label">E-mail Alternativo</label>
                <input type="email" class="form-control" id="emails_alternativos" name="emails_alternativos" maxlength="255" value="<?= htmlspecialchars($emails_alternativos) ?>">
              </div>
              <div class="mb-3">
                <label for="telefone" class="form-label">Telefone Principal</label>
                <input type="text" class="form-control" id="telefone" name="telefone" value="<?= htmlspecialchars($telefone) ?>" required>
              </div>
              <div class="mb-3">
                <label for="telefones_alternativos" class="form-label">Telefone Alternativo</label>
                <input type="text" class="form-control" id="telefones_alternativos" name="telefones_alternativos" maxlength="20" value="<?= htmlspecialchars($telefones_alternativos) ?>">
              </div>
              <div class="mb-3">
                <label for="morada" class="form-label">Morada</label>
                <textarea class="form-control" id="morada" name="morada"><?= htmlspecialchars($morada) ?></textarea>
              </div>
              <button type="submit" class="btn btn-success">Salvar Alterações</button>
            </form>

            <script>
              function validarCamposObrigatorios() {
                const nome = document.getElementById('nome').value.trim();
                const email = document.getElementById('email').value.trim();
                const telefone = document.getElementById('telefone').value.trim();
                if (!nome || !email || !telefone) {
                  alert("Por favor, preencha os campos obrigatórios: Nome, Email e Telefone.");
                  return false;
                }
                return true;
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br><br><br><br><br><br>
  <footer>
    <div class="container grid top">
      <div class="box">
        <img src="https://img.icons8.com/external-flatart-icons-flat-flatarticons/48/000000/external-hotel-hotel-services-and-city-elements-flatart-icons-flat-flatarticons-1.png" />
        <p>Estamos disponíveis para o ajudar a encontrar a melhor solução para a sua estadia.</p><br>
        <p>Métodos de Pagamentos Disponíveis</p><br>
        <div class="payment grid">
          <img src="https://img.icons8.com/color/48/000000/visa.png" />
          <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png" />
          <img src="https://img.icons8.com/color/48/000000/paypal.png" />
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
