<?php include 'includes/header.php'; ?>
<?php include 'includes/sidebar.php'; ?>
<?php require 'includes/db_connect.php'; ?>

<style>
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.pagination {
    flex-wrap: wrap;
}

.card {
    max-width: 100%;
    overflow-x: hidden;
}
</style>

<h3 class="text-orange fw-bold">Street Naming Management</h3>
<p class="text-muted">Manage all registered streets within the municipality.</p>

<!-- Top Statistics -->
<div class="row mt-4">

    <div class="col-md-4">
        <div class="card text-center shadow">
            <div class="card-body">
                <h5 class="card-title text-orange">Total Streets</h5>
                <p class="card-text fs-4">
                    <?php
                    $result = $conn->query("SELECT COUNT(*) AS total FROM registered_streets");
                    $data = $result->fetch_assoc();
                    echo $data['total'] ?? 0;
                    ?>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card text-center shadow">
            <div class="card-body">
                <h5 class="card-title text-orange">Pending Approvals</h5>
                <p class="card-text fs-4">
                    <?php
                    $result = $conn->query("SELECT COUNT(*) AS total FROM renewal WHERE status='unrenewed'");
                    $data = $result->fetch_assoc();
                    echo $data['total'] ?? 0;
                    ?>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card text-center shadow">
            <div class="card-body">
                <h5 class="card-title text-orange">Approved Streets</h5>
                <p class="card-text fs-4">
                    <?php
                    $result = $conn->query("SELECT COUNT(*) AS total FROM registered_streets");
                    $data = $result->fetch_assoc();
                    echo $data['total'] ?? 0;
                    ?>
                </p>
            </div>
        </div>
    </div>

</div>

<!-- Add New Street Button -->
<!-- <div class="d-flex justify-content-end mt-4">
    <a href="add_street.php" class="btn btn-orange px-4 py-2 shadow">
        + Add New Street
    </a>
</div> -->

<!-- Street Table -->
<div class="card mt-4 shadow">
    <div class="card-header bg-orange text-white d-flex justify-content-between align-items-center">
        <h5 class="m-0" style="color:black;">All Registered Streets</h5>

        <!-- Realtime Search Bar -->
        <input type="text" 
               id="streetSearch" 
               class="form-control form-control-sm" 
               placeholder="Search street..."
               style="max-width:300px;">
    </div>

    <div class="card-body">

        <!-- AJAX Loaded Table -->
        <div id="streetTableWrapper">
            <?php include 'ajax_street_table.php'; ?>
        </div>

    </div>
</div>

<script>
// AJAX Realtime Search
document.getElementById('streetSearch').addEventListener('keyup', function() {
    let query = this.value;

    fetch("ajax_street_table.php?q=" + query)
    .then(response => response.text())
    .then(data => {
        document.getElementById('streetTableWrapper').innerHTML = data;
    });
});

// Pagination handler (capturing clicks)
document.addEventListener("click", function(e){
    if(e.target.classList.contains("pagination-link")){
        e.preventDefault();
        let page = e.target.getAttribute("data-page");
        let q = document.getElementById("streetSearch").value;

        fetch("ajax_street_table.php?page=" + page + "&q=" + q)
        .then(res => res.text())
        .then(data => {
            document.getElementById("streetTableWrapper").innerHTML = data;
        });
    }
});
</script>

<?php include 'includes/footer.php'; ?>
