@include('host.header', ['hostUser' => $hostUser, 'host' => $host])

<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">Edit Profile</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">Edit Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <form action="{{ route('host.info.update') }}" method="POST" enctype="multipart/form-data" id="editHostForm">
            @method('PUT')
           
                <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" value="{{ $host->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" value="{{ $host->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" value="{{ $host->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 value="{{ $host->contact_mobile ?? '' }}">
                    </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" value="{{ $host->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" {{ ($host->categories_offered == 'adventure' || (is_array($host->categories_offered) && in_array('adventure', $host->categories_offered))) ? 'selected' : '' }}>Adventure</option>
                            <option value="cultural" {{ ($host->categories_offered == 'cultural' || (is_array($host->categories_offered) && in_array('cultural', $host->categories_offered))) ? 'selected' : '' }}>Cultural</option>
                            <option value="entertainment" {{ ($host->categories_offered == 'entertainment' || (is_array($host->categories_offered) && in_array('entertainment', $host->categories_offered))) ? 'selected' : '' }}>Entertainment</option>
                            <option value="food" {{ ($host->categories_offered == 'food' || (is_array($host->categories_offered) && in_array('food', $host->categories_offered))) ? 'selected' : '' }}>Food & Dining</option>
                            <option value="shopping" {{ ($host->categories_offered == 'shopping' || (is_array($host->categories_offered) && in_array('shopping', $host->categories_offered))) ? 'selected' : '' }}>Shopping</option>
                            <option value="sports" {{ ($host->categories_offered == 'sports' || (is_array($host->categories_offered) && in_array('sports', $host->categories_offered))) ? 'selected' : '' }}>Sports</option>
                            <option value="wellness" {{ ($host->categories_offered == 'wellness' || (is_array($host->categories_offered) && in_array('wellness', $host->categories_offered))) ? 'selected' : '' }}>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" value="{{ $host->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">{{ $host->company_address ?? '' }}</textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="license_file" class="col-sm-4 col-form-label">License File</label>
                    <div class="col-sm-8">
                        <!-- Current License File Display -->
                        <div id="current-license-display" class="mb-2">
                            @if($host->license)
                                <div class="current-file-info">
                                    <p class="text-muted mb-1">Current License File:</p>
                                    <div class="d-flex align-items-center">
                                        <i class="fa fa-file-pdf text-danger me-2"></i>
                                        <a href="{{ asset($host->license) }}" target="_blank" class="text-decoration-none">
                                            {{ basename($host->license) }}
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeCurrentLicense()">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            @else
                                <p class="text-muted">No license file uploaded</p>
                            @endif
                        </div>
                        
                        <!-- File Upload Input -->
                        <div class="input-group">
                            <input type="file" class="form-control" id="license" name="license" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" onchange="previewNewLicense(this)">
                        </div>
                        <small class="form-text text-muted">Upload a new file to replace the current license (PDF, DOC, DOCX, JPG, PNG)</small>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary waves-effect waves-light" id="submitBtn01" onclick="submitEditHostForm()">Update Profile</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>
                      @if($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>
           
                            </div>
                        </td>
                      </tr>
                      @else
                      <tr>
                        <td colspan="9" class="text-center">No host information found</td>
                      </tr>
                      @endif
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

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

@include('host.footer')

<!-- 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>

<script>
// Host Profile Management JavaScript

// Preview new license file when selected
function previewNewLicense(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        const fileName = file.name;
        const fileSize = (file.size / 1024 / 1024).toFixed(2); // Convert to MB
        
        // Show preview of new file
        const previewHtml = `
            <div class="new-file-preview mt-2 p-2 border rounded bg-light">
                <p class="text-success mb-1">New file selected:</p>
                <div class="d-flex align-items-center">
                    <i class="fa fa-file text-primary me-2"></i>
                    <span class="me-2">${fileName}</span>
                    <small class="text-muted">(${fileSize} MB)</small>
                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2" onclick="clearNewLicense()">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        
        // Remove existing preview if any
        const existingPreview = document.querySelector('.new-file-preview');
        if (existingPreview) {
            existingPreview.remove();
        }
        
        // Add new preview
        input.parentNode.insertAdjacentHTML('afterend', previewHtml);
    }
}

// Clear new license selection
function clearNewLicense() {
    const fileInput = document.getElementById('license');
    fileInput.value = '';
    
    const preview = document.querySelector('.new-file-preview');
    if (preview) {
        preview.remove();
    }
}

// Remove current license file
function removeCurrentLicense() {
    if (confirm('Are you sure you want to remove the current license file?')) {
        // Add a hidden input to indicate license should be removed
        const form = document.getElementById('editHostForm');
        let removeLicenseInput = document.getElementById('remove_license');
        
        if (!removeLicenseInput) {
            removeLicenseInput = document.createElement('input');
            removeLicenseInput.type = 'hidden';
            removeLicenseInput.name = 'remove_license';
            removeLicenseInput.id = 'remove_license';
            removeLicenseInput.value = '1';
            form.appendChild(removeLicenseInput);
        }
        
        // Hide current license display
        const currentDisplay = document.getElementById('current-license-display');
        currentDisplay.innerHTML = '<p class="text-muted">License file will be removed</p>';
    }
}
 function editHost(hostId) {
     
     // The form action is already set correctly in the HTML
     const editForm = document.getElementById('editHostForm');
     console.log('Form action:', editForm.action);
     
     // Fetch host data and populate edit form
     fetch('{{ url("/hosts") }}/' + hostId, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const hostData = data.data;
            // Populate modal fields with correct IDs
            $('#company_name').val(hostData.company_name);
            $('#contact_name').val(hostData.contact_name);
            $('#contact_email').val(hostData.contact_email);
            $('#contact_mobile').val(hostData.contact_mobile);
            $('#trade_license_number').val(hostData.trade_license_number);
            $('#expiry_date').val(hostData.expiry_date);
            $('#company_address').val(hostData.company_address);
            $('#categories_offered').val(hostData.categories_offered);
            
            // Update license file display if exists
            if (hostData.license) {
                const licenseDisplay = document.getElementById('current-license-display');
                licenseDisplay.innerHTML = `
                    <div class="current-file-info">
                        <p class="text-muted mb-1">Current License File:</p>
                        <div class="d-flex align-items-center">
                            <i class="fa fa-file-pdf text-danger me-2"></i>
                            <a href="${hostData.license}" target="_blank" class="text-decoration-none">
                                ${hostData.license.split('/').pop()}
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeCurrentLicense()">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                `;
            }
        } else {
            alert('Error loading host data: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading host data for editing: ' + error.message);
    });
}

// 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
    fetch('{{ url("/hosts") }}/' + hostId, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) {
            throw new Error(`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>
        `;
    });
}



// 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>';
        
        fetch(`{{ url("/hosts") }}/${hostId}`, {
            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 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 Edit Form Function
function submitEditHostForm() {
    console.log('submitEditHostForm called in host_info.blade.php');
    
    const editForm = document.getElementById('editHostForm');
    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('submitBtn01');
    const editModal = document.getElementById('exampleModalCenter1');
    
    // 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 form action URL
     const updateUrl = editForm.getAttribute('action');
    
    // Send AJAX request to update host
    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('Host updated successfully!');
            $('#exampleModalCenter1').modal('hide');
            location.reload();
        } else {
            alert('Error updating host: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        if (saveBtn) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = 'Save changes';
        }
    });
}

</script>