<?php $_shouldextend[1]=1; ?>

<?php $this->startSection('content'); ?>
	
	<?php $this->startPush("metadata"); ?>
 <?php echo $metadata; ?>

	<?php $this->stopPush(); ?>

	<?php $this->startPush('styles'); ?>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
 integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
 crossorigin=""></script>
	<?php $this->stopPush(); ?>

	<div class="container-fluid first-tip position-relative bg-light">

 <div class="position-fixed d-flex on-right-0 selected-plan-holder justify-content-end "
  style="top: 55%; z-index: 999;">
 <div class="plan-container" style="width: 200px;">

 </div>
 </div>

 <div id="img-container-2" class="carousel slide mt-0 mb-0" data-ride="carousel" data-interval="false">

 <!-- The slideshow -->
 <div class="carousel-inner">
 <div class="carousel-item  active">
 <picture>
 <source media="(max-width: 480px)" srcset="assets/img/banner-480wv.png">
 <source media="(max-width: 850px)" srcset="assets/img/banner-850wv.png">
 <source media="(min-width: 1499px)" srcset="assets/img/banner.png">
 <img class="d-block w-100 img-fluid animated-slower fadeOutIMG section-x-rounded"
  data-src="assets/img/banner.png" src="assets/img/banner.png"
  alt="Second slide" style="height: 85vh;">
 </picture>
 </div>
 </div>
 </div>

 <div class="w-100 h-100 position-absolute on-top-0 section-x-rounded" style="
 background: linear-gradient(-45deg,rgba(0,0,0,.02),rgba(0,0,0,.3),rgba(103,58,183 ,1));">
 <div class="container h-100 section">
 <div class="row align-items-center justify-content-end h-100 pt-5 row-x-100">
 <div class="col-12 col-lg-7">
 <div class="grid-container py-4">
 <div class="d-flex justify-content-center pb-4 mb-3 mt-2">
 <img src="assets/img/dabandahomebranco.png" width="350px" height="70" alt="
  daBanda home, serviço de internet que pode ser alocado em sua residência ou empresa
 ">
 </div>
 <h4 class="text-std-3 font-weight-bold text-center text-uppercase text-bottom py-3 sm-font pb-3 hidden">
 daBanda Home</h4>
 <h1 class=" text-justify font-weight-1 text-h-sm text-center text-light mb-0 text-shadow text-std-2">
 A internet 4G/LTE que kuya para sua residência ou empresa

 </h1>

 <div class="d-flex justify-content-center py-3 ">
 <a class="btn btn-outline-light border-x-light text-light text-shadow rounded-x text-center scroll-link"
    href="#plans">Planos
 <i class="material-icons float-right ml-2 ">expand_more</i>
 </a>
 </div>
 </div>
 </div>

 <div class="col-12 col-lg-5">
 <div class="px-4 grid-container bg-white rounded-x py-4  shadow-lg position-relative">
 <div class="hidden position-absolute justify-content-between btn-toggle-selected-plan align-items-center
 rounded-x py-2 shadow-x border px-3 on-right-1  bg-light" style="top: -.5rem;">
 <p class="text-dark mb-0 text-std-2 font-weight-bold">Plano: Tá fácil</p>
 </div>
 <h3 class="text-center big-font-2 text-std-2 py-3">Subscreva-se</h3>
 <div class="form-group">
 <label for="username" class="sm-font text-violet text-std-2">Nome completo:</label>
 <input type="text" class="form-control rounded-x border-x sm-font" id="username" name="username"
    autocomplete="off" placeholder="Nome">
 </div>
 <div class="form-group">
 <label for="phonenumber" class="sm-font text-violet text-std-2">Contacto:</label>
 <input type="tel" class="form-control text-std-2 sm-font rounded-x border-x phone-ao-mask" id="phonenumber"
    name="phonenumber">
 </div>
 <div class="form-group">
 <label for="emailAddress" class="sm-font text-violet text-std-2">E-mail:</label>
 <input type="email"
    class="form-control rounded-x border-x sm-font text-std-2 email-mask"
    id="emailAddress"
    placeholder="Endereço de e-mail">
 </div>
 <div class="form-group">
 <p for="pwd" class="sm-font text-violet text-std-2">Cliente:</p>
 <div class="custom-control custom-radio custom-control-inline">
 <input type="radio" class="custom-control-input" id="client-type" name="client-type"
    value="1"
    checked>
 <label class="custom-control-label text-std-2 sm-font pt-1" for="client-type">Individual</label>
 </div>
 <div class="custom-control custom-radio custom-control-inline">
 <input type="radio" class="custom-control-input" id="client-type2"
    value="2"
    name="client-type">
 <label class="custom-control-label text-std-2 sm-font pt-1" for="client-type2">Empresa</label>
 </div>
 </div>
 <button class="btn px-4 d-block mx-auto rounded-x py-2 text-std-2 scale-item"
 style="border:2px solid rgba(209,196,233 ,1); background: transparent;"  data-toggle="modal" data-target="#finish-modal">
 Continuar
 <i class="material-icons float-right ml-2 ">chevron_right</i>
 </button>

 </div>
 </div>

 </div>
 </div>

 </div>

	</div>
	<div class="bg-white section-x-rounded">
 <div class="section-x-rounded" style="
background: rgb(64, 35, 142);
">
 <section class="container-fluid pt-5 pb-5 position-relative  bg-light section-x-rounded" id="services">

 <div class="container mb-4 section">
 <h2 class="text-std-2 text-arrow mb-3 border-bottom-0">Sobre</h2>
 <div class="row align-items-center justify-content-between mt-5">
 <div class="col-12 col-lg-5">

 <div class="d-flex justify-content-center img-ico-1">
 <img src="assets/img/iconephones.svg" class="w-100 phones" alt="Plataformas dabanda home">
 </div>

 </div>

 <div class="col-12 col-lg-7 ">

 <div class="rounded grid-container py-4  position-relative side-text">
 <div class="d-flex justify-content-center my-3">
 <h1 class="text-violet text-std-2 big-font-1"><?php echo static::e($package->package_name); ?></h1>
 </div>
 <p class="text-std-2 font-weight-1 text-palid-2 text-justify big-font-2">
 <?php echo static::e($package->package_description); ?>

 </p>
 <p class="text-std-2 font-weight-1 text-palid-2 text-justify big-font-2">
 Fique descansado, a frequência usada na transmissão permite uma cobertura até onde
 outras
 operadoras não alcançam
 </p>

 </div>
 </div>
 </div>
 </div>
 </section>
 <section class="container-fluid pt-5 pb-5 position-relative commercial-banner  bg-light section-x-rounded"
  id="services" style="
 background: url('assets/img/banner1.svg') 100% 100%;
 background-size: cover;
 height: 60vh;
 background-repeat: no-repeat;
 ">

 <div class=" container-fluid h-100">
 <div class="row align-items-end justify-content-end h-100 ">
 <div class="col-12 col-lg-7 ">

 <div class="rounded grid-container pb-4 pt-1  position-relative side-text">
 <div class="d-flex justify-content-center">
 <a class="btn btn-lg btn-outline-light btn-subscribe-ancor border-x-light text-std-2 rounded-x big-font-2 scroll-link"
    href="#begin">
 Subscrever-me
 <i class="material-icons float-right ml-2 big-font-1">chevron_right</i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
 </div>
 <div class="">
 <section class="container-fluid pt-5 pb-5  position-relative section-x-rounded">
 <div class="">
 <div class="" id="plans">
 <div class="container">
 <h2 class="text-std-2 text-arrow mb-3 border-bottom-0">Com os melhores planos</h2>
 <div class="row align-items-center justify-content-center mt-5">

 <?php if(count($package->plans) > 0): ?>
 <?php $__currentLoopData = $package->plans; $this->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $this->incrementLoopIndices(); $loop = $this->getFirstLoop(); ?>
 <div class="col-12 col-lg-3 pb-3 " data-plan-id="<?php echo static::e($plan->id_plan); ?>">
 <div class=" py-4">
 <h4 class=" text-center mb-3 text-std plan-desc"><?php echo static::e($plan->plan_name); ?></h4>
 <div class="col-12 col-lg-12 pb-3 border-x-light-bottom">
 <h3 class=" text-center text-dark text-std-2 plan-price">
 <?php echo static::e(number_format($plan->plan_price, 2, ",", " ")); ?>

 <span class="sm-font text-dark">AOA</span>
 </h3>
 </div>
 <div class=" py-3 container-fluid">
 <div class="row">
 <div class="col-12 col-lg-6">
 <div class=" border-x py-3 rounded-right container-fluid text-std-2">
 <h5 class=" text-center sm-font text-std-2">
 Download</h5>
 <h5 class=" text-center text-std-2 plan-download-desc">
 <?php echo static::e($plan->plan_characteristics->Download); ?>

 </h5>
 </div>
 </div>
 <div class="col-12 col-lg-6">
 <div class=" border-x py-3 rounded container-fluid text-std-2">
 <h5 class=" text-center sm-font">Upload</h5>
 <h5 class=" text-center plan-upload-desc">
 <?php echo static::e($plan->plan_characteristics->Upload); ?>

 </h5>
 </div>
 </div>
 <div class="col-12 col-lg-12">
 <div class="d-flex justify-content-center pt-4">
 <button class="btn btn-outline-secondary scale-item text-std-2 py-2 rounded-x px-4 text-violet btn-select-plan"
 style="border:2px solid rgba(209,196,233 ,1); background: transparent;">
 Aderir Já
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <?php endforeach; $this->popLoop(); $loop = $this->getFirstLoop(); ?>
 <?php else: ?>
 <div>OPAH! Não existem</div>
 <?php endif; ?>

 </div>
 </div>
 </div>
 </div>
 </section>

 </div>

	</div>


	</div>

	<!--<div class="modal" id="finish-modal">
 <div class="modal-dialog modal-xl modal-dialog-centered">
 <div class="modal-content">


 <div class="modal-header border-bottom-0">

 <button type="button" class="close" data-dismiss="modal">&times;</button>
 </div>


 <div class="modal-body border-top-0">
 <div class="grid-container">
 <div class="row justify-content-between">
 <div class="col-lg-6">
 <img src="assets/img/phonesub.svg" class="w-100">
 </div>
 <div class="col-lg-6">
 <div class="d-flex justify-content-center my-3">
 <h1 class="text-std big-font-2 text-arrow font-weight-bold">Continuar com registo</h1>
 </div>

 <p class="text-std-2 font-weight-1 text-palid-2 text-justify pt-3">
 Se o seu telefone ficou sem batéria ou por alguma razão ficou sem rede, com os serviços Aló banda poderá fazer chamadas em qualquer lugar
 da cidade a partir dos nossos pontos de conexão que
 garantem uma fácil e prática utilização, trazemos ao mercado um serviço moderno e sofisticado para facilitar o seu Alô todos os dias.
 </p>

 <p class="text-std-2 font-weight-1 text-palid-2 text-justify">
 Se o seu telefone ficou sem batéria ou por alguma razão ficou sem rede, com os serviços Aló banda poderá fazer chamadas em qualquer lugar
 </p>

 <div class="d-flex justify-content-center pt-5">
 <button class="btn btn-lg px-4 text-violet text-std-2 btn-outline-secondary rounded-x border">
 Terminar registo
 <i class="material-icons float-right ml-2 mt-1">chevron_right</i>
 </button>
 <button class="btn btn-lg px-4 text-violet text-std-2 btn-outline-secondary rounded-x border">
 Continuar mais
 <i class="material-icons float-right ml-2 mt-1">chevron_right</i>
 </button>
 </div>

 </div>
 </div>
 </div>
 </div>


 <div class="modal-footer border-top-0">

 </div>

 </div>
 </div>
	</div>-->
 <div class="modal fade"  id="finish-modal">
 <div class="modal-dialog  modal-dialog-centered">
 <div class="modal-content mt-3 rounded-x">


	<div class="modal-header border-bottom-0">
 <button class="btn px-4 hidden mx-auto rounded-x py-2 text-std-2 scale-item btn-show-congrat"
 style="border:2px solid rgba(209,196,233 ,1); background: transparent;"  data-toggle="modal" data-target="#congrat-modal">
 Continuar
 <i class="material-icons float-right ml-2 ">chevron_right</i>
 </button>
 <button type="button" class="close pr-4" data-dismiss="modal">&times;</button>
	</div>


	<div class="modal-body border-top-0">
 <div class="row justify-content-between">
 <div class="col-lg-12">
 <div class="grid-container">
 <div class="d-flex justify-content-center">
 <img src="assets/img/phonesub.svg" style="width: 50%">
 </div>
 </div>
 </div>
 <div class="col-lg-12">
 <div class="grid-container">

 <p class="text-std-2 font-weight-1 text-palid-1 text-justify pt-3">
 Obrigado pelas informações fornecidas. Caso queira terminar o seu registo clique em
 "continuar"
 </p>

 <p class="text-std-2 text-palid-1 font-weight-bold text-center pt-3 ask-text">
 Deseja continuar com o registo ?
 </p>

 <div class=" justify-content-center pt-2 d-flex opt-selection-holder">
 <div class="progress-bar-holder hidden">
 <div class="d-flex justify-content-center">
 <i class="fa fa-spinner fa-spin big-font text-violet"></i>
 </div>
 <p class="text-center py-3 sm-font font-weight-bold text-palid-2 text-std-2"> Carregando dados</p>
 </div>
 <button class="btn mr-2 text-std-2 sm-font font-weight-bold btn-outline-danger border rounded-x is-initial client-subscription">
 Não, parar por aqui
 </button>

 <button class="btn text-std-2 sm-font text-std-2 font-weight-bold btn-primary bg-violet  border rounded-x client-subscription">
 Sim, continuar
 <i class="material-icons float-right ml-2 sm-font mt-1">chevron_right</i>
 </button>

 </div>

 </div>
 </div>
 </div>
	</div>

	<div class="modal-footer border-top">
 <div class="py-3">
 <p class="text-center font-weight-bold text-std-2 py-3 text-std-3 sm-font mb-0">
 Ao selecionar uma das opções acima
 significa que concorda com os
 <button class="btn btn-link font-weight-bold text-std text-underline sm-font text-std-2 rounded-x">
 termos e
 condições
 </button>
 da empresa
 </p>
 </div>
	</div>

	</div>
	</div>
	</div>-->

	<!-- The Modal -->
	<div class="modal fade"  id="congrat-modal">
 <div class="modal-dialog  modal-dialog-centered">
 <div class="modal-content mt-3 rounded-x">


 <div class="modal-header border-bottom-0">

 <button type="button" class="close pr-4" data-dismiss="modal">&times;</button>
 </div>


 <div class="modal-body border-top-0">
 <div class="row justify-content-between">
 <div class="col-lg-12">
 <div class="grid-container">
 <div class="d-flex justify-content-center">
 <img src="assets/img/telband_gift.svg" style="width: 30%">
 </div>
 </div>
 </div>
 <div class="col-lg-12">
 <div class="grid-container">

 <p class="text-std  font-weight-1 big-font-2 text-center pt-3">
 Registo Efectuado com sucesso
 </p>

 <p class="text-std-2 text-palid-1 font-weight-bold text-center pt-3 ask-text">
 Em breve o serviço técnico o contactará para terminar o registo.
 </p>

 <button class="btn btn-outline-secondary rounded-x text-std-2 d-block mx-auto px-4 border-x text-violet" data-dismiss="modal">Fechar</button>

 </div>
 </div>
 </div>
 </div>

 <div class="modal-footer border-top-0">

 </div>

 </div>
 </div>
	</div>-->
	<?php $this->startPush("scripts"); ?>

 <script type="text/javascript">

 var currentPlan = null;



 $("a.scroll-link").click(function (event) {
 event.preventDefault();

 $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top - 100}, 600);

 });

 $(document).ready(function () {



 var controller = new ScrollMagic.Controller();
 var scene1 = new ScrollMagic.Scene({
 triggerElement: '#more-info',

 })
 .setClassToggle('.img-ico', 'fade-in')
 .addTo(controller);

 var scene2 = new ScrollMagic.Scene({
 triggerElement: '.side-text',
 triggerHook: 1
 })
 .setClassToggle('.img-ico-1', 'fade-in')
 .addTo(controller);

 var scene3 = new ScrollMagic.Scene({
 triggerElement: '.section'
 })
 .setClassToggle('.section', 'fade-in')
 .addTo(controller);

 var scene5 = new ScrollMagic.Scene({
 triggerElement: '#calendar'
 })
 .setClassToggle('#calendar', 'fade-in')
 .addTo(controller);

 var scene6 = new ScrollMagic.Scene({
 triggerElement: '#phrases'
 })
 .setClassToggle('#phrases', 'fade-in')
 .addTo(controller);

 var scene4 = new ScrollMagic.Scene({
 triggerElement: '#new'
 })
 .setClassToggle('.row-x', 'fade-in-2')
 .addTo(controller);

 });

 $(document).on('click', '.btn-plan-more-info', function (e) {
 if ($(this).hasClass('has-hidden-item')) {

 $('.more-info').slideDown('fast');
 $(this).toggleClass('has-hidden-item')
 } else {

 $('.more-info').slideUp('fast');
 $(this).toggleClass('has-hidden-item')
 }


 });

 $(document).on('click', '.btn-toggle-selected-plan, .btn-close-selected-plan', function () {

 $('.selected-plan-holder').toggle();

 })

 $('.btn-select-plan').on('click', function () {

 let $parent = $(this).parent().parent().parent();

 currentPlan = {

 id_plan: $($parent).parent().parent().parent().attr('data-plan-id'),
 desc: $($parent).parent().parent().find('.plan-desc').text(),
 price: $($parent).parent().parent().find('.plan-price').html(),
 download: $($parent).find('.plan-download-desc').text(),
 upload: $($parent).find('.plan-upload-desc').text(),

 getHTML: () => `
 <div class="container-fluid rounded-x-left py-3 bg-white selected-plan-holder shadow-lg hidden">
 <div class="row align-items-center justify-content-center">
 <div class="col-12 col-lg-12 pb-3 border-bottom">
 <div class="d-flex justify-content-between align-items-center ">
 <h6 class="sm-font text-std-2 font-weight-bold mb-0 ">Plano Selecionado</h6>
 <button class="btn btn-outline-danger border-0 rounded-x btn-close-selected-plan"><i class="fa fa-times-circle-o "></i></button>
 </div>
 </div>
 <div class="col-12 col-lg-12 pb-3">
 <div class="pt-4" >
 <h4 class=" text-center mb-3 text-std">${currentPlan.desc}</h4>
 <div class="col-12 col-lg-12 pb-3 border-x-bottom">

 <h6 class="sm-font font-weight-bold text-std-2 text-center">
 ${currentPlan.price}
 </h6>

 <button class="btn d-block btn-outline-dark  text-violet btn-plan-more-info border-x mx-auto sm-font text-std-2 has-hidden-item">
 Ver detalhes
 <i class="float-right fa fa-angle-down ml-2 mt-1 sm-font"></i>
 </button>
 </div>
 <div class=" pt-3 container-fluid hidden more-info">
 <div class="row">
 <div class="col-12 col-lg-6 ">
 <div class=" container-fluid ">
 <h5 class=" text-center sm-font text-std-2 font-weight-bold">Download</h5>
 <h5 class=" text-center sm-font text-std-2">${currentPlan.download}</h5>
 </div>
 </div>
 <div class="col-12 col-lg-6">
 <div class=" container-fluid ">
 <h5 class=" text-center sm-font text-std-2 font-weight-bold">Upload</h5>
 <h5 class=" text-center sm-font text-std-2">${currentPlan.upload}</h5>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 `


 };

 console.log(currentPlan);
 $('.btn-toggle-selected-plan').show();

 $('.btn-toggle-selected-plan').find('p').html(() => `<i class="material-icons float-left mr-2" >remove_red_eye</i>Plano: ${currentPlan.desc}`);
 $('.selected-plan-holder').find('.plan-container').html(currentPlan.getHTML);

 $('.btn-subscribe-ancor').click();
 $('.btn-toggle-selected-plan').click();

 });


 </script>
 <script src="assets/js/submission.js"></script>
	<?php $this->stopPush(); ?>

<?php $this->stopSection(); ?>

<?php if (@$_shouldextend[1]) { echo $this->runChild('guest.layouts.guestApp', ["title" => "Início"]); } ?>