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

{% block title %}Audit Management - Quality Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Audit Management System</h4>
                        <h6>Plan, conduct, and track quality audits and compliance assessments</h6>
                    </div>
                    <div class="page-btn">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleAuditModal">
                                <i class="fa fa-plus"></i> Schedule Audit
                            </button>
                            <button type="button" class="btn btn-info" onclick="generateAuditReport()">
                                <i class="fa fa-file-alt"></i> Generate Report
                            </button>
                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#auditTemplatesModal">
                                <i class="fa fa-clipboard-list"></i> Templates
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Audit Overview -->
        <div class="row">
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-primary border-primary">
                                <i class="fa fa-calendar-check"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ audit_stats.scheduled|default:8 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Scheduled Audits</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 65%"></div>
                            </div>
                            <small class="text-primary">
                                <i class="fa fa-calendar"></i> Next audit in 3 days
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-warning border-warning">
                                <i class="fa fa-clock"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ audit_stats.in_progress|default:3 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">In Progress</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 40%"></div>
                            </div>
                            <small class="text-warning">
                                <i class="fa fa-clock"></i> Avg duration: 5.2 days
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-success border-success">
                                <i class="fa fa-check-circle"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ audit_stats.completed|default:24 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Completed (This Year)</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: 85%"></div>
                            </div>
                            <small class="text-success">
                                <i class="fa fa-arrow-up"></i> +15% from last year
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-info border-info">
                                <i class="fa fa-chart-line"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ audit_stats.compliance_score|default:92.5 }}%</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Compliance Score</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-info" style="width: {{ audit_stats.compliance_score|default:92.5 }}%"></div>
                            </div>
                            <small class="text-success">
                                <i class="fa fa-arrow-up"></i> +2.1% from last quarter
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Audit Calendar and Upcoming -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Audit Schedule</h5>
                        <div class="card-tools">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary active" data-view="month">Month</button>
                                <button type="button" class="btn btn-sm btn-outline-primary" data-view="week">Week</button>
                                <button type="button" class="btn btn-sm btn-outline-primary" data-view="list">List</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="auditCalendar">
                            <!-- Calendar would be rendered here -->
                            <div class="calendar-placeholder">
                                <div class="text-center py-5">
                                    <i class="fa fa-calendar fa-3x text-muted mb-3"></i>
                                    <h5>Audit Calendar</h5>
                                    <p class="text-muted">Interactive calendar showing scheduled audits</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="audit-event mb-2 p-2 border-start border-primary border-3">
                                                <strong>Jan 20, 2024</strong><br>
                                                <small class="text-primary">Infection Control Audit - ICU</small>
                                            </div>
                                            <div class="audit-event mb-2 p-2 border-start border-warning border-3">
                                                <strong>Jan 22, 2024</strong><br>
                                                <small class="text-warning">Medication Safety Audit - Pharmacy</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="audit-event mb-2 p-2 border-start border-success border-3">
                                                <strong>Jan 25, 2024</strong><br>
                                                <small class="text-success">Documentation Audit - Medical Records</small>
                                            </div>
                                            <div class="audit-event mb-2 p-2 border-start border-info border-3">
                                                <strong>Jan 28, 2024</strong><br>
                                                <small class="text-info">Safety Audit - Operating Theatre</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Upcoming Audits</h5>
                    </div>
                    <div class="card-body">
                        {% for audit in upcoming_audits %}
                        <div class="audit-item mb-3">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">{{ audit.title }}</h6>
                                    <p class="text-muted small mb-1">{{ audit.department }}</p>
                                    <div class="d-flex align-items-center">
                                        <span class="badge bg-{{ audit.type_color }} me-2">{{ audit.type|title }}</span>
                                        <small class="text-muted">{{ audit.scheduled_date|date:"M d, Y" }}</small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <small class="text-muted">{{ audit.days_until }} days</small><br>
                                    <button class="btn btn-sm btn-outline-primary" onclick="viewAudit({{ audit.id }})">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-4">
                            <i class="fa fa-calendar-plus fa-2x mb-2"></i>
                            <p>No upcoming audits scheduled</p>
                            <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#scheduleAuditModal">
                                <i class="fa fa-plus"></i> Schedule Audit
                            </button>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Audit Alerts -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Audit Alerts</h5>
                    </div>
                    <div class="card-body">
                        {% for alert in audit_alerts %}
                        <div class="alert alert-{{ alert.severity }} alert-sm mb-2">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>{{ alert.title }}</strong><br>
                                    <small>{{ alert.message }}</small>
                                </div>
                                <small class="text-muted">{{ alert.created_at|timesince }} ago</small>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            <i class="fa fa-check-circle fa-2x mb-2 text-success"></i>
                            <p>No active audit alerts</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Audits -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Active Audits</h5>
                        <div class="card-tools">
                            <select class="form-select form-select-sm" id="auditFilter">
                                <option value="">All Audits</option>
                                <option value="internal">Internal Audits</option>
                                <option value="external">External Audits</option>
                                <option value="regulatory">Regulatory Audits</option>
                                <option value="compliance">Compliance Audits</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="activeAuditsTable">
                                <thead>
                                    <tr>
                                        <th>Audit ID</th>
                                        <th>Title</th>
                                        <th>Type</th>
                                        <th>Department</th>
                                        <th>Auditor</th>
                                        <th>Start Date</th>
                                        <th>Progress</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>AUD-2024-001</strong></td>
                                        <td>Infection Control Compliance</td>
                                        <td><span class="badge bg-primary">Internal</span></td>
                                        <td>ICU</td>
                                        <td>Dr. Sarah Wilson</td>
                                        <td>Jan 15, 2024</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-warning" style="width: 65%"></div>
                                            </div>
                                            <small class="text-muted">65%</small>
                                        </td>
                                        <td><span class="badge bg-warning">In Progress</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewAuditDetails('AUD-2024-001')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-warning" onclick="updateAuditProgress('AUD-2024-001')">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>AUD-2024-002</strong></td>
                                        <td>Medication Safety Review</td>
                                        <td><span class="badge bg-info">Compliance</span></td>
                                        <td>Pharmacy</td>
                                        <td>External Auditor</td>
                                        <td>Jan 10, 2024</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-info" style="width: 85%"></div>
                                            </div>
                                            <small class="text-muted">85%</small>
                                        </td>
                                        <td><span class="badge bg-info">Review</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewAuditDetails('AUD-2024-002')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" onclick="finalizeAudit('AUD-2024-002')">
                                                    <i class="fa fa-check"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>AUD-2024-003</strong></td>
                                        <td>Documentation Standards</td>
                                        <td><span class="badge bg-secondary">Regulatory</span></td>
                                        <td>Medical Records</td>
                                        <td>Quality Team</td>
                                        <td>Jan 8, 2024</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-primary" style="width: 30%"></div>
                                            </div>
                                            <small class="text-muted">30%</small>
                                        </td>
                                        <td><span class="badge bg-primary">Planning</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewAuditDetails('AUD-2024-003')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-warning" onclick="startAudit('AUD-2024-003')">
                                                    <i class="fa fa-play"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Audit Results and Trends -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Audit Results Trends</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="auditTrendsChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Compliance by Department</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="complianceChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Findings -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Recent Audit Findings</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Finding ID</th>
                                        <th>Audit</th>
                                        <th>Category</th>
                                        <th>Severity</th>
                                        <th>Description</th>
                                        <th>Corrective Action</th>
                                        <th>Due Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>F-001</strong></td>
                                        <td>AUD-2024-001</td>
                                        <td>Documentation</td>
                                        <td><span class="badge bg-warning">Medium</span></td>
                                        <td>Incomplete hand hygiene documentation</td>
                                        <td>Implement electronic tracking system</td>
                                        <td>Feb 15, 2024</td>
                                        <td><span class="badge bg-warning">In Progress</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>F-002</strong></td>
                                        <td>AUD-2024-002</td>
                                        <td>Process</td>
                                        <td><span class="badge bg-danger">High</span></td>
                                        <td>Medication reconciliation gaps</td>
                                        <td>Revise reconciliation protocol</td>
                                        <td>Jan 30, 2024</td>
                                        <td><span class="badge bg-info">Planned</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong>F-003</strong></td>
                                        <td>AUD-2024-001</td>
                                        <td>Training</td>
                                        <td><span class="badge bg-success">Low</span></td>
                                        <td>Staff training records outdated</td>
                                        <td>Update training database</td>
                                        <td>Feb 1, 2024</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Schedule Audit Modal -->
<div class="modal fade" id="scheduleAuditModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Schedule New Audit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="scheduleAuditForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Audit Title *</label>
                                <input type="text" name="audit_title" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Audit Type *</label>
                                <select name="audit_type" class="form-select" required>
                                    <option value="">Select type...</option>
                                    <option value="internal">Internal Audit</option>
                                    <option value="external">External Audit</option>
                                    <option value="regulatory">Regulatory Audit</option>
                                    <option value="compliance">Compliance Audit</option>
                                    <option value="quality">Quality Audit</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Department/Area *</label>
                                <select name="department" class="form-select" required>
                                    <option value="">Select department...</option>
                                    <option value="icu">Intensive Care Unit</option>
                                    <option value="emergency">Emergency Department</option>
                                    <option value="surgery">Surgery</option>
                                    <option value="pharmacy">Pharmacy</option>
                                    <option value="laboratory">Laboratory</option>
                                    <option value="radiology">Radiology</option>
                                    <option value="medical_records">Medical Records</option>
                                    <option value="administration">Administration</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Lead Auditor *</label>
                                <select name="lead_auditor" class="form-select" required>
                                    <option value="">Select auditor...</option>
                                    <option value="internal_team">Internal Quality Team</option>
                                    <option value="external_firm">External Audit Firm</option>
                                    <option value="regulatory_body">Regulatory Body</option>
                                    <option value="consultant">External Consultant</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Scheduled Start Date *</label>
                                <input type="date" name="start_date" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Expected Duration (days)</label>
                                <input type="number" name="duration" class="form-control" min="1" max="30" value="5">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Audit Scope</label>
                        <textarea name="audit_scope" class="form-control" rows="3" 
                                  placeholder="Describe the scope and objectives of this audit..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Standards/Criteria</label>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="joint_commission" id="jointCommission">
                                    <label class="form-check-label" for="jointCommission">Joint Commission</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="cms" id="cms">
                                    <label class="form-check-label" for="cms">CMS Conditions</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="iso" id="iso">
                                    <label class="form-check-label" for="iso">ISO Standards</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="hipaa" id="hipaa">
                                    <label class="form-check-label" for="hipaa">HIPAA Compliance</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="osha" id="osha">
                                    <label class="form-check-label" for="osha">OSHA Standards</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="standards" value="internal" id="internal">
                                    <label class="form-check-label" for="internal">Internal Policies</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Priority Level</label>
                                <select name="priority" class="form-select">
                                    <option value="low">Low</option>
                                    <option value="medium" selected>Medium</option>
                                    <option value="high">High</option>
                                    <option value="critical">Critical</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Notification Recipients</label>
                                <select name="notifications" class="form-select" multiple>
                                    <option value="department_head">Department Head</option>
                                    <option value="quality_director">Quality Director</option>
                                    <option value="compliance_officer">Compliance Officer</option>
                                    <option value="ceo">Chief Executive Officer</option>
                                    <option value="medical_director">Medical Director</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Schedule Audit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Audit Templates Modal -->
<div class="modal fade" id="auditTemplatesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Audit Templates</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Standard Templates</h6>
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('infection_control')">
                                <strong>Infection Control Audit</strong><br>
                                <small class="text-muted">Comprehensive infection prevention assessment</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('medication_safety')">
                                <strong>Medication Safety Audit</strong><br>
                                <small class="text-muted">Pharmacy and medication administration review</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('documentation')">
                                <strong>Documentation Audit</strong><br>
                                <small class="text-muted">Medical record and documentation standards</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('patient_safety')">
                                <strong>Patient Safety Audit</strong><br>
                                <small class="text-muted">General patient safety assessment</small>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Regulatory Templates</h6>
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('joint_commission')">
                                <strong>Joint Commission Readiness</strong><br>
                                <small class="text-muted">Prepare for Joint Commission survey</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('cms_compliance')">
                                <strong>CMS Compliance Audit</strong><br>
                                <small class="text-muted">Medicare/Medicaid compliance review</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('hipaa_audit')">
                                <strong>HIPAA Privacy Audit</strong><br>
                                <small class="text-muted">Privacy and security compliance</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action" onclick="useTemplate('osha_audit')">
                                <strong>OSHA Safety Audit</strong><br>
                                <small class="text-muted">Workplace safety compliance</small>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <h6>Custom Templates</h6>
                    <div class="d-flex justify-content-between align-items-center">
                        <p class="text-muted mb-0">Create and manage custom audit templates</p>
                        <button type="button" class="btn btn-outline-primary btn-sm">
                            <i class="fa fa-plus"></i> Create Template
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize charts
    initializeAuditTrendsChart();
    initializeComplianceChart();

    // Set minimum date for audit scheduling
    const today = new Date().toISOString().split('T')[0];
    document.querySelector('input[name="start_date"]').min = today;

    // Form submission handler
    document.getElementById('scheduleAuditForm').addEventListener('submit', function(e) {
        e.preventDefault();
        handleScheduleAudit();
    });

    // Filter change handler
    document.getElementById('auditFilter').addEventListener('change', applyAuditFilter);
});

function initializeAuditTrendsChart() {
    const ctx = document.getElementById('auditTrendsChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024'],
            datasets: [{
                label: 'Compliance Score',
                data: [88.5, 90.2, 91.8, 92.1, 92.5],
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4
            }, {
                label: 'Audit Findings',
                data: [15, 12, 8, 6, 5],
                borderColor: '#dc3545',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                tension: 0.4,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    min: 80,
                    max: 100
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    min: 0,
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            }
        }
    });
}

function initializeComplianceChart() {
    const ctx = document.getElementById('complianceChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['ICU', 'Emergency', 'Surgery', 'Pharmacy', 'Laboratory'],
            datasets: [{
                label: 'Compliance %',
                data: [95, 88, 92, 96, 90],
                backgroundColor: ['#28a745', '#ffc107', '#17a2b8', '#28a745', '#17a2b8']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: false,
                    min: 80,
                    max: 100
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

function handleScheduleAudit() {
    const formData = new FormData(document.getElementById('scheduleAuditForm'));
    
    console.log('Scheduling audit:', Object.fromEntries(formData));
    
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('scheduleAuditModal')).hide();
    
    // Reset form
    document.getElementById('scheduleAuditForm').reset();
    
    // Show success message
    const auditId = 'AUD-2024-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    alert(`Audit scheduled successfully! Audit ID: ${auditId}`);
    
    // Refresh the page or update the table
    location.reload();
}

function viewAudit(auditId) {
    console.log(`Viewing audit: ${auditId}`);
    alert(`Detailed view for audit ${auditId} would be displayed here.`);
}

function viewAuditDetails(auditId) {
    console.log(`Viewing audit details: ${auditId}`);
    alert(`Detailed audit information for ${auditId} would be displayed here.`);
}

function updateAuditProgress(auditId) {
    const progress = prompt('Enter audit progress percentage (0-100):');
    
    if (progress !== null && !isNaN(progress) && progress >= 0 && progress <= 100) {
        console.log(`Updating audit ${auditId} progress to: ${progress}%`);
        alert(`Audit ${auditId} progress updated to ${progress}%`);
        location.reload();
    }
}

function startAudit(auditId) {
    if (confirm(`Start audit ${auditId}? This will change the status to "In Progress".`)) {
        console.log(`Starting audit: ${auditId}`);
        alert(`Audit ${auditId} has been started.`);
        location.reload();
    }
}

function finalizeAudit(auditId) {
    if (confirm(`Finalize audit ${auditId}? This will complete the audit and generate the final report.`)) {
        console.log(`Finalizing audit: ${auditId}`);
        alert(`Audit ${auditId} has been finalized. Final report will be generated.`);
        location.reload();
    }
}

function applyAuditFilter() {
    const filterValue = document.getElementById('auditFilter').value;
    console.log(`Applying audit filter: ${filterValue}`);
    
    // In real implementation, this would filter the table rows
    alert(`Filter applied: ${filterValue || 'All Audits'}`);
}

function generateAuditReport() {
    const reportType = prompt('Generate report:\n1. Compliance Summary\n2. Audit Findings Report\n3. Trend Analysis\n4. Department Scorecard\n\nEnter number:');
    
    if (reportType && ['1', '2', '3', '4'].includes(reportType)) {
        const reportTypes = {
            '1': 'Compliance Summary',
            '2': 'Audit Findings Report',
            '3': 'Trend Analysis',
            '4': 'Department Scorecard'
        };
        
        console.log(`Generating report: ${reportTypes[reportType]}`);
        alert(`${reportTypes[reportType]} is being generated. You will receive an email when ready.`);
    }
}

function useTemplate(templateType) {
    console.log(`Using audit template: ${templateType}`);
    
    // Close templates modal
    bootstrap.Modal.getInstance(document.getElementById('auditTemplatesModal')).hide();
    
    // Open schedule modal with pre-filled data
    setTimeout(() => {
        const scheduleModal = new bootstrap.Modal(document.getElementById('scheduleAuditModal'));
        scheduleModal.show();
        
        // Pre-fill form based on template
        const templates = {
            'infection_control': {
                title: 'Infection Control Audit',
                type: 'compliance',
                scope: 'Comprehensive review of infection prevention and control practices'
            },
            'medication_safety': {
                title: 'Medication Safety Audit',
                type: 'quality',
                scope: 'Review of medication administration, storage, and safety protocols'
            },
            'documentation': {
                title: 'Documentation Standards Audit',
                type: 'compliance',
                scope: 'Assessment of medical record documentation completeness and accuracy'
            }
        };
        
        const template = templates[templateType];
        if (template) {
            document.querySelector('input[name="audit_title"]').value = template.title;
            document.querySelector('select[name="audit_type"]').value = template.type;
            document.querySelector('textarea[name="audit_scope"]').value = template.scope;
        }
    }, 300);
}
</script>

<style>
.dash-widget-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.dash-widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    border: 2px solid;
}

.dash-count h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}

.audit-event {
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.audit-item {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
}

.calendar-placeholder {
    min-height: 300px;
}

.card-tools {
    margin-left: auto;
}

.progress {
    height: 6px;
}

.alert-sm {
    padding: 0.5rem;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .dash-widget-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dash-widget-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        margin-bottom: 0.25rem;
    }
}
</style>
{% endblock %}