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

{% block title %}Delete Note Template: {{ template.title }}{% endblock %}

{% block css %}
<style>
    .delete-warning {
        background-color: rgba(var(--bs-danger-rgb), 0.1);
        border-left: 4px solid var(--bs-danger);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .impact-assessment {
        background-color: rgba(var(--bs-warning-rgb), 0.1);
        border-left: 4px solid var(--bs-warning);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .alternative-actions {
        background-color: rgba(var(--bs-info-rgb), 0.1);
        border-left: 4px solid var(--bs-info);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .template-badge {
        font-size: 0.85rem;
        padding: 0.35em 0.65em;
    }
    .template-type-progress {
        background-color: var(--bs-primary);
        color: white;
    }
    .template-type-admission {
        background-color: var(--bs-danger);
        color: white;
    }
    .template-type-discharge {
        background-color: var(--bs-success);
        color: white;
    }
    .template-type-procedure {
        background-color: var(--bs-warning);
        color: white;
    }
    .template-type-consultation {
        background-color: var(--bs-info);
        color: white;
    }
    .usage-chart {
        height: 200px;
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'emr:note_template_list' %}">Note Templates</a></li>
    <li class="breadcrumb-item"><a href="{% url 'emr:note_template_detail' template.id %}">{{ template.title }}</a></li>
    <li class="breadcrumb-item active">Delete</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">Delete Note Template <small>Confirm template deletion</small></h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Confirm Deletion</h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <!-- begin delete warning -->
                <div class="delete-warning">
                    <h4 class="text-danger">
                        <i class="fa fa-exclamation-triangle me-2"></i> Warning: You are about to delete a note template
                    </h4>
                    <p>
                        You are about to permanently delete the note template <strong>"{{ template.title }}"</strong>. 
                        This action cannot be undone.
                    </p>
                    <p>
                        Deleting this template will remove it from the template library and it will no longer be available 
                        for creating new clinical notes. This will not affect existing notes that were created using this template.
                    </p>
                    {% if template.usage_count > 0 %}
                    <div class="alert alert-danger">
                        <strong>Warning:</strong> This template has been used {{ template.usage_count }} times to create clinical notes. 
                        Consider archiving instead of deleting.
                    </div>
                    {% endif %}
                </div>
                <!-- end delete warning -->
                
                <!-- begin template summary -->
                <h5 class="mb-3">Template Summary</h5>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th width="25%">Template ID</th>
                                <td>{{ template.template_id }}</td>
                            </tr>
                            <tr>
                                <th>Title</th>
                                <td>{{ template.title }}</td>
                            </tr>
                            <tr>
                                <th>Note Type</th>
                                <td>
                                    <span class="badge template-type-{{ template.note_type|lower }}">
                                        {{ template.get_note_type_display }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Version</th>
                                <td>{{ template.version }}</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>{{ template.get_status_display }}</td>
                            </tr>
                            <tr>
                                <th>Created By</th>
                                <td>{{ template.created_by.get_full_name }}</td>
                            </tr>
                            <tr>
                                <th>Created</th>
                                <td>{{ template.created_at }}</td>
                            </tr>
                            <tr>
                                <th>Last Updated</th>
                                <td>{{ template.updated_at }}</td>
                            </tr>
                            <tr>
                                <th>Usage Count</th>
                                <td>{{ template.usage_count }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- end template summary -->
                
                <!-- begin impact assessment -->
                <div class="impact-assessment mt-4">
                    <h5>
                        <i class="fa fa-exclamation-circle me-2"></i> Impact Assessment
                    </h5>
                    <p>Deleting this template will have the following impact:</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <h6 class="card-title mb-0">Usage Statistics</h6>
                                </div>
                                <div class="card-body">
                                    <div class="usage-chart" id="usageChart"></div>
                                </div>
                                <div class="card-footer bg-light">
                                    <small class="text-muted">Template usage over the past 6 months</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <h6 class="card-title mb-0">Department Usage</h6>
                                </div>
                                <div class="card-body">
                                    {% if template.department_usage %}
                                    <ul class="mb-0">
                                        {% for dept in template.department_usage %}
                                        <li>{{ dept.name }} ({{ dept.count }} uses)</li>
                                        {% endfor %}
                                    </ul>
                                    {% else %}
                                    <p class="mb-0">No department usage data available.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <h6 class="card-title mb-0">Version History</h6>
                                </div>
                                <div class="card-body">
                                    {% if template.version_history %}
                                    <p>This template has <strong>{{ template.version_history|length }}</strong> version(s) in its history:</p>
                                    <ul class="mb-0">
                                        {% for version in template.version_history %}
                                        <li>
                                            Version {{ version.version }} - Created on {{ version.created_at|date:"M d, Y" }} by {{ version.created_by.get_full_name }}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                    <p class="mt-2 mb-0 text-danger">
                                        <i class="fa fa-exclamation-triangle me-1"></i> All version history will be permanently deleted.
                                    </p>
                                    {% else %}
                                    <p class="mb-0">No version history available for this template.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end impact assessment -->
                
                <!-- begin alternative actions -->
                <div class="alternative-actions">
                    <h5>
                        <i class="fa fa-lightbulb me-2"></i> Alternative Actions
                    </h5>
                    <p>Instead of deleting this template, consider these alternatives:</p>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Archive Template</h6>
                                    <p class="card-text">Archive the template to make it unavailable for new notes while preserving it for reference.</p>
                                    <a href="{% url 'emr:note_template_archive' template.id %}" class="btn btn-sm btn-primary">
                                        <i class="fa fa-archive me-1"></i> Archive Template
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Mark as Deprecated</h6>
                                    <p class="card-text">Mark the template as deprecated to indicate it should no longer be used.</p>
                                    <a href="{% url 'emr:note_template_deprecate' template.id %}" class="btn btn-sm btn-warning">
                                        <i class="fa fa-ban me-1"></i> Mark as Deprecated
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Create New Version</h6>
                                    <p class="card-text">Create a new version of this template instead of deleting it.</p>
                                    <a href="{% url 'emr:note_template_update' template.id %}" class="btn btn-sm btn-success">
                                        <i class="fa fa-code-branch me-1"></i> Create New Version
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end alternative actions -->
                
                <!-- begin delete confirmation -->
                <form method="post" class="mt-4">
                    {% csrf_token %}
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                        <label class="form-check-label" for="confirmDelete">
                            I understand that this action cannot be undone and confirm that I want to permanently delete this template.
                        </label>
                    </div>
                    
                    {% if template.usage_count > 0 %}
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirmUsageDelete" required>
                        <label class="form-check-label" for="confirmUsageDelete">
                            I understand that this template has been used {{ template.usage_count }} times and confirm that I still want to delete it.
                        </label>
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <label for="deleteReason" class="form-label">Reason for Deletion</label>
                        <textarea class="form-control" id="deleteReason" name="delete_reason" rows="3" required></textarea>
                        <div class="form-text">Please provide a detailed reason for deleting this template.</div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'emr:note_template_detail' template.id %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                            <i class="fa fa-trash me-1"></i> Delete Template
                        </button>
                    </div>
                </form>
                <!-- end delete confirmation -->
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/apexcharts/dist/apexcharts.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Usage chart
    const usageChartOptions = {
        chart: {
            type: 'bar',
            height: 200,
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Usage Count',
            data: {{ template.usage_data|default:"[0, 0, 0, 0, 0, 0]"|safe }}
        }],
        xaxis: {
            categories: {{ template.usage_labels|default:"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"|safe }},
        },
        yaxis: {
            title: {
                text: 'Number of Uses'
            },
            min: 0
        },
        colors: ['#3498db'],
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: false,
            }
        }
    };
    
    const usageChart = new ApexCharts(document.querySelector("#usageChart"), usageChartOptions);
    usageChart.render();
    
    // Enable delete button only when confirmation checkbox is checked
    function updateDeleteButton() {
        const confirmDeleteChecked = $('#confirmDelete').is(':checked');
        const confirmUsageDeleteChecked = $('#confirmUsageDelete').length ? $('#confirmUsageDelete').is(':checked') : true;
        const deleteReasonFilled = $('#deleteReason').val().trim() !== '';
        
        if (confirmDeleteChecked && confirmUsageDeleteChecked && deleteReasonFilled) {
            $('#deleteButton').prop('disabled', false);
        } else {
            $('#deleteButton').prop('disabled', true);
        }
    }
    
    $('#confirmDelete, #confirmUsageDelete, #deleteReason').on('change keyup', updateDeleteButton);
});
</script>
{% endblock %}