@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <form id="my-form" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- button back --}}
                            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i>
                                <span class="font-weight-bold">Kembali</span>
                            </button>
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button save --}}
                                <button type="submit" class="btn btn-primary mb-0"><i class="fas fa-floppy-disk me-1">
                                    </i><span class="font-weight-bold">Simpan</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <input type="hidden" value="msjklinik" name="password">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Header</h5>
                                            <p class="text-danger">
                                                <strong>Ket:</strong> Input dengan tanda <span
                                                    class="text-danger">(*)</span>
                                                wajib diisi.
                                            </p>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="id" class="text-lg">ID</label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="--" name="id"
                                                                class="form-control" readonly />
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputReference" class="text-lg">No. Rekam
                                                                Medis<span class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="Nomor Rekam Medis"
                                                                class="form-control" id="no_rm" name="no_rm" required
                                                                readonly>
                                                        </div>
                                                    </div>

                                                    <input type="hidden" class="form-control" id="nik" name="nik"
                                                        required>

                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputDate" class="text-lg">Tanggal<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="date" class="form-control" name="tgl"
                                                                id="tgl" required>
                                                            <div class="invalid-feedback">Date is required.</div>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputCustomer" class="text-lg">Nama<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <td>
                                                                <div type="button" class="input-group mb-3">
                                                                    <input type="text" id="nama" name="nama"
                                                                        placeholder="Pilih Karyawan"
                                                                        class="form-control btn-cari" readonly>
                                                                    <span
                                                                        class="input-group-text bg-primary btn-cari text-light"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#searchModalusername"
                                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                                                        <i class="fas fa-search"></i>
                                                                    </span>
                                                                </div>
                                                            </td>
                                                        </div>
                                                    </div>
                                                    <!-- Radio Button for Tn/Ny/Sdr/Sdri -->
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="title" class="text-lg">Title<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="title" id="tn" value="Tn" required>
                                                                <label class="form-check-label" for="tn">Tn</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="title" id="ny" value="Ny"
                                                                    required>
                                                                <label class="form-check-label" for="ny">Ny</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="title" id="sdr" value="Sdr"
                                                                    required>
                                                                <label class="form-check-label" for="sdr">Sdr</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="title" id="sdri" value="Sdri"
                                                                    required>
                                                                <label class="form-check-label"
                                                                    for="sdri">Sdri</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-md-6">
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputTgl_lahir" class="text-lg">Tgl Lahir<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="Tanggal Lahir"
                                                                class="form-control" id="tgl_lahir" name="tgl_lahir"
                                                                required readonly>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputGender" class="text-lg">Gender<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="Gender"
                                                                class="form-control" id="gender" name="gender"
                                                                required readonly>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputUmur" class="text-lg">Umur<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="Umur" class="form-control"
                                                                id="umur" name="umur" required readonly>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputDepartemen" class="text-lg">Departemen<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <input type="text" placeholder="Departemen"
                                                                class="form-control" id="departemen" name="departemen"
                                                                required readonly>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-lg-3">
                                                            <label for="inputDokter" class="text-lg">Pemeriksa<span
                                                                    class="text-danger">*</span></label>
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <select name="dokter" id="dokter" class="form-select"
                                                                required>
                                                                <option selected disabled>Pilih Pemeriksa</option>
                                                                @foreach ($dokter as $d)
                                                                    <option value="{{ $d->nama }}">{{ $d->nama }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Page Anamnesia dan Pemeriksaan Fisik -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Anamnesia dan Pemeriksaan Fisik</h5>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">
                                                            <div class="row mb-3">
                                                                <div class="col-lg-2">
                                                                    <label class="text-lg">Subjektif<span
                                                                            class="text-danger">*</span></label>
                                                                </div>
                                                                <hr>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-30 table-responsive">
                                                                        <textarea class="form-control" name="ds" id="ds" placeholder="Masukkan diagnosis subjektif" required
                                                                            rows="4"></textarea>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">
                                                            <div class="row mb-3">
                                                                <div class="col-lg-2">
                                                                    <label for="inputUmur"
                                                                        class="text-lg">Objektif</label>
                                                                </div>
                                                                <hr>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="tb" class="text-lg">TB</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">

                                                                            <input type="number" step="0.01"
                                                                                placeholder="Contoh: 170/170.5"
                                                                                class="form-control" id="tb"
                                                                                name="tb">
                                                                            <span class="input-group-text">cm</span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <label for="bb" class="text-lg">BB<span
                                                                                class="text-danger">*</span></label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" step="0.01"
                                                                                placeholder="Contoh: 55/55.3"
                                                                                class="form-control" id="bb"
                                                                                name="bb" required>
                                                                            <span class="input-group-text">kg</span>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="nadi" class="text-lg">Nadi</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" class="form-control"
                                                                                id="nadi" name="nadi"
                                                                                placeholder="Contoh: 55">
                                                                            <span class="input-group-text">x/m</span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <label for="rr"
                                                                            class="text-lg">Respiratori</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" class="form-control"
                                                                                id="rr" name="rr"
                                                                                placeholder="Contoh: 18">
                                                                            <span class="input-group-text">x/m</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="suhu" class="text-lg">Suhu<span
                                                                                class="text-danger">*</span></label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" step="0.01"
                                                                                class="form-control" id="suhu"
                                                                                name="suhu" placeholder="Contoh: 36.5"
                                                                                required>
                                                                            <span class="input-group-text">°C</span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <label for="" class="text-lg">Tensi
                                                                            <span class="text-danger">*</span></label>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <input type="number" class="form-control"
                                                                            name="tekanan_sistolik" id="tekanan_sistolik"
                                                                            value="0" required>
                                                                    </div>
                                                                    <div class="col-lg-2"
                                                                        style="padding-left: 0px;padding-right: 0px;width: 0px;">
                                                                        <span>/</span>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <input type="number" class="form-control"
                                                                            name="tekanan_diastolik"
                                                                            id="tekanan_diastolik" value="0"
                                                                            required>
                                                                    </div>

                                                                </div>


                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="o2" class="text-lg">O2</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" class="form-control"
                                                                                id="o2" name="o2"
                                                                                placeholder="Contoh: 95">
                                                                            <span class="input-group-text">%</span>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-lg-2">
                                                                        <label for="asam_urat" class="text-lg">Asam
                                                                            Urat</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" step="0.01"
                                                                                class="form-control" id="asam_urat"
                                                                                name="asam_urat"
                                                                                placeholder="Contoh: 2.4">
                                                                            <span class="input-group-text">mg/dL</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="glukosa" class="text-lg">Glukosa
                                                                            Darah</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" step="0.01"
                                                                                class="form-control" id="glukosa"
                                                                                name="glukosa"
                                                                                placeholder="Contoh: 100/100.0">
                                                                            <span class="input-group-text">mg/dL</span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <label for="kolesterol"
                                                                            class="text-lg">Kolesterol</label>
                                                                    </div>
                                                                    <div class="col-lg-4">
                                                                        <div class="input-group">
                                                                            <input type="number" class="form-control"
                                                                                id="kolesterol" name="kolesterol"
                                                                                placeholder="Contoh: 200/200.0">
                                                                            <span class="input-group-text">mg/dL</span>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-2">
                                                                        <label for="swab" class="text-lg">
                                                                            Swab Ag
                                                                        </label>
                                                                    </div>

                                                                    <div class="col-lg-4">
                                                                        <select name="swab" id="swab"
                                                                            class="form-select">
                                                                            <option selected disabled>Pilih hasil swab
                                                                            </option>
                                                                            <option value="Negatif">- (Negatif)</option>
                                                                            <option value="Positif">+ (Positif)</option>
                                                                        </select>
                                                                    </div>

                                                                    <div class="col-lg-2">
                                                                        <label class="text-lg">
                                                                            Indikator
                                                                        </label>
                                                                    </div>

                                                                    <div class="col-lg-4">
                                                                        <div
                                                                            class="d-flex align-items-center gap-4 flex-wrap">

                                                                            <div class="form-check form-switch mb-0">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox" role="switch"
                                                                                    name="pak" id="pak"
                                                                                    value="1">

                                                                                <label
                                                                                    class="form-check-label font-weight-bold"
                                                                                    for="pak">
                                                                                    PAK
                                                                                </label>
                                                                            </div>

                                                                            <div class="form-check form-switch mb-0">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox" role="switch"
                                                                                    name="kk" id="kk"
                                                                                    value="1">

                                                                                <label
                                                                                    class="form-check-label font-weight-bold"
                                                                                    for="kk">
                                                                                    Kecelakaan Kerja
                                                                                </label>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Riwayat Rekam Medis -->
                                                <div class="col-md-6">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">
                                                            <!-- Bagian Riwayat Rekam Medis -->
                                                            <div class="row mb-3">
                                                                <div class="col-lg-4">
                                                                    <label for="inputUmur" class="text-lg">Riwayat Rekam
                                                                        Medis</label>
                                                                </div>
                                                                <hr>
                                                                <div class="col-lg-20">
                                                                    <div id="riwayat_rekam_medis">
                                                                        <!-- Data rekam medis terakhir akan ditampilkan di sini -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">
                                                            <div class="row mb-3">
                                                                <div class="col-lg-5">
                                                                    <label class="text-lg">Lain-lain <small
                                                                            class="text-muted">
                                                                            (opsional)</label>
                                                                </div>
                                                                <hr>
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-20">
                                                                        <textarea type="text" placeholder="Tambahkan keterangan lain jika dibutuhkan" name="lain_lain" id="lain_lain"
                                                                            class="form-control"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Page Diagnosa -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Diagnosa<span class="text-danger">*</span></h5>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">
                                                            <div class="row mb-3">
                                                                <div class="row mb-3">
                                                                    <div class="col-lg-20">
                                                                        <select class="form-select"
                                                                            data-placeholder="Pilih beberapa diagnosa"
                                                                            id="multiple-select-diagnosa"
                                                                            name="diagnosa[]" multiple>
                                                                            @foreach ($diagnosa as $d)
                                                                                <option value="{{ $d->nama }}">
                                                                                    {{ $d->nama }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Tgl Kontrol -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Tanggal Kembali Kontrol<span class="text-danger"></span></h5>
                                            <hr>
                                            <div class="row">
                                                <div class="row mb-3">
                                                    <div class="col-lg-3">
                                                        <input type="date" class="form-control" name="tgl_kontrol"
                                                            id="tgl_kontrol" min="{{ now()->addDay()->toDateString() }}">
                                                        <p class='text-secondary text-xs pt-1 px-1'>isi tgl periksa jika
                                                            pasien harus
                                                            kembali kontrol ke klinik</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Page Gambar Luka -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Dokumentasi Injury/Cedera <small class="text-muted">(opsional)</small></h5>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="card shadow mb-4">
                                                        <div class="card-body">

                                                            <!-- Bagian Sebelum Penanganan -->
                                                            <div class="form-group">
                                                                <label class="form-control-label">Sebelum
                                                                    Penanganan</label>
                                                                <div class="row">
                                                                    <!-- Gambar Sebelum 1 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input1" id="gambar_seb1"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sebelum1" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input1" name="gambar_seb"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>

                                                                    <!-- Gambar Sebelum 2 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input2" id="gambar_seb2"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sebelum2" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input2" name="gambar_seb2"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>

                                                                    <!-- Gambar Sebelum 3 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input3" id="gambar_seb3"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sebelum3" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input3" name="gambar_seb3"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                            <!-- Bagian Sesudah Penanganan -->
                                                            <div class="form-group">
                                                                <label class="form-control-label">Sesudah
                                                                    Penanganan</label>
                                                                <div class="row">
                                                                    <!-- Gambar Sesudah 1 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input4" id="gambar_ses1"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sesudah1" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input4" name="gambar_ses"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>

                                                                    <!-- Gambar Sesudah 2 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input5" id="gambar_ses2"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sesudah2" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input5" name="gambar_ses2"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>

                                                                    <!-- Gambar Sesudah 3 -->
                                                                    <div class="col-md-4">
                                                                        <div class="position-relative">
                                                                            <label for="file-input6" id="gambar_ses3"
                                                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                                <i class="fa fa-pen top-0"></i>
                                                                            </label>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                                                    id="preview_sesudah3" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </span>
                                                                        </div>
                                                                        <input class="form-control" type="file"
                                                                            id="file-input6" name="gambar_ses3"
                                                                            style="display: none;">
                                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal
                                                                            Size: <b>3072 KB</b></p>
                                                                        <p class='text-primary text-xs pt-1'>Format Image:
                                                                            <b>PNG,JPG,JPEG</b>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Page Detail Obat -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="card mb-4">
                                        <div class="card-header pb-0">
                                            <h5>Detail Obat</h5>
                                            <hr>
                                            <a href="javascript:void(0)" class="btn btn-primary" id="tambahForm">
                                                <span class="fa fa-plus me-2"></span>Tambah</a>
                                            <label class="ms-3">Alergi Obat?</label>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input ms-0" type="checkbox" id="alergi">
                                                <label class="form-check-label" for="Iya">Iya</label>
                                            </div>
                                            <code id="note_alergi" style="display: none;">isi rincian alergi obat</code>
                                            <div class="alert-danger p-1" role="alert" id="alergi_obat"
                                                style="display: none;">
                                                <textarea type="text" placeholder="Tambahkan alergi obat apa?" name="alergi_obat" id="alergi_text"
                                                    class="form-control"></textarea>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped" style="width:100%">
                                                    <thead style="background-color: #daecff;">
                                                        <tr>
                                                            <th scope="col" width="50px">Action</th>
                                                            <th scope="col" width="40px">Item</th>
                                                            <th scope="col" width="100px">Tipe</th>
                                                            <th scope="col" width="150px">Kode</th>
                                                            <th scope="col" width="240px">Nama Obat</th>
                                                            <th scope="col" width="200px">Pemakaian</th>
                                                            <th scope="col" width="50px">Stok</th>
                                                            <th scope="col" width="50px">Jumlah<span
                                                                    class="text-danger">*</span>
                                                            </th>
                                                            <th scope="col" width="150px" colspan="3">Aturan
                                                                Pakai<span class="text-danger">*</span></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="table-data">
                                                        <!-- Tidak ada baris di dalam tbody saat awal -->
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- Modal untuk menampilkan data karyawan -->
                                            <div class="modal fade" id="karyawanModal" tabindex="-1"
                                                aria-labelledby="karyawanModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="karyawanModalLabel">List
                                                                Karyawan
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body" id="karyawanDetail">
                                                            <div class="table-responsive">

                                                                <table id="myTable"
                                                                    class="table table-bordered table-striped"
                                                                    style="width:100%">
                                                                    <thead style="background-color: #daecff;">
                                                                        <tr>
                                                                            <th scope="col">Action</th>
                                                                            <th scope="col">NIK</th>
                                                                            <th scope="col">Nama</th>
                                                                            <th scope="col">Departemen</th>
                                                                            <th scope="col">Gender</th>
                                                                            <th scope="col">Tgl Lahir</th>
                                                                            <th scope="col">Umur</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($karyawan as $k)
                                                                            <tr
                                                                                onclick="select_pro_krywn('{{ $k->nik }}', '{{ $k->name }}', '{{ $k->department }}', '{{ $k->gender }}', '{{ $k->tgl_lahir }}', '{{ $k->alergi }}')">
                                                                                <td scope="row">
                                                                                    <span class="btn badge bg-success"
                                                                                        onclick="select_pro_krywn('{{ $k->nik }}', '{{ $k->name }}', '{{ $k->department }}', '{{ $k->gender }}', '{{ $k->tgl_lahir }}', '{{ $k->alergi }}')">
                                                                                        <i
                                                                                            class="fa fa-check-circle-o me-1"></i>
                                                                                        Select
                                                                                    </span>
                                                                                </td>
                                                                                <td>{{ $k->nik }}</td>
                                                                                <td>{{ $k->name }}</td>
                                                                                <td>{{ $k->department }}</td>
                                                                                <td>{{ $k->gender }}</td>
                                                                                <td class="tgl-lahir"
                                                                                    data-tgl="{{ $k->tgl_lahir }}">
                                                                                    {{ $k->tgl_lahir }}</td>
                                                                                <td class="umur-dinamis"></td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal untuk menampilkan detail obat -->
                                            <div class="modal fade" id="obatModal" tabindex="-1"
                                                aria-labelledby="obatModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="obatModalLabel">List Obat</h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body" id="obatDetail">
                                                            <div class="table-responsive">

                                                                <table id="myTableObat"
                                                                    class="table table-bordered table-striped"
                                                                    style="width:100%">
                                                                    <thead style="background-color: #daecff;">
                                                                        <tr>
                                                                            <th scope="col">Action</th>
                                                                            <th scope="col">Kode</th>
                                                                            <th scope="col">Nama</th>
                                                                            <th scope="col">Dosis</th>
                                                                            <th scope="col">Kemasan</th>
                                                                            <th scope="col">Satuan</th>
                                                                            <th scope="col">Stok</th>
                                                                            <th scope="col">Harga</th>
                                                                            <th scope="col">Pemakaian</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($obat as $o)
                                                                            <tr @if ($o->stok_awal > 0) onclick="select_pro_obat('{{ $o->idobat }}', '{{ $o->nama }}', '{{ $o->dosis }}', '{{ $o->kemasan }}', '{{ $o->satuan }}', '{{ $o->stok_awal }}', '{{ $o->harga }}', '{{ $o->pemakaian }}')" @endif
                                                                                @if ($o->stok_awal <= 0) class="table-danger" @endif>
                                                                                <td scope="row">
                                                                                    @if ($o->stok_awal > 0)
                                                                                        <span class="btn badge bg-success"
                                                                                            onclick="select_pro_obat('{{ $o->idobat }}', '{{ $o->nama }}', '{{ $o->dosis }}', '{{ $o->kemasan }}', '{{ $o->satuan }}', '{{ $o->stok_awal }}', '{{ $o->harga }}', '{{ $o->pemakaian }}')">
                                                                                            <i
                                                                                                class="fa fa-check-circle-o me-1"></i>
                                                                                            Select
                                                                                        </span>
                                                                                    @else
                                                                                        <span
                                                                                            class="btn badge bg-danger disabled">
                                                                                            <i
                                                                                                class="fa fa-times-circle-o me-1"></i>
                                                                                            Stok habis
                                                                                        </span>
                                                                                    @endif
                                                                                </td>
                                                                                <td>{{ $o->idobat }}</td>
                                                                                <td>{{ $o->nama }}</td>
                                                                                <td>{{ $o->dosis }}</td>
                                                                                <td>{{ $o->kemasan }}</td>
                                                                                <td>{{ $o->satuan }}</td>
                                                                                <td>{{ $o->stok_awal }}</td>
                                                                                <td class="rata-kanan">
                                                                                    {{ number_format($o->harga) }}</td>
                                                                                <td>{{ $o->pemakaian }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>

                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- button back --}}
                            <button class="btn btn-secondary mb-0" onclick="history.back()"><i
                                    class="fas fa-circle-left me-1">
                                </i><span class="font-weight-bold">Kembali</button>
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button save --}}
                                <button type="submit" class="btn btn-primary mb-0"><i class="fas fa-floppy-disk me-1">
                                    </i><span class="font-weight-bold">Simpan</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@push('js')
    {{-- datatables --}}
    <script src="assets/js/dataTables.js"></script>
    <script>
        $('#myTable').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
        });

        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
        $('#myTableObat').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
        });

        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }

        // Set tanggal awal menjadi tanggal sekarang
        var today = new Date().toISOString().split('T')[0];
        document.getElementById('tanggal').value = today;

        // Nonaktifkan tanggal-tanggal di masa depan
        document.getElementById('tanggal').max = today;

        // preview gambar
        function previewImage(event, previewId) {
            var input = event.target;
            var reader = new FileReader();

            reader.onload = function() {
                var preview = document.getElementById(previewId);
                preview.src = reader.result;
                preview.style.display = 'block';
            };

            reader.readAsDataURL(input.files[0]);
        }

        // $(document).ready(function() {
        //     var route_id = "{{ route('getDetailPenerimaanId') }}";
        //     var id_item = 10;
        //     var jumlah_item = 0; // Menyimpan jumlah item yang sudah ditambahkan

        //     // Mendapatkan id_item awal dari server saat halaman dimuat
        //     $.getJSON(route_id, function(response) {
        //         id_item = response;
        //     });

        //     $("#tambahForm").click(function() {
        //         jumlah_item++; // Menambah jumlah item yang sudah ditambahkan
        //         id_item = jumlah_item *
        //             10; // Memperbarui nilai id_item dengan kelipatan 10 berdasarkan jumlah item yang sudah ditambahkan

        //         var newRow = $(`
    //             <tr>
    //                 <input type="hidden" name="obat_id[]" class="form-control obat_id">
    //                 <td><button class="btn btn-danger btn-sm hapus" type="button">X</button></td>
    //                 <td><input type="text" name="item[]" class="form-control item" value="${id_item}" readonly></td>
    //                 <td><select name="tipe[]" class="form-select tipe">
    //                     <option value="Stok">Stok</option>
    //                     <option value="Resep">Resep</option>
    //                 </select></td>
    //                 <td>
    //                     <div type="button" class="input-group mb-3">
    //                         <input type="text" name="kode_obat[]" placeholder="Kode Obat" class="form-control kode btn-search" readonly>
    //                         <span class="input-group-text bg-primary btn-search text-light" data-bs-toggle="modal" data-bs-target="#searchModalusername" style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
    //                             <i class="fas fa-search"></i>
    //                         </span>
    //                     </div>
    //                 </td>
    //                 <td><input type="text" name="nama_obat[]" placeholder="Nama Obat" class="form-control nama_obat" readonly></td>
    //                 <td><select name="pemakaian[]" class="form-select pemakaian" readonly style="background-color: #e9ecef;"><option selected disabled>Pilih Pemakaian</option> @foreach ($pemakaian as $p) <option value="{{ $p->deskripsi }}">{{ $p->deskripsi }}</option>@endforeach</select></td>
    //                 <td><input type="text" name="stok_awal[]" placeholder="Stok" class="form-control stok_awal" readonly></td>
    //                 <td><input type="number" name="qty[]" placeholder="Jumlah Obat" value="1" class="form-control qty" required></td>
    //                 <td>
    //                     <select name="aturan_pakai1[]" class="form-select aturan_pakai1">
    //                         <option selected disabled>Pilih aturan pakai</option>
    //                         @foreach ($aturan as $atr)
    //                             <option value="{{ $atr->id }}">{{ $atr->id }}</option>
    //                         @endforeach
    //                     </select>
    //                 </td>
    //                 <td><select name="aturan_pakai2[]" class="form-select aturan_pakai2">
    //                     <option selected disabled>Pilih aturan pakai</option>
    //                     <option>Sebelum Makan</option>
    //                     <option>Saat Makan</option>
    //                     <option>Setelah Makan</option>
    //                     </select></td>
    //                 <td><select name="aturan_pakai3[]" class="form-select aturan_pakai3">
    //                     <option selected disabled>Pilih waktu</option>
    //                     <option>Pagi</option>
    //                     <option>Siang</option>
    //                     <option>Malam</option>
    //                     </select></td>
    //             </tr>
    //         `);

        //         $('#table-data').append(newRow);

        //         // Disable clicks by preventing the default behavior
        //         newRow.find('select.pemakaian').on('mousedown.disable', function(event) {
        //             event.preventDefault();
        //         });

        //         newRow.find('.hapus').on('click', function() {
        //             $(this).closest('tr').remove();
        //         });

        //         newRow.find('.btn-search').on('click', function() {
        //             var index = $(this).closest('tr').index();
        //             $('#obatModal').modal('show');
        //             $('#obatModal').data('trigger-source', index);
        //         });

        //         newRow.find('select.pemakaian').on('change', function() {
        //             var tipe = newRow.find('select.tipe').val();
        //             var row = $(this).closest('tr');
        //             toggleFormInputs(row, tipe);
        //         });

        //         newRow.find('select.tipe').on('change', function() {
        //             var tipe = $(this).val();
        //             var row = $(this).closest('tr');
        //             toggleFormInputs(row, tipe);
        //         });

        //         newRow.find('.pemakaian').on('change', function() {
        //             toggleAturanPakai2();
        //         });

        //         newRow.find('.aturan_pakai1').on('change', function() {
        //             toggleAturanPakai2();
        //         });

        //         toggleFormInputs(newRow, 'Stok');
        //         toggleAturanPakai2();
        //     });

        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         }
        //     });

        //     $("#my-form").submit(function(e) {
        //         e.preventDefault();
        //         var formData = new FormData(this);

        //         var isValid = true;
        //         var errorMessage = '';

        //         $('.qty').each(function() {
        //             var qty = parseInt($(this).val());
        //             var stok = parseInt($(this).closest('tr').find('.stok_awal').val());
        //             if (qty <= 0 || qty > stok) {
        //                 isValid = false;
        //                 errorMessage = 'Qty tidak valid atau melebihi stok yang tersedia.';
        //                 return false;
        //             }
        //         });

        //         var isFormValid = true;
        //         $('.required').each(function() {
        //             if ($(this).val() === '' || !$(this)[0].checkValidity()) {
        //                 isFormValid = false;
        //                 errorMessage +=
        //                     '<br>Lengkapi semua kolom yang wajib diisi dengan nilai yang valid.';
        //                 return false;
        //             }
        //         });
        //         // Jika Detail obat kosong
        //         if ($('#table-data tr').length === 0) {
        //             Swal.fire({
        //                 title: 'Konfirmasi',
        //                 text: 'Anda yakin menyimpan rekam medis tanpa detail obat?',
        //                 icon: 'warning',
        //                 showCancelButton: true,
        //                 confirmButtonText: 'Ya, simpan (Tanpa Obat)',
        //                 cancelButtonText: 'Tidak, batal'
        //             }).then((result) => {
        //                 if (result.isConfirmed) {
        //                     submitForm(formData);
        //                 }
        //             });
        //             return;
        //         }

        //         if (!isValid || !isFormValid) {
        //             Swal.fire({
        //                 title: 'Gagal',
        //                 html: errorMessage,
        //                 icon: 'error',
        //                 showConfirmButton: true
        //             });
        //             return;
        //         }
        //         submitForm(formData);
        //     });

        //     function submitForm(formData) {
        //         $.ajax({
        //             url: "{{ URL::to($url_menu) }}",
        //             type: "POST",
        //             data: formData,
        //             contentType: false,
        //             processData: false,
        //             success: function(response) {
        //                 Swal.fire({
        //                     icon: 'success',
        //                     title: 'Sukses',
        //                     text: 'Data rekam medis berhasil disimpan',
        //                     showConfirmButton: true,
        //                 }).then((result) => {
        //                     window.location.href = "{{ url($url_menu) }}";
        //                 });
        //             },
        //             error: function(jqXHR, textStatus, errorThrown) {
        //                 var errorResponse = jqXHR.responseJSON;
        //                 var errorMessage = 'Terjadi kesalahan saat menyimpan data.';
        //                 // if (errorResponse && errorResponse.message) {
        //                 //     errorMessage += '<br>' + errorResponse.message;
        //                 // }
        //                 Swal.fire({
        //                     title: 'Gagal',
        //                     html: errorMessage,
        //                     icon: 'error',
        //                     showConfirmButton: true
        //                 });
        //                 console.error(textStatus, errorThrown);
        //             }
        //         });
        //     }

        // });

        function toggleAturanPakai2() {
            $('#table-data tr').each(function() {
                var pemakaian = $(this).find('.pemakaian').val();
                var aturanPakai1 = $(this).find('.aturan_pakai1').val();
                var aturanPakai2 = $(this).find('.aturan_pakai2').closest('td');
                var aturanPakai3 = $(this).find('.aturan_pakai3').closest('td');

                if (pemakaian === 'ORAL') {
                    if (aturanPakai1 === '1x1') {
                        aturanPakai2.show();
                        aturanPakai3.show();
                    } else if (aturanPakai1 === 'Seperlunya') {
                        aturanPakai2.hide();
                        aturanPakai3.hide();
                    } else {
                        aturanPakai2.show();
                        aturanPakai3.hide();
                    }
                } else {
                    aturanPakai2.hide();
                    // aturanPakai3.show();
                    aturanPakai3.hide();

                }
            });
        }

        function toggleFormInputs(row, tipe) {
            var pemakaian = row.find('.pemakaian').val();
            var aturanPakai1 = row.find('.aturan_pakai1').val();
            var aturanPakai2 = row.find('.aturan_pakai2').closest('td');
            var aturanPakai3 = row.find('.aturan_pakai3').closest('td');

            if (pemakaian === 'ORAL') {
                if (aturanPakai1 === '1x1') {
                    aturanPakai2.show();
                    aturanPakai3.show();
                } else if (aturanPakai1 === 'Seperlunya') {
                    aturanPakai2.hide();
                    aturanPakai3.hide();
                } else {
                    aturanPakai2.show();
                    aturanPakai3.hide();
                }
            } else {
                aturanPakai2.hide();
                // aturanPakai3.show();
                aturanPakai3.hide();
            }

            if (tipe === 'Stok') {
                row.find('input.kode').prop('readonly', true);
                row.find('button.btn-search').prop('disabled', false);
                row.find('input.nama_obat').prop('readonly', true);
                row.find('select.pemakaian').on('mousedown.disable', function(event) {
                    event.preventDefault();
                });
                row.find('select.pemakaian').css('background-color', '#e9ecef');
            } else if (tipe === 'Resep') {
                row.find('input.kode').prop('readonly', true);
                row.find('button.btn-search').prop('disabled', true);
                row.find('input.nama_obat').prop('readonly', false);
                row.find('select.pemakaian').prop('readonly', false);
                row.find('select.pemakaian').off('mousedown.disable');
                row.find('select.pemakaian').css('background-color', '#fff');

                // row.find('input.pemakaian').replaceWith(
                //     '<select name="pemakaian[]" class="form-control pemakaian"><option selected disabled>Pilih Pemakaian</option> @foreach ($pemakaian as $p) <option value="{{ $p->deskripsi }}">{{ $p->deskripsi }}</option>@endforeach</select>'
                // );
            }
        }

        // Fungsi untuk mengisi kolom detail dengan nilai obat yang dipilih
        function select_pro_obat(idobat, nama_obat, dosis, kemasan, satuan, stok_awal, harga, pemakaian) {
            // Mengisi nilai kolom dengan data obat yang dipilih
            var source = $('#obatModal').data('trigger-source');
            $('.obat_id').eq(source).val(idobat);
            $('.kode').eq(source).val(idobat);
            $('.nama_obat').eq(source).val(nama_obat);
            $('.dosis').eq(source).val(dosis);
            $('.kemasan').eq(source).val(kemasan);
            $('.satuan').eq(source).val(satuan);
            $('.stok_awal').eq(source).val(stok_awal);
            $('.harga').eq(source).val(harga);
            $('.pemakaian').eq(source).val(pemakaian);
            var tipe = $('.obat_id').eq(source).parents('tr').find('select.tipe').val();
            var row = $('.obat_id').eq(source).parents('tr').find('select.tipe').closest('tr');
            toggleFormInputs(row, tipe);

            // Menutup modal setelah memilih obat
            $('#obatModal').modal('hide');
        }
    </script>

    <!-- Button Cari Karyawan -->
    <script>
        function hitungUmur(tglLahir) {
            const today = new Date();
            const birthDate = new Date(tglLahir);
            let age = today.getFullYear() - birthDate.getFullYear();
            const m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }
            return age;
        }

        $(document).ready(function() {
            // $('.btn-cari').on('click', function() {
            //     $('#karyawanModal').modal('show');
            // });
            $('#alergi').on('change', function() {
                if (this.checked) {
                    $('#alergi_obat').css('display', '');
                    $('#note_alergi').css('display', '');
                } else {
                    $('#alergi_obat').css('display', 'none');
                    $('#note_alergi').css('display', 'none');
                    $('textarea[name="alergi_obat"]').val('');
                }
            });
            var route_id = "{{ route('getDetailPenerimaanId') }}";
            var id_item = 10;
            var jumlah_item = 0; // Menyimpan jumlah item yang sudah ditambahkan

            // Mendapatkan id_item awal dari server saat halaman dimuat
            $.getJSON(route_id, function(response) {
                id_item = response;
            });

            $("#tambahForm").click(function() {
                jumlah_item++; // Menambah jumlah item yang sudah ditambahkan
                id_item = jumlah_item *
                    10; // Memperbarui nilai id_item dengan kelipatan 10 berdasarkan jumlah item yang sudah ditambahkan

                var newRow = $(`
                    <tr>
                        <input type="hidden" name="obat_id[]" class="form-control obat_id">
                        <td><button class="btn btn-danger btn-sm hapus" type="button">X</button></td>
                        <td><input type="text" name="item[]" class="form-control item" value="${id_item}" readonly></td>
                        <td><select name="tipe[]" class="form-select tipe">
                            <option value="Stok">Stok</option>
                            <option value="Resep">Resep</option>
                        </select></td>
                        <td>
                            <div type="button" class="input-group mb-3">
                                <input type="text" name="kode_obat[]" placeholder="Kode Obat" class="form-control kode btn-search" readonly>
                                <span class="input-group-text bg-primary btn-search text-light" data-bs-toggle="modal" data-bs-target="#searchModalusername" style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </td>
                        <td><input type="text" name="nama_obat[]" placeholder="Nama Obat" class="form-control nama_obat" readonly></td>
                        <td><select name="pemakaian[]" class="form-select pemakaian" readonly style="background-color: #e9ecef;"><option selected disabled>Pilih Pemakaian</option> @foreach ($pemakaian as $p) <option value="{{ $p->deskripsi }}">{{ $p->deskripsi }}</option>@endforeach</select></td>
                        <td><input type="text" name="stok_awal[]" placeholder="Stok" class="form-control stok_awal" readonly></td>
                        <td><input type="number" name="qty[]" placeholder="Jumlah Obat" value="1" class="form-control qty" required></td>
                        <td>
                            <select name="aturan_pakai1[]" class="form-select aturan_pakai1">
                                <option selected disabled>Pilih aturan pakai</option>
                                @foreach ($aturan as $atr)
                                    <option value="{{ $atr->id }}">{{ $atr->id }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><select name="aturan_pakai2[]" class="form-select aturan_pakai2">
                            <option selected disabled>Pilih aturan pakai</option>
                            <option>Sebelum Makan</option>
                            <option>Saat Makan</option>
                            <option>Setelah Makan</option>
                            </select></td>
                        <td><select name="aturan_pakai3[]" class="form-select aturan_pakai3">
                            <option selected disabled>Pilih waktu</option>
                            <option>Pagi</option>
                            <option>Siang</option>
                            <option>Malam</option>
                            </select></td>
                    </tr>
                `);

                $('#table-data').append(newRow);

                // Disable clicks by preventing the default behavior
                newRow.find('select.pemakaian').on('mousedown.disable', function(event) {
                    event.preventDefault();
                });

                newRow.find('.hapus').on('click', function() {
                    $(this).closest('tr').remove();
                });

                newRow.find('.btn-search').on('click', function() {
                    var index = $(this).closest('tr').index();
                    $('#obatModal').modal('show');
                    $('#obatModal').data('trigger-source', index);
                });

                newRow.find('select.pemakaian').on('change', function() {
                    var tipe = newRow.find('select.tipe').val();
                    var row = $(this).closest('tr');
                    toggleFormInputs(row, tipe);
                });

                newRow.find('select.tipe').on('change', function() {
                    var tipe = $(this).val();
                    var row = $(this).closest('tr');
                    toggleFormInputs(row, tipe);
                });

                newRow.find('.pemakaian').on('change', function() {
                    toggleAturanPakai2();
                });

                newRow.find('.aturan_pakai1').on('change', function() {
                    toggleAturanPakai2();
                });

                toggleFormInputs(newRow, 'Stok');
                toggleAturanPakai2();
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#my-form").submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);

                var isValid = true;
                var errorMessage = '';

                $('.qty').each(function() {
                    var qty = parseInt($(this).val());
                    var stok = parseInt($(this).closest('tr').find('.stok_awal').val());
                    if (qty <= 0 || qty > stok) {
                        isValid = false;
                        errorMessage = 'Qty tidak valid atau melebihi stok yang tersedia.';
                        return false;
                    }
                });

                var isFormValid = true;
                $('.required').each(function() {
                    if ($(this).val() === '' || !$(this)[0].checkValidity()) {
                        isFormValid = false;
                        errorMessage +=
                            '<br>Lengkapi semua kolom yang wajib diisi dengan nilai yang valid.';
                        return false;
                    }
                });
                // Jika Detail obat kosong
                if ($('#table-data tr').length === 0) {
                    Swal.fire({
                        title: 'Konfirmasi',
                        text: 'Anda yakin menyimpan rekam medis tanpa detail obat?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, simpan (Tanpa Obat)',
                        cancelButtonText: 'Tidak, batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            submitForm(formData);
                        }
                    });
                    return;
                }

                if (!isValid || !isFormValid) {
                    Swal.fire({
                        title: 'Gagal',
                        html: errorMessage,
                        icon: 'error',
                        showConfirmButton: true
                    });
                    return;
                }
                submitForm(formData);
            });

            function submitForm(formData) {
                $.ajax({
                    url: "{{ URL::to($url_menu) }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Sukses',
                            text: 'Data rekam medis berhasil disimpan',
                            showConfirmButton: true,
                        }).then((result) => {
                            window.location.href = "{{ url($url_menu) }}";
                        });
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        var errorResponse = jqXHR.responseJSON;
                        var errorMessage = 'Terjadi kesalahan saat menyimpan data.';
                        // if (errorResponse && errorResponse.message) {
                        //     errorMessage += '<br>' + errorResponse.message;
                        // }
                        Swal.fire({
                            title: 'Gagal',
                            html: errorMessage,
                            icon: 'error',
                            showConfirmButton: true
                        });
                        console.error(textStatus, errorThrown);
                    }
                });
            }

            const table = $('#myTable').DataTable();

            // Tetap boleh digunakan di dalam sini
            table.on('draw.dt', function() {
                $('.tgl-lahir').each(function() {
                    const tglLahir = $(this).data('tgl');
                    const umur = hitungUmur(tglLahir); // sekarang tidak error
                    $(this).closest('tr').find('.umur-dinamis').text(umur);
                });
            });

            $('#karyawanModal').on('shown.bs.modal', function() {
                table.draw(false);
                $('input[type="search"]').focus();
            });

            $('.btn-cari').on('click', function() {
                $('#karyawanModal').modal('show');
            });

        });

        function select_pro_krywn(nik, name, department, gender, tgl_lahir, alergi) {
            $('#no_rm').val(nik);
            $('#nik').val(nik);
            $('#nama').val(name);
            $('#departemen').val(department);
            $('#gender').val(gender);
            $('#tgl_lahir').val(tgl_lahir);
            // Hitung umur real-time
            const umur = hitungUmur(tgl_lahir);
            $('#umur').val(umur);
            $('#alergi_text').val(alergi);
            if (alergi != '') {
                $('#alergi').attr('checked', 'checked');
                $('#alergi_obat').css('display', '');
                $('#note_alergi').css('display', '');
            } else {
                $('#alergi').removeAttr('checked');
                $('#alergi_obat').css('display', 'none');
                $('#note_alergi').css('display', 'none');
                $('textarea[name="alergi_obat"]').val('');
            }

            $('#karyawanModal').modal('hide');

            // Disable/Enable radio button berdasarkan gender
            if (gender === 'L') { // Jika Laki-laki
                $('#tn').prop('disabled', false); // Tn diaktifkan
                $('#tn').parent('.form-check').css('display', ''); // Tn diaktifkan
                $('#sdr').prop('disabled', false); // Sdr diaktifkan
                $('#sdr').parent('.form-check').css('display', ''); // Sdr diaktifkan
                $('#ny').prop('disabled', true); // Ny dinonaktifkan
                $('#ny').parent('.form-check').css('display', 'none'); // Ny dinonaktifkan
                $('#sdri').prop('disabled', true); // Sdri dinonaktifkan
                $('#sdri').parent('.form-check').css('display', 'none'); // Sdri dinonaktifkan
            } else if (gender === 'P') { // Jika Perempuan
                $('#tn').prop('disabled', true); // Tn dinonaktifkan
                $('#tn').parent('.form-check').css('display', 'none'); // Tn dinonaktifkan
                $('#sdr').prop('disabled', true); // Sdr dinonaktifkan
                $('#sdr').parent('.form-check').css('display', 'none'); // Sdr dinonaktifkan
                $('#ny').prop('disabled', false); // Ny diaktifkan
                $('#ny').parent('.form-check').css('display', ''); // Ny diaktifkan
                $('#sdri').prop('disabled', false); // Sdri diaktifkan
                $('#sdri').parent('.form-check').css('display', ''); // Sdri diaktifkan
            }
            // Lakukan AJAX request untuk mengambil rekam medis terakhir
            $.ajax({
                url: '{{ route('rekam-medis.get-latest') }}', // Route untuk mendapatkan rekam medis
                type: 'GET',
                data: {
                    nik: nik // Kirimkan NIK karyawan yang dipilih
                },
                success: function(response) {
                    if (response.rekamMedis) {
                        let rekamMedisHtml = '';

                        // =========================
                        // TANGGAL REKAM MEDIS
                        // =========================
                        if (response.rekamMedis.tgl) {
                            const tanggal = new Date(response.rekamMedis.tgl);

                            const tanggalFormatted = tanggal.toLocaleDateString('id-ID', {
                                day: '2-digit',
                                month: 'long',
                                year: 'numeric'
                            });

                            rekamMedisHtml += `
                                <div class="mb-3">
                                    <strong>Tanggal Rekam Medis Terakhir:</strong>
                                    <div class="text-secondary mt-1">
                                        ${tanggalFormatted}
                                    </div>
                                </div>

                                <hr class="my-3">
                            `;
                        }

                        // =========================
                        // DIAGNOSIS SUBJEKTIF
                        // =========================
                        if (response.rekamMedis.ds) {
                            rekamMedisHtml += `
                                <div class="mb-3">
                                    <strong>Diagnosis Subjektif (DS):</strong>
                                    <span>${response.rekamMedis.ds}</span>
                                </div>
                            `;
                        }

                        // =========================
                        // DIAGNOSIS OBJEKTIF
                        // =========================
                        rekamMedisHtml += `
                            <div class="mb-2">
                                <strong>Diagnosis Objektif (DO):</strong>
                            </div>

                            <div class="row g-2 mb-3">
                        `;

                        if (response.rekamMedis.tb) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    TB: ${response.rekamMedis.tb} cm
                                </div>
                            `;
                        }

                        if (response.rekamMedis.bb) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    BB: ${response.rekamMedis.bb} Kg
                                </div>
                            `;
                        }

                        if (response.rekamMedis.nadi) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Nadi: ${response.rekamMedis.nadi} x/m
                                </div>
                            `;
                        }

                        if (response.rekamMedis.rr) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Respiratori: ${response.rekamMedis.rr} x/m
                                </div>
                            `;
                        }

                        if (response.rekamMedis.suhu) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Suhu: ${response.rekamMedis.suhu} °C
                                </div>
                            `;
                        }

                        if (
                            response.rekamMedis.tekanan_sistolik &&
                            response.rekamMedis.tekanan_diastolik
                        ) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Tensi: ${response.rekamMedis.tekanan_sistolik}/${response.rekamMedis.tekanan_diastolik} mmHg
                                </div>
                            `;
                        }

                        if (response.rekamMedis.o2) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    O2: ${response.rekamMedis.o2} %
                                </div>
                            `;
                        }

                        if (response.rekamMedis.asam_urat) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Asam Urat: ${response.rekamMedis.asam_urat} mg/dL
                                </div>
                            `;
                        }

                        if (response.rekamMedis.glukosa) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Glukosa: ${response.rekamMedis.glukosa} mg/dL
                                </div>
                            `;
                        }

                        if (response.rekamMedis.kolesterol) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Kolesterol: ${response.rekamMedis.kolesterol} mg/dL
                                </div>
                            `;
                        }

                        if (response.rekamMedis.swab) {
                            rekamMedisHtml += `
                                <div class="col-12">
                                    Swab Ag: ${response.rekamMedis.swab}
                                </div>
                            `;
                        }

                        rekamMedisHtml += `</div>`;

                        // =========================
                        // DETAIL OBAT
                        // =========================
                        rekamMedisHtml += `
                            <hr class="my-3">

                            <div class="mb-2">
                                <strong>Detail Obat:</strong>
                            </div>
                        `;

                        if (response.details && response.details.length > 0) {

                            rekamMedisHtml += `
                                <div class="d-flex flex-column gap-2">
                            `;

                            response.details.forEach(detail => {
                                let aturanPakai = [];

                                if (detail.aturan_pakai1) {
                                    aturanPakai.push(detail.aturan_pakai1);
                                }

                                if (detail.aturan_pakai2) {
                                    aturanPakai.push(detail.aturan_pakai2);
                                }

                                if (detail.aturan_pakai3) {
                                    aturanPakai.push(detail.aturan_pakai3);
                                }

                                const aturanPakaiStr = aturanPakai.length > 0 ?
                                    ` (${aturanPakai.join(', ')})` :
                                    '';

                                if (detail.tipe === 'Resep') {

                                    rekamMedisHtml += `
                                        <div>
                                            ${detail.nama_obat ?? '-'}
                                            ${aturanPakaiStr}
                                            <span class="text-muted">(Resep)</span>
                                        </div>
                                    `;

                                } else {

                                    const dosis = detail.dosis ?
                                        ` - ${detail.dosis}` :
                                        '';

                                    rekamMedisHtml += `
                                        <div>
                                            ${detail.nama_obat ?? '-'}
                                            ${dosis}
                                            ${aturanPakaiStr}
                                        </div>
                                    `;
                                }
                            });

                            rekamMedisHtml += `</div>`;

                        } else {
                            rekamMedisHtml += `
                                <div class="text-secondary">
                                    Konsultasi
                                </div>
                            `;
                        }

                        // =========================
                        // TAMPILKAN
                        // =========================
                        $('#riwayat_rekam_medis').html(rekamMedisHtml);

                    } else {
                        $('#riwayat_rekam_medis').html(`
                            <div class="text-secondary">
                                Riwayat rekam medis terakhir tidak ditemukan.
                            </div>
                        `);
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat mengambil data rekam medis.');
                }
            });
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#multiple-select-field').select2();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#multiple-select-diagnosa').select2();
        });
    </script>
    <!-- Tanggal -->
    <script>
        // Set tanggal awal menjadi tanggal sekarang
        var today = new Date().toISOString().split('T')[0];
        document.getElementById('tgl').value = today;

        // Nonaktifkan tanggal-tanggal di masa depan
        document.getElementById('tgl').max = today;
    </script>
    <script>
        @if ($errors->any())
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Ada kesalahan dalam pengisian form:',
                html: `<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>`
            });
        @endif
    </script>
    <script>
        function select_pro_id(id, status) {
            console.log("Status penerimaan:", status); // Tambahkan ini untuk memeriksa status penerimaan
            // Mengupdate nilai input dengan id 'tpenerimaan-h-id'
            document.getElementsByName('trekamMedis_h-id')[0].value = id;

            // Menutup modal setelah memilih obat
            $('#listRekamMedisModal').modal('hide');
            // Sembunyikan semua tombol "Post" dan "Reverse" secara default
            var postForms = document.querySelectorAll('[id^="postForm_"]');
            postForms.forEach(function(form) {
                form.style.display = 'none';
            });

            var reverseForms = document.querySelectorAll('[id^="reverseForm_"]');
            reverseForms.forEach(function(form) {
                form.style.display = 'none';
            });

            // Periksa status penerimaan obat
            if (status === 'E') { // Entry
                // Tampilkan tombol "Edit"
                document.getElementById('editButton').style.display = 'inline-block';
                // Perbarui URL tautan "Edit" dengan ID yang dipilih
                var editButton = document.getElementById('editButton');
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + id;

                // Tampilkan tombol "Post" yang sesuai
                var postForm = document.getElementById('postForm_' + id);
                postForm.style.display = 'inline-block';
                // Perbarui URL tautan "Post" dengan ID yang dipilih
                postForm.href = "{{ url('rekamMedis/post') }}/" + id;
            } else {
                // Sembunyikan tombol "Edit" jika status bukan 'Entry'
                document.getElementById('editButton').style.display = 'none';
            }

            // Tampilkan tombol "Reverse" jika status adalah 'Entry' atau 'Finish'
            if (status === 'E' || status === 'F') {
                var reverseForm = document.getElementById('reverseForm_' + id);
                reverseForm.style.display = 'inline-block';
                reverseForm.href = "{{ url('rekamMedis/reverse') }}/" + id;
            } else {
                // Sembunyikan tombol "Reverse" jika status bukan 'Entry' atau 'Finish'
                var reverseForm = document.getElementById('reverseForm_' + id);
                reverseForm.style.display = 'none';
            }

            // Menonaktifkan tombol "Select" jika status penerimaan adalah "Cancel"
            if (status === 'C') {
                document.getElementById('postForm_' + id).disabled = true;
            } else {
                document.getElementById('postForm_' + id).disabled = false;
            }

            // Tampilkan tombol "Report" jika status adalah 'Finish'
            if (status === 'F') {
                var printForm = document.getElementById('printForm_' + id);
                printForm.style.display = 'inline-block';
                printForm.target = '_blank';
            } else {
                var printForm = document.getElementById('printForm_' + id);
                printForm.style.display = 'none';
            }
        }
    </script>
    <script>
        function viewSelectedRekamMedis() {
            var selectedRekamMedisId = document.getElementById('trekamMedis_h-id').value;
            if (selectedRekamMedisId) {
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + selectedRekamMedisId;
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih rekam medis terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }
    </script>
    <script>
        // Preview untuk gambar Sebelum
        file - input1.onchange = evt => {
            const [file] = file - input1.files
            if (file) {
                preview_sebelum1.src = URL.createObjectURL(file)
            }
        }

        file - input2.onchange = evt => {
            const [file] = file - input2.files
            if (file) {
                preview_sebelum2.src = URL.createObjectURL(file)
            }
        }

        file - input3.onchange = evt => {
            const [file] = file - input3.files
            if (file) {
                preview_sebelum3.src = URL.createObjectURL(file)
            }
        }

        // Preview untuk gambar Sesudah
        file - input4.onchange = evt => {
            const [file] = file - input4.files
            if (file) {
                preview_sesudah1.src = URL.createObjectURL(file)
            }
        }

        file - input5.onchange = evt => {
            const [file] = file - input5.files
            if (file) {
                preview_sesudah2.src = URL.createObjectURL(file)
            }
        }

        file - input6.onchange = evt => {
            const [file] = file - input6.files
            if (file) {
                preview_sesudah3.src = URL.createObjectURL(file)
            }
        }
    </script>
    <script>
        // Preview untuk gambar Sebelum 1
        document.getElementById('file-input1').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sebelum1').src = URL.createObjectURL(file);
            }
        };

        // Preview untuk gambar Sebelum 2
        document.getElementById('file-input2').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sebelum2').src = URL.createObjectURL(file);
            }
        };

        // Preview untuk gambar Sebelum 3
        document.getElementById('file-input3').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sebelum3').src = URL.createObjectURL(file);
            }
        };

        // Preview untuk gambar Sesudah 1
        document.getElementById('file-input4').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sesudah1').src = URL.createObjectURL(file);
            }
        };

        // Preview untuk gambar Sesudah 2
        document.getElementById('file-input5').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sesudah2').src = URL.createObjectURL(file);
            }
        };

        // Preview untuk gambar Sesudah 3
        document.getElementById('file-input6').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('preview_sesudah3').src = URL.createObjectURL(file);
            }
        };
    </script>
@endpush