{% extends 'base.html' %}
{% load static %}

{% block title %}Delete Dashboard - Hospital Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Delete Dashboard</h4>
                        <h6>Confirm dashboard deletion and review impact</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'analytics:dashboard_detail' dashboard.pk|default:1 %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Warning Alert -->
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                        <div>
                            <h5 class="alert-heading mb-1">Warning: Permanent Action</h5>
                            <p class="mb-0">This action cannot be undone. The dashboard and all its widgets will be permanently deleted.</p>
                        </div>
                    </div>
                </div>

                <!-- Dashboard Information -->
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-trash me-2"></i>Dashboard to be Deleted
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="dashboard-info">
                                    <h4 class="text-danger">{{ dashboard.name|default:"Executive Overview" }}</h4>
                                    <p class="text-muted mb-3">{{ dashboard.description|default:"High-level KPIs and performance metrics for executive decision making" }}</p>
                                    
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Dashboard Type:</label>
                                                <span class="badge bg-primary">{{ dashboard.dashboard_type|default:"Executive" }}</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Status:</label>
                                                <span class="badge bg-success">
                                                    <i class="fas fa-circle me-1" style="font-size: 8px;"></i>Active
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Created By:</label>
                                                <span class="text-muted">{{ dashboard.created_by|default:"Dr. Sarah Johnson" }}</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Created Date:</label>
                                                <span class="text-muted">{{ dashboard.created_at|default:"January 15, 2024" }}</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Last Updated:</label>
                                                <span class="text-muted">{{ dashboard.updated_at|default:"2 hours ago" }}</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="info-item">
                                                <label class="form-label">Visibility:</label>
                                                <span class="text-muted">
                                                    {% if dashboard.is_public %}
                                                        <i class="fas fa-users me-1"></i>Shared
                                                    {% else %}
                                                        <i class="fas fa-lock me-1"></i>Private
                                                    {% endif %}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="dashboard-stats">
                                    <div class="stat-card text-center">
                                        <div class="stat-icon">
                                            <i class="fas fa-th-large text-primary"></i>
                                        </div>
                                        <div class="stat-content">
                                            <h4>{{ dashboard.widget_count|default:8 }}</h4>
                                            <span>Widgets</span>
                                        </div>
                                    </div>
                                    <div class="stat-card text-center">
                                        <div class="stat-icon">
                                            <i class="fas fa-eye text-success"></i>
                                        </div>
                                        <div class="stat-content">
                                            <h4>{{ dashboard.view_count|default:1247 }}</h4>
                                            <span>Total Views</span>
                                        </div>
                                    </div>
                                    <div class="stat-card text-center">
                                        <div class="stat-icon">
                                            <i class="fas fa-users text-info"></i>
                                        </div>
                                        <div class="stat-content">
                                            <h4>{{ dashboard.user_count|default:15 }}</h4>
                                            <span>Active Users</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Impact Analysis -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-chart-line me-2"></i>Deletion Impact Analysis
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-danger">What will be deleted:</h6>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="fas fa-th-large text-danger me-2"></i>
                                            Dashboard widgets
                                        </div>
                                        <span class="badge bg-danger rounded-pill">{{ dashboard.widget_count|default:8 }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="fas fa-cog text-danger me-2"></i>
                                            Layout configuration
                                        </div>
                                        <span class="badge bg-danger rounded-pill">1</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="fas fa-users text-danger me-2"></i>
                                            User access permissions
                                        </div>
                                        <span class="badge bg-danger rounded-pill">{{ dashboard.user_count|default:15 }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="fas fa-chart-bar text-danger me-2"></i>
                                            Usage analytics
                                        </div>
                                        <span class="badge bg-danger rounded-pill">All</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-warning">Affected users:</h6>
                                <div class="affected-users">
                                    <div class="user-item">
                                        <div class="user-avatar">
                                            <i class="fas fa-user-md text-primary"></i>
                                        </div>
                                        <div class="user-info">
                                            <h6>Dr. Sarah Johnson</h6>
                                            <small class="text-muted">Dashboard Owner</small>
                                        </div>
                                        <div class="user-impact">
                                            <span class="badge bg-warning">Owner</span>
                                        </div>
                                    </div>
                                    <div class="user-item">
                                        <div class="user-avatar">
                                            <i class="fas fa-user-md text-success"></i>
                                        </div>
                                        <div class="user-info">
                                            <h6>Dr. Michael Chen</h6>
                                            <small class="text-muted">Regular User</small>
                                        </div>
                                        <div class="user-impact">
                                            <span class="badge bg-info">Viewer</span>
                                        </div>
                                    </div>
                                    <div class="user-item">
                                        <div class="user-avatar">
                                            <i class="fas fa-user-nurse text-info"></i>
                                        </div>
                                        <div class="user-info">
                                            <h6>Nurse Manager Lisa Davis</h6>
                                            <small class="text-muted">Department Head</small>
                                        </div>
                                        <div class="user-impact">
                                            <span class="badge bg-info">Viewer</span>
                                        </div>
                                    </div>
                                    <div class="user-item">
                                        <div class="user-avatar">
                                            <i class="fas fa-user text-secondary"></i>
                                        </div>
                                        <div class="user-info">
                                            <h6>+12 more users</h6>
                                            <small class="text-muted">Additional viewers</small>
                                        </div>
                                        <div class="user-impact">
                                            <span class="badge bg-secondary">Viewers</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-warning mt-3">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Note:</strong> Users who have bookmarked this dashboard will lose access. Consider notifying them before deletion.
                        </div>
                    </div>
                </div>

                <!-- Alternative Actions -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-lightbulb me-2"></i>Alternative Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Consider these alternatives before permanently deleting the dashboard:</p>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <div class="action-icon">
                                        <i class="fas fa-eye-slash text-warning"></i>
                                    </div>
                                    <div class="action-content">
                                        <h6>Deactivate Dashboard</h6>
                                        <p class="text-muted">Hide the dashboard without deleting it. You can reactivate it later.</p>
                                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="deactivateDashboard()">
                                            <i class="fas fa-eye-slash me-1"></i>Deactivate Instead
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <div class="action-icon">
                                        <i class="fas fa-archive text-info"></i>
                                    </div>
                                    <div class="action-content">
                                        <h6>Archive Dashboard</h6>
                                        <p class="text-muted">Move to archive for future reference while removing from active use.</p>
                                        <button type="button" class="btn btn-outline-info btn-sm" onclick="archiveDashboard()">
                                            <i class="fas fa-archive me-1"></i>Archive Instead
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <div class="action-icon">
                                        <i class="fas fa-copy text-success"></i>
                                    </div>
                                    <div class="action-content">
                                        <h6>Create Backup Copy</h6>
                                        <p class="text-muted">Create a backup copy before deletion for future restoration.</p>
                                        <button type="button" class="btn btn-outline-success btn-sm" onclick="createBackup()">
                                            <i class="fas fa-copy me-1"></i>Create Backup
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alternative-action">
                                    <div class="action-icon">
                                        <i class="fas fa-share text-primary"></i>
                                    </div>
                                    <div class="action-content">
                                        <h6>Transfer Ownership</h6>
                                        <p class="text-muted">Transfer dashboard ownership to another user instead of deleting.</p>
                                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="transferOwnership()">
                                            <i class="fas fa-share me-1"></i>Transfer Ownership
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Confirmation Form -->
                <div class="card border-danger">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>Confirm Deletion
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="post" id="deleteForm">
                            {% csrf_token %}
                            
                            <div class="form-group">
                                <label for="confirmText" class="form-label">
                                    Type <strong>"{{ dashboard.name|default:"Executive Overview" }}"</strong> to confirm deletion:
                                </label>
                                <input type="text" class="form-control" id="confirmText" name="confirm_text" 
                                       placeholder="Type dashboard name here" required>
                                <div class="form-text text-danger">This confirmation is required to prevent accidental deletions.</div>
                            </div>

                            <div class="form-group">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="confirmUnderstand" name="confirm_understand" required>
                                    <label class="form-check-label" for="confirmUnderstand">
                                        I understand that this action cannot be undone and will permanently delete the dashboard and all its data.
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="confirmNotify" name="confirm_notify">
                                    <label class="form-check-label" for="confirmNotify">
                                        Send notification to affected users about this dashboard deletion.
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="deletionReason" class="form-label">Reason for Deletion (Optional):</label>
                                <textarea class="form-control" id="deletionReason" name="deletion_reason" rows="3" 
                                          placeholder="Provide a reason for this deletion for audit purposes..."></textarea>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <div class="deletion-actions">
                                    <a href="{% url 'analytics:dashboard_detail' dashboard.pk|default:1 %}" class="btn btn-secondary me-2">
                                        <i class="fas fa-times me-1"></i>Cancel
                                    </a>
                                    <a href="{% url 'analytics:dashboard_list' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-list me-1"></i>Back to List
                                    </a>
                                </div>
                                <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                                    <i class="fas fa-trash me-1"></i>Delete Dashboard Permanently
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmText = document.getElementById('confirmText');
    const confirmUnderstand = document.getElementById('confirmUnderstand');
    const deleteButton = document.getElementById('deleteButton');
    const deleteForm = document.getElementById('deleteForm');
    const expectedText = "{{ dashboard.name|default:'Executive Overview' }}";

    // Enable/disable delete button based on confirmation
    function checkConfirmation() {
        const textMatches = confirmText.value.trim() === expectedText;
        const checkboxChecked = confirmUnderstand.checked;
        
        deleteButton.disabled = !(textMatches && checkboxChecked);
        
        if (textMatches && checkboxChecked) {
            deleteButton.classList.remove('btn-danger');
            deleteButton.classList.add('btn-danger');
        }
    }

    confirmText.addEventListener('input', checkConfirmation);
    confirmUnderstand.addEventListener('change', checkConfirmation);

    // Form submission with final confirmation
    deleteForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const finalConfirm = confirm(
            'Are you absolutely sure you want to delete this dashboard?\n\n' +
            'This action is PERMANENT and cannot be undone.\n\n' +
            'Click OK to proceed with deletion or Cancel to abort.'
        );
        
        if (finalConfirm) {
            // Show loading state
            deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Deleting...';
            deleteButton.disabled = true;
            
            // Simulate deletion process
            setTimeout(() => {
                alert('Dashboard deleted successfully!');
                window.location.href = "{% url 'analytics:dashboard_list' %}";
            }, 2000);
        }
    });
});

function deactivateDashboard() {
    if (confirm('Deactivate this dashboard instead of deleting it?')) {
        alert('Dashboard deactivated successfully!');
        window.location.href = "{% url 'analytics:dashboard_detail' dashboard.pk|default:1 %}";
    }
}

function archiveDashboard() {
    if (confirm('Archive this dashboard instead of deleting it?')) {
        alert('Dashboard archived successfully!');
        window.location.href = "{% url 'analytics:dashboard_list' %}";
    }
}

function createBackup() {
    alert('Creating backup copy...');
    setTimeout(() => {
        alert('Backup created successfully! You can now proceed with deletion if needed.');
    }, 1500);
}

function transferOwnership() {
    const newOwner = prompt('Enter the username or email of the new owner:');
    if (newOwner) {
        alert(`Ownership transfer request sent to ${newOwner}. They will receive a notification to accept ownership.`);
    }
}
</script>

<style>
.info-item {
    margin-bottom: 15px;
}

.info-item label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #2c3e50;
}

.dashboard-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stat-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.stat-content h4 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 5px 0;
    color: #2c3e50;
}

.stat-content span {
    color: #6c757d;
    font-size: 0.875rem;
}

.affected-users {
    max-height: 300px;
    overflow-y: auto;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f8f9fa;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 1.2rem;
}

.user-info {
    flex: 1;
}

.user-info h6 {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
}

.user-impact {
    margin-left: 12px;
}

.alternative-action {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
    margin-bottom: 15px;
    height: 100%;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.action-content {
    flex: 1;
}

.action-content h6 {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #2c3e50;
}

.action-content p {
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.deletion-actions {
    display: flex;
    align-items: center;
}

#deleteButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .dashboard-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .stat-card {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
    
    .alternative-action {
        flex-direction: column;
        text-align: center;
    }
    
    .action-icon {
        margin-right: 0;
        margin-bottom: 15px;
        align-self: center;
    }
    
    .user-item {
        flex-direction: column;
        text-align: center;
    }
    
    .user-avatar {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .user-impact {
        margin-left: 0;
        margin-top: 10px;
    }
    
    .deletion-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .deletion-actions .btn {
        width: 100%;
    }
    
    #deleteButton {
        width: 100%;
        margin-top: 15px;
    }
}
</style>
{% endblock %}