@extends('layouts.layout')

@section('title', 'Restaurant')


@section('banner')
    <section>
        <div class="header-img-services banner-size">

        </div>
        @include('partials.telecharger')
    </section>
@endsection

@section('main')
   <!-- Main -->
   <section>
    <div class="container text-center my-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="titre text-uppercase">restaurants</h2>
            </div>
            <p>
                Pomme de Pain vous accueille 7j/7j dans ses Sandwich-Café où
                convivialité et modernité sont au rendez-vous. Ambiance cosy,
                déco design et mobilier confortable font de vos pauses gourmandes de
                vrais moments de détente.
                En famille ou entre amis, vous pouvez compter sur notre personnel
                efficace et souriant pour assurer un service de qualité
            </p>
            <!-- map -->
            <div class="col-md-12">
                <div class="marque-pointVente space-2" id="marque-pointVente">
                    <div class="container">
                        <div class="section-title-block d-flex justify-content-center
                            align-items-center flex-lg-row flex-column mb-4">
                            <div class="media pointsDeVente mr-md-3">
                                <div class="media-body text-right mr-3">
                                    <h4 class="h2 title me-md-4 mb-s-4">OÙ NOUS TROUVER ?</h4>
                                </div>
                                <!--<div class="h1 nbr">-->
                                <!--    12-->
                                <!--</div>-->
                            </div>
                            <div class="col-md-3 ml-md-3 mt-md-0 mt-4 ">
                                <select name="" id="selectVilleDropdown" class="select-drop form-control">
                                    @foreach ($restaurants as $restaurant)
                                        <option value="{{$restaurant->slug}}">{{$restaurant->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="position-relative text-start">
                            <div id="pointVenteMap" class="shadow"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- end map -->
            <h4 class="titre text-uppercase -orange mt-5">Bientôt! : La commande en ligne sera 
                prochainement disponible via site web et application.</h4>
        
        </div>
    </div>
</section>

@endsection

@push('stylesheets')
<link rel="stylesheet" href="{{asset('css/jquery.mCustomScrollbar.css') }}">
@endpush

@push('scripts')
<script
			src="{{ asset('js/jquery.min.js')}}"
			type="text/javascript"></script>
        <script src="{{asset('js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
        <script src="{{asset('js/hs.core.js') }}"></script>
        <script src="{{asset('js/hs.malihu-scrollbar.js') }}"></script>
		<script type="text/javascript" src="js/select2.min.js"></script>

		<script
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB64tTyWGKR9k7E1kEIpuPwR4spXgyP7R8&language=fr"
			async defer></script>

		<script type="text/javascript" src="{{ asset('js/jquery-ui.1.12.1.min.js')}}"></script>
		<script type="text/javascript" src="{{ asset('js/jquery.mapit.min.js')}}"
			id="mapit-source"></script>
		<script type="text/javascript"
			src="{{ asset('js/jquery.mapit.json-markerclustererplus.js')}}"></script>

		<script>
            
            
        
    $(document).on('ready', function () {
        if($(".cbp").length){
            // initialization of cubeportfolio
            $.HSCore.components.HSCubeportfolio.init('.cbp');
        }

        
        
        
                    // initialization Map point Vente
        var jsonData = {
            getGategoriesMethod: null, /* Use this if calling a webservice to get the json. EG: function loadFromWebService(onCompleted) { jQuery.ajax(url:null, success:onCompleted); } */
            // templates: [
            //         {
            //             id: "simpleTemplate",
            //             tabs: [
            //                 {
            //                     name: "Name",
            //                     html: "Store Name:  name"
            //                 },
            //                 {
            //                     name: "Address",
            //                     html: " address<br/> city,  tel"
            //                 }
            //             ]
            //         }
            //     ],
            
            categories: {!!$restaurants->toJson()!!}
        };


        setTimeout(function(){
            if($("#pointVenteMap").length){
                // 33.5722678,-7.6570326
                $("#pointVenteMap").mapit(
                {
                    markerIcon:"images/map-marker.svg",
                    accordionActive: false,
                    bubbleCenter: true,
                    bubbleShowAtStart: false,
                    searchShow: false,
                    zoomLevel: 30,
                    startCoordinates: "33.589886,-7.603869",
                    mapType: google.maps.MapTypeId.ROADMAP,
                    dataSource: mapit.jsonDataSource,
                    dataSourceOptions: jsonData,
                    // markerClustererOptions: {
                    //     imagePath: "https://www.bspa.ma/test/assets/img/map-markers/m1.png"
                    // }
                });
            }
        },2000);
        setTimeout(function(){
            if($(".js-scrollbar-accordion").length){
                $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar-accordion'));
            }
        },2500);
         // check if there is any point

        
        // init select dropdown
        if($(".select-drop").length){
            $('.select-drop').select2({
                placeholder: "Choisiz une ville",
                allowClear: true,
                theme: 'bootstrap4',
            });
        }
        if($(".select-drop").length){
            $('.select-drop').on('select2:select', function (e) {
                var data = e.params.data;
                
                if (data.id.length) {
                    var direction = $('.mapit-navigation').find(`a.ville-place[data-slug="${data.id}"]`);
                    direction = $('.mapit-navigation').find(`.cat_group#${data.id}`);
                    if (direction.length) {
                        $('.mapit-navigation .cat_group').removeClass('cat_visible').addClass('cat_invisible');
                        direction.removeClass('cat_invisible').addClass('cat_visible');
                        let first_direction = direction.find('.plase-list:eq(0) a');
                        if(first_direction.length) {
                            first_direction.click();
                        }
                        $(".js-scrollbar-accordion").mCustomScrollbar("update");
                    }
                }
            });
        }

    });

</script>
@endpush