@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("css")
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page")
    @include("dashboard.Boutique.Boutique_template.styles.modern_info_pages_styles")
@endsection

@section('content')
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.banner",["page_title"=> "Points 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">
                <!-- Introduction Text -->
                <div class="col-12">
                    <div class="intro-text">
                        <h3>
                            <i class="fa fa-store" style="color: var(--primary-color); margin-right: 10px;"></i>
                            Les différents points de vente de notre boutique
                        </h3>
                        <p style="margin-top: 15px; color: #6c757d;">
                            Retrouvez nos produits dans différents points de vente grâce aux différentes options que nous vous proposons.
                        </p>
                    </div>
                </div>

                <!-- Point de Vente Cards -->
                @foreach($point_ventes as $point_vente)
                    <div class="col-md-6 col-lg-4">
                        <div class="point-vente-card">
                            <div class="card-body">
                                <h4>
                                    <i class="fa fa-map-marker-alt"></i>
                                    {{$point_vente->nom}}
                                </h4>

                                <h6>
                                    <i class="fa fa-location-arrow"></i>
                                    Adresse de localisation
                                </h6>
                                <p>{{$point_vente->adresse}}</p>

                                @if(isset($point_vente->longitude) && isset($point_vente->latitude) && $point_vente->longitude!='' && $point_vente->latitude!='')
                                    <div>
                                        <button class="btn btn-dark details"
                                                data-name="{{$point_vente->nom}}"
                                                data-presentation="{{$point_vente->horaire}}">
                                            <i class="fa fa-info-circle"></i> Plus de détails
                                        </button>

                                        <a class="btn btn-primary"
                                           target="_blank"
                                           href="https://maps.google.com/?ll={{$point_vente->latitude}},{{$point_vente->longitude}}">
                                            <i class="fa fa-map-marked-alt"></i> Voir sur la carte
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Details Modal -->
        <div id="detailsModal" class="modal fade">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <i class="fa fa-info-circle"></i>
                            Présentation et horaires - <span id="textDetailsTitleModel"></span>
                        </h4>
                        <button type="button" class="close close_details" style="color: white; opacity: 1;">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="form-group col-12">
                                <div id="details_presentation" style="line-height: 1.8;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary close_details">
                            <i class="fa fa-times"></i> Fermer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="empty-state" style="margin: 50px auto; max-width: 600px;">
            <i class="fa fa-store-slash" style="font-size: 64px; color: var(--primary-color); margin-bottom: 20px;"></i>
            <h3 style="color: var(--primary-color);">Aucun point de vente</h3>
            <p style="color: #6c757d; margin-top: 15px;">
                Cette boutique n'a pas encore spécifié de points de vente. Revenez plus tard pour voir les emplacements disponibles.
            </p>
        </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