@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">
                    <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" 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) ?? $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>
                        <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')
</x-app-layout>