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

{% block title %}Patient Notes - Patients{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <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 active">Patient Notes</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    Patient Notes
    <small>Clinical Documentation</small>
</h1>
<!-- END page-header -->

<!-- BEGIN row -->
<div class="row">
    <div class="col-xl-12">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Patient Notes</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'patients:patient_note_create' %}" class="btn btn-xs btn-success me-2">
                        <i class="fa fa-plus"></i> Add Note
                    </a>
                    <button type="button" class="btn btn-xs btn-primary me-2" onclick="refreshData()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <!-- Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card border-primary">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-primary" id="total-notes">{{ total_notes }}</div>
                                <div class="small text-muted">Total Notes</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-success">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-success" id="today-notes">{{ today_notes }}</div>
                                <div class="small text-muted">Today's Notes</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-warning">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-warning" id="urgent-notes">{{ urgent_notes }}</div>
                                <div class="small text-muted">Urgent Notes</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-info">
                            <div class="card-body text-center">
                                <div class="fs-24px fw-bold text-info" id="follow-up-notes">{{ follow_up_notes }}</div>
                                <div class="small text-muted">Follow-up Required</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filters -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="form-floating">
                            <select class="form-select" id="filter-priority">
                                <option value="">All Priorities</option>
                                <option value="LOW">Low</option>
                                <option value="NORMAL">Normal</option>
                                <option value="HIGH">High</option>
                                <option value="URGENT">Urgent</option>
                            </select>
                            <label>Priority</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <select class="form-select" id="filter-category">
                                <option value="">All Categories</option>
                                <option value="CLINICAL">Clinical</option>
                                <option value="ADMINISTRATIVE">Administrative</option>
                                <option value="BILLING">Billing</option>
                                <option value="INSURANCE">Insurance</option>
                                <option value="FOLLOW_UP">Follow-up</option>
                                <option value="OTHER">Other</option>
                            </select>
                            <label>Category</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <input type="date" class="form-control" id="filter-date">
                            <label>Date</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="search-input" placeholder="Search...">
                            <label>Search Patient/Note</label>
                        </div>
                    </div>
                </div>

                <!-- Bulk Actions -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAll()">
                                <i class="fa fa-check-square me-1"></i>Select All
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectNone()">
                                <i class="fa fa-square me-1"></i>Select None
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="markUrgent()" disabled id="urgent-btn">
                                <i class="fa fa-exclamation-triangle me-1"></i>Mark Urgent
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="addFollowUp()" disabled id="followup-btn">
                                <i class="fa fa-calendar me-1"></i>Add Follow-up
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="exportSelected()" disabled id="export-btn">
                                <i class="fa fa-download me-1"></i>Export Selected
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Notes Table -->
                <div class="table-responsive">
                    <table id="notes-table" class="table table-striped table-bordered align-middle">
                        <thead>
                            <tr>
                                <th width="30">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="select-all-checkbox">
                                    </div>
                                </th>
                                <th>Patient</th>
                                <th>Note</th>
                                <th>Category</th>
                                <th>Priority</th>
                                <th>Created By</th>
                                <th>Date</th>
                                <th>Follow-up</th>
                                <th width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for note in object_list %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input row-checkbox" type="checkbox" value="{{ note.pk }}">
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="w-40px h-40px bg-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                            <i class="fa fa-user text-white"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold">
                                                <a href="{% url 'patients:patient_detail' note.patient.pk %}" class="text-decoration-none">
                                                    {{ note.patient.get_full_name }}
                                                </a>
                                            </div>
                                            <small class="text-muted">{{ note.patient.patient_id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-bold">{{ note.title|truncatechars:50 }}</div>
                                    <small class="text-muted">{{ note.content|truncatechars:100 }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-{% if note.category == 'CLINICAL' %}primary{% elif note.category == 'URGENT' %}danger{% elif note.category == 'FOLLOW_UP' %}warning{% else %}secondary{% endif %}">
                                        {{ note.get_category_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{% if note.priority == 'URGENT' %}danger{% elif note.priority == 'HIGH' %}warning{% elif note.priority == 'NORMAL' %}success{% else %}secondary{% endif %}">
                                        {{ note.get_priority_display }}
                                    </span>
                                    {% if note.priority == 'URGENT' %}
                                    <br><small class="text-danger">
                                        <i class="fa fa-exclamation-triangle"></i> Urgent
                                    </small>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="fw-bold">{{ note.created_by.get_full_name }}</div>
                                    <small class="text-muted">{{ note.created_by.username }}</small>
                                </td>
                                <td>
                                    {{ note.created_at|date:"M d, Y" }}
                                    <br><small class="text-muted">{{ note.created_at|time:"H:i" }}</small>
                                </td>
                                <td>
                                    {% if note.follow_up_date %}
                                    {{ note.follow_up_date|date:"M d, Y" }}
                                    {% if note.is_follow_up_overdue %}
                                    <br><small class="text-danger">
                                        <i class="fa fa-exclamation-circle"></i> Overdue
                                    </small>
                                    {% elif note.is_follow_up_due_soon %}
                                    <br><small class="text-warning">
                                        <i class="fa fa-clock"></i> Due Soon
                                    </small>
                                    {% endif %}
                                    {% else %}
                                    <span class="text-muted">None</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'patients:patient_note_detail' note.pk %}" class="btn btn-xs btn-outline-primary" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'patients:patient_note_update' note.pk %}" class="btn btn-xs btn-outline-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-xs btn-outline-info" onclick="addFollowUpSingle('{{ note.pk }}')" title="Follow-up">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                        <a href="{% url 'patients:patient_note_delete' note.pk %}" class="btn btn-xs btn-outline-danger" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">
                                    <i class="fa fa-sticky-note fa-3x mb-3"></i>
                                    <div>No patient notes found</div>
                                    <a href="{% url 'patients:patient_note_create' %}" class="btn btn-primary mt-2">
                                        <i class="fa fa-plus me-2"></i>Add First Patient Note
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Notes pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1">&laquo; First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                        </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                        {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
<!-- END row -->

<!-- Follow-up Modal -->
<div class="modal fade" id="followUpModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Follow-up</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="followup-form">
                    <div class="mb-3">
                        <label class="form-label">Follow-up Date</label>
                        <input type="date" class="form-control" name="follow_up_date" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Follow-up Notes</label>
                        <textarea class="form-control" name="follow_up_notes" rows="3" placeholder="Enter follow-up instructions..."></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="send_reminder" id="send-reminder" checked>
                            <label class="form-check-label" for="send-reminder">
                                Send reminder notification
                            </label>
                        </div>
                    </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="saveFollowUp()">
                    <i class="fa fa-calendar me-2"></i>Add Follow-up
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>

<script>
var table;
var selectedNoteIds = [];

$(document).ready(function() {
    // Initialize DataTable
    table = $('#notes-table').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[6, 'desc']],
        columnDefs: [
            { orderable: false, targets: [0, 8] }
        ]
    });
    
    // Filter handlers
    $('#filter-priority, #filter-category, #filter-date').on('change', function() {
        filterTable();
    });
    
    $('#search-input').on('keyup', function() {
        table.search(this.value).draw();
    });
    
    // Select all checkbox
    $('#select-all-checkbox').on('change', function() {
        $('.row-checkbox').prop('checked', this.checked);
        updateBulkButtons();
    });
    
    // Row checkboxes
    $(document).on('change', '.row-checkbox', function() {
        updateBulkButtons();
        
        // Update select all checkbox
        var totalCheckboxes = $('.row-checkbox').length;
        var checkedCheckboxes = $('.row-checkbox:checked').length;
        $('#select-all-checkbox').prop('indeterminate', checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes);
        $('#select-all-checkbox').prop('checked', checkedCheckboxes === totalCheckboxes);
    });
    
    // Auto-refresh every 5 minutes
    setInterval(refreshData, 300000);
});

function filterTable() {
    var priority = $('#filter-priority').val();
    var category = $('#filter-category').val();
    var date = $('#filter-date').val();
    
    // Apply filters
    table.columns(4).search(priority);
    table.columns(3).search(category);
    if (date) {
        table.columns(6).search(date);
    } else {
        table.columns(6).search('');
    }
    table.draw();
}

function updateBulkButtons() {
    var checkedCount = $('.row-checkbox:checked').length;
    $('#urgent-btn, #followup-btn, #export-btn').prop('disabled', checkedCount === 0);
}

function selectAll() {
    $('.row-checkbox').prop('checked', true);
    $('#select-all-checkbox').prop('checked', true);
    updateBulkButtons();
}

function selectNone() {
    $('.row-checkbox').prop('checked', false);
    $('#select-all-checkbox').prop('checked', false);
    updateBulkButtons();
}

function markUrgent() {
    var selectedIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedIds.length === 0) {
        toastr.warning('Please select notes to mark as urgent');
        return;
    }
    
    if (confirm('Mark ' + selectedIds.length + ' selected notes as urgent?')) {
        $.ajax({
            url: '{% url "patients:bulk_mark_urgent_notes" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'note_ids': selectedIds
            },
            success: function(response) {
                toastr.success(response.message);
                refreshData();
            },
            error: function() {
                toastr.error('Failed to mark notes as urgent');
            }
        });
    }
}

function addFollowUp() {
    selectedNoteIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedNoteIds.length === 0) {
        toastr.warning('Please select notes to add follow-up');
        return;
    }
    
    $('#followUpModal').modal('show');
}

function addFollowUpSingle(noteId) {
    selectedNoteIds = [noteId];
    $('#followUpModal').modal('show');
}

function saveFollowUp() {
    var followUpDate = $('input[name="follow_up_date"]').val();
    var followUpNotes = $('textarea[name="follow_up_notes"]').val();
    var sendReminder = $('input[name="send_reminder"]').is(':checked');
    
    if (!followUpDate) {
        toastr.error('Please select a follow-up date');
        return;
    }
    
    $.ajax({
        url: '{% url "patients:bulk_add_followup_notes" %}',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'note_ids': selectedNoteIds,
            'follow_up_date': followUpDate,
            'follow_up_notes': followUpNotes,
            'send_reminder': sendReminder
        },
        success: function(response) {
            toastr.success(response.message);
            $('#followUpModal').modal('hide');
            refreshData();
        },
        error: function() {
            toastr.error('Failed to add follow-up');
        }
    });
}

function exportSelected() {
    var selectedIds = $('.row-checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    if (selectedIds.length === 0) {
        toastr.warning('Please select notes to export');
        return;
    }
    
    // Create form and submit for download
    var form = $('<form>', {
        method: 'POST',
        action: '{% url "patients:export_patient_notes" %}'
    });
    
    form.append($('<input>', {
        type: 'hidden',
        name: 'csrfmiddlewaretoken',
        value: '{{ csrf_token }}'
    }));
    
    selectedIds.forEach(function(id) {
        form.append($('<input>', {
            type: 'hidden',
            name: 'note_ids',
            value: id
        }));
    });
    
    $('body').append(form);
    form.submit();
    form.remove();
    
    toastr.info('Exporting ' + selectedIds.length + ' patient notes...');
}

function refreshData() {
    location.reload();
}
</script>
{% endblock %}