@extends('layouts.site.site')

@section('content')

<main class="main">
    <div class="mb-lg-2"></div><!-- End .mb-lg-2 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-9 col-xxl-10 offset-lg-3 offset-xxl-2">
                <div class="page-header text-center" style="background-image: url({{asset('images/page-header-bg.jpg')}})">
                        <h1 class="page-title">Catalogues</h1>
                </div><!-- End .page-header -->
            </div><!-- End .col-xl-9 col-xxl-10 -->
        </div><!-- End .row -->
    </div><!-- End .container-fluid -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-9 col-xxl-10">
                <nav aria-label="breadcrumb" class="breadcrumb-nav">
                    <div class="container">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home-site')}}">Accueil</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Catalogues</li>
                        </ol>
                    </div><!-- End .container -->
                </nav><!-- End .breadcrumb-nav -->

                <div>

                    <div class="heading heading-flex mb-6">
                        <div class="heading-left">
                            <h2 class="title">Catalogues les plus récents</h2><!-- End .title -->
                            <!-- <p>Valide jusqu'au 02/04/2023</p> -->
                        </div><!-- End .heading-left -->
                    </div><!-- End .heading -->

                    <div class="bg-light pb-5 mb-4" >
                        <div class="container">
                            <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                                data-owl-options='{
                                    "nav": false,
                                    "dots": true,
                                    "margin": 20,
                                    "loop": true,
                                    "autoplay": true,
                                    "autoplayTimeout": 3600,
                                    "autoplayHoverPause": true,
                                    "responsive": {
                                        "0": {
                                            "items":1
                                        },
                                        "480": {
                                            "items":2
                                        },
                                        "768": {
                                            "items":3
                                        },
                                        "992": {
                                            "items":4
                                        },
                                        "1200": {
                                            "items":4,
                                            "nav": true,
                                            "dots": false
                                        }
                                    }
                                }'>
                                @foreach($datas[\App\Classes\Constant::CATALOGUE] as $key => $catalogue)
                                    @if($key < 6 && count($catalogue->images) > 0)
                                    <div class="product product-7 text-center">
                                        <figure class="product-media">
                                            <a href="{{route('detail-cat-site', $catalogue->id)}}">
                                                <img src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$catalogue->images[0]->url}}" alt="Product image" class="product-image">
                                            </a>

                                            <div class="product-action-vertical">
                                                <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('catalogue.favorite.add', $catalogue->id.'&catalogues') : '#signin-modal'}}"
                                                   data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                   class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                                   style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#db6d00' : ''}};
                                                      color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#ffffff' : ''}};"
                                                ><span>Ajouter aux favories</span></a>
                                            </div>

                                            <div class="product-action">
                                                <a href="{{route('detail-cat-site', $catalogue->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>détails</span> <i class="icon-plus"></i></a>
                                            </div>
                                        </figure>

                                        <div class="product-body">
                                            <h3 class="product-title"><a href="{{route('detail-cat-site', $catalogue->id)}}">{{$catalogue->titre}}</a></h3>
                                            <div class="product-price">
                                                <span class="out-price">Valide jusqu'au {{$catalogue->datePublication}}</span>
                                            </div>

                                            <div class="product-label-text">Rupture de stock</div>
                                        </div>
                                    </div><!-- End .product -->
                                    @endif
                                @endforeach
                            </div><!-- End .owl-carousel -->
                        </div><!-- End .container -->
                    </div><!-- End owl-carousel -->

                    <div class="mt-7">

                        <hr class="mb-5">

                        <div>

                            <div class="cta cta-horizontal mb-3">
                                <div class="row align-items-center">
                                    <div class="col-lg-8 col-xl-8">
                                        <h3 class="cta-title">Tous les catalogues</h3><!-- End .cta-title -->
                                        <p class="cta-desc">Utiliser des filtres pour une recherche plus simpliée.</p>
                                    </div><!-- End .col-xl-3 -->

                                    <div class="col-lg-4 col-xl-4">
                                        <form action="#">
                                            <div class="input-group">
                                                <select name="" id="" class="form-control">
                                                    <option value="">Tous</option>
                                                    <option value="">Récent</option>
                                                    <option value="">Enseigne</option>
                                                    <option value="">A proximité</option>
                                                </select>
                                            </div><!-- .End .input-group -->
                                        </form>
                                    </div><!-- End .col-xl-7 -->
                                </div><!-- End .row -->
                            </div><!-- End .cta -->

                        </div><!-- End .container -->

                        <hr class="mb-5">

                        <div class="row">
                            @foreach($datas[\App\Classes\Constant::CATALOGUE] as $key => $catalogue)
                                @if(count($catalogue->images) > 0)
                                    <div class="col-md-3 mb-20">
                                        <div class="product product-4 text-center">
                                            <figure class="product-media">
                                                <a href="{{route('detail-cat-site', $catalogue->id)}}">
                                                    <img src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$catalogue->images[0]->url}}" alt="Product image" class="product-image">
                                                </a>

                                                <div class="product-action-vertical">
                                                    <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('catalogue.favorite.add', $catalogue->id.'&catalogues') : '#signin-modal'}}"
                                                       data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                       class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                                       style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#db6d00' : ''}};
                                                              color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#ffffff' : ''}};"
                                                    ><span>Ajouter aux favories</span></a>
                                                </div>

                                                <div class="product-action">
                                                     <a href="{{route('detail-cat-site', $catalogue->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>détails</span> <i class="icon-plus"></i></a>
                                                </div>
                                            </figure>

                                            <div class="product-body">
                                                <h3 class="product-title"><a href="{{route('detail-cat-site', $catalogue->id)}}">{{$catalogue->titre}}</a></h3>
                                                <div class="product-price">
                                                    <span class="out-price">Valide jusqu'au {{$catalogue->datePublication}}</span>
                                                </div>

                                                <div class="product-label-text">Rupture de stock</div>
                                            </div>
                                        </div><!-- End .product -->
                                    </div>
                                @endif
                            @endforeach
                        </div><!-- End owl-carousel -->

                    </div><!-- End .container -->

                    <hr class="mt-0 mb-5" />

                </div><!-- End .container -->
            </div>
            @include('layouts.site.aside')
        </div>
    </div>
</main><!-- End .main -->

@endsection