@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">
                <h2 class="page-title">Report - Block</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">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">
                        <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 class="modal-body">
                                <!-- Modal body (add form/content here if needed) -->
                                <p class="mb-0">Create a new report...</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </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">Blocks</h4>
                    </div>

                    <!-- Search box placed inside card-body so Tabler shows it -->
                    <div class="card-body pb-0">
                        <input type="text" id="searchBlock" class="form-control" placeholder="Search Unit, State, District or Block...">
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover text-center" id="blockTable">
                                <thead class="bg-dark text-white">
                                    <tr class="text-center align-middle">
                                        <th class="border px-4 py-2 bg-primary text-white">Unit Name</th>
                                        <th class="border px-4 py-2 bg-primary text-white">State Name</th>
                                        <th class="border px-4 py-2 bg-primary text-white">District Name</th>
                                        <th class="border px-4 py-2 bg-primary text-white">Block Name</th>
                                    </tr>
                                </thead>
                                <tbody id="blockTbody">
                                    @foreach($blocks as $block)
                                        <tr class="text-center">
                                            <td>{{ $block->district->state->unit->name ?? 'N/A' }}</td>
                                            <td>{{ $block->district->state->name ?? 'N/A' }}</td>
                                            <td>{{ $block->district->name ?? 'N/A' }}</td>
                                            <td class="text-start">{{ $block->name }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-center mt-3">
                            {{ $blocks->links() }}
                        </div>
                    </div> <!-- /.card-body -->
                </div> <!-- /.card -->

            </div> <!-- /.col-12 -->
        </div> <!-- /.row -->
    </div> <!-- /.container-xl -->
</div> <!-- /.page-body -->

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

    // Live search for blocks table
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('searchBlock');
        const tbody = document.getElementById('blockTbody');

        input.addEventListener('input', function () {
            const q = this.value.trim().toLowerCase();

            // show all if empty
            if (!q) {
                tbody.querySelectorAll('tr').forEach(r => r.style.display = '');
                return;
            }

            tbody.querySelectorAll('tr').forEach(row => {
                // skip empty/placeholder rows if any
                const cells = row.querySelectorAll('td');
                if (!cells.length) {
                    row.style.display = 'none';
                    return;
                }

                const unit = (cells[0]?.textContent || '').toLowerCase();
                const state = (cells[1]?.textContent || '').toLowerCase();
                const district = (cells[2]?.textContent || '').toLowerCase();
                const block = (cells[3]?.textContent || '').toLowerCase();

                const visible = unit.includes(q) || state.includes(q) || district.includes(q) || block.includes(q);
                row.style.display = visible ? '' : 'none';
            });
        });
    });
</script>

@endsection