@extends('layouts.main')
@section('main-container')
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                
                    <h2 class="page-title">
                        Report: District
                    </h2>
                </div>
				<!-- Page title actions -->
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
	                    <span class="d-none d-sm-inline">
                            <a href="#" class="btn btn-1">New view</a>
	                    </span>
                            <a href="/geo/district" class="btn btn-primary btn-5 d-none d-sm-inline-block" >
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
                                ADD 
                            </a>
                            <a href="#" class="btn btn-primary btn-6 d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                            </a>
                    </div>

                    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                        <h5 class="modal-title">New report</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
	    </div>
    </div>
</div>


<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-12">

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Districts</h4>
                    </div>

                    <!-- 🔍 Search Box -->
                    <div class="card-body pb-0">
                        <input type="text" id="searchDistrict" class="form-control"
                               placeholder="Search Unit, State, or District...">
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover" id="districtTable">
                                <thead class="table-light">
                                    <tr class="bg-primary text-white text-center align-middle">
                                        <th class="border px-4 py-2">Unit Name</th>
                                        <th class="border px-4 py-2">State Name</th>
                                        <th class="border px-4 py-2">District Name</th>
                                        <th class="border px-4 py-2">Created At</th>
                                        <th class="border px-4 py-2">Updated At</th>
                                    </tr>
                                </thead>
                                <tbody id="districtTbody">
                                    @forelse ($districts as $district)
                                        <tr class="text-center">
                                            <td>{{ $district->state->unit->name ?? '-' }}</td>
                                            <td>{{ $district->state->name ?? '-' }}</td>
                                            <td>{{ $district->name }}</td>
                                            <td>{{ $district->created_at }}</td>
                                            <td>{{ $district->updated_at }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">No units found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="mt-3 d-flex justify-content-center">
                            {{ $districts->links() }}
                        </div>

                    </div>
                </div>

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


<!-- Auto-hide alert -->
<script>
setTimeout(() => {
    const alert = document.getElementById('successAlert');
    if (alert) alert.style.display = 'none';
}, 3000);
</script>

<!-- 🔍 Live Search Script -->
<script>
document.getElementById("searchDistrict").addEventListener("input", function () {
    let q = this.value.toLowerCase().trim();
    let rows = document.querySelectorAll("#districtTbody tr");

    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(q) ? "" : "none";
    });
});
</script>

@endsection