@extends('layouts.xiamen-restaurant')
@section('content')
<!-- Page Title -->
<section class="page-title" style="background-image: url({{ asset('four-seasons-restaurant/images/background/10.jpg') }})">
    <div class="auto-container">
        <h1>Account</h1>
        <ul class="page-breadcrumb">
            <li><a href="{{ route('xiamen.index') }}">home</a></li>
            <li>Account</li>
        </ul>
    </div>
</section>
<!-- End Page Title -->

<!-- Account Page Section -->
<div class="account-page-section">
    <div class="auto-container">
        <!-- Account Info Tabs -->
        <div class="row mb-4">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="left-menu">
                    <ul>
                        <li><a href="{{ route('xiamen.customer.dashboard') }}"><i class="fa fa-desktop"></i> Dashboard</a> </li>
                        <li><a href="{{ route('xiamen.customer.orders') }}"><i class="fa fa-list-alt"></i> Order History</a> </li>
                        <li><a href="{{ route('xiamen.customer.party-booking') }}"><i class="fa fa-list-alt"></i> Party Booking History</a> </li>
                        <li  class="active-btn-left-menu"><a href="{{ route('xiamen.customer.table-booking') }}"><i class="fa fa-list-alt"></i> Table Booking History</a> </li>
                        <li><a href="{{ route('xiamen.customer.manage-account') }}"><i class="fa fa-user"></i> Manage Account</a> </li>
                        <li><a href="{{ route('xiamen.customer.manage-address') }}"><i class="fa fa-map-marker"></i> Manage Billing & Delivery Address</a> </li>
                        <li><a href="{{ route('xiamen.customer.change-password') }}"><i class="fa fa-key"></i> Change Password</a> </li>
                        <li><a href="{{ route('xiamen.customer.logout') }}"><i class="fa fa-lock"></i> Logout</a> </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12">
                <h3 class="mb-2"><u><strong>Table Booking History</strong></u></h3>
                <div class="table-responsive">
                    <table class="table table-bordered" style="font-size: 15px">
                    <tr>
                        <th>#</th>
                        <th style="text-align: left !important;">Customer Info</th>
                        <th>Category</th>
                        <th>Date</th>
                        <th>Person</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    @if(count($customer_table_bookings))
                        @foreach($customer_table_bookings as $key)
                            <tr>
                                <td>{{ $loop->index +1  }}</td>
                                <td style="text-align: left !important;">
                                    {{$key->name}} <br />
                                    {{$key->email}} <br />
                                    {{$key->phone}} <br />
                                </td>
                                <td>{{ $key->category }}</td>
                                <td>{{ $key->date }}</td>
                                <td>{{ $key->person }}</td>
                                <td>
                                    @if($key->status =="Pending")
                                        <div class="badge rounded-pill text-warning bg-light-warning p-2 text-uppercase px-3">
                                        <i class='bx bxs-circle me-1'></i>Pending</div>
                                    @elseif($key->status =="Approved")
                                        <div class="badge rounded-pill text-primary bg-light-primary p-2 text-uppercase px-3">
                                            <i class='bx bxs-circle me-1'></i>Approved</div>
                                    @elseif($key->status =="Canceled")
                                        <div class="badge rounded-pill text-danger bg-light-danger p-2 text-uppercase px-3">
                                            <i class='bx bxs-circle me-1'></i>Canceled</div>
                                    @endif
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a class="dropdown-toggle dropdown-toggle-nocaret action-btn"  type="button" data-bs-toggle="dropdown" aria-expanded="false">...</a>
                                        <ul class="dropdown-menu" style="margin: 0px;">
                                            <li><a class="dropdown-item" href="{{ route('admin.customers-table-booking-show',['id'=>$key->id]) }}" title="Details"><i class='bx bx-detail' style="color: red"></i> Details</a> </li>
                                            <li><a class="dropdown-item deleteModalClass" data-value="{{ $key->id }}" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal" title="Update Status"><i class='bx bxs-pencil' style="color: red"></i> Update Status</a> </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </table>

                    {{ $customer_table_bookings->links("pagination::bootstrap-4") }}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Account Page Section -->
@endsection