@extends('layouts.landing_website')

@push('style')
    @vite('resources/sass/landing.scss')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<style>
{!! $landingWebsite->gjs['css'] !!}
</style>

<style>
.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: none;
    position : relative;
}

.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
    font-family: FontAwesome;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    top: 0;
    font-size: 40px;
}
.carousel-control-next-icon:before {
    content: "\f054";
}
.carousel-control-prev-icon:before {
    content:"\f053";
}

@media (min-width: 576px){
#js-galleryModal .modal-dialog {
    max-width: 100%;
    margin: 0;
}}

@media (min-width: 577px){
#js-galleryModal .modal-dialog {
    max-width: 720px;
    margin: 10px auto;
}}

#js-galleryModal .close-btn {
    font-size: 45px;
    font-weight: 300;
    padding: 5px 10px;
}

</style>
@endpush

@push('scripts')
    <script>
        let url = new URL(window.location.href);

        // Supprimer un paramètre (par exemple, 'filter')
        url.searchParams.delete('origin');

        // Mettre à jour l'URL sans rechargement de page
        window.history.pushState({}, '', url);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
@endpush

@if (session('success'))
<div id="js-sessionSuccess" style="display:none">
    {!! session('success') !!}
</div>
@endif

@section('content')
@include('pages.landing_website.partials.sample_injection')

<div id="gjs-content">
{!! $landingWebsite->gjs['html'] !!}
</div>


<!-- Modal -->
<div id="js-storeLocatorModal" class="modal fade store-locator-modal " tabindex="-1" role="dialog" aria-labelledby="js-storeLocatorModal" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div id="map" style="height:85vh;"></div>
            </div>

        </div>
    </div>
</div>

<div id="js-driveToStoreModal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="js-driveToStoreModal" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div id="drive_map" style="height:85vh;"></div>
            </div>

        </div>
    </div>
</div>


<div id="js-galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close-btn close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div id="js-galleryImages"></div>
            </div>
        </div>
    </div>
</div>

<!-- Photoswipe -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
@endsection