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


<main>

    <!-- ---------- form_pg ----------- -->
    <section class="profile_pg">
        <div class="profile-header">
            <div class="container">
                <div class="content-card">
                    <div class="info col-lg-7 mx-auto">
                        <div class="title">
                            <h4 class=""> {{__('web.welcome')}} </h4>
                            <p class="text"> {{__('web.welcome_desc')}} </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="profile-body">
            <div class="container">
                <div class="content">
                    <div class="reservations">
                        <div class="section_title mb-4">
                            <h3 class="title fs-5"> {{__('web.reservations')}} <span class="line wow"></span> </h3>
                        </div>
                        <div class="cards">
                            @foreach($reservations as $row)
                            <div class="resrervation-card">
                                <div class="det_wrapper">
                                    <div class="row gx-2">
                                        <div class="col-lg-2">
                                            <div class="room-img">
                                                <img src="{{asset($row->room->external_image)}}" alt="" class="img_cover">
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="det_card mt-1 mt-lg-0">
                                                <ul>
                                                    <li> <span> <i class="fal fa-bars-sort me-2"></i> {{__('web.reservation_number')}} </span> <strong> #{{$row->id}} </strong> </li>
                                                    <li> <span> <i class="fal fa-calendar me-2"></i> {{__('web.date_reservation')}} </span> <strong> {{$row->show_date}} </strong> </li>
                                                    <li> <span> <i class="fal fa-clock me-2"></i> {{__('web.time_reservation')}} </span> <strong> {{ date('g:i a',strtotime($row->start_time)) }} - {{ date('g:i a',strtotime($row->end_time)) }} </strong> </li>
                                                    <li> <span> <i class="fal fa-clock me-2"></i> {{__('web.reservation_duration')}} </span> <strong> {{$row->length_time}} {{__('web.hour')}} </strong> </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="det_card mt-1 mt-lg-0">
                                                <ul>
                                                    <li> <span> {{__('web.room')}} </span> <strong> {{ $row->room->currentDescription->name }} </strong> </li>
                                                    <li> <span> {{__('web.num_persons')}} </span> <strong> {{ $row->count_members }} </strong> </li>
                                                    <li class="total"> <span> {{__('web.total')}} </span> <strong> {{$row->payment->total}} {{__('web.sar')}} </strong> </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @if(count($reservations))
                        <div class="text-center mt-4">
                            <a href="#0" class="butn butn_gray more-btn"> <span class="more"> {{__('web.show_more')}} </span> <span class="less"> {{__('web.show_less')}} </span> </a>
                        </div>
                        @else
                        <div class="text-center mt-4">
                            <a href="#0" class="butn butn_gray"> <span > {{__('web.not_exists_reservations')}} </span> </a>
                        </div>
                        @endif
                    </div>
                    <div class="orders my-4 py-5">
                        <div class="section_title mb-4">
                            <h3 class="title fs-5"> {{__('web.orders')}} <span class="line wow"></span> </h3>
                        </div>
                        <div class="cards">
                            <div class="row">
                                @foreach($orders as $row)
                                <div class="col-lg-4">
                                    <div class="order-card">
                                        <div class="title"> {{__('web.order')}} (#{{$row->id}}) </div>
                                        <ul>
                                            <li> <span> {{__('web.date')}} </span> <strong> {{$row->show_date}} </strong> </li>
                                            @if($row->status == 'pickup' )
                                                <li> <span> {{__('web.order_time')}} </span> <strong> {{ date('g:i a',strtotime($row->start_time)) }} </strong> </li>
                                            @endif
                                            <li> <span> {{__('web.num_meals')}} </span> <strong> {{$row->products->sum('count')}} </strong> </li>
                                            @if($row->status == 'room')
                                                <li> <span> {{__('web.room_num')}} </span> <strong> {{$row->room->room_id ?? ''}} </strong> </li>
                                            @endif
                                            @if($row->status == 'table')
                                                <li> <span> {{__('web.table_num')}} </span> <strong> {{$row->table->number ?? ''}} </strong> </li>
                                            @endif
                                        </ul>
                                        <a href="#0" class="butn w-100 mt-4" onclick="showOrder(this)" data-id="{{route('web.order.show',$row->id)}}"> <span> {{__('web.show_details')}} </span> </a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @if(count($orders))
                        <div class="text-center mt-4">
                            <a href="#0" class="butn butn_gray more-btn"> <span class="more"> {{__('web.show_more')}} </span> <span class="less"> {{__('web.show_less')}}  </span> </a>
                        </div>
                        @else
                        <div class="text-center mt-4">
                            <a href="#0" class="butn butn_gray"> <span > {{__('web.not_exists_orders')}} </span> </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>


    <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">
                <div class="modal-body">
                    <div class="cart_pg py-0">
                        <div class="products_table" id="order_details">
                        </div>
                        <div class="btns border-0">
                            <a href="#0" class="butn butn_gray" data-bs-dismiss="modal" aria-label="Close"> <span> {{__('web.close')}} </span> </a>
                            <!-- <a href="#" class="butn"> <span> Done </span> </a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="img_pattern1">
    </div> -->
</main>

@section('inject_js')
    <script>
        $(".reservations .more-btn").on("click", function(e) {
            e.preventDefault();
            $(".reservations .cards").toggleClass("show");
            $(this).toggleClass("less-btn");
        })
    </script>
    <script>
        $(".orders .more-btn").on("click", function(e) {
            e.preventDefault();
            $(".orders .cards").toggleClass("show");
            $(this).toggleClass("less-btn");
        })
    </script>
    <script>
        function showOrder(elem)
        {
            let url = $(elem).attr('data-id');
            $.ajax({
                url : url,
                type : 'GET',
                data : '',
                success:function(data)
                {
                    $('#order_details').html(data);
                    $('#book_modal').modal('show')
                }
            })
        }
    </script>
@endsection

@stop
