<?php
$where = '';
$categorias = Categoria::listar($where, null, 'id ASC');
$perguntas = Pergunta::listar($where, null);
?>
<main id="empetur">
    <form action="" autocomplete="off" id="formRoteiro">
        <section class="fase fase-1 selected">
            <div class="tela">
                <div class="box">
                    <div class="bg bg-1"></div>
                    <div class="bg bg-2"></div>
                </div>
                <div class="content">
                    <h1 class="wow fadeInUp" data-wow-delay="0.5s">Venha descobrir<br>
                    os destinos que mais<br>
                    combinam com você!</h1>
                    <img src="img/content/tela-1-sol.png" alt="Sol" class="sol wow fadeInUp" data-wow-delay="0.8s">
					<img src="img/content/tela-1-line.png" alt="line" class="line wow fadeInUp" data-wow-delay="1s">
                    <a href="#" class="bt wow fadeInUp" data-wow-delay="1.5s">Jogar</a>
                </div>
            </div>
        </section><!-- Fase 1 -->

        <section class="fase fase-2">
            <div class="tela tela-1">
                <div class="box">
                    <div class="bg"></div>
                    <div class="nuvem nuvem-1 wow fadeInUp" data-wow-delay="0.5s"></div>
                    <div class="nuvem nuvem-2 wow fadeInUp" data-wow-delay="0.6s"></div>
                    <div class="nuvem nuvem-3 wow fadeInUp" data-wow-delay="0.7s"></div>
                    <div class="nuvem nuvem-4 wow fadeInUp" data-wow-delay="0.8s"></div>
                </div>
                <div class="content content-1">
                    <div class="inputs wow fadeInUp" data-wow-delay="1s">
                        <input type="text" name="fielnome" id="inputNome" placeholder="Nome:" autocomplete="off" autofill="off" required>
                        <input type="text" name="fielemail" id="inputEmail" placeholder="E-mail:" autocomplete="off" autofill="off" required>
                        <input type="text" name="fielcidade" id="inputCidade" placeholder="Cidade:" autocomplete="off" autofill="off" required>
                    </div>
                    <a href="#" class="bt bt-1 wow fadeInUp" data-wow-delay="1.5s"><span>PRóximo</span><img src="img/content/tela-1-sol.png" alt="Sol" class="sol"></a>
                </div>
                <div class="content content-2">
                    <div class="photo wow fadeInUp" data-wow-delay="0.5s">
                        <p>tire sua foto para o passaporte</p>
                        <div class="camera">
                            <video autoplay="true" id="webCamera"></video>
                            <img id="imagemConvertida">
                        </div>
                        <input type="text" id="base_img" name="base_img" class="d-none">
                    </div>
                    <a href="#" class="bt bt-photo wow fadeInUp" data-wow-delay="0.8s"></a>
                    <a href="#" class="bt bt-refresh"></a>
                    <a href="#" class="bt bt-ok"></a>
                </div>
            </div>
        </section>
        <!-- Fase 2 -->

        <section class="fase fase-3">
            <div class="tela">
                <div class="box">
                    <div class="bg"></div>
                </div>
                <div class="content">
                    <img src="img/content/fase-3-sol.png" alt="Sol" class="sol wow fadeInUp" data-wow-delay="0.5s">
					<img src="img/content/fase-3-line.png" alt="line" class="line wow fadeInUp" data-wow-delay="0.8s">
                    <h2 class="wow fadeInUp" data-wow-delay="1s">Seu perfil de<br>
                    turista é...</h2>
                    <ul class="perfil wow fadeInUp" data-wow-delay="1.5s">
                        <?php for($c=0; $c< count($categorias); $c++) : ?>
                        <li class="opt opt<?php echo $c+1;?>">
                            <a href="<?php echo $categorias[$c]->slug;?>" data-cat="<?php echo $categorias[$c]->id?>"><?php echo $categorias[$c]->nome;?></a>
                        </li>
                        <?php endfor; ?>
                    </ul>

                </div>
            </div>
        </section><!-- Fase 3 -->


        <?php
            $tela = 1;
            $quest = 0;
            $cat = 0;
            $tempSlug = '';
            foreach($perguntas as $pergunta) :

                if($pergunta->categoria->slug != $tempSlug):
                    $tela = 1;
                    $quest = 0;
                    $cat++;
                endif;
                $tempSlug = $pergunta->categoria->slug;
                $quest++;



        ?>
            <section class="fase fase-4 <?php echo $pergunta->categoria->slug;?> <?php echo $pergunta->categoria->slug;?>-<?php echo $tela;?>">
                <div class="tela tela-<?php echo $tela++;?>">
                    <div class="box">
                        <div class="bg"></div>
                    </div>
                    <div class="content">
                        <?php echo "Imagem:". $pergunta->categoria->imagem . ".";?>
                        <?php if (@$pergunta->categoria->imagem != "") : ?>
                            <img src="<?php echo Util::baseUrl().'cms/externos/categoria/'.$pergunta->categoria->imagem; ?>" alt="<?php echo $pergunta->categoria->nome?>" class="sol wow fadeInUp" data-wow-delay="0.8s">
                        <?php else : ?>
                            <img src="img/content/tela-4-sol-<?php echo $cat;?>.svg" alt="sol" class="sol wow fadeInUp" data-wow-delay="0.8s">
                        <?php endif;?>
                        <header class="wow fadeInUp" data-wow-delay="0.5s"><h2><?php echo $pergunta->pergunta;?></h2></header>

                        <!--
                        $quest => ordem da questao
                        $pergunta->id => id da pergunta no banco
                        $pergunta->resposta_X_id -> Se é a resposta A, B ou C
                        $pergunta->peso_1 => referente a qual qr code será usado
                        -->

                        <ul class="quest quest-1 wow fadeInUp" data-wow-delay="1s">
                            <li class="opt1">
                                <a href="<?php echo $quest.'#'.$pergunta->id.'#'.$pergunta->resposta_1_id.'#'.$pergunta->peso_1;?>" ><?php echo $pergunta->resposta_1;?></a>
                            </li>
                            <li class="opt2">
                                <a href="<?php echo $quest.'#'.$pergunta->id.'#'.$pergunta->resposta_2_id.'#'.$pergunta->peso_2;?>" ><?php echo $pergunta->resposta_2;?></a>
                            </li>
                            <li class="opt3">
                                <a href="<?php echo $quest.'#'.$pergunta->id.'#'.$pergunta->resposta_3_id.'#'.$pergunta->peso_3;?>" ><?php echo $pergunta->resposta_3;?></a>
                            </li>
                        </ul>
                        <div class="pag wow fadeInUp" data-wow-delay="1.8s">
                            <?php
                                foreach($perguntas as $pergunta) :
                                    if($pergunta->categoria->slug == $tempSlug):
                            ?>
                                <span></span>
                            <?php
                                    endif;
                                endforeach;
                            ?>
                        </div>
                    </div>
                </div>
            </section>
        <?php endforeach; ?>



        <section class="fase fase-5">
            <div class="tela">
                <div class="box">
                    <div class="bg bg-1"></div>
                    <div class="bg bg-2 wow fadeInUp" data-wow-delay="1s"></div>
					<div class="nuvem nuvem-1 wow fadeInUp" data-wow-delay="0.5s"></div>
                    <div class="nuvem nuvem-2 wow fadeInUp" data-wow-delay="0.6s"></div>
                    <div class="nuvem nuvem-3 wow fadeInUp" data-wow-delay="0.7s"></div>
                    <div class="nuvem nuvem-4 wow fadeInUp" data-wow-delay="0.8s"></div>
                </div>
                <div class="content">
                    <h2 class="wow fadeInUp" data-wow-delay="1.5s">Prontinho! Agora é só escanear o<br>
                    qr code e descobrir as dicas que<br>
                    mais combina com você.</h2>
                    <img src="img/content/tela-5-bgsol.svg" alt="bgsol" class="bgsol wow fadeInUp" data-wow-delay="0.9s">
                    <img src="img/content/fase-3-sol.png" alt="Sol" class="sol wow fadeInUp" data-wow-delay="2s">
                    <img src="img/content/tela-5-line.png" alt="line" class="line wow fadeInUp" data-wow-delay="2.5s">
                    <div class="qrcode wow fadeInUp" data-wow-delay="2.6s">
                        <img src="img/content/tela-5-qrcode.png" alt="qrcode" class="code">
                    </div>
                    <p class="wow fadeInUp" data-wow-delay="2.7s">Não esqueça de pegar seu passaporte pernambuco no<br>
                    balcão da embaixada e registrar o seu próximo destino!</p>
                    <span class="bt btBack wow fadeInUp" data-wow-delay="3s">obrigado</span>
                </div>
            </div>
        </section><!-- Fase 5 -->
        <div class="hideBt btBack"></div>
    </form>
</main>

