@extends('layout')
@section('page_title', __('firstcop.home.title'))
@section('page_slug', 'home')
@section('content')
    <div id="home-part-container" class="w-full mx-0  px-0 w-full text-xl text-gray-800 leading-normal" >
        <div class="home-part part-top g-0" style="background-image: url('{{asset( Storage::url('public/home/top-slider-8.jpg'))}}')">

            <img src="{{asset( Storage::url('public/home/top-slider-8.jpg'))}}" />
                        <!--<h1 class="mb-2 px-5">FIRSTCOP</h1>
                        <h2 class="mb-2 px-5">Des passionnés pour les passionnés</h2>-->
                        {{--<p class="mb-2">Découvrez une nouvelle manière d'acheter et de vendre des produits certifiés neufs et authentiques avec une approche simplifiée tout en obtenant des avantages</p>--}}
                        {{--<form action="{{route('search')}}" id="search-form" class="container px-5">
                            <div class="form-group mb-5 ">
                                <div  style="position:relative;">
                                    {{ Form::text('search',null,  ['class' => 'fc-input' . ($errors->has('search') ? ' is-invalid' : ''), 'required'=> true, 'placeholder' => __('firstcop.search.placeholder')]) }}
                                    <button class="w-full md:w-auto lg:m-1 text-fcgrey" style="position: absolute;right:2px;top:5px;"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                        </svg>
                                    </button>
                                </div>

                            </div>
                        </form>--}}

           {{-- <div class="row home-button">
                <div class="col-12   text-center ">
                    <a class="btn btn--fc   text-center" href="{{route('contact', ['subject' => 'sur_mesure', 'message' => "Bonjour,\nPouriez-vous m'aider à trouver une paire\nInstagram :\nModèle demandé:\nBudget approximatif de :"])}}">SUR MESURE</a>
                </div>

                <div class="col-12  text-center ">
            <a class="btn btn--fc text-center" href="{{route('category', ['categorySlug' => 'sneakers'])}}">SNEAKERS</a>
                </div>

                <div class="col-12  text-center ">
                    <a class="btn btn--fc text-center" href="{{route('category', ['categorySlug' => 'streetwear'])}}">COLLECTION</a>
                </div>

            </div>--}}
                {{--<div class="mouse">

                    <div class="mouse-icon">
                        <span class="mouse-wheel"></span>
                    </div>

                </div>--}}
        </div>
        <div class="home-part my-6">
            <div class="container-fluid">
                <div class="row gx-5">
                    @foreach($homeCategory->childrenWithProducts as $subCategory)
                        <a class="col-4 md:col-2 flex" href="{{route('categoryOrProduct', ['url'=> $subCategory->url])}}">
                            @if($subCategory->file)
                                <span class="text-center w-full inline-flex text-2xl shadow-md items-center justify-center" style="word-wrap: anywhere;">
                                <img class=" w-full" src="{{$subCategory->file->url}}" alt="{{$subCategory->name}}"/>
                        </span>
                            @else
                                <span class="text-center w-full min-h-32 inline-flex text-2xl shadow-md items-center text-fcgrey font-bold justify-center p-5 bg-white" style="word-wrap: anywhere;">
                                {{$subCategory->name}}
                                </span>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="home-part part-last-drop">

            <div class="container-fluid">
                <h1 class="text-fcgrey mb-5 text-xl md:text-2xl">DERNIÈRES SORTIES</h1>
                @include('shop.product-list', ['products' => $lastDropProducts, 'listAlign' => 'text-center'])
                <h1 class="text-fcgrey text-xl md:text-2xl">TENDANCES</h1>
                @include('shop.product-list', ['products' => $bestSalesProduct, 'listAlign' => 'text-center'])
            </div>
        </div>
        <div href="{{route('categoryOrProduct',['url' => 'sneakers' ] )}}" class="home-part   part-sneakers text-uppercase" style="background-image: url('{{asset( Storage::url('public/home/sneakers-2.jpg'))}}'); background-position:bottom left;">
            <div class="w-full">
            <h1 class="max-w-full md:max-w-1/2 m-auto text-2xl home-title-shadow font-bold">Achetez et vendez vos sneakers rares, neuves et authentiques aux meilleurs prix</h1>
            <a class="btn-large btn--fc mt-5 w-3/4 md:w-1/4" href="{{route('category', ['categorySlug' => 'sneakers'])}}">SNEAKERS</a>
            </div>
        </div>




    </div>
@endsection
{{--
@section('extra-js')
    @if(empty(request()->get('no-mag')))
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script>
        <script type="text/javascript">
            /*$('#footer').addClass('home-part')
            $('#footer').addClass('fp-auto-height-responsive')
            $('#home-part-container').append($('#footer'))


            $('#home-part-container').fullpage({
                sectionSelector:'.home-part',
                scrollOverflow:true,
            })*/
        </script
    @endif
@endsection
>--}}