@extends('layouts.app')

@section('content')

<div class="max-w-3xl mx-auto p-6">

    <!-- TITLE -->
    <div class="mb-6">

        <h1 class="text-3xl font-bold text-[#1c1d56]">
            Edit Anak Binaan
        </h1>

        <p class="text-slate-500 text-sm mt-1">
            Perbarui data anak binaan
        </p>

    </div>

    <!-- CARD -->
    <div class="bg-white rounded-2xl shadow border border-slate-200 overflow-hidden">

        <!-- HEADER -->
        <div class="bg-[#1c1d56] px-6 py-4 text-white">

            <h2 class="font-semibold">
                Form Edit Anak Binaan
            </h2>

        </div>

        <!-- FORM -->
        <form action="{{ route('admin.anak-binaan.update', $data->id) }}"
              method="POST"
              class="p-6 space-y-5">

            @csrf
            @method('PUT')

            <!-- NAMA -->
            <div>
                <label class="block text-sm font-semibold mb-2">
                    Nama Anak
                </label>

                <input type="text"
                    name="nama"
                    value="{{ $data->nama }}"
                    class="w-full border border-slate-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#1c1d56]">
            </div>

            <!-- GRID -->
            <div class="grid md:grid-cols-2 gap-5">

                <!-- TGL LAHIR -->
                <div>
                    <label class="block text-sm font-semibold mb-2">
                        Tanggal Lahir
                    </label>

                    <input type="date"
                        name="tanggal_lahir"
                        value="{{ $data->tanggal_lahir }}"
                        class="w-full border border-slate-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#1c1d56]">
                </div>

                <!-- TGL MASUK -->
                <div>
                    <label class="block text-sm font-semibold mb-2">
                        Tanggal Masuk
                    </label>

                    <input type="date"
                        name="tanggal_masuk"
                        value="{{ $data->tanggal_masuk }}"
                        class="w-full border border-slate-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#1c1d56]">
                </div>

            </div>

            <!-- ALAMAT -->
            <div>
                <label class="block text-sm font-semibold mb-2">
                    Alamat
                </label>

                <textarea name="alamat"
                    rows="4"
                    class="w-full border border-slate-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#1c1d56]">{{ $data->alamat }}</textarea>
            </div>

            <!-- BUTTON -->
            <div class="pt-2">

                <button type="submit"
                    class="w-full bg-[#1c1d56] hover:opacity-90 text-white p-3 rounded-xl font-semibold transition">

                    Update Data

                </button>

            </div>

        </form>

    </div>

</div>

@endsection