@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">Offres promo<span>Aujourd'hui, vous <b>économisez </b> avec Kimya</span></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">Offres promo</li>
                        </ol>
                    </div><!-- End .container -->
                </nav><!-- End .breadcrumb-nav -->

                <div>

                    <div class="cta cta-horizontal mb-6">
                        <form action="/offers/{{\App\Classes\Constant::ALL}}" method="get" id="offerFilterForm">
                            <div class="row align-items-center">
                                <div class="col-lg-8 col-xl-8">
                                    <h3 class="cta-title title">Toutes nos offres promotionnelles</h3><!-- End .cta-title -->
                                    <p class="">Découvrez toutes les offres du moment</p>
                                </div><!-- End .col-xl-3 -->

                                <div class="col-lg-2 col-xl-2">
                                    <div class="input-group">
                                        <select name="offersBest" id="offersBest" class="form-control" style="font-size: 12px;">
                                            <option {{$datas[\App\Classes\Constant::FILTERS]['offersBest'] == \App\Classes\Constant::ALL ? "selected" : ""}} value="{{\App\Classes\Constant::ALL}}">Toutes les offres</option>
                                            <option {{$datas[\App\Classes\Constant::FILTERS]['offersBest'] == \App\Classes\Constant::BEST ? "selected" : ""}} value="{{\App\Classes\Constant::BEST}}">Meilleures offres</option>
                                        </select>
                                    </div><!-- .End .input-group -->
                                </div><!-- End .col-xl-7 -->

                                <div class="col-lg-2 col-xl-2">
                                    <div class="input-group">
                                        <select name="offersFilter" id="offersFilter" class="form-control" style="font-size: 12px;">
                                            <option {{$datas[\App\Classes\Constant::FILTERS]['offersFilter'] == \App\Classes\Constant::ALL ? "selected" : ""}} value="{{\App\Classes\Constant::ALL}}">Toutes les catégories</option>
                                            <option {{$datas[\App\Classes\Constant::FILTERS]['offersFilter'] == \App\Classes\Constant::RECENTLY ? "selected" : ""}} value="{{\App\Classes\Constant::RECENTLY}}">Récent</option>
                                            <option {{$datas[\App\Classes\Constant::FILTERS]['offersFilter'] == \App\Classes\Constant::PROXIMITY ? "selected" : ""}} value="{{\App\Classes\Constant::PROXIMITY}}">A proximité</option>
                                        </select>
                                    </div><!-- .End .input-group -->
                                </div><!-- End .col-xl-7 -->
                            </div><!-- End .row -->
                        </form>
                    </div><!-- End .cta -->

                    <div class="tab-content">

                        <div class="row">
                            @foreach($datas[\App\Classes\Constant::OFFER] as $key => $product)
                            <div class="col-md-3 col-12 mb-20">
                                <div class="product text-center">
                                    <figure class="product-media">
                                        <span class="product-label label-sale">{{round((($product->ancienPrix - $product->nouveauPrix) / $product->ancienPrix) * 100)}}%</span>
                                        @if(count($product->images) > 0)
                                        <a href="{{route('detail-offer-site', $product->id)}}">
                                            <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->defaultGroupImages->imageNormal->url}}" alt="Product image" class="product-image">
                                        </a>
                                        @endif

                                        <div class="product-action-vertical">
                                            <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('offer-favorite', $product->id.'&offers&all') : '#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 == $product->preferenceUserId ? '#db6d00' : ''}};
                                                      color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#ffffff' : ''}};"
                                            ><span>Ajouter aux favories</span></a>
                                            <a href="popup/index.html" class="btn-product-icon btn-quickview" title="Voir plus"><span>Voir plus</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                             <a href="{{route('detail-offer-site', $product->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>voir l'offre</span> <i class="icon-plus"></i></a>
                                        </div>
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <div class="product-cat">
                                            <a href="#">{{$product->categorie->libelle}}</a>
                                        </div>
                                        <h3 class="product-title"><a href="{{route('detail-offer-site', $product->id)}}">{{$product->libelle}}</a></h3>
                                        <div class="product-price">
                                            <span class="new-price">{{Number::format($product->nouveauPrix, locale: 'fr', precision: 0)}} fcfa</span>
                                            <span class="old-price"> était {{Number::format($product->ancienPrix, locale: 'fr', precision: 0)}} fcfa</span>
                                        </div>
                                    </div>
                                </div><!-- End .product -->
                            </div>
                            @endforeach
                        </div>

                    </div><!-- End .tab-content -->

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

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

                <div class="mb-3"></div>

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