@php
    $records = [
        ['code' => 'RD-001', 'name' => 'แผนงานประจำปี', 'detail' => 'แผนปฏิบัติงานภาพรวมของหน่วยงาน', 'status' => 'ใช้งาน', 'updated_at' => '12 ต.ค. 2569'],
        ['code' => 'RD-002', 'name' => 'โครงการพัฒนาบุคลากร', 'detail' => 'อบรมและพัฒนาทักษะเจ้าหน้าที่', 'status' => 'ใช้งาน', 'updated_at' => '18 ต.ค. 2569'],
        ['code' => 'RD-003', 'name' => 'จัดซื้อครุภัณฑ์', 'detail' => 'รายการครุภัณฑ์ประจำไตรมาส', 'status' => 'รอดำเนินการ', 'updated_at' => '21 ต.ค. 2569'],
        ['code' => 'RD-004', 'name' => 'สรุปความก้าวหน้า', 'detail' => 'สรุปผลดำเนินงานรายเดือน', 'status' => 'ใช้งาน', 'updated_at' => '25 ต.ค. 2569'],
        ['code' => 'RD-005', 'name' => 'แผนสำรองเดิม', 'detail' => 'แผนที่ปิดการใช้งานแล้ว', 'status' => 'ไม่ใช้งาน', 'updated_at' => '2 ก.ย. 2569'],
    ];
@endphp

<div class="space-y-6">
    <div>
        <nav aria-label="เส้นทางเมนู">
            <ol class="flex flex-wrap items-center gap-2 text-sm text-slate-500">
                @foreach ($breadcrumbs as $crumb)
                    @if (! $loop->first)
                        <li aria-hidden="true">/</li>
                    @endif
                    <li>
                        @if ($crumb->is($menu))
                            <span class="font-medium text-slate-900" aria-current="page">{{ $crumb->menu_name }}</span>
                        @else
                            <a href="{{ route('shell', $crumb) }}" class="hover:text-slate-900">{{ $crumb->menu_name }}</a>
                        @endif
                    </li>
                @endforeach
            </ol>
        </nav>
        <h2 class="mt-2 text-2xl font-semibold">{{ $menu->menu_name }}</h2>
    </div>

    <section class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold">แบบฟอร์มการบันทึกข้อมูล</h3>
        <form class="mt-4 grid gap-4 sm:grid-cols-2" onsubmit="return false">
            <!-- <label class="block text-sm font-medium">
                รหัส
                <input name="code" type="text" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-normal outline-none focus:border-slate-500">
            </label> -->
            <label class="block text-sm font-medium">
                ชื่อรายการ
                <input name="name" type="text" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-normal outline-none focus:border-slate-500">
            </label>
            <!-- <label class="block text-sm font-medium sm:col-span-2">
                รายละเอียด
                <textarea name="detail" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-normal outline-none focus:border-slate-500"></textarea>
            </label> -->
            <!-- <label class="block text-sm font-medium">
                สถานะ
                <select name="status" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 font-normal outline-none focus:border-slate-500">
                    <option value="active">ใช้งาน</option>
                    <option value="pending">รอดำเนินการ</option>
                    <option value="inactive">ไม่ใช้งาน</option>
                </select>
            </label> -->
            <div class="flex items-end">
                <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
                    บันทึก
                </button>
            </div>
        </form>
    </section>
    
    <section class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h3 class="text-lg font-semibold">รายการ</h3>
            <label class="block w-full sm:max-w-xs">
                <span class="sr-only">ค้นหารายการ</span>
                <input
                    id="record-search"
                    type="search"
                    placeholder="ค้นหาชื่อ รหัส หรือรายละเอียด"
                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-slate-500"
                >
            </label>
        </div>

        <div class="mt-4 overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 text-slate-500">
                    <tr>
                        <th class="px-3 py-2 font-medium">รหัส</th>
                        <th class="px-3 py-2 font-medium">ชื่อรายการ</th>
                        <th class="px-3 py-2 font-medium">รายละเอียด</th>
                        <th class="px-3 py-2 font-medium">สถานะ</th>
                        <th class="px-3 py-2 font-medium">วันที่อัปเดต</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($records as $record)
                        <tr
                            class="border-b border-slate-100"
                            data-record-row
                            data-search="{{ mb_strtolower($record['code'].' '.$record['name'].' '.$record['detail'].' '.$record['status']) }}"
                        >
                            <td class="px-3 py-3 font-medium">{{ $record['code'] }}</td>
                            <td class="px-3 py-3">{{ $record['name'] }}</td>
                            <td class="px-3 py-3 text-slate-600">{{ $record['detail'] }}</td>
                            <td class="px-3 py-3">{{ $record['status'] }}</td>
                            <td class="px-3 py-3 text-slate-600">{{ $record['updated_at'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <p id="record-empty" class="mt-4 text-sm text-slate-500" hidden>ไม่พบรายการที่ค้นหา</p>
    </section>

    
</div>

<script>
    document.getElementById('record-search').addEventListener('input', (event) => {
        const query = event.target.value.trim().toLowerCase();
        let visible = 0;

        document.querySelectorAll('[data-record-row]').forEach((row) => {
            const match = row.dataset.search.includes(query);
            row.hidden = !match;
            if (match) {
                visible += 1;
            }
        });

        document.getElementById('record-empty').hidden = visible !== 0;
    });
</script>