{% extends "base.html" %}
{% block content %}

<div class="container mt-3">

    <h4>RA Bill Dashboard</h4>

    <div class="row mb-3">

        <!-- Contractor -->
        <div class="col-md-4">
            <select id="subcontractor" class="form-control">
                <option value="">Select Contractor</option>
                {% for s in subcontractors %}
                <option value="{{s.id}}">{{s.subcontractor_name}}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Category -->
        <div class="col-md-4">
            <select id="category" class="form-control">
                <option value="">Select Category</option>
                <option value="trench_excavation">Trench Excavation</option>
            </select>
        </div>

        <!-- RA Bill -->
        <div class="col-md-4">
            <select id="ra_bill" class="form-control">
                <option value="">RA Bill</option>
            </select>
        </div>

    </div>

    <div class="card">
        <div class="card-body">
            <canvas id="comparisonChart"></canvas>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    let chart;

    // ✅ Load RA Bills
    function loadRABills() {

        let subcontractor = document.getElementById("subcontractor").value
        let category = document.getElementById("category").value

        if (!subcontractor || !category) return

        fetch(`/dashboard/api/get-ra-bills?subcontractor=${subcontractor}&category=${category}`)
            .then(res => res.json())
            .then(data => {

                let ra = document.getElementById("ra_bill")
                ra.innerHTML = '<option value="">RA Bill</option>'

                data.ra_bills.forEach(bill => {
                    ra.innerHTML += `<option value="${bill}">${bill}</option>`
                })
            })
    }

    // ✅ Load Chart
    function loadChart() {

        let subcontractor = document.getElementById("subcontractor").value
        let ra_bill = document.getElementById("ra_bill").value

        fetch(`/dashboard/api/trench-analysis?subcontractor=${subcontractor}&ra_bill=${ra_bill}`)
            .then(res => res.json())
            .then(data => {

                if (chart) chart.destroy()

                chart = new Chart(document.getElementById("comparisonChart"), {
                    type: "bar",
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: "Depth",
                                data: data.depth,
                                backgroundColor: "green"
                            },
                            {
                                label: "Excavation Qty (cum)",
                                data: data.qty,
                                backgroundColor: "blue"
                            }
                        ]
                    }
                })
            })
    }

    // Events
    document.getElementById("subcontractor").addEventListener("change", () => {
        loadRABills()
    })

    document.getElementById("category").addEventListener("change", () => {
        loadRABills()
    })

    document.getElementById("ra_bill").addEventListener("change", loadChart)

</script>

{% endblock %}