<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Edit parent: {{ $parent->name }}
        </h2>
    </x-slot>

    <div class="py-6">
        <div class="max-w-3xl 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-6 shadow-sm">
                <form method="POST" action="{{ route('admin.parents.update', $parent) }}" class="space-y-4">
                    @csrf
                    @method('PUT')

                    @include('admin.parents.partials.form', ['parent' => $parent])

                    <div class="flex justify-between">
                        <form method="POST" action="{{ route('admin.parents.destroy', $parent) }}"
                              onsubmit="return confirm('Delete this parent?');">
                            @csrf
                            @method('DELETE')
                            <button class="rounded-md border border-red-300 px-4 py-2 text-sm text-red-700 hover:bg-red-50">
                                Delete
                            </button>
                        </form>

                        <div class="flex gap-2">
                            <a href="{{ route('admin.parents.index') }}"
                               class="rounded-md border px-4 py-2 text-sm">
                                Back
                            </a>
                            <button class="rounded-md bg-gray-900 px-4 py-2 text-white text-sm">
                                Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>

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