{% extends "base.html" %}

{% block content %}

<div class="container-fluid px-2 px-md-4">

    <h4 class="mb-3 text-center text-md-start">Comparison Software Solapur(UGD) </h4>

    <!-- Summary Cards -->
    <div class="row g-3 mb-4">

        <!-- Total Work -->
        <div class="col-12 col-md-4">
            <div class="card text-white bg-primary shadow h-100">
                <div class="card-body text-center text-md-start">
                    <h6>Test Total Work</h6>
                    <h3 class="fw-bold">30%</h3>
                </div>
            </div>
        </div>

        <!-- Completed -->
        <div class="col-12 col-md-4">
            <div class="card text-white bg-success shadow h-100">
                <div class="card-body text-center text-md-start">
                    <h6>test Completed</h6>
                    <h3 class="fw-bold">35%</h3>
                </div>
            </div>
        </div>

        <!-- Pending -->
        <div class="col-12 col-md-4">
            <div class="card text-dark bg-warning shadow h-100">
                <div class="card-body text-center text-md-start">
                    <h6>Pending</h6>
                    <h3 class="fw-bold">35%</h3>
                </div>
            </div>
        </div>

    </div>

    <!-- Charts -->
    <div class="row g-3">

        <!-- Bar Chart -->
        <div class="col-12 col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-dark text-white text-center text-md-start">
                    Work Category Bar Chart
                </div>
                <div class="card-body text-center">
                    <img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid" style="max-height:300px;">
                </div>
            </div>
        </div>

        <!-- Pie Chart -->
        <div class="col-12 col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-dark text-white text-center text-md-start">
                    Project Status Pie Chart
                </div>
                <div class="card-body text-center">
                    <img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid" style="max-height:300px;">
                </div>
            </div>
        </div>

        <!-- Histogram -->
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-dark text-white text-center text-md-start">
                    Daily Work Histogram
                </div>
                <div class="card-body text-center">
                    <img src="data:image/png;base64,{{ histogram }}" class="img-fluid" style="max-height:350px;">
                </div>
            </div>
        </div>

    </div>

</div>

{% endblock %}