@extends('web.layouts.container')

@section('content')
    <section class="booking_pg disabled_services section">
        <div class="container">
            <div class="content mt-0">
                <div class="ser_card">
                    <div class="info_lg">
                        <form method="post" action="{{route('room.addReservation')}}" class="add_reservation_form" enctype="multipart/form-data">
                            <div class="row w-100 ">
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <input type="text" name="name" class="form-control" placeholder="{{__('roomReservations.name')}}">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <input style="direction: rtl" type="email" name="email" class="form-control" placeholder="{{__('roomReservations.email')}}">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <input style="direction: rtl" type="tel" name="phone" class="form-control" placeholder="{{__('roomReservations.phone')}}">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="uploading_box mb-4">
                                        <div class="input-group">
                                                <span class="input-group-btn">
                                                  <div class="btn btn-default browse-button">
                                                      <span class="browse-button-text">
                                                      <i class="fa fa-folder-open"></i> {{__('roomReservations.upload')}}</span>
                                                      <input type="file" name="id_image"/>
                                                  </div>
                                                  <button type="button" class="btn btn-default clear-button" style="display:none;">
                                                    <span class="fa fa-times"></span> {{__('roomReservations.delete')}}
                                                  </button>
                                                </span>
                                            <input type="text" class="form-control filename" disabled="disabled" placeholder="{{__('roomReservations.id_image')}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <label class="label mb-1">{{__('roomReservations.start_date')}}</label>
                                        <input type="text" name="start_date" class="form-control" placeholder="{{__('roomReservations.start_date')}}" id="datepicker2">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <label class="label mb-1">{{__('roomReservations.end_date')}}</label>
                                        <input type="text" name="end_date" class="form-control" placeholder="{{__('roomReservations.end_date')}}" id="datepicker3">
                                        <span class="text-danger d-none end_date_alert">{{__('roomReservations.end_date_validation')}}</span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <label class="label mb-1">{{__('roomReservations.days_count')}}</label>
                                        <input type="text" class="form-control days_count" value="" disabled />
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-4">
                                        <label class="label mb-1">{{__('roomReservations.total')}}</label>
                                        <input type="text" class="form-control total" value="" disabled />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="payment_method">
                                        <label class="label mb-3">{{__('roomReservations.pay_way')}}</label>
                                        <div class="row">
                                            <div class="col-lg col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pay_way" id="paymentMethod1" value="2">
                                                    <label class="form-check-label" for="paymentMethod1">
                                                        <img src="{{asset('assets/web/images/payment_icons/visa_master.png')}}" alt="" class="pay_logo"/>
                                                        <h6 class="title name mb-0">{{__('roomReservations.visa_master')}}</h6>
                                                    </label>
                                                </div>
                                            </div>
                                            @if($showApplePay)
                                            <div class="col-lg col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pay_way" id="paymentMethod5" value="11">
                                                    <label class="form-check-label" for="paymentMethod5">
                                                        <img src="{{asset('assets/web/images/payment_icons/apple_pay.png')}}" alt="" class="pay_logo"/>
                                                        <h6 class="title name mb-0">{{__('roomReservations.apple_pay')}}</h6>
                                                    </label>
                                                </div>
                                            </div>
                                            @endif
                                            <div class="col-lg col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pay_way" id="paymentMethod6" value="6">
                                                    <label class="form-check-label" for="paymentMethod6">
                                                        <img src="{{asset('assets/web/images/payment_icons/mada.png')}}" alt="" class="pay_logo"/>
                                                        <h6 class="title name mb-0">{{__('roomReservations.mada')}}</h6>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="col-lg col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pay_way" id="paymentMethod6" value="14">
                                                    <label class="form-check-label" for="paymentMethod6">
                                                        <img src="{{asset('assets/web/images/payment_icons/stc_pay.png')}}" alt="" class="pay_logo"/>
                                                        <h6 class="title name mb-0">{{__('roomReservations.stc_pay')}}</h6>
                                                    </label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <button type="submit" class="butn primary_border_butn py-3 fw-bold w-100 text-center mt-5 add_reservation_button">
                                        <span> {{__('main.complete_reservation')}} </span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('inner_js')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>

        let getRoomTypesRoute = "{{route('room.getRoomTypes')}}",
            getRoomsRoute = "{{route('room.getRoomsByType')}}",
            roomTypeSelectTitle = "{{__('roomReservations.room_type_id')}}",
            roomSelectTitle = "{{__('roomReservations.room_id')}}",
            roomId = "{{$room->id}}",
            branchId = "{{$room->branch_id}}",
            roomTypeId = "{{$room->room_type_id}}",
            roomPrice = "{{$room->room_price}}";


        $('.add_reservation_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

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

            data.append('room_id', roomId);
            data.append('branch_id', branchId);
            data.append('room_type_id', roomTypeId);

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

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

            if (response.url){
                window.location.href = response.url;
            }

        });

        $('input[name="end_date"]').change(function () {
           let startDate = $('input[name="start_date"]').val(),
               endDate = $(this).val(),
                endDateAlert = $('.end_date_alert'),
                daysCount = $('.days_count'),
                total = $('.total');

           if(startDate && endDate){
               if((endDate <= startDate)){
                   endDateAlert.removeClass('d-none');
                   daysCount.val('');
                   total.val('');
               }
               if((endDate > startDate)){
                   endDateAlert.addClass('d-none');
                   startDate = new Date(startDate);
                   endDate = new Date(endDate);
                   let diffTime = Math.abs(endDate - startDate);
                   let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                   daysCount.val(diffDays);
                   total.val(diffDays*roomPrice);
               }

           }

        });

        // Show filename, show clear button and change browse
        //button text when a valid extension file is selected
        $(".browse-button input:file").change(function (){
            $("input[name='id_image']").each(function() {
                var fileName = $(this).val().split('/').pop().split('\\').pop();
                $(".filename").val(fileName);
                $(".browse-button-text").html('<i class="fa fa-refresh"></i> تغيير');
                $(".clear-button").show();
            });
        });

        //actions happening when the button is clicked
        $('.clear-button').click(function(){
            $('.filename').val("");
            $('.clear-button').hide();
            $('.browse-button input:file').val("");
            $(".browse-button-text").html('<i class="fa fa-folder-open"></i> رفع');
        });

    </script>
    
    <script>
    $( function() {
      $( "#datepicker2 , #datepicker3" ).datepicker();
    } );
</script>





@endsection