One Hat Cyber Team

View File Name : index.php

<?php
require_once __DIR__ . '/../config/database.php';

$hash = $_GET['hash'] ?? '';

$empresas = $pdo->query("SELECT id, nome, slug, logo, telefone, endereco FROM empresas WHERE ativo = 1 AND aprovado = 1 ORDER BY nome");
$empresasLista = $empresas->fetchAll();

$msg = $_SESSION['site_msg'] ?? '';
unset($_SESSION['site_msg']);

$isLogged = isAuthenticated();
$userEmpresaId = (int)($_SESSION['empresa_id'] ?? 0);
$userEmpresaNome = $_SESSION['empresa_nome'] ?? '';
?>
<!DOCTYPE html>
<html lang="pt-BR" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agende seu horario</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Inter', sans-serif; margin:0; padding:0; box-sizing:border-box; }
        body { background:#0b0b1a; color:#f0f0ff; min-height:100vh; }
        .header-bar { background:rgba(18,18,42,0.8); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.06); padding:1.5rem 0; }
        .header-bar h4 { background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
        .step-bar { display:flex; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; }
        .step-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.1); transition:all 0.3s; }
        .step-dot.active { background:#667eea; box-shadow:0 0 12px rgba(102,126,234,0.5); width:28px; border-radius:5px; }
        .step-dot.done { background:#10b981; }
        .section-title { font-weight:700; font-size:1.3rem; margin-bottom:1.5rem; }
        .section-title i { margin-right:0.75rem; color:#00d4ff; }
        .empresa-card { background:rgba(18,18,42,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:2rem 1.5rem; text-align:center; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); cursor:pointer; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
        .empresa-card:hover { transform:translateY(-6px); border-color:rgba(102,126,234,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.3); }
        .empresa-card.selected { border-color:#667eea; box-shadow:0 0 30px rgba(102,126,234,0.2); }
        .empresa-logo { width:100%; max-width:160px; height:auto; max-height:80px; object-fit:contain; margin-bottom:1rem; border-radius:12px; }
        .empresa-card .empresa-nome { font-weight:700; font-size:1.05rem; margin-bottom:0.25rem; }
        .empresa-card .empresa-info { font-size:0.8rem; color:rgba(255,255,255,0.4); }
        .profissional-card { background:rgba(18,18,42,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:1.5rem 1rem; text-align:center; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); cursor:pointer; height:100%; }
        .profissional-card:hover { transform:translateY(-6px); border-color:rgba(102,126,234,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.3); }
        .profissional-card.selected { border-color:#667eea; box-shadow:0 0 30px rgba(102,126,234,0.2); }
        .profissional-foto { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 0.75rem; border:2px solid rgba(255,255,255,0.08); }
        .profissional-card .prof-nome { font-weight:600; font-size:1rem; }
        .profissional-card .prof-esp { font-size:0.8rem; color:rgba(255,255,255,0.4); }
        .servico-card { background:rgba(18,18,42,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:1.25rem; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); cursor:pointer; height:100%; }
        .servico-card:hover { transform:translateY(-4px); border-color:rgba(102,126,234,0.3); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
        .servico-card.selected { border-color:#667eea; box-shadow:0 0 25px rgba(102,126,234,0.2); }
        .servico-card .serv-nome { font-weight:600; font-size:1rem; margin-bottom:0.25rem; }
        .servico-card .serv-desc { font-size:0.8rem; color:rgba(255,255,255,0.4); margin-bottom:0.5rem; }
        .servico-card .serv-preco { font-weight:700; font-size:1.2rem; background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
        .servico-card .serv-duracao { font-size:0.75rem; color:rgba(255,255,255,0.3); }
        .date-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(50px, 1fr)); gap:0.5rem; }
        .date-item { background:rgba(18,18,42,0.6); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:0.5rem 0.25rem; text-align:center; cursor:pointer; transition:all 0.3s; }
        .date-item:hover { border-color:rgba(102,126,234,0.4); transform:translateY(-2px); }
        .date-item .dia-num { font-weight:700; font-size:1.1rem; line-height:1.2; }
        .date-item .dia-nome { font-size:0.6rem; color:rgba(255,255,255,0.4); text-transform:uppercase; }
        .date-item.selected { background:linear-gradient(135deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2)); border-color:#667eea; box-shadow:0 0 20px rgba(102,126,234,0.15); }
        .time-slot { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:0.6rem 0.8rem; text-align:center; cursor:pointer; transition:all 0.3s; }
        .time-slot:hover { background:rgba(102,126,234,0.1); border-color:#667eea; transform:translateY(-2px); }
        .time-slot.selected { background:linear-gradient(135deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2)); border-color:#667eea; }
        .time-slot .hora-text { font-weight:600; font-size:0.95rem; }
        .btn-gradient { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); border:none; border-radius:12px; padding:0.75rem 2rem; font-weight:600; color:#fff; transition:all 0.3s; box-shadow:0 4px 20px rgba(102,126,234,0.4); }
        .btn-gradient:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(102,126,234,0.5); color:#fff; }
        .btn-gradient:disabled { opacity:0.4; transform:none; }
        .btn-outline-step { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:0.75rem 1.5rem; color:#f0f0ff; transition:all 0.3s; }
        .btn-outline-step:hover { border-color:#667eea; background:rgba(102,126,234,0.1); color:#fff; }
        .confirm-box { background:rgba(18,18,42,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:2rem; max-width:500px; margin:0 auto; }
        .confirm-item { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.04); }
        .confirm-item:last-child { border-bottom:none; }
        .confirm-item .label { color:rgba(255,255,255,0.4); font-size:0.85rem; }
        .confirm-item .value { font-weight:600; }
        .form-control, .form-select { background:rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.1)!important; color:#fff!important; border-radius:12px!important; padding:0.7rem 1rem!important; }
        .form-control:focus, .form-select:focus { border-color:#667eea!important; box-shadow:0 0 0 3px rgba(102,126,234,0.15)!important; }
        .form-label { color:rgba(255,255,255,0.5); font-weight:500; font-size:0.85rem; }
        .alert { border-radius:12px; border:none; }
        .alert-success { background:rgba(16,185,129,0.15); color:#6ee7b7; border:1px solid rgba(16,185,129,0.2); }
        .alert-info { background:rgba(14,165,233,0.15); color:#7dd3fc; border:1px solid rgba(14,165,233,0.2); }
        .login-box { max-width:400px; margin:0 auto; background:rgba(18,18,42,0.6); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:2rem; }
        .loading-spinner { display:inline-block; width:20px; height:20px; border:2px solid rgba(255,255,255,0.1); border-top-color:#667eea; border-radius:50%; animation:spin 0.6s linear infinite; }
        @keyframes spin { to { transform:rotate(360deg); } }
        .fade-in { animation:fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

        @media (max-width:576px) {
            .empresa-logo { max-width:100px; max-height:50px; }
            .profissional-foto { width:60px; height:60px; }
            .date-grid { grid-template-columns:repeat(5, 1fr); gap:0.35rem; }
            .date-item { padding:0.35rem 0.1rem; }
            .date-item .dia-num { font-size:0.9rem; }
            .confirm-box { padding:1.25rem; }
            .empresa-card { padding:1.25rem 0.75rem; }
            .profissional-card { padding:1rem 0.5rem; }
            .servico-card { padding:1rem; }
        }
        @media (min-width:577px) and (max-width:768px) {
            .empresa-logo { max-width:130px; max-height:65px; }
            .date-grid { grid-template-columns:repeat(7, 1fr); }
        }
    </style>
</head>
<body>
    <div class="header-bar">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <div style="width:44px;height:44px;background:linear-gradient(135deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#00d4ff"><i class="bi bi-scissors"></i></div>
                    <div><h4 class="mb-0 fw-bold">Agende seu horario</h4><small class="text-secondary">Escolha a barbearia e agende online</small></div>
                </div>
                <div class="d-flex gap-2">
                    <?php if ($isLogged): ?>
                    <a href="<?= URL_BASE ?>logout.php" class="btn btn-outline-light btn-sm"><i class="bi bi-box-arrow-right"></i> Sair</a>
                    <?php else: ?>
                    <a href="<?= URL_BASE ?>login.php" class="btn btn-outline-light btn-sm"><i class="bi bi-box-arrow-in-right"></i> Entrar</a>
                    <a href="<?= URL_BASE ?>register.php" class="btn btn-gradient btn-sm"><i class="bi bi-person-plus"></i> Cadastrar</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-4">
        <?php if ($msg): ?>
        <div class="alert alert-success fade-in mb-4"><i class="bi bi-check-circle me-2"></i><?= sanitize($msg) ?></div>
        <?php endif; ?>

        <?php if (!$isLogged && !$hash): ?>
        <div class="row justify-content-center py-5">
            <div class="col-lg-5">
                <div class="login-box text-center fade-in">
                    <div style="width:60px;height:60px;background:linear-gradient(135deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2));border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.8rem;color:#00d4ff"><i class="bi bi-person-lock"></i></div>
                    <h5 class="fw-bold mb-2">Identifique-se</h5>
                    <p class="text-secondary small mb-4">Faca login ou crie sua conta para agendar</p>
                    <div class="d-grid gap-3">
                        <a href="<?= URL_BASE ?>login.php" class="btn btn-gradient w-100"><i class="bi bi-box-arrow-in-right me-2"></i>Fazer Login</a>
                        <a href="<?= URL_BASE ?>register.php" class="btn btn-outline-step w-100"><i class="bi bi-person-plus me-2"></i>Criar Conta</a>
                    </div>
                    <?php if ($hash): ?>
                    <div class="mt-3"><small class="text-secondary">Ou <a href="<?= URL_BASE ?>site/index.php?hash=<?= sanitize($hash) ?>" class="text-info">continuar com seu link</a></small></div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php else: ?>

        <div class="step-bar" id="stepBar">
            <div class="step-dot <?= $isLogged ? 'done' : 'active' ?>" data-step="1"></div>
            <div class="step-dot <?= $isLogged ? 'active' : '' ?>" data-step="2"></div>
            <div class="step-dot" data-step="3"></div>
            <div class="step-dot" data-step="4"></div>
            <div class="step-dot" data-step="5"></div>
        </div>

        <form method="POST" action="agendar_salvar.php" id="formAgendamento">
            <input type="hidden" name="hash_link" value="<?= sanitize($hash) ?>">
            <input type="hidden" name="empresa_id" id="empresaId" value="<?= $userEmpresaId ?>">

            <?php if (!$isLogged): ?>
            <!-- STEP 1: Escolher Barbearia -->
            <div id="step1" class="step-content fade-in">
                <h3 class="section-title text-center"><i class="bi bi-building"></i>Escolha a barbearia</h3>
                <div class="row g-3 justify-content-center">
                    <?php foreach ($empresasLista as $e): ?>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="empresa-card" data-empresa-id="<?= $e['id'] ?>" data-empresa-nome="<?= sanitize($e['nome']) ?>">
                            <?php if ($e['logo']): ?>
                            <img src="<?= URL_BASE . $e['logo'] ?>" class="empresa-logo" alt="<?= sanitize($e['nome']) ?>" loading="lazy">
                            <?php else: ?>
                            <div style="width:100%;max-width:120px;height:80px;background:linear-gradient(135deg,rgba(102,126,234,0.1),rgba(118,75,162,0.1));border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:2rem;color:#667eea"><i class="bi bi-scissors"></i></div>
                            <?php endif; ?>
                            <div class="empresa-nome"><?= sanitize($e['nome']) ?></div>
                            <?php if ($e['telefone']): ?><div class="empresa-info"><i class="bi bi-telephone me-1"></i><?= sanitize($e['telefone']) ?></div><?php endif; ?>
                            <?php if ($e['endereco']): ?><div class="empresa-info"><i class="bi bi-geo-alt me-1"></i><?= sanitize(mb_substr($e['endereco'], 0, 40)) ?></div><?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <div class="text-center mt-4">
                    <button type="button" class="btn-gradient" id="btnStep1" disabled onclick="avancarPasso(2)">Continuar <i class="bi bi-arrow-right ms-1"></i></button>
                </div>
            </div>
            <?php endif; ?>

            <!-- STEP 2: Escolher Profissional -->
            <div id="step2" class="step-content" style="<?= $isLogged ? 'display:block' : 'display:none' ?>">
                <h3 class="section-title text-center"><i class="bi bi-person-badge"></i>Escolha o profissional</h3>
                <div class="row g-3 justify-content-center" id="profissionaisContainer">
                    <div class="col-12 text-center text-secondary py-5"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando profissionais...</small></div>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <?php if (!$isLogged): ?>
                    <button type="button" class="btn-outline-step" onclick="voltarPasso(1)"><i class="bi bi-arrow-left me-1"></i>Voltar</button>
                    <?php endif; ?>
                    <input type="hidden" name="profissional_id" id="profissionalId">
                    <button type="button" class="btn-gradient" id="btnStep2" disabled onclick="avancarPasso(3)">Continuar <i class="bi bi-arrow-right ms-1"></i></button>
                </div>
            </div>

            <!-- STEP 3: Escolher Servico -->
            <div id="step3" class="step-content" style="display:none">
                <h3 class="section-title text-center"><i class="bi bi-scissors"></i>Escolha o servico</h3>
                <div class="row g-3 justify-content-center" id="servicosContainer">
                    <div class="col-12 text-center text-secondary py-5"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando servicos...</small></div>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn-outline-step" onclick="voltarPasso(2)"><i class="bi bi-arrow-left me-1"></i>Voltar</button>
                    <input type="hidden" name="servico_id" id="servicoId">
                    <button type="button" class="btn-gradient" id="btnStep3" disabled onclick="avancarPasso(4)">Continuar <i class="bi bi-arrow-right ms-1"></i></button>
                </div>
            </div>

            <!-- STEP 4: Escolher Data + Horario -->
            <div id="step4" class="step-content" style="display:none">
                <h3 class="section-title text-center"><i class="bi bi-calendar"></i>Escolha a data e horario</h3>
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div id="datasContainer" class="date-grid fade-in">
                            <div class="col-12 text-center text-secondary py-5"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando datas...</small></div>
                        </div>
                    </div>
                </div>
                <div id="horariosStep" style="display:none" class="mt-4 fade-in">
                    <h4 class="text-center text-secondary mb-3" style="font-size:0.9rem"><i class="bi bi-clock me-1"></i>Horarios disponiveis em <span id="dataLabel" class="text-white fw-semibold"></span></h4>
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div id="horariosContainer" class="row g-2"></div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn-outline-step" onclick="voltarPasso(3)"><i class="bi bi-arrow-left me-1"></i>Voltar</button>
                    <div>
                        <input type="hidden" name="data" id="dataAgendamento">
                        <input type="hidden" name="hora" id="horaAgendamento">
                        <button type="button" class="btn-gradient" id="btnStep4" disabled onclick="avancarPasso(5)">Continuar <i class="bi bi-arrow-right ms-1"></i></button>
                    </div>
                </div>
            </div>

            <!-- STEP 5: Confirmar -->
            <div id="step5" class="step-content" style="display:none">
                <h3 class="section-title text-center"><i class="bi bi-check-lg"></i>Confirme seu agendamento</h3>
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="confirm-box fade-in">
                            <div class="confirm-item"><span class="label">Barbearia</span><span class="value" id="confirmEmpresa">-</span></div>
                            <div class="confirm-item"><span class="label">Profissional</span><span class="value" id="confirmProfissional">-</span></div>
                            <div class="confirm-item"><span class="label">Servico</span><span class="value" id="confirmServico">-</span></div>
                            <div class="confirm-item"><span class="label">Data</span><span class="value" id="confirmData">-</span></div>
                            <div class="confirm-item"><span class="label">Horario</span><span class="value" id="confirmHora">-</span></div>
                            <div class="text-center mt-4">
                                <button type="submit" class="btn-gradient btn-lg"><i class="bi bi-check-lg me-1"></i>Confirmar Agendamento</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-3">
                    <button type="button" class="btn-outline-step" onclick="voltarPasso(4)"><i class="bi bi-arrow-left me-1"></i>Voltar</button>
                </div>
            </div>
        </form>
        <?php endif; ?>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        var isLogged = <?= $isLogged ? 'true' : 'false' ?>;
        var userEmpresaId = <?= $userEmpresaId ?>;
        var userEmpresaNome = '<?= sanitize($userEmpresaNome) ?>';
        var passoAtual = isLogged ? 2 : 1;
        var selecionado = { empresaId: isLogged ? userEmpresaId : null, empresaNome: isLogged ? userEmpresaNome : null, profId: null, profNome: null, servId: null, servNome: null, data: null, hora: null };

        // Step 1: Escolher barbearia (apenas visitantes)
        <?php if (!$isLogged): ?>
        document.querySelectorAll('.empresa-card').forEach(function(c) {
            c.addEventListener('click', function() {
                document.querySelectorAll('.empresa-card').forEach(function(x){x.classList.remove('selected')});
                this.classList.add('selected');
                selecionado.empresaId = this.dataset.empresaId;
                selecionado.empresaNome = this.dataset.empresaNome;
                document.getElementById('empresaId').value = this.dataset.empresaId;
                document.getElementById('btnStep1').disabled = false;
            });
        });
        <?php endif; ?>

        // Step 2: Carregar profissionais
        function carregarProfissionais(empresaId) {
            var c = document.getElementById('profissionaisContainer');
            c.innerHTML = '<div class="col-12 text-center text-secondary py-5"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando profissionais...</small></div>';
            fetch('<?= URL_BASE ?>api/profissionais.php?empresa_id=' + empresaId)
                .then(function(r) { return r.json(); })
                .then(function(lista) {
                    c.innerHTML = '';
                    if (lista.length === 0) {
                        c.innerHTML = '<div class="col-12 text-center text-secondary py-5">Nenhum profissional disponivel</div>';
                        return;
                    }
                    lista.forEach(function(p) {
                        var col = document.createElement('div');
                        col.className = 'col-6 col-md-4 col-lg-3';
                        var card = document.createElement('div');
                        card.className = 'profissional-card';
                        card.dataset.profId = p.id;
                        card.dataset.profNome = p.nome;
                        var fotoHtml = p.foto
                            ? '<img src="<?= URL_BASE ?>' + p.foto + '" class="profissional-foto" alt="' + p.nome + '" loading="lazy">'
                            : '<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(102,126,234,0.15),rgba(118,75,162,0.15));display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;font-size:1.8rem;color:#667eea"><i class="bi bi-person"></i></div>';
                        card.innerHTML = fotoHtml + '<div class="prof-nome">' + p.nome + '</div>' + (p.especialidade ? '<div class="prof-esp">' + p.especialidade + '</div>' : '');
                        card.addEventListener('click', function() {
                            document.querySelectorAll('.profissional-card').forEach(function(x){x.classList.remove('selected')});
                            this.classList.add('selected');
                            selecionado.profId = this.dataset.profId;
                            selecionado.profNome = this.dataset.profNome;
                            document.getElementById('profissionalId').value = this.dataset.profId;
                            document.getElementById('btnStep2').disabled = false;
                        });
                        col.appendChild(card);
                        c.appendChild(col);
                    });
                }).catch(function(err) { console.error(err); c.innerHTML = '<div class="col-12 text-center text-danger py-5">Erro ao carregar</div>'; });
        }

        // Step 3: Carregar servicos do profissional
        function carregarServicos(empresaId, profissionalId) {
            var c = document.getElementById('servicosContainer');
            c.innerHTML = '<div class="col-12 text-center text-secondary py-5"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando servicos...</small></div>';
            fetch('<?= URL_BASE ?>api/servicos_site.php?empresa_id=' + empresaId + '&profissional_id=' + profissionalId)
                .then(function(r) { return r.json(); })
                .then(function(lista) {
                    c.innerHTML = '';
                    if (lista.length === 0) {
                        c.innerHTML = '<div class="col-12 text-center text-secondary py-5">Nenhum servico disponivel para este profissional</div>';
                        return;
                    }
                    lista.forEach(function(s) {
                        var col = document.createElement('div');
                        col.className = 'col-6 col-md-4';
                        var card = document.createElement('div');
                        card.className = 'servico-card';
                        card.dataset.servId = s.id;
                        card.dataset.servNome = s.nome;
                        card.innerHTML = '<div class="serv-nome">' + s.nome + '</div>' +
                            (s.descricao ? '<div class="serv-desc">' + s.descricao + '</div>' : '') +
                            '<div class="d-flex justify-content-between align-items-end"><span class="serv-preco">R$ ' + parseFloat(s.preco).toFixed(2).replace('.',',') + '</span><span class="serv-duracao"><i class="bi bi-clock me-1"></i>' + s.duracao + ' min</span></div>';
                        card.addEventListener('click', function() {
                            document.querySelectorAll('.servico-card').forEach(function(x){x.classList.remove('selected')});
                            this.classList.add('selected');
                            selecionado.servId = this.dataset.servId;
                            selecionado.servNome = this.dataset.servNome;
                            document.getElementById('servicoId').value = this.dataset.servId;
                            document.getElementById('btnStep3').disabled = false;
                        });
                        col.appendChild(card);
                        c.appendChild(col);
                    });
                }).catch(function(err) { console.error(err); c.innerHTML = '<div class="col-12 text-center text-danger py-5">Erro ao carregar</div>'; });
        }

        // Step 4: Carregar datas
        function carregarDatas(profissionalId, empresaId) {
            var c = document.getElementById('datasContainer');
            c.innerHTML = '<div class="col-12 text-center text-secondary py-4"><div class="loading-spinner"></div><br><small class="mt-2 d-block">Carregando datas...</small></div>';
            document.getElementById('horariosStep').style.display = 'none';
            document.getElementById('horariosContainer').innerHTML = '';
            document.getElementById('btnStep4').disabled = true;
            fetch('<?= URL_BASE ?>api/datas_disponiveis.php?profissional_id=' + profissionalId + '&empresa_id=' + empresaId)
                .then(function(r) { return r.json(); })
                .then(function(datas) {
                    c.innerHTML = '';
                    if (datas.length === 0) {
                        c.innerHTML = '<div class="col-12 text-center text-secondary py-5"><i class="bi bi-calendar-x fs-1 d-block mb-2"></i>Nenhuma data disponivel</div>';
                        return;
                    }
                    var diasSemana = ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'];
                    datas.forEach(function(d) {
                        var partes = d.data.split('-');
                        var dt = new Date(partes[0], partes[1]-1, partes[2]);
                        var diaSemana = dt.getDay();
                        var div = document.createElement('div');
                        div.className = 'date-item';
                        div.dataset.data = d.data;
                        div.innerHTML = '<div class="dia-nome">' + diasSemana[diaSemana] + '</div><div class="dia-num">' + String(dt.getDate()).padStart(2,'0') + '/' + String(dt.getMonth()+1).padStart(2,'0') + '</div>';
                        div.addEventListener('click', function() {
                            document.querySelectorAll('.date-item').forEach(function(x){x.classList.remove('selected')});
                            this.classList.add('selected');
                            selecionado.data = this.dataset.data;
                            document.getElementById('dataAgendamento').value = this.dataset.data;
                            carregarHorarios(profissionalId, this.dataset.data);
                        });
                        c.appendChild(div);
                    });
                }).catch(function(err) { console.error(err); c.innerHTML = '<div class="col-12 text-center text-danger py-5">Erro ao carregar datas</div>'; });
        }

        // Carregar horarios para data selecionada
        function carregarHorarios(profissionalId, data) {
            var c = document.getElementById('horariosContainer');
            c.innerHTML = '<div class="col-12 text-center py-3"><div class="loading-spinner"></div></div>';
            document.getElementById('horariosStep').style.display = 'block';
            document.getElementById('horaAgendamento').value = '';
            document.getElementById('btnStep4').disabled = true;
            var partes = data.split('-');
            document.getElementById('dataLabel').textContent = partes[2] + '/' + partes[1] + '/' + partes[0];
            fetch('<?= URL_BASE ?>api/horarios.php?profissional_id=' + profissionalId + '&data=' + data + '&servico_id=' + selecionado.servId)
                .then(function(r) { return r.json(); })
                .then(function(horarios) {
                    c.innerHTML = '';
                    if (horarios.length === 0) {
                        c.innerHTML = '<div class="col-12 text-center text-secondary py-3">Nenhum horario disponivel nesta data</div>';
                        return;
                    }
                    horarios.forEach(function(h) {
                        var col = document.createElement('div');
                        col.className = 'col-3 col-md-2';
                        var div = document.createElement('div');
                        div.className = 'time-slot';
                        div.innerHTML = '<div class="hora-text">' + h + '</div>';
                        div.dataset.hora = h;
                        div.addEventListener('click', function() {
                            document.querySelectorAll('.time-slot').forEach(function(s){s.classList.remove('selected')});
                            this.classList.add('selected');
                            selecionado.hora = this.dataset.hora;
                            document.getElementById('horaAgendamento').value = this.dataset.hora;
                            document.getElementById('btnStep4').disabled = false;
                        });
                        col.appendChild(div);
                        c.appendChild(col);
                    });
                }).catch(function(err) { console.error(err); c.innerHTML = '<div class="col-12 text-center text-danger py-3">Erro ao carregar horarios</div>'; });
        }

        // Navegacao entre passos
        function avancarPasso(n) {
            if (n === 2) { carregarProfissionais(selecionado.empresaId); }
            if (n === 3) { carregarServicos(selecionado.empresaId, selecionado.profId); }
            if (n === 4) { carregarDatas(selecionado.profId, selecionado.empresaId); }
            if (n === 5) {
                document.getElementById('confirmEmpresa').textContent = selecionado.empresaNome;
                document.getElementById('confirmProfissional').textContent = selecionado.profNome;
                document.getElementById('confirmServico').textContent = selecionado.servNome;
                var p = selecionado.data.split('-');
                document.getElementById('confirmData').textContent = p[2] + '/' + p[1] + '/' + p[0];
                document.getElementById('confirmHora').textContent = selecionado.hora;
            }
            mostrarPasso(n);
        }

        function voltarPasso(n) { mostrarPasso(n); }

        function mostrarPasso(n) {
            passoAtual = n;
            document.querySelectorAll('.step-content').forEach(function(e){e.style.display='none'});
            document.getElementById('step' + n).style.display = 'block';
            document.querySelectorAll('.step-dot').forEach(function(d){
                var s = parseInt(d.dataset.step);
                d.classList.remove('active','done');
                if (s === n) d.classList.add('active');
                else if (s < n) d.classList.add('done');
            });
        }

        document.getElementById('formAgendamento').addEventListener('submit', function(e) {
            if (!selecionado.hora || !selecionado.data || !selecionado.profId || !selecionado.empresaId || !selecionado.servId) {
                e.preventDefault();
                alert('Selecione todas as opcoes antes de confirmar');
            }
        });

        <?php if ($isLogged): ?>
        document.addEventListener('DOMContentLoaded', function() {
            carregarProfissionais(userEmpresaId);
        });
        <?php endif; ?>
    </script>
</body>
</html>