@extends('layout.app')
@section('title') Rentals
@endsection

@section('content')
    <style>
        label {
            color: black;
        }
        .m-space,
        .m-space p{
            color: white;
            text-align: center;
        }
    </style>
    @php
        if (!empty($get_single_rental_banner_title->content)) {
               $rentaldecodedData = json_decode($get_single_rental_banner_title->content, true);
           }
    @endphp
{{--    <section class="innerBan p-0">--}}
{{--        <img--}}
{{--            src="{{ $homedecodedData['top_banner_image'] ? asset('upload/cms_images/' . $homedecodedData['top_banner_image']) : '' }}--}}
{{--                " class="img-fluid" alt="">--}}
{{--        <div class="container">--}}
{{--            <h2>{{$rentaldecodedData['top_title'] ?? ''}}</h2>--}}
{{--        </div>--}}
{{--    </section>--}}

     <section class="heroSection innerBan">
         <div class="main-slider p-0" id="mainSlider">
             <div class="swiper-container homeSlider">
                 @if($rentalSlider)
                 <div class="swiper-wrapper">
                     @php
                         $get_decode = json_decode($rentalSlider->images);
                     @endphp
                     @foreach($get_decode as $index => $all_images)
                         <div class="swiper-slide">
                             <div class="slide-inner bg-image" data-background="{{ asset('upload/sliders/'.$all_images) }}">
                                     <div class="slider-overlay">
                                         <div class="container">
                                     <div class="row no-gutters">
                                         <div class="col-12 mb-5 pb-5">
                                             <div class="heroText">
                                                 <h2 class="">{{$rentaldecodedData['top_title'] ?? ''}}</h2>
                                             </div>
                                         </div>
                                     </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     @endforeach
                 </div>
                 @else
                     <h3 class="text-center text-white mt-5">
                         Images Not Found
                     </h3>

                 @endif
             </div>
         </div>
     </section>
    <section class="ourSpaces">
        <div class="container">
            <div class="mainHeading innermainHeading mb-3" data-aos="fade-up">
                <h2 data-aos="fade-up">{{$rentaldecodedData['heading'] ?? ''}}</h2>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-10" >
                    <div class="m-space">
                    {!! $rentaldecodedData['description'] ?? "" !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="eventSection innerclasses innerRentals">
        <div class="container">
            <div class="mainHeading innermainHeading mb-3" data-aos="fade-up">
                <h2 data-aos="fade-up">{{$rentaldecodedData['sub_heading'] ?? ''}}</h2>
            </div>
            <div class="row">
                @forelse($get_all_rentals as $get_all_rental)

                    <div class="col-lg-4 col-sm-6 mb-lg-0 mb-4">
                        <div class="eventWrap">
                            <figure>
                                <img
                                    src="{{ $get_all_rental->image ? asset('upload/cms_images/'.$get_all_rental->image) : asset('admin/dist/img/placeholder.png')}}"
                                    class="img-fluid" alt="">
                            </figure>
                            <div class="eventContent">
                                <h1 class="get_capacity d-none">{{$get_all_rental->capacity}}</h1>
                                <h1 class="get_form_key d-none">{{$get_all_rental->form_key}}</h1>

                                <h3 class="rental-title">{{$get_all_rental->title}}</h3>

{{--                                <div class="newoption"><span>{{ isset($get_all_rental->capacity) ? number_format($get_all_rental->capacity) : '' }} Capacity (Maximum)</span>--}}
{{--                                    <span>Standard - ${{ isset($get_all_rental->price) ? number_format($get_all_rental->price) : '' }}</span>--}}
{{--                                </div>--}}
                                {!! $get_all_rental->description ?? '' !!}

                                <div class="btn-group">
{{--                                    @auth--}}
                                        @if($get_all_rental->form_key === 'RENT THE SPACE')
{{--                                            <a href="#" class="themeBtn click_rental_modal" data-toggle="modal"--}}
{{--                                               data-target="#rental-Modal" data-id="{{$get_all_rental->id ?? ''}}">Request--}}
{{--                                                to Book</a>--}}
                                        <a href="mailto:clubhousebusinesscenter@gmail.com" class="themeBtn">Request to Book</a>


                                        @elseif($get_all_rental->form_key === 'DO A ONE OFF SHOW')
                                            <a href="#" class="themeBtn click_rental_modal" data-toggle="modal"
                                               data-target="#do-a-one-off-show-Modal"
                                               data-id="{{$get_all_rental->id ?? ''}}">Request to Book</a>

                                        @elseif($get_all_rental->form_key === 'DO A RECURRING SHOW')
                                            <a href="#" class="themeBtn click_rental_modal" data-toggle="modal"
                                               data-target="#do-a-recurring-Modal"
                                               data-id="{{$get_all_rental->id ?? ''}}">Request to Book</a>

                                        @endif

{{--                                    @else--}}
{{--                                        <a href="{{ route('login') }}" class="themeBtn">Request to Book</a>--}}
{{--                                    @endauth--}}
                                </div>
                            </div>
                        </div>
                    </div>

                @empty
                    <div class="mx-auto mt-4">
                        <h4 class="text-white">Rental Not Found</h4>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
    @include('include.rental_the_space')
    @include('include.do_a_one_off_shows')
    @include('include.do_a_recurring_shows')
    <!-- Bootstrap Modal -->

@endsection
@section('script')

    <script>
        $(function () {
            $(document).on("click", '.click_rental_modal', function (e) {

                var get_id = $(this).data("id");
                var linkHtml = '<input type="hidden" value="' + get_id + '"name="rental_id">';
                $('.rental_id').html(linkHtml);

                var get_capacity = $(this).closest('.eventContent').find('.get_capacity').text();
                var putCapacityHtml = '<input type="hidden" value="' + get_capacity + '"class="in_capacity">';
                $('.put_capacity').html(putCapacityHtml);

                var get_form_key = $(this).closest('.eventContent').find('.get_form_key').text();
                var putFormKeyHtml = '<input type="hidden" value="' + get_form_key + '"name="form_key">';
                $('.put_form_key').html(putFormKeyHtml);

            });
        });
    </script>

    <script>

        document.addEventListener("DOMContentLoaded", function () {
            flatpickr("#booking_date", {
                enableTime: true,
                // altInput: true,
                altFormat: "F j, Y H:i",
                dateFormat: "Y-m-d H:i",
            });
        });
    </script>


    <script>
        $(document).ready(function () {
            $(".click_capacity").on("input", function (e) {
                var get_capacity = $('.in_capacity').val();
                // console.log(get_capacity);
                var enteredValue = $(this).val();
                enteredValue = parseInt(enteredValue.replace(/,/g, ''));
                get_capacity = parseInt(get_capacity.replace(/,/g, ''));

                if (enteredValue > get_capacity) {
                    alert("Value must not be greater than " + get_capacity.toLocaleString());
                    $(this).val("");
                }
            });
        });
    </script>


@endsection