@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

    <!-- Breadcrumb Area  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Reservations Request') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Reservations Request') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- work Area -->
    <div class="about-us-area section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-9">
                    <div class="rscnFormTit">{{ __('Reservations Request') }}</div>
                    <div class="mt-40">
                        <form enctype="multipart/form-data" method="POST" action="{{ route('book.request.store') }}">
                            @csrf
                            <div>
                                <label class="rscnFormLabel"
                                    for="reason">{{ __('Please specify the reason you didn’t find what you look for') }}</label>
                                <select id="reason" name="reason" class="form-select">
                                    <option value="" selected>{{ __('Select') }}</option>
                                    @foreach (reasons() as $reason)
                                        <option value="{{ $reason->id }}">
                                            {{ langConverter($reason->en_reason, $reason->fr_reason) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mt-20">
                                <label class="rscnFormLabel" for="comment">{{ __('Add any comment') }}</label>
                                <input type="text" id="comment" name="comment" class="form-control">
                            </div>
                            <hr class="rscnFormDividorWith-my">
                            <div class="rscnFormLabel emzMb30">
                                {{ __('To help you in finding a suitable reservation, we would like to ask you to submit the below form according to your desire and priorities and we willreply back to you shortly:') }}
                            </div>
                            <div class="rscnOptionBox rscn_duplicate_box optionBox">
                                <div class="block">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-20">
                                                <label class="rscnFormLabel" for="reservation">{{ __('Location') }}</label>
                                                <select id="reservation" name="reservation[]" class="form-select">
                                                    @foreach (reservations() as $reservation)
                                                        <option value="{{ $reservation->id }}">
                                                            {{ langConverter($reservation->en_name, $reservation->fr_name) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-20">
                                                <label class="rscnFormLabel" for="date">{{ __('Date') }}</label>
                                                <input type="date" name="date[]" id="date"
                                                    class="form-control emzDateInputField rscnDateInputField">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-20">
                                                <div class="input__group mb-25">
                                                    <label for="activity">{{ __('Activity') }}</label>
                                                    <select class="form-control" id="activity" name="activity_id[]">
                                                    </select>
                                                    @error('activity_id')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div hidden class="hidden-inputs">
                                            <input type="hidden" name="name"
                                                value="{{ request()->first_name . ' ' . request()->last_name }}">
                                            <input type="hidden" name="email" value="{{ request()->email }}">
                                            <input type="hidden" name="mobile" value="{{ request()->mobile }}">
                                            <input type="hidden" name="nationality" value="{{ request()->nationality }}">
                                            <input type="hidden" name="residency" value="{{ request()->residency }}">
                                        </div>
                                    </div>
                                </div>
                                <button type="button"
                                    class="btn p-0 rscnAddR rscnAddAnotherBoxBtn rscn_add_option_btn block">
                                    <span class="add"><i class="fas fa-plus"></i></span>
                                    <span class="add">{{ __('Add another option') }}</span>
                                </button>
                            </div>
                            <button type="submit"
                                class="btn emzBookBtn rscnSubmitFormBtn">{{ __('Submit Request') }}</button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4 col-md-3"></div>
            </div>
        </div>
    </div>

@endsection
@push('post_script')
    <script type="text/javascript">
        $(function() {

            $('.add').click(function() {
                var ele = $('.block').clone(true);
                $('.block:last').before(
                    '<div class="block">' + ele[0].innerHTML +
                    '<span class="remove rscnRemove">{{ __('Remove Option') }}</span></div>'
                );
            });
            $('.optionBox').on('click', '.remove', function() {
                $(this).parent().remove();
            });

            $(document).ready(function() {
                let element = $('#reservation');
                activityRequest(element.val());
            });
            $('#reservation').on('change', function(e) {

                activityRequest(this.value)
            });

            function activityRequest(id) {
                var url = '{{ route('reservation.activity', ':id') }}';
                url = url.replace(':id', id);
                $.ajax({
                    url: url,

                    beforeSend: function() {
                        $("#activity").html('');
                    },

                    success: function(result) {
                        html = '<option value ="" >Select</option>'
                        $.each(result, function(index, row) {
                            html += '<option value ="' + row.id + '" >' + row.en_name +
                                '</option>'
                        })
                        $("#activity").append(html);
                    },
                    complete: function() {},
                    error: function(jqXHR, testStatus, error) {
                        console.log(error);
                        $('#loader').hide();
                    },
                    timeout: 8000
                })
            }
        })
    </script>
@endpush