@extends('frontLayouts.frontApp')

@section('headerContent')
    @include('frontLayouts.messages')
    <div class="content">
        <form method="post" action="{{ route('reservation.store',$data->id) }}">
            @csrf
            <div class="box">
            <h4>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $data->name_ar : $data->name_en }}</h4>
            <div class="map-star">
                <h6 class="second"><i class="fas fa-location-arrow"></i> {{ LaravelLocalization::getCurrentLocale() == 'ar' ? $data->city->name_ar : $data->city->name_en }} </h6>
                <h6 class="main"><i class="fas fa-star"></i> 4.5</h6>
            </div>
            <div class="taps">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation" id="change-price-1">
                        <button class="nav-link" id="pills-home-tab " data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">{{ __('lang.economy_package') }}</button>
                    </li>
                    <li class="nav-item" role="presentation" id="change-price-2">
                        <button class="nav-link active" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">{{ __('lang.business_package') }}</button>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                        <div class="price">
                            <h5>{{ __('lang.price') }} <span>{{ $data->economical_price }} {{ __('lang.rial') }}</span></h5>
                        </div>
                    </div>
                    <div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div class="price">
                            <h5>{{ __('lang.price') }} <span>{{ $data->business_price }}  {{ __('lang.rial') }}</span></h5>
                        </div>
                    </div>
                </div>
            </div>
                <!-- Value = 1 ? Business Package : Regular package -->
            <input type="hidden" name="type" id="type" value="1">
            <button type="submit" class="btn btn-primary">{{ __('lang.book_now') }}</button>
{{--            <a href="https://wa.me/+966504254209?text=Test" class="btn btn-primary">{{ __('lang.book_now') }}</a>--}}
        </div>
        </form>
    </div>
@endsection
@section('class',' experiment details')
@section('frontContent')

    <!-- Start Details Content -->
    <section class="details-content">
        <div class="container">
            <div class="glimpse">
                <h4>{{ __('lang.glimpse') }}</h4>
                <p> {!! LaravelLocalization::getCurrentLocale() == 'ar' ? $data->details_ar : $data->details_en !!} </p>
            </div>
            <div class="points">
                <div class="row">
                    <div class="col-md-6">
                        <div class="package-contents">
                            <h5>{{ __('lang.package_contents') }}</h5>
                            <div class="box">

                                    {!! LaravelLocalization::getCurrentLocale() == 'ar' ? $data->economical_content_ar : $data->economical_content_en !!}

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="package-contents exception">
                            <h5>{{ __('lang.excluded') }}</h5>
                            <div class="box">
                                {!! LaravelLocalization::getCurrentLocale() == 'ar' ? $data->economical_exception_ar : $data->economical_exception_en !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(count($data->Day_plans) > 0)
            <div class="trip-planner">
                <h4>{{ __('lang.trip_planner') }}</h4>
                <div class="points">
                    <div class="row">
                        @foreach($data->Day_plans as $row)
                            <div class="col-md-6">
                                <div class="package-contents exception">
                                    <h5>{{ __('lang.'.$row->Day->name) }}</h5>
                                    <div class="box" style="color: #313030;">
                                        {!! LaravelLocalization::getCurrentLocale() == 'ar' ? $row->content_ar : $row->content_en !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
            <div class="notes points">
                <h4>{{ __('lang.notes') }}</h4>
                <div class="box">
                    <ul>
                        {!! LaravelLocalization::getCurrentLocale() == 'ar' ? $data->notes_ar : $data->notes_en !!}
                    </ul>
                </div>
                <img src="{{asset('assets/Front/')}}/images/notes.svg" alt="#" class="notes-image">
            </div>
            <div class="images">
                <h4>{{ __('lang.images') }}</h4>
                <div class="slider">
                    <div class="owl-carousel owl-theme" id="owl-carousel-2">
                        @foreach($data->Images as $row)
                            <div class="item">
                                <div class="box">
                                    <img src="{{url('/')}}/{{$row->image}}" alt="#"/>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Details Content -->
@endsection
@section('style')
<style>
    a.btn-primary{
        padding-inline: 100px;
        padding-block: 10px;
        font-weight: 500;
        background-color: #1B5052;
        border-color: #1B5052;
        font-size: 18px;
        color: #fff;
        -webkit-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }
    a.btn-primary:hover{
        background-color: transparent;
        color: #1B5052;
    }

</style>
@endsection
@section('js')
<script>
    // import Index from "../../../../public/assets/Front/index.html";
    // export default {
    //     components: {Index}
    // }

    $(document).ready(function(){
        $("#change-price-1").click(function(){
            $('#type').val('2')
        });
        $("#change-price-2").click(function(){
            $('#type').val('1')
        });
    });
</script>
@endsection