{% extends "base.html" %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Calibration Dashboard</h2>
        <a href="{{ url_for('calibrations.new_calibration') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> New Calibration Batch
        </a>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total Calibrations</h5>
                    <p class="display-4">{{ summary.total_calibrations }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Passed</h5>
                    <p class="display-4 text-success">{{ summary.passed_calibrations }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Failed</h5>
                    <p class="display-4 text-danger">{{ summary.failed_calibrations }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Recent Calibrations</h5>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Channel</th>
                            <th>Standard</th>
                            <th>Calibrated By</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for cal in recent_calibrations %}
                        <tr>
                            <td>{{ cal.date }}</td>
                            <td>{{ cal.channels.serial_number }}</td>
                            <td>{{ cal.standards.make }} {{ cal.standards.model }}</td>
                            <td>{{ cal.calibrated_by.name }}</td>
                            <td>
                                {% if cal.passed %}
                                <span class="badge bg-success">Passed</span>
                                {% else %}
                                <span class="badge bg-danger">Failed</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ url_for('calibrations.view_calibration', calibration_id=cal.id) }}" 
                                   class="btn btn-sm btn-primary">
                                    Details
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Calibration Status</h5>
        <canvas id="statusChart" height="100"></canvas>
        <!-- Hidden elements for chart data -->
        <div id="chartData" 
             data-passed="{{ summary.passed_calibrations }}"
             data-failed="{{ summary.failed_calibrations }}"
             style="display:none;"></div>
    </div>
</div>
</div>

<script>
// Chart initialization using data attributes
document.addEventListener('DOMContentLoaded', function() {
    const dataEl = document.getElementById('chartData');
    const passed = parseInt(dataEl.dataset.passed);
    const failed = parseInt(dataEl.dataset.failed);
    const ctx = document.getElementById('statusChart');
    
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Passed', 'Failed'],
            datasets: [{
                data: [passed, failed],
                backgroundColor: ['#28a745', '#dc3545']
            }]
        }
    });
});
</script>
{% endblock %}