@extends('admin.layout.main')
@section('content')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Data Tables</h1>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Sensor Distance Data</h5>
                        
                        <!-- Calendar for Date Range Selection -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="startDate">Start Date</label>
                                <input type="date" id="startDate" class="form-control" max="">
                            </div>
                            <div class="col-md-4">
                                <label for="endDate">End Date</label>
                                <input type="date" id="endDate" class="form-control" max="">
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button class="btn btn-primary" id="filterBtn">Filter</button>
                            </div>
                        </div>

                        <!-- Table for displaying sensor data -->
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Waktu</th>
                                    <th>Distance Klampisan Atas</th>
                                    <th>Distance Klampisan Bawah</th>
                                    <th>Total Distance</th>
                                </tr>
                            </thead>
                            <tbody id="sensorDataTable">
                                <!-- Data will be populated here by JavaScript -->
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById("startDate");
    const endDateInput = document.getElementById("endDate");
    const sensorDataTable = document.getElementById("sensorDataTable");

    const today = new Date().toISOString().split("T")[0];
    startDateInput.max = today;
    endDateInput.max = today;

    startDateInput.addEventListener("change", function() {
        const startDate = new Date(this.value);
        const maxEndDate = new Date(startDate);
        maxEndDate.setDate(startDate.getDate() + 7);
        endDateInput.min = this.value;
        endDateInput.max = maxEndDate.toISOString().split("T")[0];
    });

    endDateInput.addEventListener("change", function() {
        startDateInput.max = this.value;
    });

    document.getElementById("filterBtn").addEventListener("click", function() {
        const startDate = startDateInput.value;
        const endDate = endDateInput.value;
        
        if (startDate && endDate) {
            fetch(`/getSensorData?start_date=${startDate}&end_date=${endDate}`)
                .then(response => response.json())
                .then(data => {
                    sensorDataTable.innerHTML = "";
                    data.forEach(row => {
                        const tableRow = `
                            <tr>
                                <td>${row.time_interval}</td>
                                <td>${row.distance_atas}</td>
                                <td>${row.distance_bawah}</td>
                                <td>${row.total_distance}</td>
                            </tr>
                        `;
                        sensorDataTable.innerHTML += tableRow;
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        } else {
            alert("Silakan pilih rentang tanggal.");
        }
    });
});
</script>
@endsection