@extends('web.layouts.container')
@section('content')
    <section class="pkg-det section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="pkg-det wow fadeInUp">
                        <h2 class="title color-primary mb-5"><b>{{$package->name}}</b></h2>
                        <div class="row">
                            @if(count($packageServices))
                                @foreach($packageServices['names'][$local] as $serKey => $service)
                                <div class="col-md-6 col-lg-4">
                                    <p class="item">
                                        <img style="width: 20px; margin-right: 4%" src="{{asset($packageServices['images'][$serKey])}}" alt="">
                                        {{$service}}
                                    </p>
                                </div>
                                @endforeach
                           @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="price-box text-center wow zoomIn">
                        <p class="label">{{__('packages.price_start_from')}}</p>
                        <h1 class="price color-secondary">{{$package->discount ?? $package->price}} <small>{{__('main.sar')}}</small></h1>
                        <a href="#" class="butn md_butn primary_butn m-auto d-block mt-3" data-bs-toggle="modal" data-bs-target="#bookModal"><b class="text-uppercase">{{__('packages.book_now')}} </b></a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <p class="det mt-5 mb-0 pb-5 bb wow fadeInUp">{!! stripText(html_entity_decode($package->description)) !!}</p>
                </div>
            </div>
            <div class="gallery-sec pt-5 pb-5 bb">
                <h2 class="title color-primary text-center wow fadeInDown mb-5"><b>{{__('packages.images')}}</b></h2>
                <div class="swiper-container gallery-swiper">
                    <div class="swiper-wrapper">
                        @if(count($package->images))
                            @foreach($package->images as $image)
                                <div class="swiper-item">
                                    <a href="{{asset($image)}}" data-fancybox="images">
                                        <img src="{{asset($image)}}" alt="" class="gallery-img wow zoomIn"/>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="map_box pt-5">
                <h2 class="title color-primary text-center wow fadeInDown mb-5"><b>{{__('packages.map')}}</b></h2>
                <div class="wow fadeInUp map_container">
                    {!! $package->map !!}
                </div>
            </div>
            <a href="#" class="butn md_butn primary_butn m-auto d-block mt-5"  data-bs-toggle="modal" data-bs-target="#bookModal"><b class="text-uppercase">{{__('packages.book_now')}} </b></a>

        </div>
    </section>
    <!-- Modal -->
    <div class="modal bookModal fade booking_modal" id="bookModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="col-md-10 m-auto">
                        <h2 class="title color-primary text-center mb-5"><b class="text-uppercase">{{__('packages.book_now')}}</b></h2>
                        <form action="{{route('package.addBooking')}}" method="post" class="add_booking_from">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input name="name" class="form-control" placeholder="{{__('packageBookings.name')}}" type="text"/>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input name="email" class="form-control" placeholder="{{__('packageBookings.email')}}" type="email"/>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input name="phone" class="form-control" placeholder="{{__('packageBookings.phone')}}" type="tel"/>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <textarea name="comment" class="form-control" placeholder="{{__('packageBookings.comment')}}" rows="7"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="butn btn-secondary" data-bs-dismiss="modal">{{__('main.close')}}</button>
                    <button type="button" class="butn primary_butn add_booking_button">{{__('packages.book_now')}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Start contact-sec -->
@endsection

@section('inner_js')
    <script>

        let packageId = "{{$package->id}}";

        $('.add_booking_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_booking_from'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            data.append('package_id', packageId);

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.errors){
                toasterError(response.errors);
            }

            if (response.message){
                toasterSuccess(response.message);
                $('.booking_modal').modal('hide');
                $('.add_booking_from input, textarea').val('');

            }
        });


        $('.map_container iframe').css({
            width: '100%',
            height: '260',
        })
    </script>
@endsection