@extends('layouts.platform')

@section('main')
    <div class="container">
        <div class="single-offer my-5">
            <div class="row">
                <div class="col-lg-5">
                    <div class="ce-offer-gallery">
                        <div class="ce-offer-gallery__viewport">
                            <figure class="ce-offer-gallery__wrapper" style="width:{{ count($images) }}00%">
                                @foreach ($images as $attachment)
                                    <img src="{{ URL::to('/') . Storage::url($attachment->path) }}" class="img-fluid"
                                        style="width:calc(100% / {{ count($images) }})" alt="">
                                @endforeach
                            </figure>
                        </div>
                        <ol class="ce-offer-gallery__nav">
                            @foreach ($images as $attachment)
                                <li>
                                    <img src="{{ URL::to('/') . Storage::url($attachment->path) }}" class="img-fluid"
                                        alt="">
                                </li>
                            @endforeach
                        </ol>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="ce-offer-details">
                        <h1 class="ce-offer__title">{{ $offer->titre }}</h1>
                        <div class="ce-offer__review">
                            <ul class="ce-offer__rating">
                                @for ($i = 0; $i < $offer->rating; $i++)
                                    <li>
                                        <i class="is-filled bi bi-star-fill"></i>
                                    </li>
                                @endfor
                                @for ($i = 0; $i < 5 - $offer->rating; $i++)
                                    <li>
                                        <i class="is-empty bi bi-star"></i>
                                    </li>
                                @endfor
                            </ul>
                            <div class="ce-offer__comments">
                                {{ $offer->comments->count() }} Commentaires
                            </div>
                        </div>
                        <div class="ce-offer__meta">
                            <p>
                                <span>Catégorie :</span>
                                {{ $offer->category->name }}
                                {{ ($offer->user->category()) ? ' , ' . $offer->user->category()->name : '' }}
                            </p>
                        </div>
                        <div class="ce-offer__description">
                            <p>{{ $offer->description }}</p>
                        </div>
                        <div class="ce-offer__actions">
                            @csrf
                            <button class="ce-offer__favorite"
                                data-favorite="{{ route('platform.favorites.create', ['p' => $offer->uid]) }}">
                                <i class="bi bi-heart"></i>
                            </button>
                            <a href="{{ route('platform.quotation.index', ['p' => $offer->uid]) }}"
                                class="ce-offer__quotation">
                                Demander un devis
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ce-offer-tabs mt-5">
                <nav class="ce-offer-tabs__nav">
                    <div class="nav nav-tabs" role="tablist">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nav-resume" type="button"
                            role="tab">Présentation d'entreprise
                        </button>
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-file" type="button"
                            role="tab">Fiche technique
                        </button>
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-video" type="button"
                            role="tab">Vidéo
                        </button>
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-review" type="button"
                            role="tab">Avis ({{ $offer->comments->count() }})
                        </button>
                    </div>
                </nav>
                <div class="tab-content ce-offer-tabs__content">
                    <div class="tab-pane fade show active" id="nav-resume" role="tabpanel" tabindex="0">
                        <div class="ce-offer__wrapper">
                            <div class="ce-offer__description">
                                <p>{{ $offer->user->presentation }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-file" role="tabpanel" tabindex="0">
                        <div class="ce-offer__wrapper">
                            @if (count($file) > 0)
                                <a href="{{ URL::to('/') . Storage::url($file[0]->path) }}" download target="_blank"
                                    class="ce-offer__download">
                                    <i class="bi bi-filetype-pdf"></i>
                                    Télécharger la fiche descriptive
                                </a>
                            @endif
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-video" role="tabpanel" tabindex="0">
                        <div class="ce-offer__wrapper">
                            @if ($offer->video)
                                <div class="ce-offer__video">
                                    <iframe width="100%" height="100%"
                                        src="https://www.youtube.com/embed/{{ $offer->video }}"
                                        title="Mediazain- Agence conseil digitale" frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        allowfullscreen></iframe>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-review" role="tabpanel" tabindex="0">
                        <div class="ce-offer__wrapper">
                            @include('platform._comments')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection