@extends('layouts.app')

@section('title', isset($anak) ? 'Edit Anak Yatim' : 'Tambah Anak Yatim')
@section('page-title', isset($anak) ? 'Edit Anak Yatim' : 'Tambah Anak Yatim Baru')
@section('breadcrumb', 'Beranda / Anak Yatim / ' . (isset($anak) ? 'Edit' : 'Tambah'))

@section('content')
<div style="max-width:640px;">
<div class="card">
    <div class="card-header">
        <i class="fa-solid fa-child-reaching" style="color:#1e6f5c;"></i>
        <span class="card-title">{{ isset($anak) ? 'Edit Anak Yatim' : 'Form Anak Yatim Baru' }}</span>
    </div>
    <div class="card-body">
        <form method="POST"
            action="{{ isset($anak) ? route('anak-yatim.update', $anak) : route('anak-yatim.store') }}">
            @csrf
            @if(isset($anak)) @method('PUT') @endif

            {{-- Kode otomatis --}}
            <div class="form-group">
                <label>Kode</label>
                <div style="background:#f0f7f4; border:1px solid #c8e0d8; border-radius:8px;
                    padding:10px 14px; font-weight:700; color:#1e6f5c; font-size:15px;">
                    {{ isset($anak) ? $anak->kode : $kodeBerikutnya }}
                    <span style="font-size:12px; font-weight:400; color:#7aaa94; margin-left:8px;">(otomatis)</span>
                </div>
            </div>

            <div class="form-group">
                <label>Nama Lengkap <span style="color:#dc2626;">*</span></label>
                <input type="text" name="nama"
                    class="form-control @error('nama') is-invalid @enderror"
                    value="{{ old('nama', $anak->nama ?? '') }}"
                    placeholder="Nama lengkap anak" required>
                @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- Tanggal Lahir + Umur otomatis --}}
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <div class="form-group">
                    <label>Tanggal Lahir <span style="color:#dc2626;">*</span></label>
                    <input type="date" name="tanggal_lahir" id="tanggal_lahir"
                        class="form-control @error('tanggal_lahir') is-invalid @enderror"
                        value="{{ old('tanggal_lahir', isset($anak) ? $anak->tanggal_lahir->format('Y-m-d') : '') }}"
                        required>
                    @error('tanggal_lahir')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label>Umur</label>
                    <div id="umur-display"
                        style="background:#f0f7f4; border:1px solid #c8e0d8; border-radius:8px;
                        padding:10px 14px; font-weight:700; color:#1e6f5c; font-size:15px;
                        min-height:42px;">
                        @if(isset($anak))
                            {{ $anak->umur }} tahun
                        @else
                            <span style="color:#9db8ac; font-weight:400; font-size:13px;">Otomatis dari tgl lahir</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Mushola / Masjid <span style="color:#dc2626;">*</span></label>
                <input type="text" name="mushola"
                    class="form-control @error('mushola') is-invalid @enderror"
                    value="{{ old('mushola', $anak->mushola ?? '') }}"
                    placeholder="Nama mushola / masjid" required>
                @error('mushola')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label>Sekolah</label>
                <input type="text" name="sekolah"
                    class="form-control @error('sekolah') is-invalid @enderror"
                    value="{{ old('sekolah', $anak->sekolah ?? '') }}"
                    placeholder="Nama sekolah (opsional)">
                @error('sekolah')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label>Keterangan</label>
                <textarea name="keterangan"
                    class="form-control @error('keterangan') is-invalid @enderror"
                    rows="3"
                    placeholder="Keterangan tambahan (opsional)">{{ old('keterangan', $anak->keterangan ?? '') }}</textarea>
                @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div style="display:flex; gap:10px; margin-top:8px;">
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ isset($anak) ? 'Simpan Perubahan' : 'Tambah Anak Yatim' }}
                </button>
                <a href="{{ route('anak-yatim.index') }}" class="btn btn-outline">Batal</a>
            </div>
        </form>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
    function hitungUmur(tanggalLahir) {
        if (!tanggalLahir) return null;

        const lahir = new Date(tanggalLahir);
        const today = new Date();

        let umur = today.getFullYear() - lahir.getFullYear();
        const bulan = today.getMonth() - lahir.getMonth();

        if (bulan < 0 || (bulan === 0 && today.getDate() < lahir.getDate())) {
            umur--;
        }

        return umur;
    }

    document.getElementById('tanggal_lahir').addEventListener('change', function() {
        const umur    = hitungUmur(this.value);
        const display = document.getElementById('umur-display');

        if (umur !== null && umur >= 0) {
            display.innerHTML = '<span style="color:#1e6f5c;">' + umur + ' tahun</span>';
        } else {
            display.innerHTML = '<span style="color:#dc2626; font-size:13px;">Tanggal tidak valid</span>';
        }
    });
</script>
@endpush