<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("build.css", "theme::css/scroll.css") }}
    {{ asset_add("build.css", "theme::css/owlc.css") }}

    {{ asset_style("build.css", ["min"]) }}
    <link rel="stylesheet" href="{{ asset_url("theme::css/scroll.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/owlc.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/jquery-ui.css") }}">
    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
<style>
#calendar {
    max-width: 900px;
    margin: 0 auto;
}</style>
</head>
<body>
    {% include "theme::partials/navigation" %}
    <!--   {% set event = entries('studio_event', 'event_page').first() %} -->

    {% set studiopage = entries('studio_event', 'studio_page').first() %}



    <section class="grid-container full columns">
        <section class="grid-x">
            <section class="cell studio-event fujiInspiring no-padding columns">
                <section class="grid-x">
                  <div class="specialBanner nopaci heightMid columns small-12 cell">
                      <img src="{{ image('theme::img/remove/bgCalendar.jpg').fit(1366, 341).url() }}" alt=""/><!-- 1366 × 352 -->

                      <div class="caption">
                       <div class="sizeCenterElm">
                        <div class="boxSize">
                         <span class="titlefeature" style="font-size:3em;">Studio &amp; Event</span>
                         <h1 class="titleCaption">
                          Fujifilm Studio
                      </h1>
                  </div>
              </div>
          </div>
      </div><!-- END specialBanner // satu Banner Besar -->
  </section>

  <section class="grid-x">
    <section class="storeLocator cell">
        <div class="grid-x navCalendar">
          <div class="small-12 medium-3 cell cityStudio">
            <ul>
              <li id ="liJakarta" class="active"><a id ="liatJakarta" >Jakarta</a></li>
              <li id ="liJogja"><a id ="liatJogja" >Yogyakarta</a></li>
          </ul>
      </div>
      <div class="small-12 medium-9 cell navArrow">
        <i class="fa fa-chevron-circle-left" onclick="prev()" aria-hidden="true"></i>
        <i class="fa fa-chevron-circle-right"  onclick="nex()" aria-hidden="true"></i>
                          <!-- <span style="font-size: 50px;"><a onclick="prev()">&#8592;</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="font-size: 50px;"><a onclick="nex()">&#8594;</a></span> -->
                        </div>
                    </div>
                    <div class="grid-x">
                       <div class="small-12 medium-12 large-3 cell storeLeftBlock">
                          <div id="datepicker"></div>
                          
                       <br>
                       <div class="mainwyswyg">

                        <ul class="bookingAccordion">
                          <li>
                            {{ trans('theme::page.terms') }}
                            <div class="isinye"  id="termsnya">
                              {{ studiopage.term_condition.render()|raw }}
                            </div>
                          </li>
                          <li>
                            {{ trans('theme::page.booking_form.operational_time') }}
                            <div class="isinye"  id="operational">

                            </div>
                          </li>
                          <li>
                            {{ trans('theme::page.address') }}
                            <div class="isinye"  id="alamat">

                            </div>
                          </li>
                        </ul>

          </div>
      </div>
      <input type="hidden" id="hidKota" value="Jakarta" />
      <div id="idNya"  class="small-12 medium-12 large-9 cell bookStudio">                    
        <span id="lblEventCalendar" style="display: none;">{{"now"|date("j F Y")}}</span>

        <div id="loadingDiv" class="loader loadernya" style="width:100%;height: 100%;">
            <img src="{{ image('theme::img/Rolling-1s-200px.gif').url() }}" width="200" height="200" id="loader-img" align="center"/></div>
            <table id="myTable" cellspacing="0">
              <thead>
                <tr>
                   <th>
                    {{ trans('theme::page.dates') }}
                </th>
                {% for i in 0..3 %}                                   
                <th id="{{i+2}}"  class="today">
                  <x> {{ "now"|date_modify("+" ~ i ~" day")|date("l") }}        </x>            
                  <span>{{ "now"|date_modify("+" ~ i ~" day")|date("j F Y") }}</span>
              </th>
              {% endfor %}                 
          </tr>
      </thead>
      <tbody>
         {% set waktunya = {
            a:{waktu: '10.00-13.00',key:'a'},
            b:{waktu: '14.00-17.00',key:'b'},
            c:{waktu: '2pm-4pm',key:'c'},
            d:{waktu: '4pm-6pm',key:'d'}} %}

            {% for taim in waktunya %}
            <tr>
                <td id="{{taim.key ~ '1'}}">{{ taim.waktu }}</td>                                
                <td id="{{taim.key ~ '2'}}">                                       
                   <span class="goldText">&nbsp;</span>
                   <span class="nameBooker">&nbsp;</span>
                   <span class="regNum">&nbsp;</span>
                   <a href="#">+ {{ trans('theme::page.booking_form.add') }}</a>
               </td>
               <td id="{{taim.key ~ '3'}}"> 
                   <span class="goldText">&nbsp;</span>
                   <span class="nameBooker">&nbsp;</span>
                   <span class="regNum">&nbsp;</span>
                   <a href="#">+ {{ trans('theme::page.booking_form.add') }}</a></td>

                   <td id="{{taim.key ~ '4'}}">
                       <span class="goldText">&nbsp;</span>
                       <span class="nameBooker">&nbsp;</span>
                       <span class="regNum">&nbsp;</span>
                       <a href="#">+ {{ trans('theme::page.booking_form.add') }}</a></td>

                       <td id="{{taim.key ~ '5'}}"> 
                           <span class="goldText">&nbsp;</span>
                           <span class="nameBooker">&nbsp;</span>
                           <span class="regNum">&nbsp;</span>
                           <a href="#">+ {{ trans('theme::page.booking_form.add') }}</a>
                       </td>

                   </tr>
                   {% endfor %}




               </tbody>
           </table>
       </div>

   </div>
</section><!-- END homeNewsEvent -->



</section>



</section><!-- END studio-event -->
</section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
<script src="{{ asset_url("theme::js/jquery-ui.js") }}"></script>
<script type="text/javascript">


    global();
    $(document).ready(function () {
        document.getElementById('operational').innerHTML = '{{ studiopage.jakarta_operational }}';
        document.getElementById('alamat').innerHTML = '{{ studiopage.jakarta_address }}';
        studioEvents();     
        ambilbooking();
        $( "#datepicker").datepicker({
            dateFormat: 'dd MM yy',
            onSelect: function(dateText, inst) {
                var date = $(this).val(); 
                $('#lblEventCalendar').text(date);  
                var myform = $('#myTable');
                var i;
                for (i = 0; i <4; i++) { 
                 var mydate = new Date($('#lblEventCalendar').text());                                    
                 var tgl = formatDate(addDays($('#lblEventCalendar').text(),i));
                 var hari = formatHari(addDays($('#lblEventCalendar').text(),i)); 
                 var idint = i +2;

                 $('#'+idint +' span').text(tgl);
                 $('#'+idint +' x').text(hari);

             }


             ambilbooking();

         },
         inline: true
     });

        var $loading = $('#loadingDiv').hide();
        $(document)
        .ajaxStart(function () {
            $loading.show();
        })
        .ajaxStop(function () {
            $loading.hide();
        });
        $('#liatJakarta').click(function(){
         $('#hidKota').val('Jakarta');
         $('#liJogja').removeClass('active');
         $('#liJakarta').removeClass('active');
         $('#liJakarta').addClass('active');
           document.getElementById('operational').innerHTML = "{{ studiopage.jakarta_operational }}";
        document.getElementById('alamat').innerHTML = '{{ studiopage.jakarta_address|nl2br|json_encode|replace({'"':''})|raw  }}';
         ambilbooking();
          // alert('Sign new href executed.'); 
      }); 
        $('#liatJogja').click(function(){
         $('#hidKota').val('Yogyakarta');
         $('#liJakarta').removeClass('active');
         $('#liJogja').removeClass('active');
         $('#liJogja').addClass('active');
           document.getElementById('operational').innerHTML = "{{ studiopage.yogyakarta_operational }}";
        document.getElementById('alamat').innerHTML = '{{ studiopage.yogyakarta_address|nl2br|json_encode|replace({'"':''})|raw }}';
         ambilbooking();
 // alert('Sign new href executed.'); 
}); 


    });
    hecent();

    function ambilJson(tgl,col){ 
      //  $('#loadingDiv').html('<div class="loader loadernya"> <img src="{{ image('theme::img/loader_seq.gif').url() }}" width="200" height="200" id="loader-img" align="center"></div>');  
      var kota = $('#hidKota').val();
         //alert(kota);
         $.ajax({ 
            type: 'GET', 
            url: '/cek-booking/'+tgl+'/'+kota, 
            data: { get_param: 'value' }, 
            dataType: 'json',
            async: true,
            success : function (data) {    
                var $full_name ;      
                var $registration_no ;  
                var $booking_time ;  
                var $ix =0;  
                $.each(data, function() {
                    $ix =$ix+1;
                    $.each(this, function(k, v) {

                     if(k=="full_name"){  
                         $full_name=v;       
                     }
                     if(k=="registration_no"){  
                         $registration_no=v;       
                     }
                     if(k=="booking_time"){  
                        
                        $booking_time=v;            
//alert($booking_time);
                        if($booking_time == "10am-12pm"){                               
                            $("#a"+col).find( "span.goldText").text("Booking");
                            $("#a"+col).find( "span.nameBooker").text($full_name);
                            $("#a"+col).find( "span.regNum").text($registration_no);
                            $("#a"+col).removeClass( "hasBook").addClass("hasBook");
                            $("#a"+col +" a").remove();
                        }
                        if($booking_time == "12pm-2pm"){
                        
                            $("#b"+col).find( "span.goldText").text("Booking");
                            $("#b"+col).find( "span.nameBooker").text($full_name);
                            $("#b"+col).find( "span.regNum").text($registration_no);
                            $("#b"+col).removeClass( "hasBook").addClass("hasBook");
                            $("#b"+col +" a").remove();
                        }
                        if($booking_time == "2pm-4pm"){
                           $("#c"+col).find( "span.goldText").text("Booking");
                           $("#c"+col).find( "span.nameBooker").text($full_name);
                           $("#c"+col).find( "span.regNum").text($registration_no);
                           $("#c"+col).removeClass( "hasBook").addClass("hasBook");
                           $("#c"+col +" a").remove();
                       }
                       if($booking_time == "4am-6am"){
                        $("#d"+col).find( "span.goldText").text("Booking");
                        $("#d"+col).find( "span.nameBooker").text($full_name);
                        $("#d"+col).find( "span.regNum").text($registration_no);
                        $("#d"+col).removeClass( "hasBook").addClass("hasBook");
                        $("#d"+col +" a").remove();
                    }
                    if($booking_time == "6am-8am"){
                        $("#e"+col).find( "span.goldText").text("Booking");
                        $("#e"+col).find( "span.nameBooker").text($full_name);
                        $("#e"+col).find( "span.regNum").text($registration_no);
                        $("#e"+col).removeClass( "hasBook").addClass("hasBook");
                        $("#e"+col +" a").remove();
                    }

                }



            });
                });

              //  $('#loadingDiv').removeClass('loader');

          },
          error:function (xhr, ajaxOptions, thrownError){
            if(xhr.status==404) {
        //alert(thrownError);
    }
}
});
     }
     function formattgllempar(date) {
        var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('');
    }
    function ambilbooking(){
//kolom1
for (i = 1; i <5; i++) {   
    var idd = i+1;
    var tgl = $('#'+idd+' span');
    var kota = $('#hidKota').val();
    var dateLempar = formattgllempar(tgl.text());

//alert(idd);

$("#a"+idd).find( "span.goldText").text(" ");
$("#a"+idd).find( "span.nameBooker").text(" ");
$("#a"+idd).find( "span.regNum").text(" ");
$("#a"+idd).append("<a href='book-form/"+kota+"/"+dateLempar+"/1"+"'>+ {{ trans('theme::page.booking_form.add') }}</a>");
$("#a"+idd).removeClass( "hasBook");

$("#b"+idd).find( "span.goldText").text(" ");
$("#b"+idd).find( "span.nameBooker").text(" ");
$("#b"+idd).find( "span.regNum").text(" ");
$("#b"+idd).append("<a href='book-form/"+kota+"/"+dateLempar+"/2"+"'>+ {{ trans('theme::page.booking_form.add') }}</a>");
$("#b"+idd).removeClass( "hasBook");

$("#c"+idd).find( "span.goldText").text(" ");
$("#c"+idd).find( "span.nameBooker").text(" ");
$("#c"+idd).find( "span.regNum").text(" ");
$("#c"+idd).append("<a href='book-form/"+kota+"/"+dateLempar+"/3"+"'>+ {{ trans('theme::page.booking_form.add') }}</a>");
$("#c"+idd).removeClass( "hasBook");

$("#d"+idd).find( "span.goldText").text(" ");
$("#d"+idd).find( "span.nameBooker").text(" ");
$("#d"+idd).find( "span.regNum").text(" ");
$("#d"+idd).append("<a href='book-form/"+kota+"/"+dateLempar+"/4"+"'>+ {{ trans('theme::page.booking_form.add') }}</a>");
$("#d"+idd).removeClass( "hasBook");

$("#e"+idd).find( "span.goldText").text(" ");
$("#e"+idd).find( "span.nameBooker").text(" ");
$("#e"+idd).find( "span.regNum").text(" ");
$("#e"+idd).append("<a href='book-form/"+kota+"/"+dateLempar+"/5"+"'>+ {{ trans('theme::page.booking_form.add') }}</a>");
$("#e"+idd).removeClass( "hasBook");
//alert(tgl.text());

ambilJson(tgl.text(), idd); 

}

//kolom1

}

function prev(){
    var x = formatDate(addDays($('#lblEventCalendar').text(),-1));
    $('#lblEventCalendar').text(x); 
                                    //=============================
                                   // $( "#idNya" ).load($(this).attr('href'));
                                   var myform = $('#myTable');
                                   var i;
                                   for (i = 0; i <4; i++) {                                     
                                    var tgl = formatDate(addDays($('#lblEventCalendar').text(),i));
                                    var hari = formatHari(addDays($('#lblEventCalendar').text(),i)); 
                                    var idint = i +2;

                                    $('#'+idint +' span').text(tgl);
                                    $('#'+idint +' x').text(hari);
                                    
                                }
                                    //=============================
                                    $('#datepicker').datepicker("setDate", new Date($('#lblEventCalendar').text()) );
                                    ambilbooking();
                                }
                                function nex(){
                                 var x = formatDate(addDays($('#lblEventCalendar').text(),1));
                                 $('#lblEventCalendar').text(x);
                                    //=============================
                                   // $( "#idNya" ).load($(this).attr('href'));
                                   var myform = $('#myTable');
                                   var i;
                                   for (i = 0; i <4; i++) {                                     
                                    var tgl = formatDate(addDays($('#lblEventCalendar').text(),i));
                                    var hari = formatHari(addDays($('#lblEventCalendar').text(),i));
                                    var idint = i +2;

                                    $('#'+idint +' x').text(hari);                                 
                                    $('#'+idint +' span').text(tgl);
                                }
                                    //=============================
                                    $('#datepicker').datepicker("setDate", new Date($('#lblEventCalendar').text()) );
                                    ambilbooking();
                                }
                                function addDays(date, days) {
                                  var result = new Date(date);
                                  result.setDate(result.getDate() + days);
                                  return result;
                              }
                              function formatDate(date) {
                                  var monthNames = [
                                  "January", "February", "March",
                                  "April", "May", "June", "July",
                                  "August", "September", "October",
                                  "November", "December"
                                  ];
                                  var day = date.getDate();
                                  var monthIndex = date.getMonth();
                                  var year = date.getFullYear();

                                  return day + ' ' + monthNames[monthIndex] + ' ' + year;
                              }
                              function formatHari(date) {

                               var weekday = new Array(7);
                               weekday[0] =  "Sunday";
                               weekday[1] = "Monday";
                               weekday[2] = "Tuesday";
                               weekday[3] = "Wednesday";
                               weekday[4] = "Thursday";
                               weekday[5] = "Friday";
                               weekday[6] = "Saturday";

                               return weekday[date.getDay()];
                           }
                       </script>

                   </body>
                   </html>
