@extends('front.layout.app')
@section('content')
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Shop</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="shopMain shopinnr">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <ul>
                        <li>
                            <a href="{{ route('front.shop') }}">All</a>
                        </li>
                        @foreach($categories as $category)
                            <li>
                                <a href="{{ route('front.shop', $category->id) }}">{{ $category->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        @forelse($products as $product)
                            <div class="col-md-4">
                                <a href="{{route('front.product.detail',$product->id)}}" class="shopBox">
                                    <figure><img src="{{$product->getFirstMediaUrl('product_image')}}" class="w-100"
                                                 alt="img"></figure>
                                    <div class="shopContent">
                                        <h5>{{$product->name}}</h5>
                                    </div>
                                </a>
                            </div>
                        @empty
                            <h1>No products found!</h1>
                        @endforelse
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink22.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>Dolphins Tumbler</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink33.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>64OZ GROWLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink44.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>32OZ TUMBLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink55.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>32OZ TUMBLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink66.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>64OZ GROWLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink77.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>12OZ TUMBLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink88.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>32OZ TUMBLER</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                        {{--                <div class="col-md-4">--}}
                        {{--                    <a href=" " class="shopBox">--}}
                        {{--                        <figure><img src="{{asset('images/drink99.png')}}" class="w-100" alt="img"></figure>--}}
                        {{--                        <div class="shopContent">--}}
                        {{--                            <h5>UTSA Inspired Tumblers</h5>--}}

                        {{--                        </div>--}}
                        {{--                    </a>--}}
                        {{--                </div>--}}
                    </div>
                </div>
            </div>
            {{--<div class="tophead">
                <h2 class="heading text-center">Drinkware</h2>
            </div>--}}

        </div>
    </section>
    @include('front.layout.contact-form')
@endsection