@extends('layouts.main')
@section('container')
    <div class="card shadow mb-4">
        <div class="card-header py-3 text-center">
            <h5 class="m-0 font-weight-bold text-primary">{{ $heading }}</h5>
        </div>
        <div class="card-body">
            <form id="formTambahBalita" action="/tambah_pasien/create" method="post">
                @csrf
                <div class="form-group">
                    <label>NIK Ibu</label>
                    <input type="number" name="nik_ibu" class="form-control @error('nik_ibu')is-invalid @enderror"
                        value="{{ old('nik_ibu') }}">
                    @error('nik_ibu')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Tanggal Lahir Ibu</label>
                    <input type="date" name="tanggal_lahir_ibu"
                        class="form-control @error('tanggal_lahir_ibu')is-invalid @enderror"
                        value="{{ old('tanggal_lahir_ibu') }}">
                    @error('tanggal_lahir_ibu')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Nama Ibu</label>
                    <input type="text" name="nama_ibu" class="form-control @error('nama_ibu')is-invalid @enderror"
                        value="{{ old('nama_ibu') }}">
                    @error('nama_ibu')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                {{-- <div class="form-group">
                    <label>Umur Ibu</label>
                    <input type="number" name="umur_ibu" class="form-control @error('umur_ibu')is-invalid @enderror"
                        value="{{ old('umur_ibu') }}">
                    @error('umur_ibu')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div> --}}
                <div class="form-group">
                    <label>Tanggal Lahir Ayah</label>
                    <input type="date" name="tanggal_lahir_ayah"
                        class="form-control @error('tanggal_lahir_ayah')is-invalid @enderror"
                        value="{{ old('tanggal_lahir_ayah') }}">
                    @error('tanggal_lahir_ayah')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Nama Ayah</label>
                    <input type="text" name="nama_ayah" class="form-control @error('nama_ayah')is-invalid @enderror"
                        value="{{ old('nama_ayah') }}">
                    @error('nama_ayah')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                {{-- <div class="form-group">
                    <label>Umur Ayah</label>
                    <input type="number" name="umur_ayah" class="form-control @error('umur_ayah')is-invalid @enderror"
                        value="{{ old('umur_ayah') }}">
                    @error('umur_ayah')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div> --}}
                <div class="form-group">
                    <label>Alamat</label>
                    <input type="text" name="alamat" class="form-control @error('alamat')is-invalid @enderror"
                        value="{{ old('alamat') }}">
                    @error('alamat')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Anak Ke</label>
                    <input type="number" name="anak_ke" class="form-control @error('anak_ke')is-invalid @enderror"
                        value="{{ old('anak_ke') }}">
                    @error('anak_ke')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="status_ayah">Status Ayah</label>
                    <select class="form-control @error('status_ayah') is-invalid @enderror" name="status_ayah"
                        id="status_ayah">
                        <option value="" {{ old('status_ayah') == '' ? 'selected' : '' }}>--- Pilih ---</option>
                        <option value="Masih Hidup" {{ old('status_ayah') == 'Masih Hidup' ? 'selected' : '' }}>Masih Hidup
                        </option>
                        <option value="Cerai" {{ old('status_ayah') == 'Cerai' ? 'selected' : '' }}>Cerai</option>
                        <option value="Meninggal" {{ old('status_ayah') == 'Meninggal' ? 'selected' : '' }}>Meninggal
                        </option>
                    </select>
                    @error('status_ayah')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="status_ibu">Status Ibu</label>
                    <select class="form-control @error('status_ibu') is-invalid @enderror" name="status_ibu"
                        id="status_ibu">
                        <option value="" {{ old('status_ibu') == '' ? 'selected' : '' }}>--- Pilih ---</option>
                        <option value="Sudah Melahirkan" {{ old('status_ibu') == 'Sudah Melahirkan' ? 'selected' : '' }}>
                            Sudah Melahirkan</option>
                        <option value="Hamil" {{ old('status_ibu') == 'Hamil' ? 'selected' : '' }}>Hamil</option>
                    </select>
                    @error('status_ibu')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group" id="nikBayiSection" style="display: none;">
                    <label for="status_nik_balita">Keterangan NIK Balita</label>
                    <select class="form-control @error('status_nik_balita') is-invalid @enderror" name="status_nik_balita"
                        id="status_nik_balita">
                        <option value="" {{ old('status_nik_balita') == '' ? 'selected' : '' }}>--- Pilih ---
                        </option>
                        <option value="Memiliki NIK" {{ old('status_nik_balita') == 'Memiliki NIK' ? 'selected' : '' }}>
                            Memiliki NIK</option>
                        <option value="Belum Memiliki NIK"
                            {{ old('status_nik_balita') == 'Belum Memiliki NIK' ? 'selected' : '' }}>Belum Memiliki NIK
                        </option>
                    </select>
                    @error('status_nik_balita')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div id="BayiSection" class="form-group" style="display: none;">
                    <label>NIK Balita</label>
                    <input type="number" name="nik_balita" class="form-control @error('nik_balita') is-invalid @enderror"
                        value="{{ old('nik_balita') }}">
                    @error('nik_balita')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div id="namaBayiSection" class="form-group" style="display: none;">
                    <label>Nama Balita</label>
                    <input type="text" name="nama_balita"
                        class="form-control @error('nama_balita') is-invalid @enderror" value="{{ old('nama_balita') }}">
                    @error('nama_balita')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div id="jkSection" class="form-group" style="display: none;">
                    <label for="jenis_kelamin">Jenis Kelamin</label>
                    <select class="form-control @error('jenis_kelamin') is-invalid @enderror" name="jenis_kelamin"
                        id="jenis_kelamin">
                        <option value="" {{ old('jenis_kelamin') == '' ? 'selected' : '' }}>--- Pilih ---</option>
                        <option value="Laki Laki" {{ old('jenis_kelamin') == 'Laki Laki' ? 'selected' : '' }}>Laki Laki
                        </option>
                        <option value="Perempuan" {{ old('jenis_kelamin') == 'Perempuan' ? 'selected' : '' }}>Perempuan
                        </option>
                    </select>
                    @error('jenis_kelamin')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div id="tglSection" class="form-group" style="display: none;">
                    <label>Tanggal Lahir</label>
                    <input type="date" name="tanggal_lahir"
                        class="form-control @error('tanggal_lahir')is-invalid @enderror"
                        value="{{ old('tanggal_lahir') }}">
                    @error('tanggal_lahir')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div id="jamSection" class="form-group" style="display: none;">
                    <label>Jam Lahir</label>
                    <input type="time" name="jam_lahir" class="form-control @error('jam_lahir')is-invalid @enderror"
                        value="{{ old('jam_lahir') }}">
                    @error('jam_lahir')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>


                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var statusSelect = document.getElementById("status_ibu");
            var nikBayiSection = document.getElementById("nikBayiSection");
            var namaBayiSection = document.getElementById("namaBayiSection");
            var jkSection = document.getElementById("jkSection");
            var tglSection = document.getElementById("tglSection");
            var jamSection = document.getElementById("jamSection");

            var BayiSection = document.getElementById("BayiSection");
            var statusSelectBayi = document.getElementById("status_nik_balita");

            function updateVisibility() {
                console.log("Status Ibu:", statusSelect.value);
                console.log("Status NIK Balita:", statusSelectBayi.value);

                if (statusSelect.value === "Sudah Melahirkan") {
                    nikBayiSection.style.display = "block";
                    namaBayiSection.style.display = "block";
                    jkSection.style.display = "block";
                    tglSection.style.display = "block";
                    jamSection.style.display = "block";

                } else {
                    nikBayiSection.style.display = "none";
                    namaBayiSection.style.display = "none";
                    jkSection.style.display = "none";
                    tglSection.style.display = "none";
                    jamSection.style.display = "none";

                }

                if (statusSelect.value === "Sudah Melahirkan" && statusSelectBayi.value === "Memiliki NIK") {
                    BayiSection.style.display = "block";
                } else {
                    BayiSection.style.display = "none";
                }
            }

            // Membuat pengecekan awal saat halaman dimuat
            updateVisibility();

            // Menambahkan event listener ke dropdown
            statusSelect.addEventListener("change", updateVisibility);
            statusSelectBayi.addEventListener("change", updateVisibility);

            // Menghapus class is-invalid saat input mendapat fokus
            var inputs = document.querySelectorAll('.form-control');
            inputs.forEach(function(input) {
                input.addEventListener('focus', function() {
                    this.classList.remove('is-invalid');
                    var feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback) {
                        feedback.style.display = 'none';
                    }
                });
            });

            var formCheckInputs = document.querySelectorAll('.form-check-input');
            formCheckInputs.forEach(function(formCheckInput) {
                formCheckInput.addEventListener('change', function() {
                    var errorFeedback = this.parentNode.parentNode.querySelector(
                        '.invalid-feedback');
                    if (errorFeedback) {
                        errorFeedback.style.display = 'none';
                    }
                });
            });
        });
    </script>
@endsection