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

{% block title %}Surgical Note - {{ note.patient.get_full_name }}{% endblock %}

{% block css %}
<style>
.note-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.note-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
}

.section-content {
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #495057;
    font-weight: 500;
}

.note-status {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.status-draft { background: #f8f9fa; color: #6c757d; }
.status-in-progress { background: #fff3cd; color: #856404; }
.status-completed { background: #d4edda; color: #155724; }
.status-signed { background: #d1ecf1; color: #0c5460; }
.status-amended { background: #f8d7da; color: #721c24; }

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.priority-low { background: #d4edda; color: #155724; }
.priority-medium { background: #fff3cd; color: #856404; }
.priority-high { background: #f8d7da; color: #721c24; }
.priority-critical { background: #f5c6cb; color: #721c24; }

.signature-section {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
}

.signature-box {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0;
    width: 2px;
    height: 100%;
    background: #dee2e6;
}

.timeline-item:last-child:before {
    display: none;
}

.timeline-marker {
    position: absolute;
    left: -2.5rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
}

.print-section {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

@media print {
    .no-print {
        display: none !important;
    }
    
    .note-header {
        background: #f8f9fa !important;
        color: #495057 !important;
        border: 1px solid #dee2e6 !important;
    }
    
    .section-header {
        background: #f8f9fa !important;
    }
}

@media (max-width: 768px) {
    .note-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline {
        padding-left: 1rem;
    }
    
    .timeline-item:before {
        left: -1rem;
    }
    
    .timeline-marker {
        left: -1.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-3 no-print">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:surgical_note_list' %}">Surgical Notes</a></li>
                <li class="breadcrumb-item active">{{ note.patient.get_full_name }}</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-file-medical me-2"></i>Surgical Note Details
            </h1>
        </div>
        <div class="ms-auto">
            <div class="btn-group">
                <a href="{% url 'operating_theatre:surgical_note_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Back to List
                </a>
                {% if note.status != 'signed' %}
{#                <a href="{% url 'operating_theatre:surgical_note_edit' note.pk %}" class="btn btn-warning">#}
{#                    <i class="fas fa-edit me-1"></i>Edit#}
{#                </a>#}
                {% endif %}
                <button class="btn btn-success" onclick="printNote()">
                    <i class="fas fa-print me-1"></i>Print
                </button>
                <div class="btn-group">
                    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-cog me-1"></i>Actions
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="exportNote('pdf')">
                            <i class="fas fa-file-pdf me-2"></i>Export as PDF
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="exportNote('word')">
                            <i class="fas fa-file-word me-2"></i>Export as Word
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        {% if note.status == 'completed' and not note.is_signed %}
                        <li><a class="dropdown-item" href="#" onclick="signNote()">
                            <i class="fas fa-signature me-2"></i>Sign Note
                        </a></li>
                        {% endif %}
                        {% if note.status == 'signed' %}
                        <li><a class="dropdown-item" href="#" onclick="amendNote()">
                            <i class="fas fa-edit me-2"></i>Create Amendment
                        </a></li>
                        {% endif %}
                        <li><a class="dropdown-item" href="#" onclick="duplicateNote()">
                            <i class="fas fa-copy me-2"></i>Duplicate Note
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Note Header -->
    <div class="note-header">
        <div class="row">
            <div class="col-md-8">
                <h2 class="mb-3">{{ note.procedure_name }}</h2>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-1"><strong>Patient:</strong> {{ note.patient.get_full_name }}</p>
                        <p class="mb-1"><strong>Patient ID:</strong> {{ note.patient.patient_id }}</p>
                        <p class="mb-1"><strong>Date of Birth:</strong> {{ note.patient.date_of_birth|date:"M d, Y" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-1"><strong>Surgery Date:</strong> {{ note.surgery_date|date:"M d, Y" }}</p>
                        <p class="mb-1"><strong>Surgeon:</strong> {{ note.surgeon.get_full_name }}</p>
                        <p class="mb-1"><strong>Operating Room:</strong> {{ note.operating_room.name }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-end">
                <div class="mb-3">
                    <span class="note-status status-{{ note.status }}">
                        {{ note.get_status_display }}
                    </span>
                </div>
                <div class="mb-2">
                    <span class="priority-badge priority-{{ note.priority }}">
                        {{ note.get_priority_display }} Priority
                    </span>
                </div>
                <p class="mb-0"><small>Note ID: {{ note.id }}</small></p>
            </div>
        </div>
    </div>

    <!-- Pre-operative Information -->
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-clipboard-list me-2"></i>Pre-operative Information
        </div>
        <div class="section-content">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Pre-operative Diagnosis</div>
                    <div class="info-value">{{ note.preoperative_diagnosis|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Planned Procedure</div>
                    <div class="info-value">{{ note.planned_procedure|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Anesthesia Type</div>
                    <div class="info-value">{{ note.get_anesthesia_type_display|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">ASA Classification</div>
                    <div class="info-value">{{ note.asa_classification|default:"Not specified" }}</div>
                </div>
            </div>
            
            {% if note.preoperative_notes %}
            <div class="mt-3">
                <div class="info-label">Pre-operative Notes</div>
                <div class="info-value">{{ note.preoperative_notes|linebreaks }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Operative Procedure -->
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-procedures me-2"></i>Operative Procedure
        </div>
        <div class="section-content">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Actual Procedure</div>
                    <div class="info-value">{{ note.actual_procedure|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Procedure Duration</div>
                    <div class="info-value">{{ note.procedure_duration|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Incision Type</div>
                    <div class="info-value">{{ note.incision_type|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Closure Method</div>
                    <div class="info-value">{{ note.closure_method|default:"Not specified" }}</div>
                </div>
            </div>
            
            {% if note.operative_findings %}
            <div class="mt-3">
                <div class="info-label">Operative Findings</div>
                <div class="info-value">{{ note.operative_findings|linebreaks }}</div>
            </div>
            {% endif %}
            
            {% if note.procedure_description %}
            <div class="mt-3">
                <div class="info-label">Detailed Procedure Description</div>
                <div class="info-value">{{ note.procedure_description|linebreaks }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Post-operative Information -->
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-heartbeat me-2"></i>Post-operative Information
        </div>
        <div class="section-content">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Post-operative Diagnosis</div>
                    <div class="info-value">{{ note.postoperative_diagnosis|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Estimated Blood Loss</div>
                    <div class="info-value">{{ note.estimated_blood_loss|default:"Not specified" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Complications</div>
                    <div class="info-value">{{ note.complications|default:"None reported" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Condition at End</div>
                    <div class="info-value">{{ note.condition_at_end|default:"Not specified" }}</div>
                </div>
            </div>
            
            {% if note.postoperative_instructions %}
            <div class="mt-3">
                <div class="info-label">Post-operative Instructions</div>
                <div class="info-value">{{ note.postoperative_instructions|linebreaks }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Surgical Team -->
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-users me-2"></i>Surgical Team
        </div>
        <div class="section-content">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Primary Surgeon</div>
                    <div class="info-value">{{ note.surgeon.get_full_name }}</div>
                </div>
                {% if note.assistant_surgeon %}
                <div class="info-item">
                    <div class="info-label">Assistant Surgeon</div>
                    <div class="info-value">{{ note.assistant_surgeon.get_full_name }}</div>
                </div>
                {% endif %}
                {% if note.anesthesiologist %}
                <div class="info-item">
                    <div class="info-label">Anesthesiologist</div>
                    <div class="info-value">{{ note.anesthesiologist.get_full_name }}</div>
                </div>
                {% endif %}
                {% if note.scrub_nurse %}
                <div class="info-item">
                    <div class="info-label">Scrub Nurse</div>
                    <div class="info-value">{{ note.scrub_nurse.get_full_name }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Revision History -->
    {% if note.revisions.exists %}
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-history me-2"></i>Revision History
        </div>
        <div class="section-content">
            <div class="timeline">
                {% for revision in note.revisions.all %}
                <div class="timeline-item">
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="mb-0">{{ revision.get_action_display }}</h6>
                            <small class="text-muted">{{ revision.created_at|date:"M d, Y g:i A" }}</small>
                        </div>
                        <p class="mb-1"><strong>By:</strong> {{ revision.created_by.get_full_name }}</p>
                        {% if revision.reason %}
                        <p class="mb-0"><strong>Reason:</strong> {{ revision.reason }}</p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Electronic Signature -->
    {% if note.status == 'signed' %}
    <div class="note-section">
        <div class="section-header">
            <i class="fas fa-signature me-2"></i>Electronic Signature
        </div>
        <div class="section-content">
            <div class="signature-box">
                <div class="text-center">
                    <i class="fas fa-certificate fa-3x text-success mb-3"></i>
                    <h5 class="text-success">Electronically Signed</h5>
                    <p class="mb-1"><strong>Signed by:</strong> {{ note.signed_by.get_full_name }}</p>
                    <p class="mb-1"><strong>Date:</strong> {{ note.signed_at|date:"M d, Y g:i A" }}</p>
                    <p class="mb-0"><strong>IP Address:</strong> {{ note.signature_ip|default:"Not recorded" }}</p>
                </div>
            </div>
        </div>
    </div>
    {% elif note.status == 'completed' %}
    <div class="signature-section no-print">
        <h5 class="mb-3">
            <i class="fas fa-signature me-2"></i>Electronic Signature Required
        </h5>
        <p class="text-muted mb-3">This note is complete and ready for electronic signature.</p>
        <button class="btn btn-primary btn-lg" onclick="signNote()">
            <i class="fas fa-signature me-2"></i>Sign Note
        </button>
    </div>
    {% endif %}
</div>

<!-- Sign Note Modal -->
<div class="modal fade" id="signNoteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-signature me-2"></i>Electronic Signature
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    By signing this note, you confirm that all information is accurate and complete.
                </div>
                
                <form id="signatureForm">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">Password Confirmation</label>
                        <input type="password" class="form-control" name="password" required
                               placeholder="Enter your password to confirm signature">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Signature Comments (Optional)</label>
                        <textarea class="form-control" name="signature_comments" rows="3"
                                  placeholder="Any additional comments about this signature..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitSignature()">
                    <i class="fas fa-signature me-1"></i>Sign Note
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
function printNote() {
    window.print();
}

{#function exportNote(format) {#}
{#    const url = `{% url "operating_theatre:surgical_note_export" note.pk %}?format=${format}`;#}
{#    window.open(url, '_blank');#}
{# }#}

function signNote() {
    $('#signNoteModal').modal('show');
}

function submitSignature() {
    const form = document.getElementById('signatureForm');
    const formData = new FormData(form);
    
    $.ajax({
        url: '{% url "operating_theatre:sign_note" note.pk %}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                $('#signNoteModal').modal('hide');
                alert('Note signed successfully!');
                location.reload();
            } else {
                alert('Error signing note: ' + response.error);
            }
        },
        error: function() {
            alert('Error signing note');
        }
    });
}

{#function amendNote() {#}
{#    const reason = prompt('Please provide a reason for the amendment:');#}
{#    if (reason) {#}
{#        $.ajax({#}
{#            url: '{% url "operating_theatre:surgical_note_amend" note.pk %}',#}
{#            method: 'POST',#}
{#            data: {#}
{#                'csrfmiddlewaretoken': '{{ csrf_token }}',#}
{#                'reason': reason#}
{#            },#}
{#            success: function(response) {#}
{#                if (response.success) {#}
{#                    alert('Amendment created successfully!');#}
{#                    window.location.href = response.amendment_url;#}
{#                } else {#}
{#                    alert('Error creating amendment: ' + response.error);#}
{#                }#}
{#            },#}
{#            error: function() {#}
{#                alert('Error creating amendment');#}
{#            }#}
{#        });#}
{#    }#}
{# }#}

{#function duplicateNote() {#}
{#    if (confirm('Create a duplicate of this note?')) {#}
{#        $.ajax({#}
{#            url: '{% url "operating_theatre:surgical_note_duplicate" note.pk %}',#}
{#            method: 'POST',#}
{#            data: {#}
{#                'csrfmiddlewaretoken': '{{ csrf_token }}'#}
{#            },#}
{#            success: function(response) {#}
{#                if (response.success) {#}
{#                    alert('Note duplicated successfully!');#}
{#                    window.location.href = response.duplicate_url;#}
{#                } else {#}
{#                    alert('Error duplicating note: ' + response.error);#}
{#                }#}
{#            },#}
{#            error: function() {#}
{#                alert('Error duplicating note');#}
{#            }#}
{#        });#}
{#    }#}
{# }#}

// Keyboard shortcuts
$(document).keydown(function(e) {
    // Ctrl+P for print
    if (e.ctrlKey && e.keyCode === 80) {
        e.preventDefault();
        printNote();
    }
    
    // Ctrl+E for edit (if not signed)
{#    {% if note.status != 'signed' %}#}
{#    if (e.ctrlKey && e.keyCode === 69) {#}
{#        e.preventDefault();#}
{#        window.location.href = '{% url "operating_theatre:surgical_note_edit" note.pk %}';#}
{#    }#}
{#    {% endif %}#}
    
    // Ctrl+S for sign (if completed)
    {% if note.status == 'completed' %}
    if (e.ctrlKey && e.keyCode === 83) {
        e.preventDefault();
        signNote();
    }
    {% endif %}
});
</script>
{% endblock %}