@include('admin.header')

<div class="page-body">
  <div class="container-fluid">
    <div class="page-title">
      <div class="row">
        <div class="col-6">
          <h4>Host information
        </h4>
        </div>
        <div class="col-6"> 
            <ol class="breadcrumb">
                <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter1">Add New </button>
              </ol>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">	Add New Provider </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="adminHostForm">
            {{-- CSRF token removed - using tokenless system --}}
                <div class="row mb-3">
                    <label for="company_name" class="col-sm-4 col-form-label">Company Name</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" placeholder="Company Name" id="company_name" name="company_name">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="contact_person" class="col-sm-4 col-form-label">Contact Person</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" placeholder="Contact Person Name" id="contact_name" name="contact_name">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="email" class="col-sm-4 col-form-label">Email</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="email" placeholder="Company Email Address" id="contact_email" name="contact_email">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                    <div class="col-sm-8">
                    <input type="tel" class="form-control" name="contact_mobile" id="contact_mobile" placeholder="Contact Person Mobile" pattern="[+]?[0-9]{10,15}" required>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="trade_license" class="col-sm-4 col-form-label">Trade License Number</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" placeholder="Trade License Number" id="trade_license_number" name="trade_license_number">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="category" class="col-sm-4 col-form-label">Category</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="categories_offered" name="categories_offered">
                            <option value="">Select Category</option>
                            <option value="adventure">Adventure</option>
                            <option value="cultural">Cultural</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="food">Food & Dining</option>
                            <option value="shopping">Shopping</option>
                            <option value="sports">Sports</option>
                            <option value="wellness">Wellness</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="expiry_date" class="col-sm-4 col-form-label">License Expiry Date</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="date" id="expiry_date" name="expiry_date">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="company_address" class="col-sm-4 col-form-label">Company Address</label>
                    <div class="col-sm-8">
                        <textarea class="form-control" id="company_address" name="company_address" placeholder="Enter company address" rows="3"></textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="license_file" class="col-sm-4 col-form-label">Upload License</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="file" class="form-control" id="license" name="license" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary waves-effect waves-light" id="submitHostBtn" onclick="submitHostForm()">Submit</button>
                <button type="button" class="btn btn-light waves-effect" data-bs-dismiss="modal">Close</button>
            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


  <!-- 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>ID</th>
                        <th>Company Name</th>
                        <th>Contact Person</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Trade License No</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse($hosts as $host)
                      <tr>
                        <td>{{ $host->id }}</td>
                        <td>{{ $host->company_name }}</td>
                        <td>{{ $host->contact_name }}</td>
                        <td>{{ $host->contact_email }}</td>
                        <td>{{ $host->contact_mobile }}</td>
                        <td>{{ $host->trade_license_number }}</td>
                        <td>
                          @if($host->categories_offered)
                            @php
                              $categories = is_array($host->categories_offered) ? $host->categories_offered : json_decode($host->categories_offered, true);
                            @endphp
                            @if(is_array($categories))
                              {{ implode(', ', $categories) }}
                            @else
                              {{ $host->categories_offered }}
                            @endif
                          @else
                            N/A
                          @endif
                        </td>
                        <td>
                          @switch($host->status)
                            @case('approved')
                              <span class="badge rounded-pill badge-success">Approved</span>
                              @break
                            @case('rejected')
                              <span class="badge rounded-pill badge-danger">Rejected</span>
                              @break
                            @case('suspended')
                              <span class="badge rounded-pill badge-warning">Suspended</span>
                              @break
                            @default
                              <span class="badge rounded-pill badge-secondary">Pending</span>
                          @endswitch
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                              <button type="button" class="btn btn-sm btn-info" onclick="viewHost({{ $host->id }})" title="View">
                                <i class="fa fa-eye"></i>
                              </button>
                              <button type="button" class="btn btn-sm btn-warning" onclick="editHost({{ $host->id }})" title="Edit">
                                <i class="fa fa-pencil"></i>
                              </button>
                              @if($host->status !== 'approved')
                                <button type="button" class="btn btn-sm btn-success" onclick="updateHostStatus({{ $host->id }}, 'approved')" title="Approve">
                                  <i class="fa fa-check"></i>
                                </button>
                              @endif
                              @if($host->status !== 'suspended')
                                <button type="button" class="btn btn-sm btn-warning" onclick="suspendHostStatus({{ $host->id }}, 'suspended')" title="Suspend">
                                  <i class="fa fa-ban"></i>
                                </button>
                              @endif
                              <button type="button" class="btn btn-sm btn-danger" onclick="deleteHost({{ $host->id }})" title="Delete">
                                <i class="fa fa-trash"></i>
                              </button>
                            </div>
                        </td>
                      </tr>
                      @empty
                      <tr>
                        <td colspan="9" class="text-center">No hosts found</td>
                      </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

    </div>
  </div>
  <!-- Container-fluid Ends-->
</div>

<!-- View Host Modal -->
<div class="modal fade" id="viewHostModal" tabindex="-1" role="dialog" aria-labelledby="viewHostModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <p class="modal-title" id="viewHostModalLabel">
                    <i class="fa fa-eye me-2"></i>Host Details
</p>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="viewHostContent">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading host details...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" tabindex="1">
                    <i class="fa fa-times me-1"></i>Close
                </button>
                <button type="button" class="btn btn-primary" id="editFromViewBtn" style="display: none;" tabindex="2">
                    <i class="fa fa-edit me-1"></i>Edit Host
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Host Modal -->
<div class="modal fade" id="editHostModal" tabindex="-1" role="dialog" aria-labelledby="editHostModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title" id="editHostModalLabel">
                    <i class="fa fa-edit me-2"></i>Edit Host Information
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editHostForm" method="POST">
                    @method('PUT')
                    <input type="hidden" id="editHostId" name="host_id">
                    
                    <div class="row mb-3">
                        <label for="edit_company_name" class="col-sm-4 col-form-label">Company Name</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text" placeholder="Company Name" id="edit_company_name" name="company_name" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_contact_name" class="col-sm-4 col-form-label">Contact Person</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text" placeholder="Contact Person Name" id="edit_contact_name" name="contact_name" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_contact_email" class="col-sm-4 col-form-label">Email</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="email" placeholder="Company Email Address" id="edit_contact_email" name="contact_email" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_contact_mobile" class="col-sm-4 col-form-label">Phone</label>
                        <div class="col-sm-8">
                            <input type="tel" class="form-control" name="contact_mobile" id="edit_contact_mobile" placeholder="Contact Person Mobile" pattern="[+]?[0-9]{10,15}" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_trade_license_number" class="col-sm-4 col-form-label">Trade License Number</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text" placeholder="Trade License Number" id="edit_trade_license_number" name="trade_license_number" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_categories_offered" class="col-sm-4 col-form-label">Category</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="edit_categories_offered" name="categories_offered" required>
                                <option value="">Select Category</option>
                                <option value="adventure">Adventure</option>
                                <option value="cultural">Cultural</option>
                                <option value="entertainment">Entertainment</option>
                                <option value="food">Food & Dining</option>
                                <option value="shopping">Shopping</option>
                                <option value="sports">Sports</option>
                                <option value="wellness">Wellness</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_expiry_date" class="col-sm-4 col-form-label">License Expiry Date</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="date" id="edit_expiry_date" name="expiry_date" required>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_company_address" class="col-sm-4 col-form-label">Company Address</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="edit_company_address" name="company_address" placeholder="Enter company address" rows="3" required></textarea>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <label for="edit_status" class="col-sm-4 col-form-label">Status</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="edit_status" name="status" required>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                                <option value="suspended">Suspended</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fa fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-primary" id="submitEditHostBtn" onclick="submitEditHostForm()">
                    <i class="fa fa-save me-1"></i>Update Host
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Edit Host Function
function editHost(hostId) {
    // Show the edit modal first
    $('#editHostModal').modal('show');
    
    // Show loading state
    const submitBtn = document.getElementById('submitEditHostBtn');
    const originalContent = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i>Loading...';
    
    const editUrl = '{{ url("/") }}/hosts/' + hostId + '/edit';
    
    fetch(editUrl, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        credentials: 'same-origin'
    })
    .then(response => {
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            return response.text().then(text => {
                console.error('Non-JSON response:', text);
                throw new Error('Server returned non-JSON response. Status: ' + response.status);
            });
        }
        
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.message || `HTTP error! status: ${response.status}`);
            });
        }
        
        return response.json();
    })
    .then(data => {
        if (data.success) {
            const hostData = data.data;
            // Populate modal fields
            $('#editHostId').val(hostId);
            $('#edit_company_name').val(hostData.company_name);
            $('#edit_contact_name').val(hostData.contact_name);
            $('#edit_contact_email').val(hostData.contact_email);
            $('#edit_contact_mobile').val(hostData.contact_mobile);
            $('#edit_trade_license_number').val(hostData.trade_license_number);
            $('#edit_expiry_date').val(hostData.expiry_date);
            $('#edit_company_address').val(hostData.company_address);
            $('#edit_categories_offered').val(hostData.categories_offered || '');
            $('#edit_status').val(hostData.status);
        } else {
            alert('Error loading host data: ' + (data.message || 'Unknown error'));
            $('#editHostModal').modal('hide');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading host data for editing: ' + error.message);
        $('#editHostModal').modal('hide');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalContent;
    });
}

// Submit Edit Host Form Function
function submitEditHostForm() {
    const form = document.getElementById('editHostForm');
    const submitBtn = document.getElementById('submitEditHostBtn');
    const hostId = $('#editHostId').val();
    
    if (!hostId) {
        alert('Host ID is missing. Please try again.');
        return;
    }
    
    // Validate form
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const formData = new FormData(form);
    
    // Add _method for Laravel to recognize PUT request
    formData.append('_method', 'PUT');
    
    // Log form data for debugging
    console.log('Form data being sent:');
    for (let pair of formData.entries()) {
        console.log(pair[0] + ': ' + pair[1]);
    }
    
    // Ensure categories_offered is sent (required field)
    if (!formData.get('categories_offered')) {
        alert('Please select a category.');
        return;
    }
    
    const updateUrl = '{{ url("/") }}/hosts/' + hostId;
    
    // Disable submit button and show loading
    submitBtn.disabled = true;
    const originalContent = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i>Updating...';
    
    fetch(updateUrl, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData,
        credentials: 'same-origin'
    })
    .then(response => {
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            return response.text().then(text => {
                console.error('Non-JSON response:', text);
                throw new Error('Server returned non-JSON response. Status: ' + response.status);
            });
        }
        
        return response.json().then(data => {
            if (!response.ok) {
                // Handle validation errors (422)
                if (response.status === 422 && data.errors) {
                    let errorMessage = 'Validation errors:\n\n';
                    Object.keys(data.errors).forEach(field => {
                        errorMessage += `${field}: ${data.errors[field][0]}\n`;
                    });
                    
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            html: errorMessage.replace(/\n/g, '<br>'),
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert(errorMessage);
                    }
                    return Promise.reject(new Error('Validation failed'));
                }
                
                throw new Error(data.message || `HTTP error! status: ${response.status}`);
            }
            return data;
        });
    })
    .then(data => {
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.toast?.message || 'Host updated successfully!',
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    $('#editHostModal').modal('hide');
                    location.reload();
                });
            } else {
                alert('Host updated successfully!');
                $('#editHostModal').modal('hide');
                location.reload();
            }
        } else {
            alert('Error: ' + (data.message || 'Failed to update host'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // Only show alert if it's not a validation error (already shown)
        if (error.message !== 'Validation failed') {
            alert('Error updating host: ' + error.message);
        }
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalContent;
    });
}

// Helper function to format categories
function formatCategories(categories) {
    if (!categories) return 'N/A';
    
    try {
        // If it's already a string, try to parse it
        if (typeof categories === 'string') {
            const parsed = JSON.parse(categories);
            if (Array.isArray(parsed)) {
                return parsed.join(', ');
            }
            return categories;
        }
        
        // If it's already an array
        if (Array.isArray(categories)) {
            return categories.join(', ');
        }
        
        return categories;
    } catch (e) {
        // If parsing fails, return as is
        return categories;
    }
}

// View Host Function - Simple Modal
function viewHost(hostId) {
    console.log('viewHost called with ID:', hostId);
    
    // 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
    $('#viewHostModal').modal('show');
    
    // Set loading content
    document.getElementById('viewHostContent').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 host details...</p>
        </div>
    `;
    
    // Fetch data and populate modal - Use absolute URL with route helper if available
    const baseUrl = '{{ url("/") }}';
    const url = baseUrl + '/hosts/' + hostId;
    console.log('Fetching URL:', url);
    
    fetch(url, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest', // Essential for Laravel to detect AJAX
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        credentials: 'same-origin' // Include cookies/session for authentication
    })
    .then(async response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', [...response.headers.entries()]);
        
        // Check if response is JSON
        const contentType = response.headers.get('content-type');
        console.log('Content-Type:', contentType);
        
        if (!contentType || !contentType.includes('application/json')) {
            const text = await response.text();
            console.error('Non-JSON response received. First 500 chars:', text.substring(0, 500));
            
            // Try to parse as JSON anyway in case content-type is missing
            try {
                const jsonData = JSON.parse(text);
                return jsonData;
            } catch (e) {
                throw new Error('Server returned non-JSON response. Status: ' + response.status + '. Content-Type: ' + (contentType || 'not set'));
            }
        }
        
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.message || `HTTP error! status: ${response.status}`);
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            // Populate modal content with actual data
            document.getElementById('viewHostContent').innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-building me-2"></i>Company Information
                        </h6>
                        <p><strong>Company Name:</strong> ${data.data.company_name || 'N/A'}</p>
                        <p><strong>Trade License:</strong> ${data.data.trade_license_number || 'N/A'}</p>
                        <p><strong>Expiry Date:</strong> ${data.data.expiry_date || 'N/A'}</p>
                        <p><strong>Address:</strong> ${data.data.company_address || 'N/A'}</p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-user me-2"></i>Contact Information
                        </h6>
                        <p><strong>Contact Person:</strong> ${data.data.contact_name || 'N/A'}</p>
                        <p><strong>Email:</strong> ${data.data.contact_email || 'N/A'}</p>
                        <p><strong>Mobile:</strong> ${data.data.contact_mobile || 'N/A'}</p>
                        <p><strong>Category:</strong> <span class="badge bg-info">${formatCategories(data.data.categories_offered) || '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>Host ID:</strong> ${hostId}</p>
                    </div>
                </div>
            `;
        } else {
            document.getElementById('viewHostContent').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="viewHost(${hostId})"]`);
        if (viewBtn) {
            viewBtn.disabled = false;
            viewBtn.innerHTML = '<i class="fa fa-eye"></i>';
        }
    })
    .catch(error => {
        console.error('Fetch Error:', error);
        document.getElementById('viewHostContent').innerHTML = `
            <div class="text-center text-danger">
                <i class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                <p>Error loading host details</p>
                <small>Error: ${error.message}</small>
            </div>
        `;
    });
}

// Update Host Status Function
function updateHostStatus(hostId, status) {
    console.log('updateHostStatus called with ID:', hostId, 'Status:', status);
    
    if (confirm(`Are you sure you want to ${status} this host?`)) {
        // Disable approve button and show loading
        const approveBtn = event.target.closest('button');
        const originalContent = approveBtn.innerHTML;
        approveBtn.disabled = true;
        approveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        // Create form data without CSRF token
        const hostFormData = new FormData();
        hostFormData.append('status', status);
        
        const statusUrl = '{{ url("/") }}/hosts/' + hostId + '/status';
        fetch(statusUrl, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: hostFormData
        })
        .then(response => {
            console.log('Response status:', response.status);
            
            // Check if response is JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Non-JSON response:', text);
                    throw new Error('Server returned non-JSON response. Status: ' + response.status);
                });
            }
            
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                });
            }
            
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                console.error('Error response:', data);
                alert('Error updating host status: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating host status: ' + error.message);
        })
        .finally(() => {
            // Re-enable approve button
            const approveBtn = document.querySelector(`button[onclick="updateHostStatus(${hostId}, '${status}')"]`);
            if (approveBtn) {
                approveBtn.disabled = false;
                approveBtn.innerHTML = '<i class="fa fa-check"></i>';
            }
        });
    }
}

// Suspend Host Function
function suspendHostStatus(hostId, status) {
    if (confirm('Are you sure you want to suspend this host? This will suspend their account.')) {
        // Disable suspend button and show loading
        const suspendBtn = event.target.closest('button');
        const originalContent = suspendBtn.innerHTML;
        suspendBtn.disabled = true;
        suspendBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        // Create form data without CSRF token
        const hostFormData = new FormData();
        hostFormData.append('status', 'suspended');
        
        const suspendUrl = '{{ url("/") }}/hosts/' + hostId + '/status';
        fetch(suspendUrl, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: hostFormData
        })
        .then(response => {
            // Check if response is JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Non-JSON response:', text);
                    throw new Error('Server returned non-JSON response. Status: ' + response.status);
                });
            }
            
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                });
            }
            
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                alert('Error suspending host: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error suspending host: ' + error.message);
        })
        .finally(() => {
            // Re-enable suspend button
            const suspendBtn = document.querySelector(`button[onclick="suspendHostStatus(${hostId}, '${status}')"]`);
            if (suspendBtn) {
                suspendBtn.disabled = false;
                suspendBtn.innerHTML = '<i class="fa fa-ban"></i>';
            }
        });
    }
}

// Delete Host Function
function deleteHost(hostId) {
    if (confirm('Are you sure you want to delete this host? 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>';
        
        const deleteUrl = '{{ url("/") }}/hosts/' + hostId;
        fetch(deleteUrl, {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => {
            // Check if response is JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Non-JSON response:', text);
                    throw new Error('Server returned non-JSON response. Status: ' + response.status);
                });
            }
            
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                });
            }
            
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                alert('Error deleting host');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting host');
        })
        .finally(() => {
            // Re-enable delete button
            const deleteBtn = document.querySelector(`button[onclick="deleteHost(${hostId})"]`);
            if (deleteBtn) {
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = '<i class="fa fa-trash"></i>';
            }
        });
    }
}

/* ---------- Mobile validation ---------- */
$('#contact_mobile').on('input', function() {
    const mobile = $(this).val();
    const mobileRegex = /^[+]?[0-9]{10,15}$/;
    
    if (mobile && !mobileRegex.test(mobile)) {
        $(this).addClass('is-invalid');
        if (!$(this).next('.invalid-feedback').length) {
            $(this).after('<div class="invalid-feedback">Please enter a valid mobile number (10-15 digits, optional + at start)</div>');
        }
    } else {
        $(this).removeClass('is-invalid');
        $(this).next('.invalid-feedback').remove();
    }
});

// Submit Host Form Function
function submitHostForm() {
    console.log('submitHostForm function called'); // Debug log
    
    const form = document.getElementById('adminHostForm');
    const hostSubmitBtn = document.getElementById('submitHostBtn');
    
    if (!form) {
        console.error('Form not found!');
        alert('Form not found!');
        return;
    }

    if (!hostSubmitBtn) {
        console.error('Submit button not found!');
        alert('Submit button not found!');
        return;
    }
    
    // Use hardcoded URL instead of form action
    const hostFormAction = '{{ route("hosts.store") }}';
    console.log('Form action:', hostFormAction); // Debug log
    
    // Get form data
    const hostFormData = new FormData(form);
    

    // Disable submit button and show loading state
    hostSubmitBtn.disabled = true;
    hostSubmitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';
    
    const headers = {
        'X-Requested-With': 'XMLHttpRequest'
    };
    
    console.log('Using tokenless system'); // Debug log
    
    // Send AJAX request
    fetch(hostFormAction, {
        method: 'POST',
        body: hostFormData,
        headers: headers
    })
    .then(response => {
        console.log('Response status:', response.status); // Debug log
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data); // Debug log
        if (data.success) {
            // Show success message
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Host added successfully. Redirecting to Host page...',
                    showConfirmButton: false,
                    timer: 2000
                }).then(() => {
                    window.location.href = './host_information';
                });
            } else {
                alert('Host added successfully! Redirecting...');
                window.location.href = './host_information';
            }
        } else { 
            // Show validation errors
            if (data.errors) {
                // Check for duplicate email error
                if (data.errors.contact_email) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Email Already Exists!',
                            text: data.errors.contact_email[0],
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert('Error: ' + data.errors.contact_email[0]);
                    }
                } else {
                    // Show other validation errors
                    let errorMessage = 'Validation errors:\n';
                    Object.keys(data.errors).forEach(field => {
                        errorMessage += `${field}: ${data.errors[field][0]}\n`;
                        const errorElement = document.getElementById(`${field}_error`);
                        if (errorElement) {
                            errorElement.textContent = data.errors[field][0];
                            errorElement.style.display = 'block';
                        }
                    });
                    alert(errorMessage);
                }
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        // Re-enable submit button
        hostSubmitBtn.disabled = false;
        hostSubmitBtn.innerHTML = 'Submit';
    });
}

function clearErrors() {
    const errorElements = document.querySelectorAll('.invalid-feedback');
    errorElements.forEach(element => {
        element.textContent = '';
        element.style.display = 'none';
    });
}
</script>

@include('admin.footer')