{% load static %}

<div class="problem-list-container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Problem List</h5>
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-primary active" data-filter="all">All</button>
            <button type="button" class="btn btn-outline-primary" data-filter="active">Active</button>
            <button type="button" class="btn btn-outline-primary" data-filter="resolved">Resolved</button>
            <button type="button" class="btn btn-outline-primary" data-filter="inactive">Inactive</button>
        </div>
    </div>
    
    <div class="input-group mb-3">
        <span class="input-group-text"><i class="fa fa-search"></i></span>
        <input type="text" class="form-control" id="problemSearch" placeholder="Search problems...">
    </div>
    
    <div class="table-responsive">
        <table class="table table-sm table-bordered table-hover" id="problemListTable">
            <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="30%">Problem</th>
                    <th width="15%">Status</th>
                    <th width="15%">Onset Date</th>
                    <th width="15%">Resolution Date</th>
                    <th width="20%">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for problem in problems %}
                <tr class="problem-row" data-status="{{ problem.status|lower }}">
                    <td>{{ forloop.counter }}</td>
                    <td>
                        <strong>{{ problem.problem_name }}</strong>
                        {% if problem.icd_code %}
                        <br><small class="text-muted">ICD: {{ problem.icd_code }}</small>
                        {% endif %}
                    </td>
                    <td>
                        {% if problem.status == 'ACTIVE' %}
                        <span class="badge bg-success">Active</span>
                        {% elif problem.status == 'RESOLVED' %}
                        <span class="badge bg-primary">Resolved</span>
                        {% elif problem.status == 'INACTIVE' %}
                        <span class="badge bg-warning">Inactive</span>
                        {% endif %}
                    </td>
                    <td>{{ problem.onset_date|date:"M d, Y" }}</td>
                    <td>
                        {% if problem.resolution_date %}
                        {{ problem.resolution_date|date:"M d, Y" }}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <a href="{% url 'emr:problem_detail' problem.id %}" class="btn btn-primary" data-bs-toggle="tooltip" title="View">
                                <i class="fa fa-eye"></i>
                            </a>
                            <a href="{% url 'emr:problem_update' problem.id %}" class="btn btn-info" data-bs-toggle="tooltip" title="Edit">
                                <i class="fa fa-edit"></i>
                            </a>
                            {% if problem.status == 'ACTIVE' %}
                            <button type="button" class="btn btn-success resolve-problem-btn" data-problem-id="{{ problem.id }}" data-bs-toggle="tooltip" title="Resolve">
                                <i class="fa fa-check"></i>
                            </button>
                            {% endif %}
                            <button type="button" class="btn btn-secondary add-note-btn" data-problem-id="{{ problem.id }}" data-bs-toggle="tooltip" title="Add Note">
                                <i class="fa fa-file-alt"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center">No problems recorded</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div class="d-flex justify-content-between align-items-center mt-3">
        <div>
            <span class="badge bg-success me-1">Active: {{ active_count }}</span>
            <span class="badge bg-primary me-1">Resolved: {{ resolved_count }}</span>
            <span class="badge bg-warning me-1">Inactive: {{ inactive_count }}</span>
        </div>
        <a href="{% url 'emr:problem_create' %}?patient_id={{ patient.id }}" class="btn btn-sm btn-success">
            <i class="fa fa-plus me-1"></i> Add Problem
        </a>
    </div>
</div>

<!-- Resolve Problem Modal -->
<div class="modal fade" id="resolveProblemModal" tabindex="-1" aria-labelledby="resolveProblemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resolveProblemModalLabel">Resolve Problem</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="resolveProblemForm">
                    {% csrf_token %}
                    <input type="hidden" id="problemId" name="problem_id">
                    
                    <div class="mb-3">
                        <label for="resolutionDate" class="form-label">Resolution Date</label>
                        <input type="date" class="form-control" id="resolutionDate" name="resolution_date" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="resolutionNotes" class="form-label">Resolution Notes</label>
                        <textarea class="form-control" id="resolutionNotes" name="resolution_notes" rows="3"></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-success" id="confirmResolveBtn">Resolve Problem</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Note Modal -->
<div class="modal fade" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNoteModalLabel">Add Note to Problem</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addNoteForm">
                    {% csrf_token %}
                    <input type="hidden" id="noteProblemId" name="problem_id">
                    
                    <div class="mb-3">
                        <label for="noteText" class="form-label">Note</label>
                        <textarea class="form-control" id="noteText" name="note_text" rows="5" required></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" id="confirmAddNoteBtn">Add Note</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Filter buttons
    document.querySelectorAll('[data-filter]').forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            document.querySelectorAll('[data-filter]').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Add active class to clicked button
            this.classList.add('active');
            
            const filter = this.dataset.filter;
            filterProblems(filter);
        });
    });
    
    // Search functionality
    document.getElementById('problemSearch').addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('#problemListTable tbody tr.problem-row');
        
        rows.forEach(row => {
            const problemName = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
            if (problemName.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
    
    // Resolve problem button
    document.querySelectorAll('.resolve-problem-btn').forEach(button => {
        button.addEventListener('click', function() {
            const problemId = this.dataset.problemId;
            document.getElementById('problemId').value = problemId;
            
            // Set default resolution date to today
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('resolutionDate').value = today;
            
            // Show modal
            const resolveProblemModal = new bootstrap.Modal(document.getElementById('resolveProblemModal'));
            resolveProblemModal.show();
        });
    });
    
    // Add note button
    document.querySelectorAll('.add-note-btn').forEach(button => {
        button.addEventListener('click', function() {
            const problemId = this.dataset.problemId;
            document.getElementById('noteProblemId').value = problemId;
            
            // Show modal
            const addNoteModal = new bootstrap.Modal(document.getElementById('addNoteModal'));
            addNoteModal.show();
        });
    });
    
    // Confirm resolve button
    document.getElementById('confirmResolveBtn').addEventListener('click', function() {
        const form = document.getElementById('resolveProblemForm');
        const formData = new FormData(form);
        
        // AJAX request to resolve problem
        fetch('{% url "emr:problem_resolve" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Close modal
                bootstrap.Modal.getInstance(document.getElementById('resolveProblemModal')).hide();
                
                // Refresh problem list
                window.location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while resolving the problem.');
        });
    });
    
    // Confirm add note button
    document.getElementById('confirmAddNoteBtn').addEventListener('click', function() {
        const form = document.getElementById('addNoteForm');
        const formData = new FormData(form);
        
        // AJAX request to add note
        fetch('{% url "emr:problem_add_note" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Close modal
                bootstrap.Modal.getInstance(document.getElementById('addNoteModal')).hide();
                
                // Show success message
                alert('Note added successfully!');
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while adding the note.');
        });
    });
    
    // Function to filter problems by status
    function filterProblems(filter) {
        const rows = document.querySelectorAll('#problemListTable tbody tr.problem-row');
        
        rows.forEach(row => {
            if (filter === 'all' || row.dataset.status === filter) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
});
</script>