@extends('web.app')

@section('main-content')
    @include('web.home.counter_section')
    @include('web.bike.filter_section')
    @include('web.bike.cars_section')
	@include('web.bike.cars_list_section')
@endsection

@push('scripts')
<script type="text/javascript" src="{{ url('public/js/bootstrap-notify.js') }}"></script>
<script type="text/javascript">
// set the date we're counting down to
var target_date = new Date('Jan, 31, 2018').getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById('countdown');
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = '<span class="days">' + days +  ' <b>Days</b></span> <span class="hours">' + hours + ' <b>Hours</b></span> <span class="minutes">'
    + minutes + ' <b>Minutes</b></span> <span class="seconds">' + seconds + ' <b>Seconds</b></span>';  
 
}, 1000);

$("#someID").ionRangeSlider({
    min: 10,                      
    max: 100,                       
    from: 10,                      
    to: 100,                     
    type: "double",                
    step: 10,                      
    postfix: "",
    onLoad: function (data) {
        saveResult(data);
        writeResult();
    },
    onChange: saveResult              
    /*onChange: function(obj){      
        console.log(obj);
    },
    onFinish: function(obj){     
        console.log(obj);
    }*/
});

var saveResult = function (data) {
    console.log(data);
};


//show the quick button on mouse over
function quickViewMouseOver(event){
    $(event).children('.quick-view').show();
}

//hide the quick button on mouse leave
function quickViewMouseLeave(event){
    $(event).children('.quick-view').hide();   
}

//loader & popup open after loading show details page quick view page
var slider;
function showQuickView(bikeName){
    $('.loader_back').show();
    $.ajax({
        url: '{{ url('getBikes') }}/'+bikeName,
        type: 'GET',
    })
    .done(function(data) {
        var output = $.parseJSON(data);
        //console.log(output);
        $('.view-full-details').attr('href', '{{ url('bikes') }}/'+output.bname+'-'+output.name);
        $('.prize-name').html(output.bname+' '+output.name);
        var bxslider = '';
        var thumbnail = '';
        if(output.bike_image.length > 0){
            for (var i = 0; i < output.bike_image.length; i++) {
                bxslider += '<li><img src="'+output.bike_image[i].image+'"></li>';
                thumbnail += '<li><a data-slide-index="'+i+'" href=""><img src="'+output.bike_image[i].image+'" /></a></li>';
            }
        }
        $('.large-images').html(bxslider);
        $('#quick-view-thumbnail-images').html(thumbnail);
        //$('.stat-table').html('');
        var table = '<tr><td class="stat-name">Suspension</td><td class="stat-value ng-binding">';
            table += output.suspension;
            table += '</td></tr><tr><td class="stat-name">Tyres</td><td class="stat-value ng-binding">';
            table += output.tyres;
            //table += '</td></tr><tr><td class="stat-name">Brakes</td><td class="stat-value ng-binding">';
            //table += output.brakes;
            table += '</td></tr><tr><td class="stat-name">Dimensions</td><td class="stat-value ng-binding">';
            table += output.dimensions;
            table += '</td></tr><tr><td class="stat-name">Fuel Tank</td><td class="stat-value ng-binding">';
            table += output.fuel_tank;
            //table += '</td></tr><tr><td class="stat-name">Maximum Power (PS/RPM)</td><td class="stat-value ng-binding">';
            //table += output.power;
            //table += '</td></tr><tr><td class="stat-name">Maximum Torque (NM/RPM)</td><td class="stat-value ng-binding">';
            //table += output.torque;
            table += '</td></tr><tr><td class="stat-name">Final Drive</td><td class="stat-value ng-binding">';
            table += output.final_drive;
            table += '</td></tr>';
        $('.stat-table').html(table);
        $('.price').children().html(output.ticket_price);
        
        if(output.previous != ''){
            $(".prev-navigation").show();
            $(".prev-navigation").attr("onclick","overViewShowPrevious('"+output.previous+"')");
        }else{
            $(".prev-navigation").hide();
        }
        
        if(output.next != ''){
            $(".next-navigation").show();
            $(".next-navigation").attr("onclick","overViewShowNext('"+output.next+"')");
        }else{
            $(".next-navigation").hide();
        }
        
        if(output.next == '' || output.previous == ''){
            $(".separator").hide();
        }else{
            $(".separator").show();
        }
        $('.add-to-basket').attr('onclick', 'quickViewaAddTickets("'+output.bname+'-'+output.name+'")');
        //$(document).ready(function(){
            slider.reloadSlider({
              pagerCustom: '#quick-view-thumbnail-images'
            });
        //});
        $('.loader_back').hide();
        $('#showQuickViewModal').children().addClass('active');
    })
    .fail(function() {
        console.log("error");
    });
}

function quickViewaAddTickets(url) {
    addTickets(url,$('.quntity-input').val());
}

//close popup method
function closeQuickViewModal(){
    $('#showQuickViewModal').children().removeClass('active');
}

//pervious data get call method
function overViewShowPrevious(previous){
    if(previous != ''){
        showQuickView(previous);
        closeQuickViewModal();
    }
}

//next data get call method
function overViewShowNext(next){
    if(next != ''){
        showQuickView(next);
        closeQuickViewModal();
    }
}

//go to details page method
function showBikeFullDetails(url){
    window.location.assign('{{ url('bikes') }}/'+url);
}

//Add tickets
function addTickets(name , qty){
    $.ajax({
        url: '{{ url('cart/add') }}?name='+name+'&qty='+qty,
        type: 'GET',
    })
    .done(function(data) {
        if(data.error){
            getCartTotal();
            $(document).ready(function(){
                $.notify({
                    message: data.message
                },{
                    type: 'success'
                });
            });
        }else{
            $(document).ready(function(){
                $.notify({
                    message: data.message
                },{
                    type: 'danger'
                });
            });
        }
        //console.log(data);
    });
}

//slider install
slider = $('.large-images').bxSlider({
  pagerCustom: '#quick-view-thumbnail-images'
});

//ticket slider open & close on mouse over or out
$('.view-cta.plus').hover(function() {
    $(this).next('.ticket-slider').fadeIn('slow',function(){direction:'right'});
}, function() {
    if($(this).next('.ticket-slider').is(":hover")) {
        $(this).next('.ticket-slider').hover(function() {
            $(this).fadeIn();
        }, function() {
            $(this).delay(4000).fadeOut('slow',function(){direction:'left'});
        });
    }else{
        $(this).next('.ticket-slider').delay(4000).fadeOut('slow',function(){direction:'left'});
    }
});

$(".qtyminus").click(function(event) {
    if ($('.quntity-input').val() > 1) {
        $('.quntity-input').val(parseInt($('.quntity-input').val()) - 1);
    }
});
$(".qtyplus").click(function(event) {
    $('.quntity-input').val(parseInt($('.quntity-input').val()) + 1);
});

//esc button on click the close popup
$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        closeQuickViewModal()
    }
});

</script>
@endpush