@extends('layout/base')

@section('content')
<div class="container page-detail mt-5">
    <h1 class="main-heading text-start">{{ $package->name }}</h1>


    <div class="page-content mt-4">
        <div class="row">
            <div class="col-xl-7">
                @if ($package->package_article != null)
                <h3>{{ $package->package_article->title }}</h3>
                <h5>{{ $package->package_article->subtitle }}</h5>
                <div>{!! $package->package_article->description_html !!}</div>
                @endif

                <div class="package-jadwal mt-4">

                    <div class="row">
                        <div class="col-md-6">
                            <p>
                                <i class="fas fa-plane-departure"></i> Berangkat<br>
                                <time datetime="@date($package->start_at, "Y-m-d")" itemprop="datePublished">@date($package->start_at, "d M Y")</time>
                                &bull; {{ $package->departure->name .' ' . $package->departure->flight_number }}
                            </p>
                            <p>
                                <i class="fas fa-plane-arrival"></i> Pulang<br>
                                <time datetime="@date($package->end_at, "Y-m-d")" itemprop="datePublished">@date($package->end_at, "d M Y")</time>
                                &bull; {{ $package->arrival->name .' ' . $package->arrival->flight_number }}
                            </p>
                            <div class="tour_leader">
                                <i class="fa fa-user-circle"></i> Pembimbing<br>
                                <div class="photo" style="background-image: url('{{ asset('images/tourleader/'.$package->tour_leader->cover_media) }}" alt="{{ $package->tour_leader->name }}');"></div>
                                <strong>{{ $package->tour_leader->name }}</strong>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="price mb-4">
                                <div><i class="fas fa-dollar-sign"></i> Biaya @if ($package->type=='umrah') Umrah @endif</div>
                                QUAD = {{ strtoupper($package->price_quad_currency) }} @price($package->price_quad)<br>
                                TRIPLE = {{ strtoupper($package->price_triple_currency) }} @price($package->price_triple)<br>
                                DOUBLE = {{ strtoupper($package->price_double_currency) }} @price($package->price_double)<br>
                            </div>
                            
                        </div>
                    </div>
                </div>

                <div class="package-hotel mt-5">
                    <h4>Hotel</h4>
                    <div class="row">
                        @foreach ($package->hotels()->get() as $hotel)
                        <div class="col-xl-3">
                            <div class="card hotel-card mb-4">
                                <div class="card-img-top" style="background-image:url('{{ asset('images/hotel/'.$hotel->hotel->cover_media) }}');"></div>
                                <div class="card-body">
                                    <h4 class="card-title">{{ $hotel->city->name }}</h4>
                                    <div class="card-text">
                                        <div class="hotel-name">{{ $hotel->hotel->name }}</div>
                                        <span class="hotel-star">
                                            @for ($i = 0; $i < $hotel->hotel->rating; $i++)
                                                <i class="fa fa-star"></i>
                                            @endfor
                                            @for ($r = 0; $r < (5-$hotel->hotel->rating); $r++)
                                                <i class="far fa-star"></i>
                                            @endfor
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="package-service mt-5">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Biaya sudah termasuk:</h5>
                            <ul>
                                @foreach ($package->services()->where('type','include')->get() as $service)
                                    <li><i class="fas fa-check"></i> {{ $service->service->name }}</li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5>Biaya belum termasuk:</h5>
                            <ul>
                                @foreach ($package->services()->where('type','exclude')->get() as $service)
                                    <li><i class="fas fa-times"></i> {{ $service->service->name }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="package-contact-info mt-5 mb-5">
                    <p>Untuk Informasi lebih lengkap, silahkan hubungi :</p>

                    <strong>SUNNAH TRAVEL</strong><br>
                    <strong>PT. BERKAH HIDAYAH SUNNAH</strong><br>
                    PPIU: 02202022420770002<br>
                    Madison Square SHC.2 No. 22<br>
                    Kota Wisata Cibubur - Bogor
                </div>

            </div>
            <div class="col-xl-5">
                <div class="package-image"><img class="img-fluid" src="{{ asset('images/package/'.$package->cover_media) }}" alt=""></div>
                <div class="mt-5">
                    <a href="{{ route('register', ['package' => $package]) }}" class="btn btn-primary">{{ __('messages.online_register') }}</a>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection