@extends('web.layouts.layout')
@section('content')

    <main>

        <!-- ---------- Room reservations ----------- -->
        <section class="room_reserv">
            <div class="container">
                <div class="room-row p-5">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form_side">
                                <form method="get" action="{{route('web.reservation.continue')}}">
                                    <div class="form">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <h6> <i class="fal fa-calendar me-2"></i> {{__('web.booking_date')}} </h6>
                                                    <input type="text" name="date" on class="form-control" placeholder="--/--/----" value="" id="datepicker">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <h6> <i class="fal fa-users me-2"></i> {{__('web.capacity')}} </h6>
                                                    <select name="capacity" id="capacity" class="form-control form-check">
                                                        @for($i = $min_capacity;$i<=$max_capacity;$i++)
                                                        <option value="{{$i}}"> {{trans_choice('web.persons_counter',$i,['count'=>$i])}} </option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <h6> <i class="fal fa-clock me-2"></i> {{__('web.duration_reservation')}} </h6>
                                                    <select name="duration" id="duration" class="form-control form-check">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="btns mt-5 justify-content-center">
                                        <!-- <a href="#" class="butn"> <span> <i class="fal fa-chevron-left me-1"></i> Prev </span> </a> -->
                                        <button type="submit" class="butn"> {{__('web.to_rooms')}} <span> <i class="fal fa-chevron-right ms-1"></i> </span> </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@section('inject_js')
    <script>
        let dates = {!! json_encode($block_dates) !!}
            url_time_reservation = "{{route('web.time.reservation')}}"

        $( function() {
            $( "#datepicker" ).datepicker
            ({
                "minDate": new Date(),
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function(date)
                {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [dates.indexOf(string) == -1];
                },
                onSelect: function(date) {
                    $.ajax({
                        url : url_time_reservation,
                        type : 'GET',
                        data : 'date='+date,
                        success:function(data)
                        {
                            $('#duration').html('');
                            for(i=1; i <= data; i++)
                            {
                                if(i ==1)
                                {
                                    $('#duration').append('<option value="'+i+'">'+"{{__('web.one_hour')}}"+'</option>');
                                }
                                else if(i == 2)
                                {
                                    $('#duration').append('<option value="'+i+'">'+"{{__('web.two_hour')}}"+'</option>');
                                }
                                else
                                {
                                    $('#duration').append('<option value="'+i+'">'+i+' '+"{{__('web.hour')}}"+'</option>');
                                }
                            }
                        }
                    })
                }
            });
        } );
        $('#capacity').trigger('change');
    </script>
@endsection

@stop
