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


<main>

    <!-- ---------- booking_room ----------- -->
    <section class="booking_room">
        <div class="booking_form">
            <div class="container">
                <h2 class="mb-5"> {{__('web.choose_room')}} </h2>
                <div class="subColor mb-3 fs-6 d-flex justify-content-around mb-3 col-lg-6 mx-auto"> <span> <i class="fal fa-calendar me-2 small"></i> {{$date}} </span> - <span> <i class="fal fa-users me-2 small"></i> {{trans_choice('web.persons_counter',$capacity,['count'=>$capacity])}} </span> - <span> <i class="fal fa-clock me-2 small"></i> {{$duration == 1 || $duration == 2 ? ($duration == 2 ? __('web.two_hour') : __('web.one_hour'))  : $duration .' '. __('web.hour')}} </span> </div>
            </div>
        </div>
        <div class="rooms_select">
            <div class="container-fluid">
                @if(count($rooms))
                    @foreach($rooms as $row)
                        <div class="room_card">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="img">
                                    <img src="{{asset($row['room']->external_image)}}" alt="" class="img_cover">
                                    <div class="float_inf">
                                        <h3> {{$row['room']->name}} </h3>
                                        <p>{{trans_choice('web.persons_counter',$capacity,['count'=>$capacity])}} </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="time_cards">
                                    @foreach($row['dates'] as $date)
                                    <div class="check_item @if($date['status'] == false) unavailable @endif">
                                        @if($date['status'] == true)
                                            <input type="radio" class="btn-check" name="time" value="{{$date['time_input'].'-'.$row['room']->id}}" id="time{{$row['room']->id}}date{{$date['time']}}" autocomplete="off">
                                        @endif
                                        <label class="" for="time{{$row['room']->id}}date{{$date['time']}}">
                                            <div class="time_card">
                                                <div class="icon">
                                                    <i class="fal fa-clock"></i>
                                                </div>
                                                <p> {{__('web.available')}} </p>
                                                <div class="price mb-2"> <span class="txt"> {{$date['cost']}} {{__('web.sar')}} </span> </div>
                                                <h6> <span class="subColor"> {{$date['time']}} </span> </h6>
                                                <h2 class="booked"> {{__('web.booked')}} </h2>
                                            </div>
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                        <div class="text-center mt-4">
                            <a href="#0" class="butn butn_gray"> <span > {{__('web.not_exists_rooms')}} </span> </a>
                        </div>
                    @endif
                <div class="d-flex justify-content-between mt-4 float-btns">
                    <a href="{{route('web.reservation')}}" class="butn butn_gray col-lg-2 mx-2"> <span> {{__('web.back')}} </span> </a>
                    <a href="#0" class="butn col-lg-2 mx-2"  onclick="selectDate()" > <span> {{__('web.book')}} </span> </a>
                </div>
            </div>
        </div>
    </section>


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

<div class="modal fade book_modal" id="book_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content p-5">
            <form method="post" action="{{route('web.reservation.pay')}}" onsubmit="formAction(this)">
                @CSRF
                <div class="modal-body">
                    <div class="room_reserv p-0"  id="reservation">
                    </div>
                    <div class="btns border-0">
                        <a href="#0" class="butn butn_gray" data-bs-dismiss="modal" aria-label="Close"> <span> {{__('web.cancel')}} </span> </a>
                        <!-- <a href="https://cms.thechordjeddah.com/en/menu" class="butn butn_gray" <span> order from the menu </span> </a> -->
                        <button type="submit" class="butn"> <span> {{__('web.book_now')}} </span> </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@section('inject_js')
    <script>
        let url_time_bill = "{{route('web.reservation.bill')}}",
            capacity = "{{$capacity}}",
            date = "{{$day}}",
            duration = "{{$duration}}"

        function selectDate()
        {
            let time = $('input[name="time"]:checked').val();
            if(time)
            {
                $.ajax({
                    url : url_time_bill,
                    type : 'GET',
                    data : 'time='+time+'&date='+date+'&duration='+duration+'&capacity='+capacity,
                    success:function(data)
                    {
                        $('#reservation').html(data);
                        $('#book_modal').modal('show')
                    }
                })
            }
            else
            {
                setTimeout(
                    function()
                    {
                        toasterError("{{__('web.select_date_first')}}");
                    }, 500);
            }
        }
        function calculate()
        {
            let time = $('input[name="time"]:checked').val();
            let cobon = $('#cobon').val()
            $.ajax({
                    url : url_time_bill,
                    type : 'GET',
                    data : 'time='+time+'&date='+date+'&duration='+duration+'&capacity='+capacity+'&cobon='+cobon,
                    success:function(data)
                    {
                        $('#reservation').html(data);
                    }
                })
        }
    </script>
@endsection

@stop
