@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 Hipertensi</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/update" method="post" class="formSubmit">
                        @csrf
                        @method('put')
                        <input type="hidden" name="penduduk_id" value="{{ $hipertensi->penduduk_id }}">
                        <input type="hidden" name="id" value="{{ $hipertensi->id }}">
                        <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" :value="$hipertensi->sistol ?? old('sistol')" id="sistol"
                                        name="sistol" required autocomplete="off" />
                                    <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" :value="$hipertensi->distol ?? old('distol')"
                                        name="distol" required autocomplete="off" />
                                    <x-input-error :messages="$errors->get('distol')" />
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="mb-3">
                                    <x-input-label value="Bulan" required="true" for="bulan" />
                                    <x-text-input type="date" class="form-control" id="tanggal_cekup"
                                        :value="$hipertensi->tanggal_cekup ?? old('tanggal_cekup')" name="tanggal_cekup" required autocomplete="off" />
                                    <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 }}"
                                                {{ $hipertensi->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: {{ $hipertensi->tempat_berobat === 'lainnya' ? 'block' : 'none' }}">
                                <div class="mb-3">
                                    <x-input-label value="Keterangan" required="" for="keterangan" />
                                    <textarea name="keterangan" id="keterangan" class="form-control"
                                        placeholder="Tulis disini jika keterangan tempat berobat tidak ada" cols="5" rows="5"></textarea>
                                    <x-input-error :messages="$errors->get('keterangan')" />
                                </div>
                            </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) ?? $hipertensi->status_berobat; // '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 class="mb-3 row">
                            <label class="col-sm-3 text-sm-end col-form-label pt-0">Jenis Obat yang dikonsumsi</label>
                            <div class="col-sm-9">
                                @foreach ($obat as $itemObat)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="obat[]"
                                            value="{{ $itemObat->id }}" id="itemObat{{ $itemObat->id }}"
                                            {{ in_array($itemObat->id, old('obat', $hipertensi->obat->pluck('id')->toArray() ?? [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="itemObat{{ $itemObat->id }}">
                                            {{ $itemObat->nama }}
                                        </label>
                                    </div>
                                @endforeach
                                <x-input-error :messages="$errors->get('obat')" />
                            </div>
                        </div>

                        <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 Keterangan Berobat</h5>

                            <p>
                                Kolom <strong>Keterangan Berobat</strong> digunakan untuk mencatat informasi tambahan
                                terkait
                                pengobatan pasien, khususnya <strong>jika obat yang dibutuhkan tidak tersedia di
                                    puskesmas</strong>.
                            </p>

                            <ul>
                                <li>
                                    Tuliskan <strong>nama obat</strong> yang seharusnya diberikan kepada pasien.
                                </li>
                                <li>
                                    Sertakan <strong>alasan obat tidak tersedia</strong>, misalnya stok habis atau belum
                                    tersedia.
                                </li>
                                <li>
                                    Jika ada, jelaskan <strong>tindakan lanjutan</strong> yang diberikan, seperti
                                    rujukan
                                    ke fasilitas kesehatan lain atau anjuran membeli obat di apotek.
                                </li>
                            </ul>

                            <p class="mb-0">
                                Informasi ini penting untuk <strong>kelengkapan riwayat pengobatan pasien</strong> serta
                                mendukung <strong>evaluasi ketersediaan obat</strong> di puskesmas.
                            </p>
                        </div>

                        <div class="mb-3">
                            <x-input-label value="Keterangan lainnya" required="" for="ket_berobat" />
                            <textarea name="ket_berobat" id="ket_berobat" class="form-control" placeholder="Tulis disini jika obat tidak ada"
                                cols="5" rows="5">{!! $hipertensi->ket_berobat !!}</textarea>
                            <x-input-error :messages="$errors->get('ket_berobat')" />
                        </div>

                        <div class="col-md-12 text-end">
                            <x-primary-button id="btnSimpan">Ubah</x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
    @include('admin.apps.hipertensi.includes.action_js')
    @include('admin.apps.hipertensi.includes.select_edit_js')
</x-app-layout>