




<?php $__env->startSection('banner'); ?>
    <section>
        <div class="header-img-services">

        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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">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">
                                    <?php $__currentLoopData = $restaurants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $restaurant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($restaurant->slug); ?>"><?php echo e($restaurant->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </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-md-5">Bientôt! : La commande en ligne sera 
                prochainement disponible via site web et application.</h4>
        
        </div>
    </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
			type="text/javascript"></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="<?php echo e(asset('js/jquery-ui.1.12.1.min.js')); ?>"></script>
		<script type="text/javascript" src="<?php echo e(asset('js/jquery.mapit.min.js')); ?>"
			id="mapit-source"></script>
		<script type="text/javascript"
			src="<?php echo e(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: <?php echo $restaurants->toJson(); ?>

        };


        setTimeout(function(){
            if($("#pointVenteMap").length){
                // 33.5722678,-7.6570326
                $("#pointVenteMap").mapit(
                {
                    markerIcon:"images/map-marker.png",
                    accordionActive: false,
                    bubbleCenter: true,
                    searchShow: false,
                    zoomLevel: 17,
                    startCoordinates: "31.6890099,-16.2486622",
                    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>
<?php $__env->stopPush(); ?>




<?php echo $__env->make('layouts.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/meritpfd/pommedepain.merimbulaviajes.com/myapp/resources/views/frontend/restaurant/index.blade.php ENDPATH**/ ?>