var booking_form = booking_form || {};

$(document).ready(function () {

var tempChanges = {
    phone: $('input[name="phone"]').val(),
    date: $('input[name="b_date"]').val(),
    time: $('input[name="b_time"]').val(),
    party: $('#party').val()
};

booking_form.init = function(){

    //datepicker init & enable
    var $pickdate = $('.b_date').pickadate({
        today: '',
        clear: 'Clear',
        close: 'Cancel',
        monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        showMonthsShort: undefined,
        showWeekdaysFull: undefined,
        //disable: [2, {from: [2021,11,30], to: [2022,00,03]}],
        disable: [2,[2022,11,25]],
        formatSubmit: 'yyyy-mm-dd',
        hiddenName: true
    })
    booking_form.datepicker = $pickdate.pickadate('picker')
            booking_form.datepicker.set('min',0)
        
    booking_form.datepicker.set('max',45)    
    

    //timepicker init 
    var $picktime = $('.b_time').pickatime({
        min: [17,0],
        max: [20,30],
        formatSubmit: 'HH:i',
        hiddenName: true,
        interval: 30,
        disable: [true,[17,0],[17,30],[19,0],[20,30]]
    })

    booking_form.timepicker = $picktime.pickatime('picker')

    booking_form.datepicker.on({
        close:function(){
            if(tempChanges.date != $('input[name="b_date"]').val())
            {					
                tempChanges.date = $('input[name="b_date"]').val()
                booking_form.update_avil_time();
                booking_form.timepicker.set('clear');
            }
            $('input[name="b_table"]:checked').focus();				
        }
    });

    $('input[name="b_table"]').change(function () {
        booking_form.update_avil_time();
        booking_form.timepicker.set('clear');
    });

    $('#party').change(function () {
        if($('#party').val()=='9')
        {
            Swal.fire({
                title: 'Call us please',
                html : 'Please call us <a href="tel:0261520363">(02) 6152 0363</a> for a large group reservation.',
                icon : 'info'
            });
            $('#party').val("2");
        }else{
            booking_form.update_avil_time();
            booking_form.timepicker.set('clear');
        }        
    });

    $('.openning').on('click',function(){
        Swal.fire({
            html: 
                '<table class="table"><tr><td colspan="2">Openning Hours</td></tr>' +
                '<tr><td>Monday</td><td>Closed</td></tr>' +
                '<tr><td>Tuesday</td><td>5 PM - 10 PM</td></tr>' +
                '<tr><td>Wednesday</td><td>5 PM - 10 PM</td></tr>' +
                '<tr><td>Thursday</td><td>5 PM - 10 PM</td></tr>' +
                '<tr><td>Friday</td><td>5 PM - 10 PM</td></tr>' +
                '<tr><td>Saturday</td><td>5 PM - 10 PM</td></tr>' +
                '<tr><td>Sunday</td><td>5 PM - 10 PM</td></tr>'
        });
    });

    booking_form.timepicker.on({
        close:function(){
            booking_form.update_avil_time();            
            $('input[name="b_high"]:checked').focus();
        }
    });
    
}

//Seeking available times
booking_form.update_avil_time = function(){
    //simple validate
    if($('input[name="b_date"]').val())
    {
            
        var formBooking ={
            b_date: $('input[name="b_date"]').val(),		
            b_party: $('#party').val(),		
            b_table: $('input[name="b_table"]:checked').val()						
        };
        $.ajax({
            type: "POST",
            url: "booking/getAvilTables",
            data: formBooking,
            dataType: "json",
            encode: true,
            }).done(function (data) {

            console.log(data)

            booking_form.timepicker.set('enable',true);
            
            $.each(data['time_index'],function(index) {
                //console.log('avail tlb : '+data['empty_times'][index]);
                if(data['empty_times'][index] == 0)
                {
                    booking_form.timepicker.set('disable',[[to_H(data['time_index'][index]),to_M(data['time_index'][index])]]);                 
                }
            });
            //booking_form.timepicker.set('disable',[[18,0],[18,30],[19,30],[20,00]]);
            booking_form.timepicker.set('disable',[[18,0]]);
            $.each(data['time_index'],function(index) {
                //console.log('avail tlb : '+data['empty_times'][index]);
                //if((index == 2) || (index == 3) || (index == 5) || (index == 6))
                if(index == 2)
                {
                    //do nothing
                }else{
                    if(data['empty_times'][index] != 0)
                    {
                        if(data['empty_times'][index] <= 3) {
                            $('[data-pick="'+data['time_index'][index]+'"]').append('<small class="little">'+data['empty_times'][index]+' Table' + (data['empty_times'][index] == 1 ? '' : 's') +' left</small>');
                        }
                        else{                        
                            $('[data-pick="'+data['time_index'][index]+'"]').append('<small>'+data['empty_times'][index]+' Tables left</small>');
                        }                    

                    }
                }
                
            });
            


            //when fail.
            }).fail(function (data) {
            console.log('err: '+data);
            });		
    }
}

booking_form.init();


//booking ajax 
$("form").submit(function (event) {		
  event.preventDefault();

  //empty error messages
  $('#err_date').empty();
  $('#err_time').empty();
  $('#err_name').empty();
   $('#err_phone').empty();
   $('#err_email').empty();
  //once the validation passed
  var $form = $(this);

  // check if the input is valid using a 'valid' property
  if (!$form.valid) return false;

  var formBooking = {
    b_date: $('input[name="b_date"]').val(),		
    b_time: $('input[name="b_time"]').val(),
    b_party: $('#party').val(),
    b_table: $('input[name="b_table"]:checked').val(),		
    b_high: $('input[name="b_high"]:checked').val(),
    b_name: $('#name').val(),		
    b_email: $('#email').val(),
    b_phone: $('#phone').val(),
    b_msg: $('textarea[name="message"]').val()
  };

  $.ajax({
    type: "POST",
    url: "booking",
    data: formBooking,
    dataType: "json",
    encode: true,
    beforeSend: function() {
        //console.log('before');
        Swal.fire({
                title: 'Please Wait',
                html: 'Processing your reservation request...',// add html attribute if you want or remove
                showConfirmButton: false,
                allowOutsideClick: false,
                onBeforeOpen: () => {
                    Swal.showLoading()
                },
        });
    },
    success: function(data) {
        //console.log('after!');
        Swal.close();
    }
  }).done(function (data) {
    console.log(data);

    //console.log(data['status'])		

    if(data['status'] == 'validation_fail')
    {
        //server validation failed
        //displaying error messages
        if( typeof data['error']['b_date'] !== undefined) {$('#err_date').text(data['error']['b_date']); }
        if( typeof data['error']['b_time'] !== undefined) {$('#err_time').text(data['error']['b_time']); }  
        if( typeof data['error']['b_name'] !== undefined) {$('#err_name').text(data['error']['b_name']); }  
        if( typeof data['error']['b_phone'] !== undefined) {$('#err_phone').text(data['error']['b_phone']);}
        if( typeof data['error']['b_email'] !== undefined) {$('#err_email').text(data['error']['b_email']);}
    }
    if(data['status'] == 'error')
    {
        //alert(data['error']);
        Swal.fire('Opps!',data['error'],'error');
        $form.trigger("reset");
    }
    if(data['status'] == 'done')
    {
        $form.trigger("reset");
        $('.q1').hide();
        $('.q2').hide();
        $('.q3').hide();
        $('.q4').hide();
        $('.q5').hide();
        $('.q6').hide();
        $('.q7').hide();
        $('.q8').hide();			
        $('html, body').animate({scrollTop: $("#three").offset().top}, 200);
        $('.book_done').show(800);	
        Swal.fire('Complete!','Your table is now reserved','success');		
    }		
  }).fail(function (data) {
    //console.log(data);
  });
  
});


//menu image slider
$('.menu_slider').bxSlider({
    preloadImages: 'all',
    onSliderLoad: function(){
        $('button[name="see_menu"]').show();
    }		
});

$('button[name="see_menu"]').click(function(){
    //console.log('show menu clicked');
    //$('div.menu_slider_wrapper').show(500)
    $('button[name="see_menu"]').hide();
    $("div.menu_slider_wrapper").css("visibility", "visible");
    $("div.menu_slider_wrapper").css("height", "auto");
  });

});


function to_H(num)
{ 
var hours = Math.floor(num / 60);  
var minutes = num % 60;
return hours;         
}

function to_M(num)
 { 
  var hours = Math.floor(num / 60);  
  var minutes = num % 60;
  return minutes;         
}