@extends('layouts.landing_website')

@push('style')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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">
@vite('resources/sass/landing.scss')

<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://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></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')
{!! $landingWebsite->gjs['html'] !!}

<!-- 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