<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Parents
            </h2>

            <a href="{{ route('admin.parents.create') }}"
               class="rounded-md bg-gray-900 px-4 py-2 text-white text-sm hover:bg-gray-800">
                Add parent
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-4">

            @if(session('success'))
                <div class="rounded-md border border-green-200 bg-green-50 p-4 text-green-800">
                    {{ session('success') }}
                </div>
            @endif

            <div class="rounded-lg border bg-white p-4 shadow-sm">
                <form method="GET" class="flex gap-2">
                    <input type="text" name="q" value="{{ $q }}"
                           class="w-full rounded-md border-gray-300"
                           placeholder="Search name or email...">
                    <button class="rounded-md bg-gray-900 px-4 py-2 text-white text-sm">
                        Search
                    </button>
                </form>
            </div>

            <div class="rounded-lg border bg-white shadow-sm overflow-hidden">
                <table class="min-w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr class="text-left">
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Email</th>
                            <th class="px-4 py-3">Phone</th>
                            <th class="px-4 py-3"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($parents as $parent)
                            <tr class="border-t">
                                <td class="px-4 py-3 font-medium">{{ $parent->user->first_name }} {{ $parent->user->last_name }}</td>
                                <td class="px-4 py-3">{{ $parent->user->email }}</td>
                                <td class="px-4 py-3">{{ $parent->phone ?? '—' }}</td>
                                <td class="px-4 py-3 text-right">
                                    <a href="{{ route('admin.parents.edit', $parent) }}"
                                       class="text-gray-900 hover:underline">
                                        Edit
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr class="border-t">
                                <td colspan="4" class="px-4 py-6 text-center text-gray-500">
                                    No parents found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div>
                {{ $parents->links() }}
            </div>

        </div>
    </div>
</x-app-layout>
