@extends('merchbay_main')
@section('main-content')
    <style>
        .fishes {
            position: relative;
            top: 0;
            left: 0;
        }

        .fish {
            position: absolute;
            top: 60px;
            left: 80px;
        }
        .carousel-item{
            min-height: 350px;
            height: 350px;
        }
        .carousel-item>a {
            min-height: 350px;
            height: 350px;
            position: relative;
        }

        .carousel-item>a>img.blurred {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(1rem);
        }

        .top-image {
            position: absolute;
            z-index: 1;

            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
            width: 100%;
        }

        .top-image>img {
            width: 100%;
        }

    </style>
    <div class="main__carousel">
        <div class="">
            <div class="row">
                <div class="col-lg-12">
                    <div id="carouselExampleDark" class="carousel slide" data-bs-ride="carousel">
                        {{-- <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> --}}
                        <ol class="carousel-indicators">
                            @foreach ($carousel_images as $key => $carousel)
                                @if ($key == 0)
                                    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="{{ $key }}"
                                        class="active"></li>
                                @else
                                    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="{{ $key }}"></li>
                                @endif
                            @endforeach
                            {{-- <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
                            <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li> --}}
                            {{-- <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
                            <li data-bs-target="#carouselExampleDark" data-bs-slide-to="3"></li> --}}
                        </ol>
                        <div class="carousel-inner">
                            {{-- <div class="carousel-item active" data-bs-interval="10000"> --}}

                            @foreach ($carousel_images as $key => $carousel)
                                @if ($key == 0)
                                    <div class="carousel-item active" data-bs-interval="10000">
                                        <a href="{{ url('store') }}/{{ $carousel->StoreUrl }}">
                                            <div class="top-image">
                                                <img
                                                    src="{{ minio_url('teamstore/' . $carousel->ImageFolder . '/' . $carousel->StoreBanner) }}" />
                                            </div>
                                            <img src="{{ minio_url('teamstore/' . $carousel->ImageFolder . '/' . $carousel->StoreBanner) }}"
                                                class="blurred" />
                                        </a>
                                    </div>
                                @else
                                    <div class="carousel-item" data-bs-interval="10000">
                                        <a href="{{ url('store') }}/{{ $carousel->StoreUrl }}">
                                            <div class="top-image">
                                                <img
                                                    src="{{ minio_url('teamstore/' . $carousel->ImageFolder . '/' . $carousel->StoreBanner) }}" />
                                            </div>
                                            <img src="{{ minio_url('teamstore/' . $carousel->ImageFolder . '/' . $carousel->StoreBanner) }}"
                                                class="blurred" />
                                        </a>
                                    </div>
                                @endif
                            @endforeach


                            <!-- <div class="carousel-item" data-bs-interval="10000">
                                                <img src="https://crewsportswear.app:5955/WIPCAPS.jpg" class="d-block w-100" alt="...">
                                              </div> -->
                            <!-- <div class="carousel-item" data-bs-interval="10000">
                                                <img src="https://crewsportswear.app:5955/NINONG.jpg" class="d-block w-100" alt="...">
                                              </div> -->
                            {{-- <div class="carousel-item">
                                <a href="">
                                    <img src="https://crewsportswear.app:5955/DRIVE.jpg" class="d-block w-100" alt="...">
                                </a>
                            </div> --}}
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main__content mt-5">
        <div class="container">
            <!-- Forms Search -->
            <div class="row justify-content-md-center">
                <div class="col-lg-8">
                    <form class="row g-2 g-lg-5">
                        <div class="col-lg-9">
                            <div class="input-group">
                                {{-- <input
                  type="text"
                  class="form-control border-end-0"
                  placeholder="Search Store"
                  aria-label="Search Store"
                  aria-describedby="basic-addon2"
                /> --}}
                                <input type="text" class="form-control border-end-0" placeholder="Search Store"
                                    value="{{ $keyword }}" name="q">
                                <input type="hidden" class="form-control border-end-0" placeholder="Search Store"
                                    value="latest" name="s">
                                <button class="input-group-text bg-white border-start-0" id="basic-addon2"><i
                                        class="fa fa-search"></i></button>
                            </div>
                        </div>
                        <div class="col-lg-3 added-or">
                            <a href="{{ url('templates') }}" type="submit" class="btn btn-black mb-3 w-100">
                                Design your own
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            @include('teamstore-sublayouts.stores')
            <!-- First 12 Stores -->

            <!-- Featured Products -->
            <div class="row py-5">
                <div class="col-lg-12">
                    <div class="text-center">
                        <h3>Featured Products</h3>
                    </div>
                </div>
                @foreach ($featured_products as $product)
                    <div class="col-lg-2 col-md-3 col-6" v-for="index in 6" :key="index">
                        <div class="text-center p-3">
                            <a href="{{ url('store') . '/' . $product->StoreUrl . '/product/' . $product->ProductURL }}">
                                <div class="store-logo">
                                    <img src="{{ config('filesystems.disks.minio.url') }}/crewsportswear/images/{{ $product->Image }}"
                                        alt="{{ $product->ProductName }}" class="d-block border shadow-sm">
                                </div>
                                <div class="store-name text-truncate">{{ $product->ProductName }}</div>
                            </a>
                        </div>
                    </div>
                @endforeach

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

    <!-- calling designers -->
    <div class="adbg">
        <div class="row py-3">
            <div class="col-lg-8">
                <div class="p-5">
                    <h2>
                        Calling all <span class="designer-text">Creators</span>
                    </h2>
                    <p>
                        <a href="{{ url('auth/login') }}">Sign in</a> on Merchbay and share your creativity and expand
                        <br />your ideas. Click below button to know more.
                    </p>

                    <div class="pt-3">
                        <a href="{{ url('/contact-us') }}" type="button" class="btn btn-black mb-3 px-5">
                            Learn more
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
