@extends('layouts.platform')

@section('main')
    <!-- ========== HERO ========== -->
    <div class="hero-block hero-v1 bg-img-hero-bottom gradient-overlay-half-black-gradient text-center z-index-2"
        style="background-image: url({{ asset('images/slider.jpg') }});">
        <div class="container space-3 space-top-xl-9">
            <div class="card border-0 tab-shadow">
                <div class="card-body">
                    <form class="js-validate" action="{{route('platform.search')}}" method="POST">
                        @csrf
                        <div class="row d-block nav-select d-lg-flex align-items-end">
                            <div class="col-sm-12 col-xl-4 mb-4 mb-lg-0">
                                <input type="text" class="search-bar__input" name="search" placeholder="Rechercher">
                            </div>
                            <div class="col-sm-12 col-lg-3dot6 col-xl-3gdot5 mb-4 mb-lg-0">
                                <!-- Select -->
                                <select name="category"
                                    class="js-select selectpicker dropdown-select tab-dropdown col-12 pl-0 d-flex align-items-center text-primary font-weight-semi-bold"
                                    title="Catégories" data-style="" data-live-search="true"
                                    data-searchbox-classes="input-group-sm">
                                    @foreach ($categories as $category)
                                        <option class="border-bottom border-color-1" value="{{ $category->uid }}"
                                            data-content='
                                        <span class="d-flex align-items-center">
                                            <span class="font-size-16">{{ $category->name }}</span>
                                        </span>'>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <!-- End Select -->
                            </div>
                            <div class="col-sm-12 col-lg-3dot7 col-xl-3gdot5 mb-4 mb-lg-0">
                                <!-- Select -->
                                <select name="ville"
                                    class="js-select selectpicker dropdown-select tab-dropdown col-12 pl-0 d-flex align-items-center text-primary font-weight-semi-bold"
                                    title="Villes" data-style="" data-live-search="true"
                                    data-searchbox-classes="input-group-sm">
                                    @foreach ($cities as $city)
                                        <option class="border-bottom border-color-1" value="{{ $city->uid }}"
                                            data-content='
                                      <span class="d-flex align-items-center">
                                          <span class="font-size-16">{{ $city->name }}</span>
                                      </span>'>
                                            {{ $city->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <!-- End Select -->
                            </div>
                            <div class="col-sm-12 col-xl-1 align-self-lg-end text-md-right">
                                <button type="submit"
                                    class="btn btn-primary w-100 border-radius-3 mb-xl-0 mb-lg-1 transition-3d-hover">
                                    <i class="flaticon-magnifying-glass font-size-20 mr-2"></i>
                                </button>
                            </div>
                        </div>
                        <!-- End Checkbox -->
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== END HERO ========== -->
    <!-- Destinantion v1 -->
    <div class="destinantion-block destinantion-v1 border-bottom border-color-8">
        <div class="container space-bottom-1 space-top-lg-2">
            <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-4 position-relative">
                <h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Les catégories</h2>
            </div>
            <div class="row">
                @foreach ($cats as $category)
                    <div class="speaker-block col-lg-3 col-md-6 col-sm-12 wow fadeInUp animated"
                        style="visibility: visible;">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image">
                                    <a href="{{ route('platform.filter', ['c' => $category->uid]) }}"><img
                                            src="{{ $category->attachments }}" alt="">
                                    </a>
                                </figure>
                                <span class="plus-icon fa fa-plus"></span>
                            </div>
                            <div class="info-box">
                                <h4 class="name">
                                    <a
                                        href="{{ route('platform.filter', ['c' => $category->uid]) }}">{{ $category->name }}</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- End Destinantion v1 -->
    {{-- Section Lastest offers --}}
    <div>
        <div class="container space-1">
            <div class="w-md-80 w-lg-50 text-center mx-md-auto my-3">
                <h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Les dernières offres</h2>
            </div>
            <div class="row">
                @foreach ($offers as $offer)
                    <div class="col-md-6 col-lg-3 mb-3 mb-md-4 pb-1">
                        <div class="card transition-3d-hover shadow-hover-2 tab-card h-100">
                            <div class="position-relative">
                                <a href="{{ route('platform.offers.single', ['p' => $offer->uid]) }}"
                                    class="d-block gradient-overlay-half-bg-gradient-v5">
                                    <img class="min-height-230 bg-img-hero card-img-top"
                                        src="{{ $offer->attachments ? $offer->attachments : '' }}" alt="img">
                                </a>
                            </div>
                            <div class="card-body pl-3 pr-4 pt-2 pb-3">
                                <div class="ml-1 mb-2">
                                    <div
                                        class="d-inline-flex align-items-center font-size-13 text-lh-1 text-primary letter-spacing-3">
                                        <div class="yellow-lighter">
                                            @for ($i = 0; $i < $offer->rating; $i++)
                                                <small class="is-filled fas fa-star"></small>
                                            @endfor
                                            @for ($i = 0; $i < 5 - $offer->rating; $i++)
                                                <small class="is-empty far fa-star"></small>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                                <a href="{{ route('platform.offers.single', ['p' => $offer->uid]) }}"
                                    class="card-title font-size-17 font-weight-medium text-dark">{{ $offer->titre }}</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection