@extends('layouts.basePage', [
    'title' => 'SFs Dupe',
    'breadcrumbs' => [
        [
            'title' => 'Home',
            'href' => '/',
        ]
    ]
])

@section('content')

    <header>

        <div class="mobile" style="border-bottom: 1px solid orange;">
            <div style="background: green;">
                <div class="container container--no-gap">
                    <div class="row">
                        <div class="col col-12" style="display: flex; justify-content: space-between; padding: 10px;">
                            <span>Location 1</span>
                            <span>Location 2</span>
                            <span>Location 3</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container container--no-gap">
                <div class="row row--align-center">
                    <div class="col col-2">
                        <a href="/"><img src="@assets('img/discord.png')" style="margin-left: 0;"></a>
                    </div>
                    <div class="col col-2" style="margin-left: auto;">
                        <span class="" onclick="document.getElementById('burger-menu').style.display='block';">Burger</span>
                    </div>
                </div>
            </div>
        </div>


        <!-- apply the padding-top to the header itself -->
        <div class="sf-header">
            <div class="container container--no-gap">
                <div class="row row--align-center">
                    <div class="col col-2">
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain;
                            height: 50px;
                            width: 100px;"></a>
                    </div>

                    <div class="col col-10" style="display: flex; flex-direction: column;">
                        <div class="row">
                            <div class="col col-12 tar">
                                <span class="locations">
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                </span>

                                <span class="socials">
                                    <a href="#" class="tag tag--social"><span>fb</span></a>
                                    <a href="#" class="tag tag--social"><span>tw</span></a>
                                    <a href="#" class="tag tag--social"><span>lnk</span></a>
                                </span>
                            </div>
                        </div>
                        <div class="row" style="margin-top: auto;">
                            <div class="col col-12">
                                
                                <ul class="nav-list">
                                    <li class="nav-list__item"><a href="/about">About</a></li>
                                    <li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
                                        <ul class="nav-list__item__dropdown">
                                            <div class="nav-list__item__dropdown__content">
                                                <li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
                                            </div>
                                        </ul>
                                    </li>
                                    <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
                                    <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                                </ul>

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

    </header>

    <!-- Burger nav -->
    <div id="burger-menu" class="" style="display: none; position: absolute; height: 100%; left: 0; right: 0; z-index: 10; background-color: #FFFFFFD1; padding: 20px 40px; ">
        <div class="row" style="margin-top: auto;">
            <div class="col col-12">

                <div class="" onclick="document.getElementById('burger-menu').style.display='none';">CLOSE</div>
                
                <ul class="nav-list">
                    <li class="nav-list__item"><a href="/about">About</a></li>
                    <li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
                        <ul class="nav-list__item__dropdown">
                            <div class="nav-list__item__dropdown__content">
                                <li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
                            </div>
                        </ul>
                    </li>
                    <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
                    <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                </ul>

            </div>
        </div>
    </div>
    <!-- END Header -->

    <!-- Hero and content -->
    <div style="position: relative;">
        <img class="image--center" src="https://placehold.co/1920x640">
        <div class="container" style="padding-left: 80px; padding-right: 80px; margin-top: -100px; background: #707070; position: relative;">
            <div class="row row--align-center" style="">
                <h2>Our Showrooms</h2>
                <div style="margin-left: auto">
                    More Store information
                    <span style="background: grey; color: #FFF; border-radius: 999px; border: 1px solid #FFF;">-></span>
                </div>
            </div>
            
            <style>
                /* Changing the col padding for this row  */
            .row--our-showrooms{
                margin-left: -60px; margin-right: -60px;
            }
            .row--our-showrooms [class^=col]{
                padding-right: 60px; padding-left: 60px;
            }
            </style>
            <div class="row row--our-showrooms">
                <div class="col col-4" style="display: flex; align-items: center; justify-content: left;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
                <div class="col col-4" style="border: solid #FFF; border-width: 0 1px; display: flex; align-items: center; justify-content: center;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
                <div class="col col-4" style="display: flex; align-items: center; justify-content: right;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- margin-bottom, to match top of image -->
    <div class="container" style="margin-bottom: 40px;">
        <div class="row image-over-block">
            <!-- col 10 = 91% - 50% col 6 = remains 41% -->
            <!-- on container of 1300 (as design) 110 = 8.4% 140 = 10.7%  (110/1300)*100 -->
            <div class="col col-11 image-over-block__block">
                <div class="row">
                    <div class="col col-6">
                        <p>WHERE ELEGANCE MEETS PERFORMANCE</p>
                        <p>Amigo</p>
                        <p>As an Amtico One Premium Retailer, we offer expert guidance and installation. Amtico flooring is a luxurious, durable solution, replicating natural materials like wood and stone with a high-quality finish. Scratch-resistant and low-maintenance, it’s ideal for busy homes and commercial spaces. With unique patterns like herringbone and parquet, Amtico lets you create a stylish, long-lasting floor tailored to your vision.</p>
                        <a class="button" href="#">Amtico Range</a>
                    </div>
                </div>
            </div>
            <!-- col 6 = 50% -->
            <div class="col col-6 image-over-block__image">
                <img style="" src="https://placehold.co/630x630">
            </div>
        </div>
    </div>

    <!-- Meet the Team  -->
    <div class="container">
        <h2>Meet the Team</h2>
        <div class="row">
            @for ($i = 0; $i < 3; $i++)
            <div class="col-xs-12 col-sm-6 col-md-4 team-block">
				<img class="team-block__image" src="https://placehold.co/412x412">
				<p class="team-block__name">Team member name</p>
				<p class="team-block__role">Job role</p>
			</div>
            @endfor
        </div>
    </div>

    <!-- Showrroms -->
    <div class="container">
        <h2>Our Showrooms</h2>
        <div class="row">
            @for ($i = 0; $i < 3; $i++)
            <div class="col col-xs-12 col-sm-6 col-md-4">
                <div class="store-block">
                    <p class="store-block__title h5">Someplace Store</p>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>123 Somewhere Road Someplace, PO5 C0D</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>000 0000 0000</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>email@address.co.uk</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <div>
                            <p>Opening Hours</p>
                            <div class="store-block__block__times">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-4" style="padding-right: 0">
                                        <p>Mon-Fri</p>
                                    </div>
                                    <div class="col-xs-12 col-sm-8">
                                        <p>9am - 4pm</p>
                                    </div>
                                </div>
                                <div class="row">
                                <div class="col-xs-12 col-sm-4" style="padding-right: 0">
                                        <p>Sat</p>
                                    </div>
                                    <div class="col-xs-12 col-sm-8">
                                        <p>9am - 3pm</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="store-block__map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2369.3678147138744!2d-0.08880754332036069!3d53.56905190129133!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48789cbafda6135f%3A0x29153b25374cd41a!2sGrimsby%20Fishing%20Heritage%20Centre!5e0!3m2!1sen!2suk!4v1748549467003!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
            @endfor
        </div>
    </div>

    <!-- Advanced slider -->
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <h2>Fancy Range Slider</h2>
                <p>Whether you desire the look of a natural wood, a calming stone, or even something more abstract, Amtico offers a range of designs and patterns across all their collections. With durable wear layers and timeless style your Amtico floor will stand the test of time.</p>
            </div>
        </div>
        
        <div class="row row-for-fancy">
            <div class="col col-xs-12 col-sm-12 col-3">
                <h3>Slider range title</h3>
                <p>With the same benefits of a standard Amtico floor, but the option for more style creativity, we can create an elegant-looking, well-designed floor, with a more modern and contemporary aesthetic choice of patterns and designs.</p>
                <a class="button">Button link</a>
                <div class="slide__dots" style="margin-top: 20px;">
                    <!-- <span class="slide-dot slide-dot--active"><div class="slide-dot__inner"></div></span>
                    <span class="slide-dot"><div class="slide-dot__inner"></div></span>
                    <span class="slide-dot"><div class="slide-dot__inner"></div></span> -->
                </div>
            </div>

            <style>
                .fancy-slider__container{
                    flex: 0 0 100%;
                    max-width: 100%;
                    background: lime; overflow:hidden;
                }
                .fancy-slider__container__content-row{
                    
                    width: auto !important; /* Maybe needed as .col div.row to remove the width: 100% that seems to mess up relative pos */
                }
                .fancy-slider__slider-items{
                    flex-wrap: nowrap;
                    margin-left: 25px;
                    transition: 0.6s ease-in-out !important;
                    transform: translate3d(0px, 0px, 0px); /* First one will be changed inline via JS */
                }

                .arrow{
                    background: orange; width: 35px; height: 35px; border-radius:999px;
                    position: absolute; z-index: 8;
                }
                .arrow--left{left: 0; top: 50%;}
                .arrow--right{right: 0; top: 50%;}
                    
                
                .row-for-fancy{}
                /* Full width on mobile */
                .fancy-slider__container{
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                @media (min-width: 768px){
                    /* On small desktop, fit with the col-3 side-content */
                    .fancy-slider__container{
                        flex: 0 0 75%;
                        max-width: 75%;
                    }
                    .row-for-fancy{ flex-wrap: nowrap;}
                }
                
                /* Anything above the size of the container */
                @media (min-width: 1080px){
                    .fancy-slider__container{
                        flex: 0 0 85%;
                        max-width: 85%;
                    }
                }
                /* XL */
                @media (min-width: 1200px){
                    .fancy-slider__container{
                        flex: 0 0 85%;
                        max-width: 85%;
                    }
                }

                /* Basically they're just col col-6 and col col-5 atm, will need to do mixins for each col I guess for SASS dupes */
                .fancy-slider__slide, .swiper-slide{
                    /* .col stuff */
                    padding-right: 0.4166666667rem;
                    padding-left: 0.4166666667rem;
                    min-height: 2px;
                    /* .col-5 */
                    flex: 0 0 41.6666666667%;
                    max-width: 41.6666666667%;

                    /* Attempt at slight animation on scale */
                    /* animation-duration: 1s;
                    animation: maxOff 1s ease infinite alternate; */
                    transition: 1.2s ease-in-out !important;
                }
                .fancy-slider__slide--active, .swiper-slide-active{
                    /* .col-6 */
                    /* Trying in JS/inline for animation sake */
                    flex: 0 0 50%;
                    max-width: 50%;
                    transition: .6s ease-in-out !important;
                    
                }
            </style>
            <!-- <div class="col fancy-slider__container">
                
                <div class="row fancy-slider__container__content-row">

                    <div class="arrow arrow--left"></div>
                    
                    <div class="col col-12 fancy-slider__slider-items row row--align-center">
                        <div class="col fancy-slider__slide">
                            <img style="" src="https://placehold.co/630x630">
                        </div>
                        @for ($i = 0; $i < 3; $i++)
                        <div class="col fancy-slider__slide">
                            <img style="" src="https://placehold.co/630x630">
                        </div>
                        @endfor
                    </div>
                    
                    <div class="arrow arrow--right"></div>

                </div>
            </div> -->

            <div class="col fancy-slider__container">
                <div class="swiper">
                    
                    <div class="swiper-wrapper fancy-slider__slider-items row row--align-center">
                        
                        <div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
                        <div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
                        <div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
                        <div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
                        <div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
                    </div>
                    
                    <!-- <div class="swiper-pagination"></div> -->

                
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>


        </div>
    </div>

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <style>
        /* .swiper {
            width: 85%;
            height: 430px;
            } */
    </style>
    <div class="container">
        
    </div>
    <script>
        // fancy-slider__container (not needed in swiper, think it's the container then a 'wrapper' for the slider)
        // fancy-slider__container__content-row
        // fancy-slider__slider-items
        // fancy-slider__slide fancy-slider__slide--active
        const swiper = new Swiper('.swiper', {
        // const swiper = new Swiper('.swiper', {
        // Optional parameters
        centeredSlides: false,
        direction: 'horizontal',
        loop: true,
        // slidesPerView: 3,
        slidesPerView: 1, // Arbitray number, but seems to be working. Slide 'widths' are 
        // allowTouchMove: true,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false,
        // },
        // breakpoints: {
        // 640: {
        //   slidesPerView: 2,
        //   spaceBetween: 20,
        // },

        // If we need pagination
        pagination: {
            // el: '.swiper-pagination',
            el: '.slide__dots',
            clickable: true,
            renderBullet: function (index, className) {
            return '<span class="slide-dot '+ className+'"><div class="slide-dot__inner"></div></span>';
            // '<span class="' + className + '">' + (index + 1) + "</span>";
            
            },
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            // nextEl: '.arrow--right',
            // prevEl: '.arrow--left',
        },

        // And if we need scrollbar
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
        });
    </script>

    <!-- Installations gallery with view/hide -->
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <h2>Fancy gallery</h2>
            </div>
        </div>

        <div class="row gallery-fancy">
            <div class="col col-3">
                <img src="https://placehold.co/250x350">
                <img src="https://placehold.co/240x240">
            </div>
            <div class="col col-3">
                <img src="https://placehold.co/240x240">
                <img src="https://placehold.co/240x180">
            </div>
            <div class="col col-3">
                <img src="https://placehold.co/240x180">
                <img src="https://placehold.co/250x350">
            </div>
            <div class="col col-3">
                <img src="https://placehold.co/250x240">
                <img src="https://placehold.co/250x240">
            </div>
        </div>
        <button id="gf-toggle" class="button">View all Images</button>
        <script>
            let toggle = document.getElementById('gf-toggle');
            let gf = document.querySelectorAll('.gallery-fancy');
            toggle.addEventListener("click", function(e) {
                if(gf[0].classList.contains('gallery-fancy--show')){
                    gf[0].classList.remove('gallery-fancy--show');
                    toggle.innerHTML = 'View all Images';
                }else{
                    gf[0].classList.add('gallery-fancy--show');
                    toggle.innerHTML = 'Hide Images';
                }
            });
        </script>
    </div>


    <!-- Footer -->
    <footer style="margin-top: auto;">
        <div style="background-color: #F6F6F6; color: #242322">
            <div class="container">
                <div class="row">
                    <div class="col col-2">
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
                    </div>

                    <div class="col col-6">
                        <div class="row">
                            @for ($i = 0; $i < 3; $i++)
                            <div class="col col-6">
                                <p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Someplace Store</p>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>123 Somewhere Road Someplace, PO5 C0D</p></div>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>000 0000 0000</p></div>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>email@address.co.uk</p></div>
                            </div>
                            @endfor
                            
                            <div class="col col-6">
                                <p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Useful Links</p>
                                <div style="font-size: 15px;"><a href="#">Contact</a></div>
                                <div style="font-size: 15px;"><a href="#">About Us</a></div>
                                <div style="font-size: 15px;"><a href="#">Terms &amp; Conditions</a></div>
                            </div>
                        </div>

                    </div>

                    <div class="col col-4">
                        <div class="" style="background: #707070; padding: 20px; color: #FFF; border-radius: 16px;">
                            <p style="font-size: 18px; font-weight: bold;">Header</p>
                            <p style="font-size: 13px; margin-top: 8px;">Paragraph/content of the block</p>
                            <form style="margin-top: 12px; display: flex; gap: 10px;">
                                <div class="input-group" style="flex: 1 0 50%;">
                                    <label for="newsletter-email" style="color: #FFF; margin: 0; position: absolute; top: 50%; transform: translate(0, -50%); left: 20px;">Email</label>
                                    <input type="text" placeholder="Email" id="newsletter-email"
                                    style="background: #707070; border: 1px solid #FFF; color: #FFF;"></input>
                                </div>
                                <button style="margin-top: 0;">Sign-up</button>
                            </form>
                        </div>
                        <div class="" style="margin-top: 30px;">
                            <span class="socials">
                                <a href="#" class="tag tag--social"><span>fb</span></a>
                                <a href="#" class="tag tag--social"><span>tw</span></a>
                                <a href="#" class="tag tag--social"><span>lnk</span></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="background-color: #242322; color: #FFF;">
            <div class="col col-12" style="padding: 10px 40px;">
                <p>Copyright © SF | All Rights Reserved</p>
                <p>Developed by Aney</p>
            </div>
        </div>

    </footer>
@endsection