@extends('layouts.main')
@section('container')
    <div class="card shadow mb-4">
        <div class="card-header py-3 text-center">
            {{-- <a class="btn btn-primary mr-3" href="/data_pasien/balita"><i class="fas fa-arrow-left"></i></a> --}}
            <h5 class="m-0 font-weight-bold text-primary ">{{ $heading }}</h5>
        </div>

        <div class="card-body">
            <form action ="/data_obat/tambah/create" method="post">
                @csrf
                <div class="form-group">
                    <label>Nama Obat</label>
                    <input type="text" name="nama_obat" class="form-control @error('nama_obat')is-invalid @enderror"
                        value="{{ old('nama_obat') }}">
                    @error('nama_obat')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="jenis_obat">Jenis Obat</label>
                    <select class="form-control @error('jenis_obat') is-invalid @enderror" name="jenis_obat"
                        id="jenis_obat">
                        <option value="" {{ old('jenis_obat') == '' ? 'selected' : '' }}>
                            ---
                            Pilih ---
                        </option>
                        <option value="Vitamin" {{ old('jenis_obat') == 'Vitamin' ? 'selected' : '' }}>
                            Vitamin
                        </option>
                        <option value="Imunisasi" {{ old('jenis_obat') == 'Imunisasi' ? 'selected' : '' }}>
                            Imunisasi
                        </option>

                    </select>
                    @error('jenis_obat')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="form-group">
                    <label>Keterangan</label>
                    <input type="text" name="keterangan_obat"
                        class="form-control @error('keterangan_obat')is-invalid @enderror"
                        value="{{ old('keterangan_obat') }}">
                    @error('keterangan_obat')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Tambah</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var statusSelect = document.getElementById("status");
            var namaBayiSection = document.getElementById("namaBayiSection");

            // Membuat pengecekan awal saat halaman dimuat
            if (statusSelect.value === "Sudah Melahirkan") {
                namaBayiSection.style.display = "block";
                jkSection.style.display = "block";
                tglSection.style.display = "block";
                akSection.style.display = "block";
            }

            // Menambahkan event listener ke dropdown
            statusSelect.addEventListener("change", function() {
                if (this.value === "Sudah Melahirkan") {
                    namaBayiSection.style.display = "block";
                    jkSection.style.display = "block";
                    tglSection.style.display = "block";
                    akSection.style.display = "block";
                } else {
                    namaBayiSection.style.display = "none";
                    jkSection.style.display = "none";
                    tglSection.style.display = "none";
                    akSection.style.display = "none";
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {

            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