@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("css")
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page")
@endsection
@section('content')
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.banner",["page_title"=> "Point de vente"])

    @if(isset($point_ventes) && count($point_ventes)>0)


    <div id="contact-us-page" class="page-content page-content--centered container">
       <div class="row">
           <h3 class="col-md-12">
               Les différents point de vente de notre boutique. <br> Retrouvez nos produits dans différent point de vente grâce aux différentes options que nous vous proposons.
           </h3>
           @foreach($point_ventes as $point_vente)
           <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                            <h4 class="col-md-12 mt-3">{{$point_vente->nom}} </h4>
                        <h6 class="col-md-12">Adresse de localisation</h6>
                            <p class="col-md-12">{{$point_vente->adresse}}</p>
{{--                            <div class="contact_info_text">{!! $point_vente->horaire !!}</div>--}}
                           @if(isset($point_vente->longitude) && isset($point_vente->latitude) && $point_vente->longitude!='' && $point_vente->latitude!='')
                            <div class="col-md-12">
                                <a class="btn btn-dark btn-sm details" style="color: #fff" data-name="{{$point_vente->nom}}" data-presentation="{{$point_vente->horaire}}">
                                  <i class="fa fa-dot-circle"></i>  Plus de détails
                                </a>
                             <a class="btn btn-primary btn-sm" style="border: none" target="_blank" href="https://maps.google.com/?ll={{$point_vente->longitude.','.$point_vente->latitude}}">
                                    <i class="fa fa-map-marker"></i> map
                                </a>
                            </div>
                               @endif
                    </div>
                </div>
           </div>
          @endforeach
       </div>
    </div>
    <div id="detailsModal" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title" ><i class="fa fa-plus"></i>
                        Présentation et horraire   <span id="textDetailsTitleModel"> </span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="row">
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <p id="details_presentation"></p>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light btn-sm close_details" >Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @else
        <div class="col-12 text-center">
            <h3 class="text-center mt-5 pt-5 mb-5 pb-5" style="color :{{$metas->background_color!=null ?  $metas->background_color : '#88b121' }}">Aucun point de vente spécifié.</h3>
        </div>
    @endif

@endsection

@section('script')
    <script src="{{asset('js/contact_custom.js')}}"></script>
    <script>
    $(document).ready(function(){
    $(document).on('click','.details',function(){
    let presentation= $(this).data('presentation');
    let name= $(this).data('name');
    $('#textDetailsTitleModel').html(name);
    $('#details_presentation').html(presentation);
    $('#detailsModal').modal('show');
    })

    $(document).on('click','.close_details',function(){
    $('#details_presentation').html("");
    $('#textDetailsTitleModel').html("");
    $('#detailsModal').modal('hide');
    })
    })
    </script>
@endsection