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

{% block title %}Delete Consent Template - {{ template.name }}{% endblock %}

{% block extra_css %}
<style>
    .delete-confirmation {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 3rem;
        margin: 2rem auto;
        max-width: 800px;
    }
    .warning-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    .warning-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 2.5rem;
    }
    .template-info {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .impact-analysis {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 1.5rem;
        border-radius: 0 10px 10px 0;
        margin-bottom: 2rem;
    }
    .danger-zone {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .confirmation-steps {
        background: #e2e3e5;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .step-item {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0.75rem;
        background: white;
        border-radius: 8px;
        border-left: 4px solid #6c757d;
    }
    .step-item.completed {
        border-left-color: #28a745;
    }
    .step-number {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #6c757d;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        font-weight: bold;
    }
    .step-item.completed .step-number {
        background: #28a745;
    }
    .usage-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .stat-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
    }
    .stat-value {
        font-size: 1.5rem;
        font-weight: bold;
        color: #dc3545;
    }
    .alternative-actions {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .confirmation-input {
        background: #fff;
        border: 2px solid #dc3545;
        border-radius: 8px;
        padding: 0.75rem;
        font-family: monospace;
        font-size: 1.1rem;
    }
    .confirmation-input:focus {
        border-color: #c82333;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-4">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
                <li class="breadcrumb-item"><a href="{% url 'patients:consent_template_list' %}">Consent Templates</a></li>
                <li class="breadcrumb-item"><a href="{% url 'patients:consent_template_detail' template.id %}">{{ template.name }}</a></li>
                <li class="breadcrumb-item active">Delete Template</li>
            </ol>
        </div>
    </div>

    <div class="delete-confirmation">
        <!-- Warning Header -->
        <div class="warning-header">
            <div class="warning-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h2 class="mb-2">Delete Consent Template</h2>
            <p class="mb-0 opacity-75">This action cannot be undone. Please review the impact before proceeding.</p>
        </div>

        <!-- Template Information -->
        <div class="template-info">
            <h5 class="mb-3">
                <i class="fas fa-file-contract me-2"></i>Template Details
            </h5>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label text-muted">Template Name</label>
                    <div class="fw-bold">{{ template.name }}</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label text-muted">Category</label>
                    <div class="fw-bold">{{ template.get_category_display }}</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label text-muted">Version</label>
                    <div class="fw-bold">{{ template.version|default:"1.0" }}</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label text-muted">Status</label>
                    <div>
                        {% if template.status == 'active' %}
                            <span class="badge bg-success">Active</span>
                        {% elif template.status == 'draft' %}
                            <span class="badge bg-warning">Draft</span>
                        {% elif template.status == 'archived' %}
                            <span class="badge bg-secondary">Archived</span>
                        {% else %}
                            <span class="badge bg-info">{{ template.get_status_display }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label text-muted">Description</label>
                    <div class="fw-bold">{{ template.description|default:"No description available" }}</div>
                </div>
            </div>
        </div>

        <!-- Usage Statistics -->
        <div class="usage-stats">
            <div class="stat-card">
                <div class="stat-value">{{ usage_stats.total_usage|default:0 }}</div>
                <div class="text-muted small">Total Uses</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ usage_stats.active_consents|default:0 }}</div>
                <div class="text-muted small">Active Consents</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ usage_stats.pending_consents|default:0 }}</div>
                <div class="text-muted small">Pending Consents</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ usage_stats.last_used|timesince|default:"Never" }}</div>
                <div class="text-muted small">Last Used</div>
            </div>
        </div>

        <!-- Impact Analysis -->
        <div class="impact-analysis">
            <h6 class="mb-3">
                <i class="fas fa-exclamation-circle me-2"></i>Impact Analysis
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-users text-warning me-2"></i>
                        <div>
                            <div class="fw-bold">{{ impact.affected_patients|default:0 }} Patients</div>
                            <small class="text-muted">Will lose access to this template</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-file-signature text-warning me-2"></i>
                        <div>
                            <div class="fw-bold">{{ impact.dependent_consents|default:0 }} Consents</div>
                            <small class="text-muted">Currently using this template</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-calendar-alt text-warning me-2"></i>
                        <div>
                            <div class="fw-bold">{{ impact.scheduled_procedures|default:0 }} Procedures</div>
                            <small class="text-muted">Scheduled with this template</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-link text-warning me-2"></i>
                        <div>
                            <div class="fw-bold">{{ impact.template_references|default:0 }} References</div>
                            <small class="text-muted">From other templates</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alternative Actions -->
        <div class="alternative-actions">
            <h6 class="mb-3">
                <i class="fas fa-lightbulb me-2"></i>Consider These Alternatives
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-archive text-info me-3"></i>
                        <div>
                            <div class="fw-bold">Archive Template</div>
                            <small class="text-muted">Hide from active use but preserve data</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-edit text-success me-3"></i>
                        <div>
                            <div class="fw-bold">Modify Template</div>
                            <small class="text-muted">Update content instead of deleting</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-copy text-primary me-3"></i>
                        <div>
                            <div class="fw-bold">Create New Version</div>
                            <small class="text-muted">Duplicate and modify for future use</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-download text-secondary me-3"></i>
                        <div>
                            <div class="fw-bold">Export Template</div>
                            <small class="text-muted">Save a backup before deletion</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <div class="btn-group">
                    <a href="{% url 'patients:consent_template_archive' template.id %}" class="btn btn-info btn-sm">
                        <i class="fas fa-archive me-1"></i>Archive Instead
                    </a>
                    <a href="{% url 'patients:consent_template_edit' template.id %}" class="btn btn-success btn-sm">
                        <i class="fas fa-edit me-1"></i>Edit Template
                    </a>
                    <a href="{% url 'patients:consent_template_duplicate' template.id %}" class="btn btn-primary btn-sm">
                        <i class="fas fa-copy me-1"></i>Duplicate First
                    </a>
                    <a href="{% url 'patients:consent_template_export' template.id %}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-download me-1"></i>Export Backup
                    </a>
                </div>
            </div>
        </div>

        <!-- Danger Zone -->
        <div class="danger-zone">
            <h6 class="text-danger mb-3">
                <i class="fas fa-skull-crossbones me-2"></i>Danger Zone
            </h6>
            <p class="mb-3">
                <strong>Warning:</strong> Deleting this template will permanently remove it from the system. 
                This action affects:
            </p>
            <ul class="mb-3">
                <li>All historical records using this template</li>
                <li>Audit trails and compliance documentation</li>
                <li>Related consent forms and signatures</li>
                <li>Template usage analytics and reports</li>
            </ul>
            <div class="alert alert-danger mb-0">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>This action cannot be undone!</strong> Consider archiving instead of permanent deletion.
            </div>
        </div>

        <!-- Confirmation Steps -->
        <div class="confirmation-steps">
            <h6 class="mb-3">
                <i class="fas fa-list-check me-2"></i>Deletion Confirmation Steps
            </h6>
            
            <div class="step-item" id="step1">
                <div class="step-number">1</div>
                <div class="flex-grow-1">
                    <div class="fw-bold">Review Impact Analysis</div>
                    <small class="text-muted">Understand what will be affected by this deletion</small>
                </div>
                <div>
                    <i class="fas fa-check text-success"></i>
                </div>
            </div>
            
            <div class="step-item" id="step2">
                <div class="step-number">2</div>
                <div class="flex-grow-1">
                    <div class="fw-bold">Backup Template (Recommended)</div>
                    <small class="text-muted">Export template before deletion</small>
                </div>
                <div>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="exportTemplate()">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
            </div>
            
            <div class="step-item" id="step3">
                <div class="step-number">3</div>
                <div class="flex-grow-1">
                    <div class="fw-bold">Type Confirmation</div>
                    <small class="text-muted">Type "DELETE {{ template.name }}" to confirm</small>
                </div>
            </div>
        </div>

        <!-- Confirmation Form -->
        <form method="post" id="deleteForm">
            {% csrf_token %}
            <div class="mb-4">
                <label class="form-label fw-bold">
                    Type "DELETE {{ template.name }}" to confirm deletion:
                </label>
                <input type="text" class="form-control confirmation-input" id="confirmationInput" 
                       placeholder="DELETE {{ template.name }}" autocomplete="off">
                <div class="form-text text-danger">
                    This confirmation is case-sensitive and must match exactly.
                </div>
            </div>

            <div class="mb-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="confirmUnderstand" required>
                    <label class="form-check-label" for="confirmUnderstand">
                        I understand that this action cannot be undone and will permanently delete the template and all associated data.
                    </label>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label">Reason for Deletion (Optional)</label>
                <textarea class="form-control" name="deletion_reason" rows="3" 
                          placeholder="Please provide a reason for deleting this template..."></textarea>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{% url 'patients:consent_template_detail' template.id %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Cancel
                    </a>
                    <a href="{% url 'patients:consent_template_archive' template.id %}" class="btn btn-warning ms-2">
                        <i class="fas fa-archive me-2"></i>Archive Instead
                    </a>
                </div>
                <div>
                    <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                        <i class="fas fa-trash me-2"></i>Permanently Delete Template
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    const confirmationInput = $('#confirmationInput');
    const confirmCheckbox = $('#confirmUnderstand');
    const deleteButton = $('#deleteButton');
    const expectedText = 'DELETE {{ template.name }}';
    
    function checkConfirmation() {
        const inputValue = confirmationInput.val();
        const isTextCorrect = inputValue === expectedText;
        const isCheckboxChecked = confirmCheckbox.is(':checked');
        
        if (isTextCorrect) {
            confirmationInput.removeClass('is-invalid').addClass('is-valid');
            $('#step3').addClass('completed');
        } else {
            confirmationInput.removeClass('is-valid').addClass('is-invalid');
            $('#step3').removeClass('completed');
        }
        
        deleteButton.prop('disabled', !(isTextCorrect && isCheckboxChecked));
    }
    
    confirmationInput.on('input', checkConfirmation);
    confirmCheckbox.on('change', checkConfirmation);
    
    // Form submission with additional confirmation
    $('#deleteForm').on('submit', function(e) {
        e.preventDefault();
        
        if (!confirm('Are you absolutely sure you want to permanently delete this template? This action cannot be undone.')) {
            return;
        }
        
        // Show loading state
        deleteButton.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Deleting...');
        
        // Submit form
        this.submit();
    });
});

function exportTemplate() {
    window.location.href = '{% url "patients:consent_template_export" template.id %}';
    
    // Mark step 2 as completed
    setTimeout(function() {
        $('#step2').addClass('completed');
    }, 1000);
}

// Auto-scroll to confirmation input when page loads
$(window).on('load', function() {
    setTimeout(function() {
        $('#confirmationInput').focus();
    }, 500);
});
</script>
{% endblock %}