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

{% block title %}{% trans "Clinical Note" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="fa fa-file-medical me-2"></i>{% trans "Clinical Note" %}
        </h1>
        <div class="btn-group">
            {% if not note.is_locked %}
            <a href="{% url 'documents:note-update' note.pk %}" class="btn btn-warning">
                <i class="fa fa-edit me-1"></i>{% trans "Edit" %}
            </a>
            {% endif %}
            <a href="{% url 'documents:note-pdf' note.pk %}" class="btn btn-danger" target="_blank">
                <i class="fa fa-file-pdf me-1"></i>{% trans "Export PDF" %}
            </a>
            <a href="{% url 'documents:note-list' %}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-1"></i>{% trans "Back to List" %}
            </a>
        </div>
    </div>



    <div class="row">
        <!-- Note Content -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">{{ note.title }}</h5>
                    {% if note.is_locked %}
                    <span class="badge bg-danger">
                        <i class="fa fa-lock me-1"></i>{% trans "Locked" %}
                    </span>
                    {% else %}
                    <span class="badge bg-success">
                        <i class="fa fa-unlock me-1"></i>{% trans "Unlocked" %}
                    </span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="note-content">
                        {{ note.content|safe }}
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="row">
                        <div class="col-md-6">
                            <small>
                                <i class="fa fa-user me-1"></i>
                                {% trans "Created by" %}: {{ note.created_by.get_full_name }}
                            </small>
                        </div>
                        <div class="col-md-6 text-end">
                            <small>
                                <i class="fa fa-clock me-1"></i>
                                {{ note.created_at|date:"Y-m-d H:i" }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Addenda -->
            {% if note.addenda.exists %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-plus-circle me-2"></i>{% trans "Addenda" %}
                    </h5>
                </div>
                <div class="card-body">
                    {% for addendum in note.addenda.all %}
                    <div class="addendum-item mb-3 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <strong>{% trans "Addendum" %} #{{ forloop.counter }}</strong>
                            <small class="text-muted">{{ addendum.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <div class="addendum-content">
                            {{ addendum.content|safe }}
                        </div>
                        <small class="text-muted">
                            <i class="fa fa-user me-1"></i>{{ addendum.created_by.get_full_name }}
                        </small>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Add Addendum (if locked) -->
            {% if note.is_locked and perms.documents.can_add_addendum %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-plus me-2"></i>{% trans "Add Addendum" %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'documents:note-add-addendum' note.pk %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="addendum-content" class="form-label">{% trans "Addendum Content" %}</label>
                            <textarea name="content" id="addendum-content" class="form-control" rows="5" required></textarea>
                            <small class="form-text text-muted">
                                {% trans "Addenda are used to add information to locked notes without modifying the original content." %}
                            </small>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save me-1"></i>{% trans "Add Addendum" %}
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Note Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">{% trans "Note Information" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">{% trans "Patient" %}:</dt>
                        <dd class="col-sm-7">
                            <a href="{% url 'core:patient-detail' note.patient.pk %}">
                                {% patient_name note.patient %}
                            </a>
                        </dd>

                        <dt class="col-sm-5">{% trans "Category" %}:</dt>
                        <dd class="col-sm-7">
                            <span class="badge bg-primary">{{ note.get_category_display }}</span>
                        </dd>

                        {% if note.encounter %}
                        <dt class="col-sm-5">{% trans "Encounter" %}:</dt>
                        <dd class="col-sm-7">
                            <a href="{% url 'clinic:encounter-detail' note.encounter.pk %}">
                                {{ note.encounter.encounter_date|date:"Y-m-d" }}
                            </a>
                        </dd>
                        {% endif %}

                        <dt class="col-sm-5">{% trans "Template" %}:</dt>
                        <dd class="col-sm-7">{{ note.template.name|default:"-" }}</dd>

                        <dt class="col-sm-5">{% trans "Status" %}:</dt>
                        <dd class="col-sm-7">
                            {% if note.is_locked %}
                            <span class="badge bg-danger">
                                <i class="fa fa-lock me-1"></i>{% trans "Locked" %}
                            </span>
                            {% else %}
                            <span class="badge bg-success">
                                <i class="fa fa-unlock me-1"></i>{% trans "Unlocked" %}
                            </span>
                            {% endif %}
                        </dd>

                        {% if note.locked_at %}
                        <dt class="col-sm-5">{% trans "Locked At" %}:</dt>
                        <dd class="col-sm-7">{{ note.locked_at|date:"Y-m-d H:i" }}</dd>

                        <dt class="col-sm-5">{% trans "Locked By" %}:</dt>
                        <dd class="col-sm-7">{{ note.locked_by.get_full_name }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Lock/Unlock Actions -->
            {% if perms.documents.can_lock_note %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">{% trans "Note Actions" %}</h5>
                </div>
                <div class="card-body">
                    {% if note.is_locked %}
                    <form method="post" action="{% url 'documents:note-unlock' note.pk %}" onsubmit="return confirm('{% trans "Are you sure you want to unlock this note?" %}');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="fa fa-unlock me-1"></i>{% trans "Unlock Note" %}
                        </button>
                        <small class="form-text text-muted mt-2 d-block">
                            {% trans "Unlocking will allow editing of the note content." %}
                        </small>
                    </form>
                    {% else %}
                    <form method="post" action="{% url 'documents:note-lock' note.pk %}" onsubmit="return confirm('{% trans "Are you sure you want to lock this note? This action cannot be undone." %}');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger w-100">
                            <i class="fa fa-lock me-1"></i>{% trans "Lock Note" %}
                        </button>
                        <small class="form-text text-muted mt-2 d-block">
                            {% trans "Locking will prevent further editing. Only addenda can be added." %}
                        </small>
                    </form>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Audit Trail -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-history me-2"></i>{% trans "Audit Trail" %}
                    </h5>
                </div>
                <div class="card-body">
                    {% if note.audit_logs.exists %}
                    <div class="timeline">
                        {% for log in note.audit_logs.all|slice:":10" %}
                        <div class="timeline-item mb-3">
                            <div class="d-flex justify-content-between">
                                <strong class="text-{% if log.action == 'LOCKED' %}danger{% elif log.action == 'UNLOCKED' %}warning{% elif log.action == 'CREATED' %}success{% else %}primary{% endif %}">
                                    {{ log.get_action_display }}
                                </strong>
                                <small class="text-muted">{{ log.timestamp|date:"Y-m-d H:i" }}</small>
                            </div>
                            <small class="text-muted">
                                <i class="fa fa-user me-1"></i>{{ log.user.get_full_name }}
                            </small>
                            {% if log.changes %}
                            <div class="mt-1">
                                <small class="text-muted">{{ log.changes }}</small>
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">{% trans "No audit logs available." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<style>
    .note-content {
        line-height: 1.8;
        font-size: 1rem;
    }
    .addendum-item {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.25rem;
    }
    .timeline-item {
        position: relative;
        padding-left: 1.5rem;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.5rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #0d6efd;
    }
</style>
{% endblock %}