{% load crispy_forms_tags %}

<div class="card mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">
            <i class="fas fa-sync-alt me-2"></i>Update Booking Status
        </h5>
    </div>
    <div class="card-body">
        <form id="statusUpdateForm" method="post" action="{% url 'bookings:update_status' booking.booking_number %}">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="status" class="form-label fw-bold">New Status</label>
                <select class="form-select" id="status" name="status" required>
                    <option value="" disabled selected>-- Select status --</option>
                    {% for status_choice in status_choices %}
                        <option value="{{ status_choice.0 }}" 
                                {% if status_choice.0 == booking.status %}selected{% endif}>
                            {{ status_choice.1 }}
                        </option>
                    {% endfor %}
                </select>
                <div class="form-text">
                    Current status: <span class="badge bg-{{ booking.status_badge }}">{{ booking.get_status_display }}</span>
                </div>
            </div>
            
            <div class="mb-3" id="notesContainer">
                <label for="notes" class="form-label fw-bold">Notes</label>
                <textarea class="form-control" id="notes" name="notes" rows="3" 
                          placeholder="Add any notes about this status update..."></textarea>
                <div class="form-text">
                    This note will be visible to the customer and saved in the booking history.
                </div>
            </div>
            
            <div class="alert alert-warning" id="cancellationWarning" style="display: none;">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Warning:</strong> Cancelling this booking will notify the customer and cannot be undone.
            </div>
            
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="fas fa-save me-1"></i> Update Status
                </button>
            </div>
        </form>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const statusSelect = document.getElementById('status');
    const cancellationWarning = document.getElementById('cancellationWarning');
    const submitBtn = document.getElementById('submitBtn');
    
    // Show/hide cancellation warning
    if (statusSelect) {
        statusSelect.addEventListener('change', function() {
            if (this.value === 'cancelled') {
                cancellationWarning.style.display = 'block';
                submitBtn.classList.remove('btn-primary');
                submitBtn.classList.add('btn-danger');
                submitBtn.innerHTML = '<i class="fas fa-ban me-1"></i> Confirm Cancellation';
            } else {
                cancellationWarning.style.display = 'none';
                submitBtn.classList.remove('btn-danger');
                submitBtn.classList.add('btn-primary');
                submitBtn.innerHTML = '<i class="fas fa-save me-1"></i> Update Status';
            }
        });
    }
    
    // Handle form submission
    const form = document.getElementById('statusUpdateForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Disable submit button to prevent double submission
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Updating...';
            
            // Submit form via AJAX
            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    const toast = new bootstrap.Toast(document.getElementById('statusUpdateToast'));
                    document.getElementById('toastMessage').textContent = `Status updated to ${data.status}`;
                    toast.show();
                    
                    // Update status badge
                    const statusBadge = document.querySelector('.status-badge');
                    if (statusBadge) {
                        statusBadge.className = `badge bg-${data.status_class}`;
                        statusBadge.textContent = data.status;
                    }
                    
                    // Close modal if open
                    const modal = bootstrap.Modal.getInstance(document.getElementById('statusUpdateModal'));
                    if (modal) {
                        modal.hide();
                    }
                    
                    // Reload the page after a short delay to show updated status
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    throw new Error(data.error || 'Failed to update status');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert(`Error: ${error.message}`);
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save me-1"></i> Try Again';
            });
        });
    }
});
</script>

<!-- Toast Notification -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="statusUpdateToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-success text-white">
            <strong class="me-auto">Success</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <i class="fas fa-check-circle me-2"></i>
            <span id="toastMessage">Status updated successfully!</span>
        </div>
    </div>
</div>
{% endblock %}