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

{% block title %}{{ template.title }} | Note Template Detail{% endblock %}

{% block css %}
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
<style>
    .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;
    }
    .template-header {
        background: linear-gradient(45deg, var(--bs-indigo), var(--bs-purple));
        color: white;
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .template-content {
        background-color: rgba(var(--bs-light-rgb), 0.5);
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--bs-gray-300);
    }
    .template-section {
        margin-bottom: 1.5rem;
    }
    .template-section-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--bs-primary);
    }
    .template-metadata {
        background-color: rgba(var(--bs-light-rgb), 0.5);
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--bs-gray-300);
    }
    .template-metadata-item {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--bs-gray-200);
    }
    .template-metadata-item:last-child {
        border-bottom: none;
    }
    .template-metadata-label {
        font-weight: 600;
        color: var(--bs-gray-700);
    }
    .template-metadata-value {
        text-align: right;
    }
    .usage-chart {
        height: 250px;
    }
    .version-history-item {
        display: flex;
        padding: 1rem 0;
        border-bottom: 1px solid var(--bs-gray-200);
    }
    .version-history-item:last-child {
        border-bottom: none;
    }
    .version-history-badge {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--bs-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 1rem;
    }
    .version-history-content {
        flex: 1;
    }
    .version-history-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .version-history-date {
        color: var(--bs-gray-600);
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    .version-history-changes {
        background-color: rgba(var(--bs-light-rgb), 0.5);
        padding: 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }
    .nav-tabs .nav-link.active {
        font-weight: bold;
        border-bottom: 3px solid var(--bs-primary);
    }
</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 active">{{ template.title }}</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">Note Template Detail <small>Standardized clinical documentation template</small></h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin template header -->
        <div class="template-header d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-1">{{ template.title }}</h2>
                <div class="d-flex align-items-center">
                    <span class="me-3">
                        <i class="bi bi-person-fill me-1"></i> Created by {{ template.created_by.get_full_name }}
                    </span>
                    <span class="me-3">
                        <i class="bi bi-calendar-event me-1"></i> Version {{ template.version }}
                    </span>
                    <span>
                        <i class="bi bi-bar-chart me-1"></i> Used {{ template.usage_count }} times
                    </span>
                </div>
            </div>
            <div>
                <span class="badge template-type-{{ template.note_type|lower }}">{{ template.get_note_type_display }}</span>
            </div>
        </div>
        <!-- end template header -->
        
        <!-- begin template content panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Template Content</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">
                <div class="template-content">
                    {% if template.structured_content %}
                        {% for section in template.structured_content %}
                        <div class="template-section">
                            <div class="template-section-title">{{ section.title }}</div>
                            <div class="template-section-content">{{ section.content|safe }}</div>
                        </div>
                        {% endfor %}
                    {% else %}
                        {{ template.content|safe }}
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- end template content panel -->
        
        <!-- begin template details panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Template Details</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 nav tabs -->
                <ul class="nav nav-tabs" id="templateDetailsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="metadata-tab" data-bs-toggle="tab" data-bs-target="#metadata" type="button" role="tab" aria-controls="metadata" aria-selected="true">Metadata</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="usage-tab" data-bs-toggle="tab" data-bs-target="#usage" type="button" role="tab" aria-controls="usage" aria-selected="false">Usage Statistics</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="versions-tab" data-bs-toggle="tab" data-bs-target="#versions" type="button" role="tab" aria-controls="versions" aria-selected="false">Version History</button>
                    </li>
                </ul>
                <!-- end nav tabs -->
                
                <!-- begin tab content -->
                <div class="tab-content" id="templateDetailsTabsContent">
                    <!-- Metadata Tab -->
                    <div class="tab-pane fade show active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
                        <div class="p-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="template-metadata">
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Template ID</div>
                                            <div class="template-metadata-value">{{ template.template_id }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Title</div>
                                            <div class="template-metadata-value">{{ template.title }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Note Type</div>
                                            <div class="template-metadata-value">{{ template.get_note_type_display }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Version</div>
                                            <div class="template-metadata-value">{{ template.version }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Status</div>
                                            <div class="template-metadata-value">{{ template.get_status_display }}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="template-metadata">
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Created By</div>
                                            <div class="template-metadata-value">{{ template.created_by.get_full_name }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Created</div>
                                            <div class="template-metadata-value">{{ template.created_at }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Last Updated</div>
                                            <div class="template-metadata-value">{{ template.updated_at }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Last Updated By</div>
                                            <div class="template-metadata-value">{{ template.updated_by.get_full_name }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Usage Count</div>
                                            <div class="template-metadata-value">{{ template.usage_count }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="template-metadata">
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Description</div>
                                            <div class="template-metadata-value">{{ template.description }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Department</div>
                                            <div class="template-metadata-value">{{ template.department.name|default:"All Departments" }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Specialty</div>
                                            <div class="template-metadata-value">{{ template.specialty.name|default:"All Specialties" }}</div>
                                        </div>
                                        <div class="template-metadata-item">
                                            <div class="template-metadata-label">Keywords</div>
                                            <div class="template-metadata-value">
                                                {% if template.keywords %}
                                                    {% for keyword in template.keywords %}
                                                        <span class="badge bg-secondary me-1">{{ keyword }}</span>
                                                    {% endfor %}
                                                {% else %}
                                                    None
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Usage Statistics Tab -->
                    <div class="tab-pane fade" id="usage" role="tabpanel" aria-labelledby="usage-tab">
                        <div class="p-3">
                            <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 Over Time</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="usage-chart" id="usageChart"></div>
                                        </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">Usage by Department</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="usage-chart" id="departmentChart"></div>
                                        </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">Recent Usage</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>Date</th>
                                                            <th>User</th>
                                                            <th>Patient</th>
                                                            <th>Note Type</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for usage in template.recent_usage %}
                                                        <tr>
                                                            <td>{{ usage.created_at }}</td>
                                                            <td>{{ usage.user.get_full_name }}</td>
                                                            <td>{{ usage.patient.get_full_name }}</td>
                                                            <td>{{ usage.get_note_type_display }}</td>
                                                            <td>
                                                                <a href="{% url 'emr:clinical_note_detail' usage.id %}" class="btn btn-sm btn-primary">
                                                                    <i class="fa fa-eye"></i> View Note
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        {% empty %}
                                                        <tr>
                                                            <td colspan="5" class="text-center">No recent usage data available.</td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Version History Tab -->
                    <div class="tab-pane fade" id="versions" role="tabpanel" aria-labelledby="versions-tab">
                        <div class="p-3">
                            <h5 class="mb-3">Version History</h5>
                            
                            <div class="version-history">
                                {% for version in template.version_history %}
                                <div class="version-history-item">
                                    <div class="version-history-badge">
                                        {{ version.version }}
                                    </div>
                                    <div class="version-history-content">
                                        <div class="version-history-title">{{ version.title }}</div>
                                        <div class="version-history-date">
                                            {{ version.created_at }} by {{ version.created_by.get_full_name }}
                                        </div>
                                        <div class="version-history-changes">
                                            <strong>Changes:</strong> {{ version.change_description }}
                                        </div>
                                        <div class="mt-2">
                                            <button class="btn btn-sm btn-outline-primary view-version-btn" data-version-id="{{ version.id }}">
                                                <i class="fa fa-eye me-1"></i> View This Version
                                            </button>
                                            <button class="btn btn-sm btn-outline-secondary compare-version-btn" data-version-id="{{ version.id }}">
                                                <i class="fa fa-exchange-alt me-1"></i> Compare with Current
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% empty %}
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle me-2"></i> No version history available for this template.
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end tab content -->
            </div>
        </div>
        <!-- end template details panel -->
        
        <!-- begin action buttons -->
        <div class="d-flex justify-content-between mt-3">
            <div>
                <a href="{% url 'emr:note_template_list' %}" class="btn btn-secondary me-2">
                    <i class="fa fa-arrow-left me-1"></i> Back to Templates
                </a>
            </div>
            <div>
                <a href="{% url 'emr:clinical_note_create' %}?template={{ template.id }}" class="btn btn-success me-2">
                    <i class="fa fa-file-alt me-1"></i> Use Template
                </a>
                <a href="{% url 'emr:note_template_duplicate' template.id %}" class="btn btn-info me-2">
                    <i class="fa fa-copy me-1"></i> Duplicate
                </a>
                <a href="{% url 'emr:note_template_update' template.id %}" class="btn btn-primary me-2">
                    <i class="fa fa-edit me-1"></i> Edit
                </a>
                <a href="{% url 'emr:note_template_delete' template.id %}" class="btn btn-danger">
                    <i class="fa fa-trash me-1"></i> Delete
                </a>
            </div>
        </div>
        <!-- end action buttons -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->

<!-- begin version preview modal -->
<div class="modal fade" id="versionPreviewModal" tabindex="-1" aria-labelledby="versionPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="versionPreviewModalLabel">Version Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="versionPreviewContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="restoreVersionBtn">Restore This Version</button>
            </div>
        </div>
    </div>
</div>
<!-- end version preview modal -->

<!-- begin version compare modal -->
<div class="modal fade" id="versionCompareModal" tabindex="-1" aria-labelledby="versionCompareModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="versionCompareModalLabel">Compare Versions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-center">Previous Version</h6>
                        <div id="previousVersionContent" class="border p-3 bg-light"></div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-center">Current Version</h6>
                        <div id="currentVersionContent" class="border p-3 bg-light"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- end version compare modal -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/apexcharts/dist/apexcharts.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
    
    // Usage chart
    const usageChartOptions = {
        chart: {
            type: 'line',
            height: 250,
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Usage Count',
            data: {{ template.usage_data|safe }}
        }],
        xaxis: {
            categories: {{ template.usage_labels|safe }},
            labels: {
                rotateAlways: true,
                rotate: -45,
                offsetY: 0
            }
        },
        yaxis: {
            title: {
                text: 'Number of Uses'
            },
            min: 0
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: ['#3498db'],
        markers: {
            size: 4
        },
        tooltip: {
            y: {
                formatter: function(value) {
                    return value + ' uses';
                }
            }
        }
    };
    
    const usageChart = new ApexCharts(document.querySelector("#usageChart"), usageChartOptions);
    usageChart.render();
    
    // Department chart
    const departmentChartOptions = {
        chart: {
            type: 'pie',
            height: 250
        },
        series: {{ template.department_data|safe }},
        labels: {{ template.department_labels|safe }},
        colors: ['#3498db', '#2ecc71', '#f1c40f', '#e74c3c', '#9b59b6', '#1abc9c'],
        legend: {
            position: 'bottom'
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };
    
    const departmentChart = new ApexCharts(document.querySelector("#departmentChart"), departmentChartOptions);
    departmentChart.render();
    
    // View version button
    $('.view-version-btn').click(function() {
        const versionId = $(this).data('version-id');
        
        // AJAX call to get version content
        $.ajax({
            url: `/emr/note-templates/version/${versionId}/`,
            type: 'GET',
            success: function(data) {
                $('#versionPreviewContent').html(data.content);
                $('#versionPreviewModalLabel').text(`Version ${data.version} - ${data.title}`);
                $('#restoreVersionBtn').data('version-id', versionId);
                $('#versionPreviewModal').modal('show');
            },
            error: function() {
                alert('Error loading version preview');
            }
        });
    });
    
    // Compare version button
    $('.compare-version-btn').click(function() {
        const versionId = $(this).data('version-id');
        
        // AJAX call to get version comparison
        $.ajax({
            url: `/emr/note-templates/compare/${versionId}/${template.id}/`,
            type: 'GET',
            success: function(data) {
                $('#previousVersionContent').html(data.previous_content);
                $('#currentVersionContent').html(data.current_content);
                $('#versionCompareModalLabel').text(`Compare Version ${data.previous_version} with Current`);
                $('#versionCompareModal').modal('show');
            },
            error: function() {
                alert('Error loading version comparison');
            }
        });
    });
    
    // Restore version button
    $('#restoreVersionBtn').click(function() {
        const versionId = $(this).data('version-id');
        
        if (confirm('Are you sure you want to restore this version? This will create a new version based on this historical version.')) {
            // AJAX call to restore version
            $.ajax({
                url: `/emr/note-templates/restore/${versionId}/`,
                type: 'POST',
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(data) {
                    alert('Version restored successfully!');
                    window.location.reload();
                },
                error: function() {
                    alert('Error restoring version');
                }
            });
        }
    });
});
</script>
{% endblock %}