@include('host.header')

<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<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 ID</th>
                                <th>Activity Name </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>Number of Adult </th>
                                <th>Number of Child </th>
                                <th>Number of Infants</th>
                                <th>Total Amount</th>
                                <th>Payment Type </th>

                                <th>Payment Status </th>
                                <th>Status </th>
                                <th> Action </th>


                              </tr>
                            </thead>
                            <tbody>
                            <tbody>
                              @forelse($bookings as $booking)
                              <tr>
                                <td>{{ $booking->booking_reference ?? 'N/A' }}</td>
                                <td>{{ $booking->activity->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 ?? 'N/A' }}</td>
                                <td>{{ $booking->activity_date ?? 'N/A' }}</td>
                                <td>{{ $booking->adults ?? 'N/A' }}</td>
                                <td>{{ $booking->children ?? 'N/A' }}</td>
                                <td>{{ $booking->infants ?? 'N/A' }}</td>
                                <td>{{ $booking->subtotal ?? 'N/A' }} AED</td>
                                <td>{{ $booking->payment_method ?? 'N/A' }}</td>
                                <td>{{ $booking->payment_status ?? 'N/A' }}</td>
                                <td>
                                  @switch($booking->status)
                                    @case('pending')
                                      <span class="badge rounded-pill badge-warning">Pending</span>
                                      @break
                                    @case('approved')
                                      <span class="badge rounded-pill badge-success">Approved</span>
                                      @break
                                    @case('rejected')
                                      <span class="badge rounded-pill badge-danger">Rejected</span>
                                      @break
                                    @default
                                      <span class="badge rounded-pill badge-secondary">{{ ucfirst($booking->status) }}</span>
                                  @endswitch
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                      <button type="button" class="btn btn-sm btn-info" onclick="viewBooking({{ $booking->id }})" title="View">
                                        <i class="fa fa-eye"></i>
                                      </button>
                                        <button type="button" class="btn btn-sm btn-warning" onclick="editBooking({{ $booking->id }})" title="Edit">
                                          <i class="fa fa-pencil"></i>
                                        </button>
                                      @if($booking->status !== 'approved')
                                        <button type="button" class="btn btn-sm btn-success" onclick="updateBookingStatus({{ $booking->id }}, 'approved')" title="Approve">
                                          <i class="fa fa-check"></i>
                                        </button>
                                      @endif
                                      @if($booking->status !== 'suspended')
                                        <button type="button" class="btn btn-sm btn-warning" onclick="suspendBookingStatus({{ $booking->id }}, 'suspended')" title="Suspend">
                                          <i class="fa fa-ban"></i>
                                        </button>
                                      @endif
                                      <button type="button" class="btn btn-sm btn-danger" onclick="deleteBooking({{ $booking->id }})" title="Delete">
                                        <i class="fa fa-trash"></i>
                                      </button>
                                    </div>
                              </td>
                              </tr>
                              @empty
                              <tr>
                                <td colspan="11" class="text-center">No bookings found</td>
                              </tr>
                              @endforelse
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
    
            </div>
                              

        <!-- View Activity Modal -->
        <div class="modal fade" id="viewBookingModal" tabindex="-1" aria-labelledby="viewBookingModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="viewBookingModalLabel">Booking Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body" id="viewBookingContent">
                <!-- Filled dynamically by viewBooking() -->
                <div class="text-center py-4">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
</div>
        <!-- Edit Activity Modal -->
        <div class="modal fade" id="editBookingModal" tabindex="-1" aria-labelledby="editBookingModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="editBookingModalLabel">Edit Booking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>

              <div class="modal-body">
                     <form action="#" method="POST" enctype="multipart/form-data" id="editBookingForm" novalidate>
                          @method('POST')
                          <input type="hidden" name="booking_id" id="edit_booking_id">
                            <div class="row g-3">

                            <div class="col-md-6">
                              <label class="form-label">Activity Name</label>
                                    <input type="text" class="form-control" name="option_name" id="edit_option_name" placeholder="Activity name / title">
                            </div>
                            <div class="col-md-6">
                              <label class="form-label">Location</label>
                                      <input type="text" class="form-control" name="location" id="edit_location" placeholder="Location">
                            </div>

                            <div class="col-md-4">
                              <label class="form-label">Adult Price (AED)</label>
                                      <input type="number" step="0.01" class="form-control" name="adult_price" id="edit_adult_price">
                            </div>
                            <div class="col-md-4">
                              <label class="form-label">Child Price (AED)</label>
                                      <input type="number" step="0.01" class="form-control" name="child_price" id="edit_child_price">
                            </div>
                            <div class="col-md-4">
                              <label class="form-label">Infant Price (AED)</label>
                                      <input type="number" step="0.01" class="form-control" name="infant_price" id="edit_infant_price">
                            </div>

                            <div class="col-md-4">
                              <label class="form-label">Time From</label>
                                      <input type="time" class="form-control" name="time_from" id="edit_time_from">
                            </div>
                            <div class="col-md-4">
                              <label class="form-label">Time To</label>
                                      <input type="time" class="form-control" name="time_to" id="edit_time_to">
                            </div>
                            <div class="col-md-4">
                              <label class="form-label">Duration</label>
                                      <input type="text" class="form-control" name="duration" id="edit_duration" placeholder="e.g. 2h">
                            </div>

                            <div class="col-md-12">
                              <label class="form-label">Status</label>
                                      <select class="form-select" name="status" id="edit_status">
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                                <option value="suspended">Suspended</option>
                              </select>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <!-- <input type="submit" name="submit" value="submit"> -->
                          <button type="button" class="btn btn-primary waves-effect waves-light" id="saveEditActivityBtn" onclick="submitEditForm()">Submit</button>
                        </div>
                    </form>
                </div>

            </div>
          </div>
        </div>
</div>
@include('host.footer')



<!-- 
<script>  


// Submit Edit Form Function
function submitEditForm() {
    console.log('submitEditForm called in activities.blade.php');
    
    const editForm = document.getElementById('editActivityForm');
    console.log('Form found:', editForm);
    
    if (!editForm) {
        console.error('Edit form not found! Available forms:', document.querySelectorAll('form'));
        alert('Edit form not found. Please make sure the edit modal is open.');
        return;
    }
    
    const saveBtn = document.getElementById('saveEditActivityBtn');
    const editModal = document.getElementById('editActivityModal');
    
    // Check if modal is actually open
    if (!editModal || !editModal.classList.contains('show')) {
        console.log('Modal not open or not found:', editModal);
        alert('Please open the edit modal first.');
        return;
    }
    
    // Get form data
    const formData = new FormData(editForm);
    
    // Disable save button
    if (saveBtn) {
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Saving...';
    }
    
    // Get the activity ID and generate URL
    const activityId = document.getElementById('edit_activity_id').value;
    const updateUrl = '{{ route("host.activities.update", ":id") }}'.replace(':id', activityId);
    
    // Send AJAX request to update activity
    fetch(updateUrl, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    }) 
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Activity updated successfully!');
            $('#editActivityModal').modal('hide');
            location.reload();
        } else {
            alert('Error updating activity: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        if (saveBtn) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = 'Save changes';
        }
    });
}

</script>

<script>

// View Host Function - Simple Modal
  function viewActivity(activityId) {
    
    // Disable view button and show loading
    const viewBtn = event.target.closest('button');
    const originalContent = viewBtn.innerHTML;
    viewBtn.disabled = true;
    viewBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
    
    // Show the modal first
    $('#viewActivityModal').modal('show');
    
    // Set loading content
    document.getElementById('viewActivityContent').innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading activity details...</p>
        </div>
    `;
    
    // Fetch data and populate modal
    fetch('{{ route("host.activities.show", ":id") }}'.replace(':id', activityId), {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Populate modal content with actual data
            document.getElementById('viewActivityContent').innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-building me-2"></i>Activity Information
                        </h6>
                        <p><strong>Activity Name:</strong> ${data.data.activity_name || 'N/A'}</p>
                        <p><strong>Activity Type:</strong> ${data.data.activity_type || 'N/A'}</p>
                        <p><strong>Activity Location:</strong> ${data.data.activity_location || 'N/A'}</p>
                        <p><strong>Activity Date:</strong> ${data.data.activity_date || 'N/A'}</p>
                    </div>
                    <div class="col-md-6">

                        <p><strong>Activity Time:</strong> ${data.data.activity_time || 'N/A'}</p>
                        <p><strong>Activity Duration:</strong> ${data.data.activity_duration || 'N/A'}</p>
                        <p><strong>Activity Price:</strong> ${data.data.activity_price || 'N/A'}</p>
                        <p><strong>Activity Status:</strong> <span class="badge bg-info">${data.data.activity_status || 'N/A'}</span></p>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-info-circle me-2"></i>Status
                        </h6>
                        <p><strong>Status:</strong> <span class="badge bg-success">${data.data.status || 'N/A'}</span></p>
                        <p><strong>Activity ID:</strong> ${activityId}</p>
                    </div>
                </div>
            `;
        } else {
            document.getElementById('viewActivityContent').innerHTML = `
                <div class="text-center text-danger">
                    <i class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                    <p>Error: ${data.message || 'Unknown error'}</p>
                </div>
            `;
        }
    })
    .finally(() => {
        // Re-enable view button
        const viewBtn = document.querySelector(`button[onclick="viewActivity(${activityId})"]`);
        if (viewBtn) {
            viewBtn.disabled = false;
            viewBtn.innerHTML = '<i class="fa fa-eye"></i>';
        }
    })
    .catch(error => {
        console.error('Fetch Error:', error);
        document.getElementById('viewActivityContent').innerHTML = `
            <div class="text-center text-danger">
                <i class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                <p>Error loading activity details</p>
                <small>Error: ${error.message}</small>
            </div>
        `;
    });
}



// Delete Host Function
function deleteActivity(activityId) {
    if (confirm('Are you sure you want to delete this activity? This action cannot be undone.')) {
        // Disable delete button and show loading
        const deleteBtn = event.target.closest('button');
        const originalContent = deleteBtn.innerHTML;
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        fetch(`{{ route('host.activities.delete', ':id') }}`.replace(':id', activityId), {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                alert('Error deleting activity');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting activity');
        })
        .finally(() => {
            // Re-enable delete button
            const deleteBtn = document.querySelector(`button[onclick="deleteActivity(${activityId})"]`);
            if (deleteBtn) {
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = '<i class="fa fa-trash"></i>';
            }
        });
    }
}

</script> -->