@section('title', $title)
@push('css_file')
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}" />
@endpush
<x-app-layout>
    <x-slot name="header_link">
        <a href="/dashboard">Dashboard</a>
    </x-slot>

    <x-slot name="header_sub_link">
        <a href="javascript:history.back();">Daftar Berita</a>
    </x-slot>

    <x-slot name="header_parent">
        @yield('title')
    </x-slot>

    <div class="row">
        <div class="col-lg-4">
            <x-detail-penduduk-aksi :penduduk="$penduduk" />
        </div>
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-sm-flex align-items-center justify-content-between">
                        <h5 class="mb-0">@yield('title')</h5>
                        <div>
                            <a href="javascript:history.back();" class="btn btn-outline-secondary">Kembali</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info" role="alert"
                        style="border-left: 5px solid #0d6efd; background-color: #e9f3ff; padding: 1rem; margin-bottom: 1rem;">
                        <h5 class="alert-heading">💡Informasi Pengisian Form Hipertensi</h5>
                        <p>
                            Petugas kesehatan <strong>diwajibkan mengisi data tekanan darah</strong> dengan lengkap
                            sebelum menyimpan data hipertensi.
                        </p>
                        <ul>
                            <li><strong>Sistol</strong> &mdash; Masukkan nilai tekanan sistolik pasien (angka).</li>
                            <li><strong>Diastol</strong> &mdash; Masukkan nilai tekanan diastolik pasien (angka).</li>
                            <li><strong>Bulan Berobat</strong> &mdash; Pilih bulan saat pasien melakukan pemeriksaan
                                atau berobat.</li>
                        </ul>
                        <p class="mb-0">
                            Pastikan semua data diisi dengan benar untuk mendukung pencatatan riwayat kesehatan pasien
                            secara akurat.
                        </p>
                    </div>

                    <form action="/hipertensi/post" method="post" class="formSubmit">
                        @csrf
                        <input type="hidden" name="penduduk_id" value="{{ $penduduk->id }}" readonly>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <x-input-label value="Sistol" required="true" for="sistol" />
                                    <x-text-input type="number" class="form-control" id="sistol" name="sistol"
                                        required autocomplete="off" :value="old('sistol')" />
                                    <x-input-error :messages="$errors->get('sistol')" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <x-input-label value="Distol" required="true" for="distol" />
                                    <x-text-input type="number" class="form-control" id="distol" name="distol"
                                        required autocomplete="off" :value="old('sistol')" />
                                    <x-input-error :messages="$errors->get('distol')" />
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <x-text-input type="date" class="form-control" id="tanggal_cekup"
                                        name="tanggal_cekup" id="tanggal_cekup" required autocomplete="off"
                                        :value="old('tanggal_cekup')" />
                                    <x-input-error :messages="$errors->get('tanggal_cekup')" />
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <x-input-label value="Tempat Berobat" required="true" for="tempat_berobat" />
                                    <select name="tempat_berobat" id="tempat_berobat" class="form-select">
                                        <option value="">Pilih</option>
                                        @foreach ($tempatBerobat as $item)
                                            <option value="{{ $item }}"
                                                {{ old('tempat_berobat') == $item ? 'selected' : '' }}>
                                                {{ str_replace('_', ' ', ucwords($item)) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <x-input-error :messages="$errors->get('tempat_berobat')" />
                                </div>
                            </div>

                            <div class="col-sm-12" id="keterangan-div" style="display: none">
                                <div class="mb-3">
                                    <x-input-label value="Keterangan" required="" for="keterangan" />
                                    <textarea name="keterangan" id="keterangan" class="form-control" cols="5" rows="5"></textarea>
                                    <x-input-error :messages="$errors->get('keterangan')" />
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="pt-0 col-sm-3 text-sm-end col-form-label">Status Berobat</label>
                                <div class="col-sm-9">
                                    @php
                                        $default = old('status_berobat', true); // 'true' sebagai default jika tidak ada input sebelumnya
                                    @endphp
                                    @foreach ($statusBerobat as $item => $value)
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="status_berobat"
                                                value="{{ $item }}" {{ $item == $default ? 'checked' : '' }}
                                                id="checkBerobat{{ $item }}">
                                            <label class="form-check-label" for="checkBerobat{{ $item }}">
                                                {{ $value }} </label>
                                        </div>
                                    @endforeach
                                    <x-input-error :messages="$errors->get('status_berobat')" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 text-end">
                            <x-primary-button id="btnSimpan">Simpan</x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
    @include('admin.apps.hipertensi.includes.action_js')
</x-app-layout>