
<link rel="shortcut icon" href="resources/img/favicon.ico" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>





<html>
  <header>
    <title>Defina seu WebSite</title>
    

  </header>

  <body>


    <div class="container" id="template">
      <div class="row justify-content-center">
          <div class="col-md-12">
              <div class="card text-center justify-content-center shaodw-lg card-1 border-0 bg-white px-sm-2">
                  <div class="card-body show ">
                      <div class="row">
                          <div class="col">
                              <h5><b>Passo 1 - Escolha o modelo do seu WebSite</b></h5>
                              <p> Este será o modelo de site que será configurado sua WebRádio </p>
                          </div>
                      </div>
                      <div class="radio-group row justify-content-between px-3 text-center a">

                        <?php

                        $count = 1;
    
                        foreach ($sites as $site) {
    
                          echo '<input type="radio" id="control_'.$count.'" name="template" value="'.$site->filename.'" hidden>
                          <label for="control_'.$count.'">
                            

                          <div class="col-auto mr-sm-2 mx-1 card-block py-0 text-center radio" >
                              <div class="flex-row" >
                                  <div class="col" >
                                      <div class="pic"> <img class="irc_mut img-fluid" src="'.$site->cover.'" width="100%" height="100%"> </div>
                                      <p><h5>'.$site->name.'</h5></p>
                                  </div>
                              </div>
                          </div>  
                          
                          <h4 style="margin-top: -20px;"><a href="'.$site->preview.'" target="_blank" class="nav-link">Pré-visualizar <img src="resources/img/preview.png" width="50px"></a></h4>
                          </label>                         
                          ';
    
                          $count++;
                          
                        }
    
                        ?>
                          
                      </div>
                      <div class="row justify-content-center">
                          <div class="col">
                              <!-- <p class="text-muted">A "Single transcript" is something you would have retrived in this way</p> -->
                          </div>
                      </div>
                      <div class="row justify-content-between">
                          <div class="col-auto"> <!--  <button type="button" class="btn btn-outline-secondary"> <span class="mr-2"><i class="fa fa-angle-left" aria-hidden="true"></i></span> Back</button>--> </div> 
                          <div class="col-auto"> <button type="button" class="btn btn-primary" onclick="avancar()">Continuar <span class="ml-2"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </button> </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div class="container" id="login">
      <div class="row justify-content-center">
          <div class="col-md-12">
              <div class="card text-center justify-content-center shaodw-lg card-1 border-0 bg-white px-sm-2">
                  <div class="card-body show ">
                      <div class="row">
                          <div class="col">
                              <h5><b>Passo 2 - Coloque o usuário e senha. Esses dados foram enviados para seu e-mail.</b></h5>
                              <p> Guarde este dados, eles serão necessários para acessar o gerenciamento do seu WebSite. </p>
                          </div>
                      </div>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="radio-group row justify-content-between px-3 text-center a">
                        
                        <form class="form-group">
                          <div class="row">
                          <label>Usuário</label><input type="text" name="username" id="username" class="form-control"/>
                          </div>
                          <div class="row">
                          <label>Senha</label><input type="password" name="password" id="password" class="form-control"/>
                          </div>
                        </form>
                          
                      </div>
                 
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="row justify-content-center">
                          <div class="col">
                              <!-- <p class="text-muted">A "Single transcript" is something you would have retrived in this way</p> -->
                          </div>
                      </div>
                      <div class="row justify-content-between">
                          <div class="col-auto"> <button type="button" class="btn btn-outline-secondary" onclick="voltar()"> <span class="mr-2"><i class="fa fa-angle-left" aria-hidden="true"></i></span> Voltar</button> </div> 
                          <div class="col-auto"> <button type="button" class="btn btn-primary" onclick="avancar()">Continuar <span class="ml-2"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </button> </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div class="container" id="port">
      <div class="row justify-content-center">
          <div class="col-md-12">
              <div class="card text-center justify-content-center shaodw-lg card-1 border-0 bg-white px-sm-2">
                  <div class="card-body show ">
                      <div class="row">
                          <div class="col">
                              <h5><b>Passo 3 - Coloque a porta da sua rádio. O número da sua porta foi enviado para seu e-mail.</b></h5>
                              <p> Ao informar a porta, seu WebSite já começa a transmitir sua rádio automáticamente. </p>
                          </div>
                      </div>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="radio-group row justify-content-between px-3 text-center a">
                        <form class="form-group">
                          <div class="row">
                          <label>Porta</label><input type="text" name="port" id="portvalue" class="form-control"/>
                          </div>
                        </form>
                      </div>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="row justify-content-center">
                          <div class="col">
                              <!-- <p class="text-muted">A "Single transcript" is something you would have retrived in this way</p> -->
                          </div>
                      </div>
                      <div class="row justify-content-between">
                          <div class="col-auto"> <button type="button" class="btn btn-outline-secondary" onclick="voltar()"> <span class="mr-2"><i class="fa fa-angle-left" aria-hidden="true"></i></span> Voltar</button> </div> 
                          <div class="col-auto"> <button type="button" class="btn btn-primary" onclick="avancar()">Continuar <span class="ml-2"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </button> </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div class="container" id="load">
      <div class="row justify-content-center">
          <div class="col-md-12">
              <div class="card text-center justify-content-center shaodw-lg card-1 border-0 bg-white px-sm-2">
                  <div class="card-body show ">
                      <div class="row">
                          <div class="col">
                              <h5><b>Seu WebSite está sendo configurado.</b></h5>
                              <p> Agora é só aguardar alguns minutos. </p>
                          </div>
                      </div>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="row justify-content-center">
                          <div class="col">
                            <img src="resources/img/load.gif">
                          </div>
                      </div>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <br/>
                      <div class="row justify-content-center">
                          <div class="col">
                              <p class="text-muted">Esse processo dura em média 5 minutos.</p>
                          </div>
                      </div>
                      <div class="row justify-content-between">
                          <!-- <div class="col-auto"> <button type="button" class="btn btn-outline-secondary"> <span class="mr-2"><i class="fa fa-angle-left" aria-hidden="true"></i></span> Voltar</button> </div>  -->
                          <!-- <div class="col-auto"> <button type="button" class="btn btn-primary" onclick="avancar()">Continuar <span class="ml-2"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </button> </div> -->
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
<!--
    <section>
      <div class="row col-12" id="template">
        
            <div class="d-flex justify-content-center">
              <span class="display-2">Passo 1 - Escolha o modelo do seu WebSite</span>
            </div>
            
            <div class="d-flex justify-content-center">
                    <?php

                    $count = 1;

                    foreach ($sites as $site) {

                      echo '
                        <div class="col-5">
                          
                            <input type="radio" id="control_'.$count.'" name="template" value="'.$site->filename.'">
                            <label for="control_'.$count.'">
                              <img src="'.$site->cover.'" width="100%" height="100%"/>
                            </label>

                          
                        </div>
                        
                      ';

                      $count++;
                      
                    }

                    ?>
            </div>
      </div>

      <div class="row col-12" id="login-div">
          <div class="row col-12">
                <div class="d-flex justify-content-center">
                <h1>Passo 2 - Coloque o usuário e senha. Esses dados foram enviados para seu e-mail.</h1>
                </div>
          </div>
        <div class="d-flex justify-content-center" >
          

          <div class="col-3" id="login">
            Usuário <input type="text" name="username" id="username" class="form-control col-2"/>
            Senha<input type="password" name="password" id="password" class="form-control col-2"/>
          </div>

        </div>
      </div>
      <div class="row col-12" id="port-div">
        <div class="row col-12">
                <div class="d-flex justify-content-center">
                <h1>Passo 3 - Coloque a porta da sua rádio. O número da sua porta foi enviado para seu e-mail.</h1>
                </div>
          </div>

        <div class="d-flex justify-content-center">
          <div class="col-3" id="port">
            Porta <input type="text" name="portvalue" id="portvalue" class="form-control col-2"/>
          </div>
        </div>
      </div>
      <div class="row col-12">
        <div class="d-flex justify-content-center" id="load-div">
          <div id="load">
            <center><img src="resources/img/load.gif"></center>
            <h1>Configurando o WebSite, aguarde...</h1>
          </div>
        </div>
      </div>
    </section>


    <div class="row col-12">
      <center><button class="btn btn-primary col-2" onclick="avancar()" id="buttonAvancar">Avançar</button></center>
    </div>
  -->
  </body>

</html>

<?php

if(!$firstaccess){
        echo "
        <script>
          Swal.fire({
            title: 'Deseja recriar seu WebSite? Todo site atual será apagado definitivamente.',
            text: \"Ao continuar com esse processo, você perderá todo o WebSite que já criou até agora!\",
            icon: 'warning',
            allowOutsideClick: false,
            showCancelButton: true,
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sim, eu quero recriar!'
          }).then((result) => {
            if (!result.isConfirmed) {
               // window.history.back();
              document.location.reload(true);
            }
          })
        </script>
        ";
    }

?>

<script src="resources/js/plugin.js"></script>

