@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]">
            Tambah Anak Binaan
        </h1>

        <p class="text-slate-500 text-sm mt-1">
            Tambahkan data anak binaan baru ke sistem
        </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 Anak Binaan
            </h2>

        </div>

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

            @csrf

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

                <input type="text"
                    name="nama"
                    placeholder="Masukkan nama anak binaan"
                    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">

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

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

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

                    <input type="date"
                        name="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"
                    placeholder="Masukkan alamat lengkap"
                    class="w-full border border-slate-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-[#1c1d56]"></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">

                    Simpan Data

                </button>

            </div>

        </form>

    </div>

</div>

@endsection