
<div class="row gx-lg-5">
    <div class="col-lg-4">
        <div class="tabs_steps">
            <div class="img">
                <img src="{{asset($room->external_image)}}" alt="" class="img_cover">
                <div class="float_inf">
                    <h3> {{$room->name}} </h3>
                    <!--<p> {{$room->start_count}} - {{$room->end_count}} {{__('web.persons')}} </p>-->
                    <p>{{trans_choice('web.persons_counter',$capacity,['count'=>$capacity])}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="form_side">
            <div class="form">
                <h5 class="mb-4 text-capitalize"> {{__('web.reservation_details')}} </h5>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="pay_card">
                            <ul>
                                <input type="hidden" name="date" value="{{$date_input}}" >
                                <input type="hidden" name="capacity" value="{{$capacity}}" >
                                <input type="hidden" name="time" value="{{$time_input}}" >
                                <input type="hidden" name="room_id" value="{{$room->id}}" >
                                <li> <span> <i class="fal fa-calendar me-2"></i> {{__('web.date_reservation')}} </span> <strong> {{$date}} </strong> </li>
                                <li> <span> <i class="fal fa-clock me-2"></i> {{__('web.duration_reservation')}} </span> <strong> {{$time}} </strong> </li>
                                <li> <span> <i class="fal fa-users me-2"></i> {{__('web.num_persons')}} </span> <strong> {{trans_choice('web.persons_counter',$capacity,['count'=>$capacity])}} </strong> </li>
                                <li class="form-group d-flex cobon-group">
                                    <input type="text" id="cobon" name="cobon" onchange="calculate()" value="{{$cobon}}" class="form-control px-3" placeholder="{{__('web.discount_code')}}">
                                    <button type="button" class="butn butn-sm ms-3 flex-shrink-0"> <span> {{__('web.user_cobon')}} </span> </button>
                                </li>
                                 @if($cobon_msg)
                                    <p id="cobon_msg" @if($cobon_id) style="color:green" @else style="color:red" @endif>{!! $cobon_msg !!}</p>
                                @endif
                                <li class="total fs-5"> <span> {{__('web.reservation')}} </span> <strong> {{$total_reservation}} {{__('web.sar')}} </strong> </li>
                                @if($cobon_id)
                                    <li class="total fs-5"> <span> {{__('web.discount')}} @if($coupon->discount_type == 'percentage') - {{$coupon->discount}}% @endif </span> <strong> {{$discount}} {{__('web.sar')}} </strong> </li>
                                @endif
                                <li class="total fs-5"> <span> {{__('web.tax')}} - {{settings('tax')}}% </span> <strong> {{$tax}} {{__('web.sar')}} </strong> </li>
                                <li class="total fs-5"> <span> {{__('web.total')}} </span> <strong> {{$total}} {{__('web.sar')}} </strong> </li>
                            </ul>
                           
                            <div class="form-check terms">
                              <input class="form-check-input" type="checkbox" name="accept_on" id="flexCheckDefault">
                              <label class="form-check-label" for="flexCheckDefault">
                                    {!! __('web.terms_desc') !!}
                              </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
