@extends('layouts.app')

@section('content')

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

    <div class="bg-white rounded-xl shadow p-6">

        <h1 class="text-2xl font-bold mb-5 text-[#1c1d56]">
        @if(session('warning'))
            <div class="text-red-500 text-sm mb-3">
                {{ session('warning') }}
            </div>
        @endif
        
            Tambah Tracking Anak
        </h1>

        @if($errors->any())

            <div class="bg-red-100 text-red-700 p-3 rounded mb-4">

                <ul class="list-disc pl-5">

                    @foreach($errors->all() as $e)

                        <li>{{ $e }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

        <form method="POST"
              action="{{ route('staff.tracking.store') }}">

            @csrf
            
            <div class="mb-4">
            <label class="block mb-1 font-medium">
                Pilih Anak Binaan
            </label>
            <select
                name="anak_binaan_id"
                class="w-full border rounded-lg p-2">
                <option value="">
                    -- Pilih Anak --
                </option>
                @foreach($anak as $a)
                    <option value="{{ $a->id }}">
                        {{ $a->nama }}
                    </option>
                @endforeach
            </select>
        </div>
            
            <div class="mb-5">
                <label class="block mb-1 font-medium">
                    Tanggal Ekspirasi
                </label>
                <input type="date"
                       name="tanggal_ekspirasi_awal"
                       class="w-full border rounded-lg p-2">
            </div>
            <div class="flex gap-2">
                <button
                    class="bg-[#1c1d56] text-white px-4 py-2 rounded-lg">
                    Simpan
                </button>
                <a href="{{ route('staff.tracking.index') }}"
                   class="border px-4 py-2 rounded-lg">
                    Batal
                </a>
            </div>
        </form>
    </div>

</div>

@endsection