{% extends "layout.html" %}

{% block css %}
<link rel="stylesheet" href="/static/css/glpi.css">
{% endblock %}

{% block content %}

<h1 class="page-title">
    🎫 GLPI Enterprise Dashboard
</h1>

<div class="grid">

    <div class="metric">
        <h4>Open Tickets</h4>
        <h2 id="openTickets">0</h2>
    </div>

    <div class="metric">
        <h4>Closed Tickets</h4>
        <h2 id="closedTickets">0</h2>
    </div>

    <div class="metric">
        <h4>Total Tickets</h4>
        <h2 id="totalTickets">0</h2>
    </div>

    <div class="metric">
        <h4>Resolution Rate</h4>
        <h2 id="resolvedPercent">0%</h2>
    </div>

</div>

<div class="chart-row">

    <div class="chart-card">

        <h3>🎯 Ticket Health</h3>

        <div class="progress-wrapper">

            <div class="progress-label">

                <span>Open Tickets</span>

                <span id="openPercent">0%</span>

            </div>

            <div class="progress-bg">

                <div
                    id="openBar"
                    class="progress-open">

                </div>

            </div>

        </div>

        <br>

        <div class="progress-wrapper">

            <div class="progress-label">

                <span>Resolved Tickets</span>

                <span id="closedPercent">0%</span>

            </div>

            <div class="progress-bg">

                <div
                    id="closedBar"
                    class="progress-closed">

                </div>

            </div>

        </div>

        <div class="ticket-stats">

            <div class="ticket-box">

                <h2 id="openBig">0</h2>

                <small>Open</small>

            </div>

            <div class="ticket-box">

                <h2 id="closedBig">0</h2>

                <small>Closed</small>

            </div>

            <div class="ticket-box">

                <h2 id="totalBig">0</h2>

                <small>Total</small>

            </div>

        </div>

    </div>

    <div class="chart-card">

        <h3>📈 Ticket Summary</h3>

        <table class="summary-table">

            <tbody>

                <tr>

                    <td>Open Tickets</td>

                    <td id="summaryOpen">0</td>

                </tr>

                <tr>

                    <td>Closed Tickets</td>

                    <td id="summaryClosed">0</td>

                </tr>

                <tr>

                    <td>Total Tickets</td>

                    <td id="summaryTotal">0</td>

                </tr>

                <tr>

                    <td>Resolution Rate</td>

                    <td id="summaryRate">0%</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

<div class="table-card">

    <h3>🎫 Recent Tickets (Live)</h3>

    <table>

        <thead>

            <tr>

                <th>Status</th>

                <th>Open</th>

                <th>Closed</th>

                <th>Total</th>

                <th>Resolution %</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Current</td>

                <td id="tableOpen">0</td>

                <td id="tableClosed">0</td>

                <td id="tableTotal">0</td>

                <td id="tablePercent">0%</td>

            </tr>

        </tbody>

    </table>

</div>

{% endblock %}

{% block js %}
<script src="/static/js/glpi.js"></script>
{% endblock %}