﻿
{"success":false,"error":"A\u00e7\u00e3o inv\u00e1lida."}<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entrar na Minha Conta — MK Pratas</title>
    <meta name="description" content="Faça login ou crie sua conta MK Pratas para acompanhar seus pedidos e muito mais.">
    <link rel="shortcut icon" href="logo_mk.jpg" type="image/jpeg">
    <link rel="stylesheet" href="style_loja.css?v=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .auth-back-link {
            position: fixed;
            top: 24px; left: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,0.7);
            font-size: 0.82rem;
            font-weight: 600;
            transition: color 0.2s;
            z-index: 10;
        }
        .auth-back-link:hover { color: #fff; }
        .auth-bg-decoration {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .auth-bg-decoration::before {
            content: '';
            position: absolute;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(133,171,249,0.12) 0%, transparent 70%);
            top: -100px; right: -100px;
        }
        .auth-bg-decoration::after {
            content: '';
            position: absolute;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(133,171,249,0.08) 0%, transparent 70%);
            bottom: -50px; left: -50px;
        }
        .pass-toggle {
            position: relative;
        }
        .pass-toggle input { padding-right: 44px; }
        .pass-toggle-btn {
            position: absolute;
            right: 12px; top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            font-size: 0.9rem;
            cursor: pointer;
        }
        .input-icon-wrap { position: relative; }
        .input-icon-wrap i {
            position: absolute;
            left: 14px; top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            font-size: 0.85rem;
            pointer-events: none;
        }
        .input-icon-wrap .form-control { padding-left: 40px; }
        .trust-badges {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 24px;
            flex-wrap: wrap;
        }
        .trust-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.72rem;
            color: var(--gray-400);
        }
        .trust-badge i { color: var(--success); font-size: 0.8rem; }
    </style>
</head>
<body>
<div class="auth-bg-decoration"></div>
<a href="index.php" class="auth-back-link">
    <i class="fa fa-arrow-left"></i> Voltar à Loja
</a>

<div class="auth-page">
    <div class="auth-card">
        <!-- Logo -->
        <div class="auth-logo">
            <img src="logo_mk.jpg" alt="MK Pratas" style="width:100px;height:100px;border-radius:50%;object-fit:cover;box-shadow:0 4px 24px rgba(0,0,0,0.18), 0 0 0 4px rgba(133,171,249,0.25);margin-bottom:4px;background:white;">
        </div>
        <h1 class="auth-title">Bem-vinda!</h1>
        <p class="auth-sub">Acesse sua conta ou crie uma nova</p>

        <!-- Tabs -->
        <div class="auth-tabs">
            <div class="auth-tab active" id="tab-login" onclick="switchTab('login')">
                <i class="fa fa-sign-in-alt"></i> Entrar
            </div>
            <div class="auth-tab " id="tab-cadastro" onclick="switchTab('cadastro')">
                <i class="fa fa-user-plus"></i> Criar Conta
            </div>
        </div>

        <!-- Alert -->
        <div id="auth-alert" style="display:none;"></div>

        <!-- ═══ FORM LOGIN ═══ -->
        <form id="form-login" style="" onsubmit="fazerLogin(event)">
            <div class="form-group">
                <label class="form-label">E-mail</label>
                <div class="input-icon-wrap">
                    <i class="fa fa-envelope"></i>
                    <input type="email" id="login-email" name="email" class="form-control" placeholder="seu@email.com" required autocomplete="email">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Senha</label>
                <div class="pass-toggle">
                    <input type="password" id="login-senha" name="senha" class="form-control" placeholder="Sua senha" required autocomplete="current-password">
                    <i class="fa fa-eye pass-toggle-btn" onclick="togglePass('login-senha', this)"></i>
                </div>
            </div>
            <button type="submit" class="btn-primary" id="btn-login">
                <span id="btn-login-text"><i class="fa fa-sign-in-alt"></i> Entrar na minha conta</span>
            </button>
            <div class="auth-divider">ou</div>
            <p class="auth-link-wrap">
                Não tem conta?
                <span class="auth-link" onclick="switchTab('cadastro')">Criar conta grátis</span>
            </p>
        </form>

        <!-- ═══ FORM CADASTRO ═══ -->
        <form id="form-cadastro" style="display:none" onsubmit="fazerCadastro(event)">
            <div class="form-group">
                <label class="form-label">Nome Completo *</label>
                <div class="input-icon-wrap">
                    <i class="fa fa-user"></i>
                    <input type="text" id="cad-nome" name="nome" class="form-control" placeholder="Seu nome completo" required autocomplete="name">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">E-mail *</label>
                    <input type="email" id="cad-email" name="email" class="form-control" placeholder="seu@email.com" required autocomplete="email">
                </div>
                <div class="form-group">
                    <label class="form-label">WhatsApp</label>
                    <input type="tel" id="cad-whatsapp" name="whatsapp" class="form-control" placeholder="(11) 99999-9999" autocomplete="tel">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">CPF</label>
                <input type="text" id="cad-cpf" name="cpf" class="form-control" placeholder="000.000.000-00" maxlength="14">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Senha *</label>
                    <div class="pass-toggle">
                        <input type="password" id="cad-senha" name="senha" class="form-control" placeholder="Mínimo 6 caracteres" required autocomplete="new-password">
                        <i class="fa fa-eye pass-toggle-btn" onclick="togglePass('cad-senha', this)"></i>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Confirmar Senha *</label>
                    <div class="pass-toggle">
                        <input type="password" id="cad-senha2" name="senha2" class="form-control" placeholder="Repita a senha" required autocomplete="new-password">
                        <i class="fa fa-eye pass-toggle-btn" onclick="togglePass('cad-senha2', this)"></i>
                    </div>
                </div>
            </div>
            <p class="form-hint" style="margin-bottom:16px;">
                <i class="fa fa-lock" style="color:var(--blue);"></i>
                Seus dados são protegidos com criptografia.
            </p>
            <button type="submit" class="btn-primary" id="btn-cadastro">
                <span id="btn-cadastro-text"><i class="fa fa-user-plus"></i> Criar minha conta</span>
            </button>
            <p class="auth-link-wrap" style="margin-top:16px;">
                Já tem conta?
                <span class="auth-link" onclick="switchTab('login')">Fazer login</span>
            </p>
        </form>

        <!-- Trust Badges -->
        <div class="trust-badges">
            <span class="trust-badge"><i class="fa fa-shield-alt"></i> Dados seguros</span>
            <span class="trust-badge"><i class="fa fa-check-circle"></i> Compra protegida</span>
            <span class="trust-badge"><i class="fa fa-lock"></i> SSL Criptografado</span>
        </div>
    </div>
</div>

<!-- Toast -->
<div class="toast-container" id="toast-container"></div>

<script>
const REDIRECT = "meus_pedidos.php";

function switchTab(tab) {
    document.getElementById('tab-login').classList.toggle('active', tab === 'login');
    document.getElementById('tab-cadastro').classList.toggle('active', tab === 'cadastro');
    document.getElementById('form-login').style.display    = tab === 'login'    ? '' : 'none';
    document.getElementById('form-cadastro').style.display = tab === 'cadastro' ? '' : 'none';
    document.getElementById('auth-alert').style.display = 'none';
}

function showAlert(msg, type = 'error') {
    const el = document.getElementById('auth-alert');
    el.className = type === 'success' ? 'alert-success' : 'alert-error';
    el.innerHTML = `<i class="fa fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i> ${msg}`;
    el.style.display = 'flex';
    el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function togglePass(inputId, icon) {
    const input = document.getElementById(inputId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = icon.className.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.className = icon.className.replace('fa-eye-slash', 'fa-eye');
    }
}

function setLoading(btnId, textId, loading) {
    const btn = document.getElementById(btnId);
    const span = document.getElementById(textId);
    btn.disabled = loading;
    span.innerHTML = loading ? '<span class="spinner"></span> Aguarde...' : span.dataset.original;
    if (!loading && !span.dataset.original) return;
    if (loading && !span.dataset.original) span.dataset.original = span.innerHTML;
}

async function fazerLogin(e) {
    e.preventDefault();
    const email = document.getElementById('login-email').value.trim();
    const senha = document.getElementById('login-senha').value;
    if (!email || !senha) { showAlert('Preencha todos os campos.'); return; }

    document.getElementById('btn-login').disabled = true;
    document.getElementById('btn-login-text').innerHTML = '<span class="spinner"></span> Entrando...';

    const fd = new FormData();
    fd.append('action', 'login');
    fd.append('email', email);
    fd.append('senha', senha);

    try {
        const res = await fetch('api_loja_auth.php', { method: 'POST', body: fd });
        const data = await res.json();

        if (data.success) {
            showAlert('Login realizado! Redirecionando...', 'success');
            setTimeout(() => { window.location.href = REDIRECT; }, 800);
        } else {
            showAlert(data.error || 'Erro ao fazer login.');
            document.getElementById('btn-login').disabled = false;
            document.getElementById('btn-login-text').innerHTML = '<i class="fa fa-sign-in-alt"></i> Entrar na minha conta';
        }
    } catch (err) {
        showAlert('Erro de conexão. Tente novamente.');
        document.getElementById('btn-login').disabled = false;
        document.getElementById('btn-login-text').innerHTML = '<i class="fa fa-sign-in-alt"></i> Entrar na minha conta';
    }
}

async function fazerCadastro(e) {
    e.preventDefault();
    const nome    = document.getElementById('cad-nome').value.trim();
    const email   = document.getElementById('cad-email').value.trim();
    const senha   = document.getElementById('cad-senha').value;
    const senha2  = document.getElementById('cad-senha2').value;
    const wpp     = document.getElementById('cad-whatsapp').value.trim();
    const cpf     = document.getElementById('cad-cpf').value.trim();

    if (!nome || !email || !senha) { showAlert('Preencha os campos obrigatórios (*)'); return; }
    if (senha !== senha2) { showAlert('As senhas não coincidem.'); return; }
    if (senha.length < 6) { showAlert('A senha deve ter pelo menos 6 caracteres.'); return; }

    document.getElementById('btn-cadastro').disabled = true;
    document.getElementById('btn-cadastro-text').innerHTML = '<span class="spinner"></span> Criando conta...';

    const fd = new FormData();
    fd.append('action', 'cadastro');
    fd.append('nome', nome);
    fd.append('email', email);
    fd.append('senha', senha);
    fd.append('whatsapp', wpp);
    fd.append('cpf', cpf);

    try {
        const res = await fetch('api_loja_auth.php', { method: 'POST', body: fd });
        const data = await res.json();

        if (data.success) {
            showAlert('Conta criada com sucesso! Redirecionando...', 'success');
            setTimeout(() => { window.location.href = REDIRECT; }, 900);
        } else {
            showAlert(data.error || 'Erro ao criar conta.');
            document.getElementById('btn-cadastro').disabled = false;
            document.getElementById('btn-cadastro-text').innerHTML = '<i class="fa fa-user-plus"></i> Criar minha conta';
        }
    } catch (err) {
        showAlert('Erro de conexão. Tente novamente.');
        document.getElementById('btn-cadastro').disabled = false;
        document.getElementById('btn-cadastro-text').innerHTML = '<i class="fa fa-user-plus"></i> Criar minha conta';
    }
}

// Máscara CPF
document.getElementById('cad-cpf')?.addEventListener('input', function() {
    let v = this.value.replace(/\D/g, '').substring(0,11);
    v = v.replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d)/, '$1.$2').replace(/(\d{3})(\d{1,2})$/, '$1-$2');
    this.value = v;
});
// Máscara WhatsApp
document.getElementById('cad-whatsapp')?.addEventListener('input', function() {
    let v = this.value.replace(/\D/g, '').substring(0,11);
    v = v.replace(/^(\d{2})(\d)/,'($1) $2').replace(/(\d{5})(\d)/,'$1-$2');
    this.value = v;
});
</script>
</body>
</html>

