<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sistem Antrian Terpadu</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo e(asset('parallo/css/all.min.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('parallo/css/bootstrap.min.css')); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('parallo/slick/slick.css')); ?>"/>    
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('parallo/slick/slick-theme.css')); ?>"/>
    <link rel="stylesheet" href="<?php echo e(asset('parallo/css/templatemo-style.css')); ?>" />
<!--
Parallo Template
https://templatemo.com/tm-534-parallo
-->
  </head>
  <body>
    <div class="parallax-window" data-parallax="scroll" data-image-src="<?php echo e(asset('img/').'/'.$img); ?>">
      <div class="container-fluid">
        <div class="row tm-brand-row">
          <div class="col-lg-4 col-11">
            <div class="tm-brand-container tm-bg-white-transparent">
              <img src="<?php echo e(asset('img/MPP3.png')); ?>" alt="Image" class="img-fluid tm-call-to-action-image" />
              <div class="tm-brand-texts d-none">
                <h1 class="text-uppercase tm-brand-name">MPP</h1>
                <p class="small">Mall Pelayanan Publik<br>Kota Batam</p>
              </div>
            </div>
          </div>
          <div class="col-lg-8 col-1">
            <div class="tm-nav">
              <nav class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent tm-navbar">
                <button class="navbar-toggler" type="button"
                  data-toggle="collapse" data-target="#navbarNav"
                  aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#">Beranda <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#cekAntrian">AntrianKu</a>
                    </li>
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#loket">Loket Layanan</a>
                    </li>
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#testimoni">Testimoni</a>
                    </li>
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#hubungi">Hubungi Kami</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <section class="row" id="tmHome">
          <div class="col-12 tm-home-container">
            <div class="text-white tm-home-left">
              <p class="tm-home-text">
                SIMANTO adalah Sistem Informasi Antrian Secara Online untuk Pelayanan yang disediakan oleh MPP Kota Batam. 
              </p>
              <hr class="tm-home-hr" />
              <p class="tm-slogan">SIMANTO melayani antrian <b>SAMSAT</b>, <b>Pajak Daerah</b>, <b>BPHTB</b>, <b>DLL</b></p>
              <a href="#cekAntrian" class="btn btn-primary">
                <i class="fas fa-search"></i>
                Cek Antrian
              </a>
              <a href="#Daftar" class="btn btn-secondary-0">
                <i class="fas fa-ticket-alt"></i>
                Daftar Antrian
              </a>
            </div>
            <div class="tm-home-right">
              <img src="<?php echo e(asset('img/walikota-batam1.png')); ?>" alt="App on Mobile mockup" />
            </div>
          </div>
        </section>

        <!-- Features -->
        <div class="row" id="cekAntrian">
          <div class="col-lg-12 pt-5">
            <div class="tm-bg-white p-5 rounded" style="height: 40vh;">
              <div class="tm-call-to-action-form">
                <select class="tm-email-input" id="flayanan">
                  <option selected disabled>Pilih Layanan</option>
                  <option>Layanan SAMSAT</option>
                  <option>Layanan Pajak Daerah</option>
                  <option>Layanan BPHTB</option>
                  <option>Layanan LAINNYA</option>
                </select>
                <button type="button" id="btnCek1" class="btn btn-tertiary-0">
                  <i class="fas fa-search"></i>
                  Cek
                </button>
                <div class="tm-email-input" style="width: auto; margin-right: unset;">
                  <span class="p-3 align-middle">Atau</span>
                </div>
                <input name="fnomor" type="text" class="tm-email-input" id="fnomor" placeholder="Masukkan Nomor Antrian" />
                <button type="button" id="btnCek2" class="btn btn-tertiary-0">
                  <i class="fas fa-search"></i>
                  Cek
                </button>
              </div>
              <div id="hasil1" class="h-100 d-none">
                <div class="card" style="position: absolute; top: 50%; width: 90%;">
                  <div class="card-body">
                    <b>Layanan A Jumlah Antrian 10</b><br>Sedang dilayani Nomor Antrian 7
                  </div>
                </div>
              </div>
              <div id="hasil2" class="h-100 d-none">
                <div class="card" style="position: absolute; top: 50%; width: 90%;">
                  <div class="card-body bg-danger">
                    <b>Mohon Maaf, diluar jam Operasinal</b><br>Waktu Pelayanan Senin s/d Jum'at, 08.00 s/d 16.00
                  </div>
                </div>
              </div>
              <div id="hasil3" class="h-100 d-none">
                <div class="card" style="position: absolute; top: 50%; width: 90%;">
                  <div class="card-body">
                    <b>Nomor Antrian Anda Akan dilayani pada Pukul 14.00</b><br>Jumlah Antrian menunggu 2
                  </div>
                </div>
              </div>
              <div id="hasil4" class="h-100 d-none">
                <div class="card" style="position: absolute; top: 50%; width: 90%;">
                  <div class="card-body bg-danger">
                    <b>Mohon Maaf, Nomor Antrian Tidak ditemukan</b><br>Waktu Pelayanan Senin s/d Jum'at, 08.00 s/d 16.00
                  </div>
                </div>
              </div>
              <div id="waiting" class="h-100 d-none">
                <div style="position: absolute; top: 50%; left: 45%;">
                  <div class="spinner-grow text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                  <div class="spinner-grow text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <section class="row" id="loket">
          <div class="col-12 tm-home-container">
            <div class="parallax-window tm-services-parallax-header"
             data-parallax="scroll"
             data-z-index="101"
             data-image-src="<?php echo e(asset('img/mpp3.jpg')); ?>">

              <div class="tm-bg-white-transparent text-center tm-services-header">
                <h2 class="text-uppercase tm-services-page-title">Loket Layanan</h2>
                <p class="tm-home-text" style="width: 55vw">
                  Loket Layanan baik instansi di Lingkungan Pemerintah Kota Batam maupun Instansi Vertikal. 
                </p>
              </div>
            </div>
          </div>
        </section>

        <!-- Features -->
        <div class="row">
          <div class="col-lg-4">
            <div class="tm-bg-white-transparent tm-feature-box">
              <h3 class="tm-feature-name">SAMSAT</h3>
              <div class="pb-3">
                <img src="<?php echo e(asset('img/samsat.jpg')); ?>" alt="Image" class="img-fluid tm-call-to-action-image" />
              </div>
              <p class="text-center">Pelayanan Sistem Administrasi Manunggal Satu Atap BBNKB, Regiden Ranmor dan SWDKLLJ Kota Batam dan Provinsi Kepri</p>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="tm-bg-white-transparent tm-feature-box">
              <h3 class="tm-feature-name">Perizinan Terpadu</h3>
              <div class="pb-3">
                <img src="<?php echo e(asset('img/pajak2.jpg')); ?>" alt="Image" class="img-fluid tm-call-to-action-image" />
              </div>
              <p class="text-center">Pelayanan Terpadu / OSS DPMPTSP Kota Batam.</p>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="tm-bg-white-transparent tm-feature-box">
              <h3 class="tm-feature-name">BPHTB</h3>
              <div class="pb-3">
                <img src="<?php echo e(asset('img/pajak1.jpg')); ?>" alt="Image" class="img-fluid tm-call-to-action-image" />
              </div>
              <p class="text-center">Pelayanan Pajak BPHTB Kota Batam.</p>
            </div>
          </div>
        </div>

        <section class="row" id="testimoni">
          <div class="col-12">
            <div class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
                 data-parallax="scroll"
                 data-z-index="101"
                 data-image-src="<?php echo e(asset('parallo/img/ice-mountain.jpg')); ?>">

                 <div class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header">
                    <h2 class="text-uppercase tm-services-page-title tm-testimonials-page-title">Testimonials</h2>
                    <p class="tm-services-description mb-0 small">
                        Parallax movement background page ice mountain for testimonials.   
                    </p>
                </div>
            </div>
          </div>   
        </section>

        <section class="row tm-testimonials-section">
        <div class="col-12 tm-carousel">              
            <div class="tm-bg-black-transparent tm-testimonial-box text-center">                    
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-1.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
              <p class="tm-about-description">
                Vestibulum semper dolor sed elit mattis placerat cursus sed ac urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit semper turpis semper.
              </p>
            </div>

            <div class="tm-bg-black-transparent tm-testimonial-box text-center">
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-2.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
              <p class="tm-about-description">
                  Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa elementum, volutpat.
              </p>
            </div>

            <div class="tm-bg-black-transparent tm-testimonial-box text-center">
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-3.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
              <p class="tm-about-description">
                Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida maximus ultrices.
              </p>
            </div>

            <div class="tm-bg-black-transparent tm-testimonial-box text-center">
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-1.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
              <p class="tm-about-description">
                Vestibulum semper dolor sed elit placerat cursus sed ac urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit semper turpis semper.
              </p>
            </div>    
            <div class="tm-bg-black-transparent tm-testimonial-box text-center">
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-2.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
              <p class="tm-about-description">
                  Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa elementum, volutpat.
              </p>
            </div>

            <div class="tm-bg-black-transparent tm-testimonial-box text-center">
              <div class="tm-person-img-container">
                <img src="<?php echo e(asset('parallo/img/person-3.png')); ?>" alt="Image" class="img-fluid mx-auto"/>
              </div>              
              <h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
              <p class="tm-about-description">
                Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida maximus ultrices.
              </p>
            </div>          
          </div>
        </section>

        <!-- Call to Action -->
        <section class="row" id="tmCallToAction">
          <div class="col-12 tm-call-to-action-col">
            <img src="<?php echo e(asset('parallo/img/call-to-action.jpg')); ?>" alt="Image" class="img-fluid tm-call-to-action-image" />
            <div class="tm-bg-white tm-call-to-action-text">
              <h2 class="tm-call-to-action-title">Hubungi Kami</h2>
              <p class="tm-call-to-action-description">
                Anda dapat mengubungi MPP atau Sistem Informasi Antrian Online ini di support@mpp.batam.go.id atau di +62812325222321.<br/>Tinggalkan Email anda untuk dapat berita terbaru dari <b>MPP Kota Batam</b>.
              </p>
              <form action="#" method="get" class="tm-call-to-action-form">                
                <input name="email" type="email" class="tm-email-input" id="email" placeholder="Email" />
                <button type="submit" class="btn btn-secondary">Get Updates</button>
              </form>
            </div>
          </div>
        </section>

        <!-- Page footer -->
        <footer class="row">
          <p class="col-12 text-white text-center tm-copyright-text" style="color: transparent!important;">
            Copyright &copy; 2020 App Landing Page. 
            Designed by <a href="#" class="tm-copyright-link" style="color: transparent;">TemplateMo</a>
          </p>
        </footer>
      </div>
      <!-- .container-fluid -->
    </div>

    <script src="<?php echo e(asset('parallo/js/jquery.min.js')); ?>"></script>
    <script src="<?php echo e(asset('parallo/js/parallax.min.js')); ?>"></script>
    <script src="<?php echo e(asset('parallo/js/bootstrap.min.js')); ?>"></script>
    <script src="<?php echo e(asset('parallo/slick/slick.min.js')); ?>"></script>
    <script>
        $(function(){
            $('.tabgroup > div').hide();
            $('.tabgroup > div:first-of-type').show();  
            $('.tabs a').click(function(e){
              e.preventDefault();
              var $this = $(this),
                  tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
                  others = $this.closest('li').siblings().children('a'),
                  target = $this.attr('href');
              others.removeClass('active');
              $this.addClass('active');
              $(tabgroup).children('div').hide();
              $(target).show();

              // Scroll to tab content (for mobile)
              if($(window).width() < 992) {
                  $('html, body').animate({
                      scrollTop: $("#first-tab-group").offset().top
                  }, 200);    
              }              
            })

            $('.tm-carousel').slick({
                dots: true,
                  infinite: false,
                  arrows: false,
                  speed: 300,
                  slidesToShow: 3,
                  slidesToScroll: 2,
                  responsive: [
                    {
                      breakpoint: 1024,
                      settings: {
                          arrows: false,
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                      }
                    },
                    {
                      breakpoint: 600,
                      settings: {
                          arrows: false,
                        slidesToShow: 1,
                        slidesToScroll: 1
                      }
                    },
                    {
                      breakpoint: 480,
                      settings: {
                          arrows: false,
                        slidesToShow: 1,
                        slidesToScroll: 1
                      }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                  ]
            });  
        });

        $("#btnCek1").on('click', function(){
          var val1 = $("#flayanan").val();
          //var val2 = $("#fnomor").val();
          $("#hasil1, #hasil2").addClass("d-none")
          $("#waiting").removeClass('d-none')
          var aidx = Math.floor(Math.random() * 2) +1;
          const myTimeout = setTimeout(()=>{
            $("#waiting").addClass('d-none')
            if(aidx == 1){
              $("#hasil1").removeClass("d-none")
              $("#hasil2").addClass("d-none")
            }else{
              $("#hasil2").removeClass("d-none")
              $("#hasil1").addClass("d-none")
            }
          }, 2000);
        })

        $("#btnCek2").on('click', function(){
          //var val1 = $("#flayanan").val();
          var val2 = $("#fnomor").val();
          $("#hasil3, #hasil4").addClass("d-none")
          $("#waiting").removeClass('d-none')
          var aidx = Math.floor(Math.random() * 2) +3;

          const myTimeout = setTimeout(()=>{
            $("#waiting").addClass('d-none')
            if(aidx == 3){
              $("#hasil3").removeClass("d-none")
              $("#hasil4").addClass("d-none")
            }else{
              $("#hasil4").removeClass("d-none")
              $("#hasil3").addClass("d-none")
            }
          }, 2000);
         
        })
        
    </script>
  </body>
</html><?php /**PATH D:\GK\php\laravel\antrianApp\resources\views/master.blade.php ENDPATH**/ ?>