@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            Hébergement - {!! \App\Helpers\TextHelper::addSup($event->title) !!}
        @endslot
        @slot('li_1')
            Hébergement - {{ $event->title }}
        @endslot
    @endcomponent
    <div class="about-content">
        <div class="container">
            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent
            <div class="dashboard-details mt-4 mb-4">
                <div class="row dashboard-info">
                    <div class="col-md-2">
                        @component('frontend.mediknode.components.sidemenu')
                        @endcomponent
                    </div>
                    <div class="col-md-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="profile-form">
                                    <div class="row">
                                        <div class="col-md-8 text-center mt-2 mb-2 mx-auto">
                                            <p class="fs-custom-5 text-success">
                                                <span class="bold">Besoin d'aide ? Contactez-nous :</span>
                                            </p>
                                            @if ($event->email_hebergement)
                                                <p class="fs-custom-5">
                                                    <span class="bold">Mail hébergement :
                                                        {{ $event->email_hebergement }}</span>
                                                </p>
                                            @endif
                                            @if ($event->phone_hebergement)
                                                <p class="fs-custom-5">
                                                    <span class="bold">Infoline hébergement :
                                                        {{ $event->phone_hebergement }}</span>
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <hr class="mt-3 mb-3 w-50 mx-auto">
                                    @foreach ($event->hotels as $hotel)
                                        <div class="row justify-content-md-center">
                                            {{-- @if ($hotel->thumbnail) --}}
                                            <div class="col-md-3 text-end d-flex align-items-center">
                                                <img class="blog-image" width="200" src="{{ $hotel->thumbnail }}"
                                                    alt="{{ $hotel->name }}">
                                            </div>
                                            {{-- @endif --}}
                                            <div class="col-lg-6 col-md-6 col-md-auto">
                                                <h3 class="event-title mt-3">{{ $hotel->name }}</h3>
                                                <div class="mt-1 mb-2">
                                                    @for ($i = 1; $i <= $hotel->stars; $i++)
                                                        <span class="fa fa-star text-warning"></span>
                                                    @endfor
                                                </div>
                                                @if ($hotel->price_1)
                                                    <div class="mt-3 bold">
                                                        <p>
                                                            {{ $hotel->label_1 }} : <span
                                                                class="hotel-price">{{ $hotel->price_1 }} <sup
                                                                    class="currency">TND</sup></span> par
                                                            nuitée
                                                        </p>
                                                    </div>
                                                @endif
                                                @if ($hotel->price_2)
                                                    <div class="mt-2 bold">
                                                        <p>
                                                            {{ $hotel->label_2 }} : <span
                                                                class="hotel-price">{{ $hotel->price_2 }} <sup
                                                                    class="currency">TND</sup></span> par
                                                            nuitée
                                                        </p>
                                                    </div>
                                                @endif
                                                <p class="mt-3">{{ $hotel->description }}</p>
                                                {{-- @if ($hotel->booked)
                                                    <p class="fs-6 text-danger">Complet : Plus de places disponibles</p>
                                                @else
                                                    <form
                                                        action="{{ route('reservation.chooseHotel', ['event' => $event->slug]) }}"
                                                        method="POST" class="mt-3 text-mobile-center">
                                                        @csrf
                                                        <input type="hidden" name="hotel_id" value="{{ $hotel->id }}">
                                                        <button type="submit" class="btn btn-blue-light">Choisir cet
                                                            hôtel</button>
                                                    </form>
                                                @endif --}}
                                            </div>
                                            <hr class="mt-3 mb-3 w-50 mx-auto">
                                        </div>
                                    @endforeach
                                    <div class="row">
                                        <div class="col-md-8 text-center mt-2 mx-auto">
                                            <p class="fs-custom-5 text-success">
                                                <span class="bold">Besoin d'aide ? Contactez-nous :</span>
                                            </p>
                                            @if ($event->email_hebergement)
                                                <p class="fs-custom-5">
                                                    <span class="bold">Mail hébergement :
                                                        {{ $event->email_hebergement }}</span>
                                                </p>
                                            @endif
                                            @if ($event->phone_hebergement)
                                                <p class="fs-custom-5 mb-0">
                                                    <span class="bold">Infoline hébergement :
                                                        {{ $event->phone_hebergement }}</span>
                                                </p>
                                            @endif
                                            <div>
                                                {!! $event->footer_content_hebergement !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection