@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.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
{!! $landingWebsite->gjs['css'] !!}
</style>

    <style>
        /* Resets anti-débordement et harmonisation responsive */
        *, *::before, *::after {
            box-sizing: border-box;
            max-width: 100%;
        }

        body {
            overflow-x: hidden;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        #gjs-content {
            overflow-x: hidden;
            width: 100%;
        }

        #gjs-content img,
        #gjs-content video,
        #gjs-content iframe {
            max-width: 100%;
            height: auto;
        }

        #gjs-content .row {
            --bs-gutter-x: 0;
            margin-left: 0;
            margin-right: 0;
        }

        #gjs-content .container,
        #gjs-content .container-fluid {
            padding-left: 0;
            padding-right: 0;
            max-width: 100%;
        }

        /* Slider / Carrousel dimensionnement équilibré */
        div[data-name="slider"] {
            position: relative;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
        }

        div[data-name="slider"] .carousel-inner {
            max-height: 480px;
            overflow: hidden;
        }

        div[data-name="slider"] .carousel-item img {
            width: 100%;
            max-height: 480px;
            object-fit: cover;
            display: block;
        }

        @media (max-width: 576px) {
            div[data-name="slider"] .carousel-inner,
            div[data-name="slider"] .carousel-item img {
                max-height: 360px;
            }
        }

        /* Cacher la toolbar GrapesJS dans l'affichage public */
        .gjs-toolbar {
            display: none !important;
        }

        .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;
            }
        }

        @php
            $previewDevice = request('device');
            $deviceWidths = [
                'iphone-se' => 320,
                'iphone-15' => 393,
                'iphone-15-pro-max' => 430,
                'iphone-16' => 393,
                'samsung-s23-ultra' => 412,
                'pixel-7' => 412,
                'tablet-ipad' => 768,
                'desktop-full' => 720,
            ];
            $customMaxWidth = isset($deviceWidths[$previewDevice]) ? $deviceWidths[$previewDevice] : null;
        @endphp

        @media (min-width: 577px) {
            body {
                background-color: #f0f2f5;
                /* Contrast background for desktop */
            }

            #gjs-content {
                @if($customMaxWidth)
                max-width: {{ $customMaxWidth }}px;
                border-radius: 12px;
                @else
                max-width: 720px;
                @endif
                margin: 20px auto;
                background: #ffffff;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                /* Card effect */
                min-height: calc(100vh - 40px);
                transition: max-width 0.2s ease;
            }

            #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.2/dist/js/bootstrap.bundle.min.js" 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')
    @if (request()->has('preview') && !request()->has('embed'))
        @include('pages.landing_website.partials.preview_bar')
    @endif

    @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