@extends('frontend.template.main')

@push('meta')
@include('frontend.share._meta',['meta'])
@endpush
@section('content')
@include('frontend.home.inc.slide')
@include('frontend.home.inc.welcome')
@include('frontend.home.inc.line')
@include('frontend.home.inc.thingstodo')
@include('frontend.home.inc.line')
@include('frontend.home.inc.explore_video')
@include('frontend.home.inc.line')
<a class="open-popup" href="#popup" style="display: none;top:-50%;">Open popup</a>
<div id="popup" style="display: none; top:-50%; width:500px">
@endsection
@push('css')
<link href="{{asset('frontend/css/tinyslide.css')}}" rel="stylesheet" /> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<style>
    @-webkit-keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }  
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @-webkit-keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }  
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    .owl-stage-outer{
        bottom: -24px;
    }
    .cuadro_intro_hover{
        padding: 0px;
        position: relative;
        overflow: hidden;
        /*height: 225px;*/
    }
    .cuadro_intro_hover:hover{
        cursor: pointer;
    }
    .cuadro_intro_hover:hover .caption{
        cursor: pointer;
        opacity: 1;
        transform: translateY(-150px);
        -webkit-transform:translateY(-150px);
        -moz-transform:translateY(-150px);
        -ms-transform:translateY(-150px);
        -o-transform:translateY(-150px);
    }
    .cuadro_intro_hover:hover .caption p{
        display: block;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }
    .cuadro_intro_hover .caption-text h3{
        padding:10px;
        line-height: 20px;
    }
    .cuadro_intro_hover .caption-text h3 a{
        font-size: 16px;
        color: #fff;
    }

    .cuadro_intro_hover img{
        z-index: 4;
    }
    .cuadro_intro_hover .caption{
        position: absolute;
        bottom: 75px;
        -webkit-transition:all 0.3s ease-in-out;
        -moz-transition:all 0.3s ease-in-out;
        -o-transition:all 0.3s ease-in-out;
        -ms-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
        width: 100%;
    }
    .cuadro_intro_hover .caption p{
        padding-left: 12px;
        padding-right: 12px;
        display: none;
        -webkit-animation: fadeOut 1s;
        animation: fadeOut 1s;
    }
    .cuadro_intro_hover .caption p a{

        color: #fff;
    }
    .cuadro_intro_hover .blur{
        background-color: rgba(0,0,0,0.7);
        height: 50px;
        position: absolute;
        width: 100%;
    }
    .cuadro_intro_hover .caption-text{
        z-index: 10;
        color: #fff;
        position: absolute;
        height: 20px;
        top:-10px;
        width: 100%;
        text-align: justify;
    }

    #official-mot{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .slidscreen h3{
        color: #fff;
        margin-left: 10px;
        font-size: 18px;

    }
    .slidscreen p{
        font-size: 18px;
        color: #fff;
        text-shadow: 0px 1px 1px rgb(249, 255, 255);
        line-height: 25px;
        text-align: justify;
        padding: 10px;
    }
    .catption-slide{

    }
    .slidscreen{
        padding: 10px;
        background-color: #34336594;
        width: auto;
        display: table-cell;

    }

    .tinyslide figure figcaption{
        width: auto;
        font-size: 3em;
        color: white;
        z-index: 200;
        display: flex;
        justify-content: center;
        /*top: 6em;*/
        bottom: 75px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #list-welcome{
        display: inline-block;
    }

    #visicambodia .col-visit{
        border: 1px solid #eee;
        margin-top: 15px;
        background-color: #fbfbfb;
    }
    #visicambodia .col-visit .box-visit{
        display: flex;
    }
    #visicambodia .col-visit .box-visit h5{
        text-transform: uppercase;
    }
    .slide-height{
        height: 450px;
    }
    .owl-nav {


    }

    .owl-nav i {
        font-size: 24px;
        color: #ffffff82;
    }
    .owl-nav:hover i, .owl-carousel:hover .owl-nav i{
        color: #eee;
    }

    .owl-nav .owl-prev, .owl-nav .owl-next{
        top:42%;
    }
    .owl-nav .owl-prev {
        left: -10px;
        position: absolute;
    }

    .owl-nav .owl-next {
        position: absolute;
        right: -10px;
    }
    .uitooltip {
        padding: 2px;
        background:#FFF;
        color:#000;
        font-size: 15px;
        border-radius: 5px;
        width: 320px;
        height: auto;

    }
    .uitooltipheading {
        padding: 0px;
        background:#9EEFEE;
        color:#000;
        width:200px;
        position: absolute;
        -webkit-box-shadow: 0 0 5px #aaa;
        box-shadow: 3px 3px 5px #aaa;
        font-size: 18px;
        border-radius: 5px;
    }
    .ui-tooltip {
        padding: 8px;
        position: absolute;
        z-index: 99990000000000;
        max-width: 350px;
        -webkit-box-shadow: 0 0 5px #aaa;
        box-shadow: 0 0 5px #aaa;
    }
    .uitooltip p{
        text-align: justify;
    }
    .video-container iframe,
    .video-container object,
  
    .video-container embed {
        position: absolute;
        top:0;
        left: 0;
        width: 50%;
        height: 50%;
    }
    .fsp-close{
    font-size: 33px;
    color: #fff;
    top: 2em !important;
    right: 1em !important;
    border: 2px solid;
 
        
    }
    .fsp-wrapper{
            z-index: 99999 !important;
           
    }
    #popup_image{ 
        width:100%;
        border:2px solid #f6f6f6;
        padding:2px;
        background-color:#f6f6f6;
        margin-top:-50%;
        
    }
    
</style>   
@endpush

@push('jsscript')
<script src="{{asset('frontend/mapster/jquery.imagemapster.js')}}"></script>
<script src="{{asset('frontend/js/tinyslide.js')}}"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="{{asset('frontend/popupfullscreen/jquery.fullscreen-popup.min.js')}}"></script>

<script type="text/javascript">

var resizeTime = 100;
var resizeDelay = 100;
var prov = {!!$provinces -> map(function($item){
$arr[$item -> id] = ['title' => $item -> name, 'slug' => $item -> slug, 'image' => checkImage($item -> thumb380x340, ['class' => 'img-fluid', 'title' => $item -> name, 'alt' => $item -> name ]), 'desc' => str_limit($item -> description, 180)];
return $arr;
})!!};
$('#slidehome').tiny({
showNavigator: true,
        autoplay: true
        }).data('api_tiny');
$('#mobile-slide').tiny().data('api_tiny');
$('.owl-carousel').owlCarousel({
loop: true,
        margin: 0,
        nav: true,
        lazyLoad: true,
        autoplay: false,
        autoplayHoverPause: true,
        responsive: {
        0: {
        items: 1,
                slideBy: 1
        },
                600: {
                items: 1,
                        slideBy: 1
                },
                1000: {
                items: 1,
                        slideBy: 1
                }
        },
        autoHeight: false,
        navText: [
                "<i class='fa fa-caret-left'></i>",
                "<i class='fa fa-caret-right'></i>"
        ]
        });
var image = $('#mapcambodia-img');
image.mapster({
fill: true,
        fillOpacity: 0.2,
        fillColor: "ffffff",
        stroke: true,
        strokeColor: "ffffff",
        strokeOpacity: 1,
        strokeWidth: 4,
        singleSelect: true,
        fadeInterval: 50,
        mapKey: 'data-key',
        listKey:'data-key',
        showToolTip: true,
        toolTipClose: ["tooltip-click", "area-click"],
        wrapClass: 'mr-auto ml-auto',
        clickNavigate: true,
        toolTipContainer: '<div class="map-bubble map-bubble-font"> </div>',
        showToolTip: true,
        onMouseover:function(e){
        $.each(prov, function (i, data){
        var property = data[e.key];
        if (typeof property !== "undefined"){
        $(document).tooltip({
        track:true,
                trigger: 'hover',
                animated: 'fade',
                hide: false,
                content: property["title"] + '<div class="uitooltip">' + property["image"] + '<p> ' + property["desc"] + ' </p> </div>',
                items: '#KH-' + e.key,
        });
        }
        });
        }
}).css({'margin':'0 auto'});
function resize(maxWidth, maxHeight) {
var image = $('img'),
        imgWidth = image.width(),
        imgHeight = image.height(),
        newWidth = 0,
        newHeight = 0;
if (imgWidth / maxWidth > imgHeight / maxHeight) {
newWidth = maxWidth;
} else {
newHeight = maxHeight;
}
image.mapster('resize', newWidth, newHeight, resizeTime);
}

// Track window resizing events, but only actually call the map resize when the
// window isn't being resized any more

function onWindowResize() {

var curWidth = $(window).width(),
        curHeight = $(window).height(),
        checking = false;
if (checking) {
return;
}
checking = true;
window.setTimeout(function () {
var newWidth = $(window).width(),
        newHeight = $(window).height();
if (newWidth === curWidth &&
        newHeight === curHeight) {
resize(newWidth, newHeight);
}
checking = false;
}, resizeDelay);
}

$(window).bind('resize', onWindowResize);

$(".open-popup").fullScreenPopup({
bgColor: '#343364c7'
});
$(window).load(function() {    
    // var ifram = '<img class="img-fluid" id="popup_image" src="{{asset('frontend/img/happy_khmer_new_year.jpg')}}" alt="Khmer New Year" align="center">';  
    var ifram = '<iframe width="560" height="315" src="https://www.youtube.com/embed/fGrLyci6M4k?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';  
    
      
    $('#popup').html(ifram);
 setTimeout(function() {
        $(".open-popup").trigger('click');
      },10);
});

$("body").delegate(".fsp-close", "click", function() {
  
    $('#popup').html('');
});

</script> 

@endpush