@extends('admin.layouts.app')

@section('content')
<div class="main-panel">
    <div class="content-wrapper">
      <div class="row">
        <div class="col-md-12 page-title">
          <h4>Ongoing Bookings</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 grid-margin grid-margin-lg-0 grid-margin-md-0 stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Ongoing Bookings</h4>
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Room Type</th>
                      <th>Customer Name</th>
                      <th>Customer Phone</th>
                      <th>Customer Email</th>
                      <th>Check In Date</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($bookings as $book)
                    <tr>
                      <td>
                        {{ $book->room }}
                      </td>
                      <td>
                        {{ $book->customer_name }}
                      </td>
                      <td>
                        {{ $book->customer_phone }}
                      </td>
                      <td>
                        {{ $book->customer_email }}
                      </td>
                      <td>
                        {{ $book->check_in_date }}
                      </td>
                      <td>
                        <button type="button" data-date-booked="{{ $book->created_at }}" data-has-checked-in="@php print $book->has_checked_in == 0? 'No' : 'Yes' @endphp" data-has-checked-out="@php print $book->has_checked_out == 0? 'No' : 'Yes' @endphp" data-days="{{ $book->days }}" data-booking-ref="{{ $book->booking_ref }}" data-amount-paid="{{ number_format($book->amount_paid) }}" data-adults="{{ $book->adults }}" data-children="{{ $book->children }}" data-check-out-date="{{ $book->check_out_date }}" data-check-in-date="{{ $book->check_in_date }}" data-customer-email="{{ $book->customer_email }}" data-room="{{ $book->room }}" data-customer-name="{{ $book->customer_name }}" data-customer-phone="{{ $book->customer_phone }}" class="btn btn-behance" data-toggle="modal" data-target="#exampleModal">View</button>
                        <span class="btn btn-success">Check In <i class="mdi mdi-arrow-down"></i></span>
                        <span class="btn btn-danger">Check Out <i class="mdi mdi-arrow-up"></i></span>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Booking Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <table class="table-strip">
              <tbody>
                <tr>
                  <td>Customer Name</td>
                  <td>
                    <span class="customer_name"></span>
                  </td>
                </tr>
                <tr>
                  <td>Customer Phone</td>
                  <td>
                    <span class="customer_phone"></span>
                  </td>
                </tr>
                <tr>
                  <td>Customer Email</td>
                  <td>
                    <span class="customer_email"></span>
                  </td>
                </tr>
                <tr>
                  <td>Room Type</td>
                  <td>
                    <span class="room_type"></span>
                  </td>
                </tr>
                <tr>
                  <td>Check In Date</td>
                  <td>
                    <span class="check_in_date"></span>
                  </td>
                </tr>
                <tr>
                  <td>Check Out Date</td>
                  <td>
                    <span class="check_out_date"></span>
                  </td>
                </tr>
                <tr>
                  <td>Total Days</td>
                  <td>
                    <span class="total_days"></span>
                  </td>
                </tr>
                <tr>
                  <td>Adults</td>
                  <td>
                    <span class="adults"></span>
                  </td>
                </tr>
                <tr>
                  <td>Children</td>
                  <td>
                    <span class="children"></span>
                  </td>
                </tr>
                <tr>
                  <td>Booking Ref</td>
                  <td>
                    <span class="booking_ref"></span>
                  </td>
                </tr>
                <tr>
                  <td>Amount Paid</td>
                  <td>
                    <span class="amount_paid"></span>
                  </td>
                </tr>
                <tr>
                  <td>Has Checked In</td>
                  <td>
                    <span class="has_checked_in"></span>
                  </td>
                </tr>
                <tr>
                  <td>Has Checked Out</td>
                  <td>
                    <span class="has_checked_out"></span>
                  </td>
                </tr>
                <tr>
                  <td>Date Booked</td>
                  <td>
                    <span class="date_booked"></span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>


    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>

    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->
    <footer class="footer">
      <div class="d-sm-flex justify-content-center justify-content-sm-between">
        <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © {{ date('Y') }}. All rights reserved.</span>
      </div>
    </footer>
    <!-- partial -->
  </div>
  <style>
    .table-strip {
      width: 100%;
    }
    .table-strip tr td {
      padding: .5em .4em;
    }
    .table-strip tr {
      border-bottom: 1px solid #999;
    }
    .table-strip tr:last-child {
      border-bottom: none;
    }
    .modal .modal-dialog .modal-content .modal-body {
      padding: 5px 26px !important;
    }
  </style>
@endsection