@include('admin/header')
  
      <!-- Page Body Start-->
          <!-- Container-fluid starts-->
            
        <div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-6">
                  <h4>Bookings</h4>
                </div>
                <div class="col-6"> 
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">                                       
                           
                          <svg xmlns="http://www.w3.org/2000/svg" id="stroke-home" viewBox="0 0 18 15" fill="none">
                            <path d="M9.00771 0.500013L9.00772 0.500012L9.00818 0.500003C9.01487 0.499853 9.04121 0.499261 9.09973 0.539787L17.4284 7.34735L17.4283 7.34749L17.4389 7.35568C17.4468 7.36185 17.4845 7.40423 17.4967 7.50045C17.5022 7.54334 17.5003 7.58379 17.4939 7.61597C17.4874 7.64922 17.4785 7.66175 17.4799 7.65976L17.4798 7.66003C17.4737 7.66867 17.4495 7.69219 17.3929 7.69683C17.335 7.70157 17.2925 7.68172 17.274 7.66471L17.2632 7.65477L17.2518 7.64548L9.31503 1.16099L8.99868 0.902524L8.68233 1.16099L0.745525 7.64548L0.734221 7.65471L0.723475 7.66459C0.706153 7.68052 0.667477 7.69907 0.611153 7.69413C0.556187 7.6893 0.522676 7.66552 0.508269 7.64716C0.507765 7.64592 0.489798 7.6134 0.50752 7.52553C0.524894 7.43939 0.56562 7.36407 0.598067 7.32357L8.89008 0.545958C8.95425 0.505697 8.99325 0.500274 9.00771 0.500013ZM2.9133 7.97121L3.23034 7.71133V13.6364V14.1364H3.73034H6.58403H7.08403V13.6364V11.591C7.08403 10.4775 7.96478 9.59101 8.99868 9.59101C10.0326 9.59101 10.9133 10.4775 10.9133 11.591V13.6364V14.1364H11.4133H14.267H14.767V13.6364V7.71114L15.0841 7.97102V14.3179C15.084 14.4353 14.9966 14.5 14.9255 14.5H10.7548C10.6834 14.5 10.5963 14.4352 10.5963 14.3182V11.591C10.5963 10.69 9.91043 9.95457 8.99868 9.95457C8.08684 9.95457 7.40106 10.6901 7.40106 11.591V14.3182C7.40106 14.4351 7.31383 14.5 7.24255 14.5H3.07182C3.00027 14.5 2.9133 14.4352 2.9133 14.3184V7.97121Z"></path>
                        </svg></a></li>
                        <li class="breadcrumb-item">Visitors Dubai</li>
                        <li class="breadcrumb-item active">Bookings</li>
                      </ol>
                </div>
              </div>
            </div>
          </div>

       

          <!-- Container-fluid starts-->
          <div class="container-fluid"> 
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                       
                      <div class="card-body">
                        <div class="table-responsive custom-scrollbar">
                          <table class="display" id="basic-1">
                            <thead>
                              <tr>
                                <th>Booking Reference</th>
                                <th>Activity Name</th>
                                <th>Activity Option</th>
                                <th>Location</th>
                                <th>Customer Name</th>
                                <th>Phone</th>
                                <th>Email</th>
                                <th>Date of Booking</th>
                                <th>Date of Activity</th>
                                <th>Time</th>
                                <th>Adults</th>
                                <th>Children</th>
                                <th>Infants</th>
                                <th>Total Amount</th>
                                <th>Payment Method</th>
                                <th>Payment Status</th>
                                <th>Status</th>
                                <th>Actions</th>
                              </tr>
                            </thead>
                            <tbody>
                              @forelse($bookings as $booking)
                                <tr>
                                  <td>
                                    <strong>{{ $booking->booking_reference ?? 'N/A' }}</strong>
                                  </td>
                                  <td>
                                    {{ $booking->activity->activityType->name ?? 'N/A' }}
                                  </td>
                                  <td>
                                    {{ $booking->activityOption->option_name ?? 'N/A' }}
                                  </td>
                                  <td>{{ $booking->activity->location ?? 'N/A' }}</td>
                                  <td>{{ $booking->customer_name ?? 'N/A' }}</td>
                                  <td>{{ $booking->customer_phone ?? 'N/A' }}</td>
                                  <td>{{ $booking->customer_email ?? 'N/A' }}</td>
                                  <td>
                                    {{ $booking->booking_date ? \Carbon\Carbon::parse($booking->booking_date)->format('M d, Y') : 'N/A' }}
                                  </td>
                                  <td>
                                    {{ $booking->activity_date ? \Carbon\Carbon::parse($booking->activity_date)->format('M d, Y') : 'N/A' }}
                                  </td>
                                  <td>
                                    {{ $booking->activity_time ? \Carbon\Carbon::parse($booking->activity_time)->format('H:i A') : 'N/A' }}
                                  </td>
                                  <td>{{ $booking->adults ?? 0 }}</td>
                                  <td>{{ $booking->children ?? 0 }}</td>
                                  <td>{{ $booking->infants ?? 0 }}</td>
                                  <td>
                                    <strong>
                                      <img style="width: 16px;margin-top: -2px;" src="{{ asset('img/dirham.png') }}" alt="AED" class="rounded-4 mr-0">
                                      {{ number_format($booking->total_price ?? 0, 2) }}
                                    </strong>
                                  </td>
                                  <td>
                                    @switch($booking->payment_method)
                                      @case('card')
                                        <span class="badge badge-light-success">Card</span>
                                        @break
                                      @case('cash')
                                        <span class="badge badge-light-warning">Cash</span>
                                        @break
                                      @default
                                        <span class="badge badge-light-info">{{ ucfirst($booking->payment_method ?? 'N/A') }}</span>
                                    @endswitch
                                  </td>
                                  <td>
                                    @switch($booking->payment_status)
                                      @case('paid')
                                        <span class="badge badge-light-success">Paid</span>
                                        @break
                                      @case('pending')
                                        <span class="badge badge-light-warning">Pending</span>
                                        @break
                                      @case('failed')
                                        <span class="badge badge-light-danger">Failed</span>
                                        @break
                                      @default
                                        <span class="badge badge-light-secondary">{{ ucfirst($booking->payment_status ?? 'N/A') }}</span>
                                    @endswitch
                                  </td>
                                  <td>
                                    @switch($booking->status)
                                      @case('confirmed')
                                        <span class="badge badge-light-success">Confirmed</span>
                                        @break
                                      @case('pending')
                                        <span class="badge badge-light-warning">Pending</span>
                                        @break
                                      @case('cancelled')
                                        <span class="badge badge-light-danger">Cancelled</span>
                                        @break
                                      @case('completed')
                                        <span class="badge badge-light-info">Completed</span>
                                        @break
                                      @default
                                        <span class="badge badge-light-secondary">{{ ucfirst($booking->status ?? 'N/A') }}</span>
                                    @endswitch
                                  </td>
                                  <td>
                                    <div class="btn-group" role="group">
                                      <button type="button" class="btn btn-sm btn-outline-primary" 
                                              onclick="viewBooking({{ $booking->id }})" 
                                              title="View Details">
                                        <i class="fa fa-eye"></i>
                                      </button>
                                      <button type="button" class="btn btn-sm btn-outline-success" 
                                              onclick="updateBookingStatus({{ $booking->id }}, 'confirmed')" 
                                              title="Confirm">
                                        <i class="fa fa-check"></i>
                                      </button>
                                      <button type="button" class="btn btn-sm btn-outline-danger" 
                                              onclick="updateBookingStatus({{ $booking->id }}, 'cancelled')" 
                                              title="Cancel">
                                        <i class="fa fa-times"></i>
                                      </button>
                                    </div>
                                  </td>
                                </tr>
                              @empty
                                <tr>
                                  <td colspan="18" class="text-center">
                                    <div class="py-4">
                                      <i class="fa fa-calendar-times text-muted" style="font-size: 48px;"></i>
                                      <h5 class="mt-3 text-muted">No bookings found</h5>
                                      <p class="text-muted">There are no customer bookings at the moment.</p>
                                    </div>
                                  </td>
                                </tr>
                              @endforelse
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
    
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>
 


@include('admin/footer')

<!-- Booking Details Modal -->
<div class="modal fade" id="bookingDetailsModal" tabindex="-1" aria-labelledby="bookingDetailsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="bookingDetailsModalLabel">Booking Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="bookingDetailsContent">
        <!-- Content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
// View booking details
function viewBooking(bookingId) {
    // For now, show a simple alert. You can implement AJAX to fetch detailed booking info
    alert('View booking details for ID: ' + bookingId + '\n\nThis feature can be enhanced to show detailed booking information in a modal.');
}

// Update booking status
function updateBookingStatus(bookingId, status) {
    if (confirm('Are you sure you want to update this booking status to "' + status + '"?')) {
        // For now, show a simple alert. You can implement AJAX to update status
        alert('Booking status updated to: ' + status + '\n\nBooking ID: ' + bookingId);
        
        // You can implement AJAX call here:
        /*
        fetch('/admin/bookings/' + bookingId + '/status', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                status: status
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error updating booking status');
            }
        });
        */
    }
}

// Initialize DataTable with additional features
document.addEventListener('DOMContentLoaded', function() {
    $('#basic-1').DataTable({
        "responsive": true,
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "pageLength": 25,
        "order": [[ 7, "desc" ]], // Sort by booking date descending
        "columnDefs": [
            { "orderable": false, "targets": 17 } // Disable sorting on Actions column
        ],
        "language": {
            "search": "Search bookings:",
            "lengthMenu": "Show _MENU_ bookings per page",
            "info": "Showing _START_ to _END_ of _TOTAL_ bookings",
            "infoEmpty": "No bookings available",
            "infoFiltered": "(filtered from _MAX_ total bookings)"
        }
    });
});
</script>