<?php
require_once '../app/Controllers/sessions.php';
require_once '../app/Controllers/security_access.php';
require_once '../app/models/user.php';
require '../app/Controllers/layouts.php';
require '../app/Controllers/updateProfile.php';
require_once '../app/Controllers/controller_investments.php';

// Preserva a lógica PHP original (require_once e require)
?>
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Senha</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
  <script src="https://unpkg.com/lucide-icons@latest"></script>
  <style>
    /* CSS original do usuário (mantido por segurança) */
    * {
      font-family: 'Poppins', sans-serif;
      outline: none;
    }

    .animate-slide-in {
      animation: slideIn 0.4s ease-out forwards;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>

<?php if ($stmtThemesPlatformResult['theme_actual'] === 'gringa2') : ?>
  <!DOCTYPE html>
  <html lang="pt-BR">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Segurança da Conta - <?= htmlspecialchars($stmtConfigsPlatformResult["name_platform"]) ?></title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide-icons@latest"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

    <style>
      /* --- VARIÁVEIS DE COR: PADRÃO GRINGA2 (Obrigatório) --- */
      :root {
          --color-primary-dynamic: <?= htmlspecialchars($stmtConfigsPlatformResult['color_primary'] ?: '#06B6D4') ?>;
          --color-background-start: #FFD777;
          --color-background-end: #F9FAFB;
          --color-card-bg: #FFF9E9;
          --color-card-dark: #FFF6E0;
          --color-text-dark: #111827;
          --color-text-muted-light: #6B7280;
          --color-border-light: #E5E7EB;
          --color-success: #10B981;
          
          /* Cores para o Toast estilo Chinês */
          --toast-bg-color: #FEEBC6;
          --toast-text-color: #9A3412;
          --toast-border-color: #FDBA74;

          /* NOVAS CORES PARA VAPOR GRID */
          --color-vapor-bg: #FFFFFF;
          --color-vapor-highlight: #4F46E5; /* Indigo */
          --color-input-icon: #9CA3AF;
      }

      * {
          font-family: 'Poppins', sans-serif;
      }
      
      body {
          background: linear-gradient(180deg, var(--color-background-start) 0%, var(--color-background-end) 40%, var(--color-background-end) 100%);
          color: var(--color-text-dark);
          min-height: 100vh;
          padding-bottom: 96px;
          max-width: 500px;
          margin: 0 auto;
      }
      
      /* Header customizado (Obrigatório) */
      .custom-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 1.5rem 1rem 0.5rem;
      }
      .header-actions a {
          display: inline-flex;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(255,255,255,0.75);
          box-shadow: 0 3px 8px rgba(0,0,0,0.04);
          align-items: center;
          justify-content: center;
          text-decoration: none;
      }

      /* CARD BASE (PROFESSIONAL CARD) */
      .professional-card {
          background-color: var(--color-card-bg); 
          border: 1px solid var(--color-border-light);
          border-radius: 14px;
          box-shadow: 0 6px 18px rgba(10,10,10,0.06);
      }

      /* NOVO ESTILO: INLINE INPUT VAPOR */
      .vapor-input-group {
          position: relative;
          background-color: var(--color-vapor-bg);
          border-radius: 8px;
          border: 1px solid var(--color-border-light);
          transition: border-color 0.2s, box-shadow 0.2s;
      }
      .vapor-input-field {
          width: 100%;
          padding: 0.8rem 1rem;
          background: transparent;
          font-size: 0.95rem;
          font-weight: 500;
          padding-left: 3rem; /* Espaço para o ícone */
          outline: none;
      }
      .vapor-input-group:focus-within {
          border-color: var(--color-vapor-highlight);
          box-shadow: 0 0 0 1px var(--color-vapor-highlight);
      }
      .input-icon-left {
          position: absolute;
          top: 50%;
          left: 1rem;
          transform: translateY(-50%);
          color: var(--color-input-icon);
      }
      
      /* Botão Principal */
      .btn-vapor-primary {
          background-color: var(--color-vapor-highlight); 
          color: white; 
          padding: 0.9rem; 
          border-radius: 10px; 
          font-weight: 700;
          transition: background-color 0.2s;
          box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
      }
      .btn-vapor-primary:hover {
          filter: brightness(1.1);
      }


      /* TOAST MODERNO ESTILO CHINÊS (Obrigatório) */
      #modern-toast-gringa {
          position: fixed; 
          top: 30px; 
          left: 50%; 
          transform: translateX(-50%); 
          min-width: 280px;
          background: var(--toast-bg-color); 
          color: var(--toast-text-color); 
          border: 2px solid var(--toast-border-color); 
          border-radius: 12px; 
          padding: 10px 16px; 
          box-shadow: 0 8px 30px rgba(0,0,0,0.18); 
          display: flex; 
          gap: 8px; 
          align-items: center; 
          font-weight: 700; 
          z-index: 55;
          opacity: 0;
          transition: opacity 0.4s, transform 0.4s;
          visibility: hidden;
      }
      #modern-toast-gringa.show {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0);
      }
    </style>
  </head>

  <body class="min-h-screen font-sans">
    
    <div id="modern-toast-gringa" role="alert" aria-live="assertive">
        <i class="fa-solid fa-bell text-lg"></i>
        <span id="toast-message-gringa"></span>
    </div>

    <div class="app-wrap">

      <header class="custom-header">
        <a href="profile.php" class="header-actions text-[--color-text-dark] bg-white shadow-md hover:opacity-90" aria-label="Voltar">
            <i class="fa-solid fa-arrow-left text-lg"></i>
        </a>
        
        <h1 class="text-xl font-extrabold text-slate-800 tracking-tight">Painel de Credenciais</h1>
        
        <div></div>
      </header>

      <section class="px-4 mt-6">
        <form method="POST" class="space-y-6 professional-card p-6" id="passwordForm">

          <h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2 border-b pb-2 border-gray-200">
              <i data-lucide="shield" class="w-5 h-5 text-indigo-600"></i> Atualização de Dados
          </h2>
          
          <div class="vapor-input-group">
            <i data-lucide="lock" class="input-icon-left w-5 h-5"></i>
            <label class="sr-only">Senha de Acesso Atual</label>
            <input required name="actual_pass" type="password"
              placeholder="Senha atual"
              class="vapor-input-field" />
          </div>

          <div class="vapor-input-group">
            <i data-lucide="key-round" class="input-icon-left w-5 h-5"></i>
            <label class="sr-only">Nova Credencial Secreta</label>
            <input required name="new_pass" type="password"
              placeholder="Nova senha"
              class="vapor-input-field" />
          </div>

          <div class="vapor-input-group">
            <i data-lucide="check-circle" class="input-icon-left w-5 h-5"></i>
            <label class="sr-only">Confirmar nova senha</label>
            <input required name="confirm_new_pass" type="password"
              placeholder="Confirmar nova senha"
              class="vapor-input-field" />
          </div>

          <p class="text-indigo-600 text-xs text-center mt-1 font-semibold">Garantia de que a nova senha é forte</p>

          <button name="alter_pass" type="submit"
            class="w-full btn-vapor-primary transition text-sm shadow-lg shadow-indigo-600/40">
            <i class="fa-solid fa-arrow-right-to-bracket mr-2"></i> Atualizar Senha
          </button>
        </form>
      </section>
    </div>

    <?php include 'partials/menu-bottom.php'; ?>
    
    <?php if ($toastMessage) : ?>
        <div id="toast" class="fixed inset-0 flex items-center justify-center z-50" style="display: none;">
            </div>
    <?php endif; ?>

    <script>
        // LÓGICA DE EXIBIÇÃO DO TOAST ORIGINAL (ADAPTADA PARA O VISUAL GRINGA2)
        const toastOriginal = document.getElementById("toast");
        const toastGringa = document.getElementById("modern-toast-gringa");
        
        // Lógica de exibição do Toast Gringa (Garante que a função original seja mapeada)
        function showGringaToast(message) {
             const toastMessageGringa = document.getElementById("toast-message-gringa");
             const iconHtml = '<i class="fa-solid fa-bell text-lg"></i> ';
             
             toastMessageGringa.textContent = message;
             toastGringa.innerHTML = iconHtml + message;
             toastGringa.classList.add("show");
             
             // Simula a lógica de timeout do código original
             setTimeout(() => {
                 toastGringa.classList.remove("show");
             }, 5000); 
        }
        
        // 1. Executa a exibição se houver mensagem PHP
        const phpMessage = "<?= addslashes(htmlspecialchars($toastMessage ?? '')) ?>";
        if (phpMessage) {
            window.addEventListener('load', () => showGringaToast(phpMessage));
        }

        // 2. Mantém a lógica original de remoção de classes para o caso de o código JS original intervir
        if (toastOriginal) {
             toastOriginal.style.display = 'none'; 
        }
        
        // --- JAVASCRIPT ORIGINAL RESTANTE (PRESERVADO) ---
        const toast = document.getElementById("toast");
        if (toast) {
            toast.classList.add("opacity-0");
            toast.style.transition = "opacity 0.4s ease";

            setTimeout(() => {
                toast.classList.remove("opacity-0");
                toast.classList.add("opacity-100");
            }, 100);

            setTimeout(() => {
                toast.classList.add("opacity-0");
                setTimeout(() => toast.remove(), 400);
            }, 5000);
        }

        // Inicializa Lucide Icons
        window.addEventListener('DOMContentLoaded', () => {
             if (typeof lucide !== 'undefined' && lucide.createIcons) lucide.createIcons();
        });
    </script>
  </body>

  </html>
<?php endif; ?>