@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{asset('assets/web/css/pages_style.css')}}">
@endsection
@section('content')
    <section class="inner_header">
        <div class="container">
            <h2> {{$title}} </h2>
            <div class="links">
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a>
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('package.index'), [], true)}}">{{$title}}</a>
            </div>
        </div>
    </section>
    <section class="pricing section">
        <div class="container">
            <div class="sec-heading text-center mb-5">
                <h1 class="title wow fadeInDown"><b>{{$title}}</b></h1>
            </div>
            <div class="content">
                <div class="row">
                    @if(count($packages))
                        @foreach($packages as $package)
                            <div class="col-lg-4">
                                <div class="pricing_card">
                                    <h4 class="title">{{$package->name}}</h4>
                                    <div class="pricing_body">
                                        @if(is_array($package->properties) && count($package->properties))
                                            @foreach($package->properties['titles'][$lang] as $property)
                                                <p>{{$property}}</p>
                                            @endforeach
                                        @endif
                                    </div>
                                    <a href="#0" data-package-id="{{$package->id}}" class="butn dark-butn book_now_link" data-toggle="modal" data-target="#modal_booking">
                                        <span> <i class="fas fa-plus"></i>{{__('packageReservations.book_now')}}</span>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- modal_booking -->
    <div class="modal fade modal_booking add_book_modal" id="modal_booking" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <form method="post" action="{{route('package.store')}}" class="form add_book_form">
                        <h5>{{__('packageReservations.send_us_request_form')}}</h5>
                        <p class="mb-4">{{__('packageReservations.consultant_answer')}}</p>
                        <input type="hidden" name="package_id">
                        <div class="form-group">
                            <input type="text" name="user_name" placeholder="{{__('packageReservations.user_name')}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" name="user_email" placeholder="{{__('packageReservations.user_email')}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" name="user_phone" placeholder="{{__('packageReservations.user_phone')}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <textarea rows="7" name="message" placeholder="{{__('packageReservations.message')}}" class="form-control"></textarea>
                        </div>
                        <a href="#" class="butn dark-butn mt-5 add_book_button" data-dismiss="modal" data-toggle="modal" data-target="#modal_booking_msg">
                            <span> <i class="fas fa-paper-plane"></i>  {{__('packageReservations.brief_about_your_project')}} </span>
                        </a>
                    </form>
                    <span class="clss" data-dismiss="modal"><i class="fas fa-times"></i></span>
                </div>
            </div>
        </div>
    </div>
    <!-- booking message -->
    <div class="modal fade modal_booking confirmation_modal" id="modal_booking_msg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="info text-center">
                        <div class="alert alert-success" role="alert">
                            <i class="fas fa-check"></i>
                        </div>
                        <h5>{{__('packageReservations.confirmation_hint')}}</h5>
                        <p class="mt-4">{{__('packageReservations.confirmation_hint_1')}}</p>
                    </div>
                    <span class="clss" data-dismiss="modal"><i class="fas fa-times"></i></span>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('inner_js')

    <script>


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

            $(this).prop('disabled', true);

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

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

            if (response.errors){
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

            if (response.message){
                $(this).prop('disabled', false);
                $('.add_book_modal').modal('hide');
                $('.add_book_form input, textarea').val('');
                $('.confirmation_modal').modal();
                toasterSuccess(response.message);
            }

        });


        $('.book_now_link').click(function () {
            $('.add_book_form input[type="hidden"]').val($(this).data('package-id'));
        })
    </script>

@endsection