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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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 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>
                        <button class="btn btn-primary btn-sm mb-0" style="display: none;" id="sysuser-save"
                            onclick="event.preventDefault(); document.getElementById('sysuser-form').submit();">Simpan</button>
                        @if ($rekamMedis->status == 'E')
                            <a id="editButton" class="btn btn-warning mb-0">
                                <span class="fa fa-edit me-1"></span>Edit</a>
                            <form id="postForm_{{ $rekamMedis->id }}"
                                action="{{ url('rekamMedis/post/' . $rekamMedis->id) }}" method="POST"
                                style="display: inline-block;">
                                @csrf
                                <button type="button" class="btn btn-primary mb-0"
                                    onclick="showConfirmation('{{ $rekamMedis->id }}', '{{ $rekamMedis->status }}')">
                                    <span class="fa fa-send me-1"></span>Post
                                </button>
                            </form>

                            <form id="reverseForm_{{ $rekamMedis->id }}"
                                action="{{ url('rekamMedis/reverse/' . $rekamMedis->id) }}" method="POST"
                                style="display: inline-block;">
                                @csrf
                                <button type="button" class="btn btn-danger mb-0"
                                    onclick="showConfirmationReverse('{{ $rekamMedis->id }}')">
                                    <span class="fa fa-trash me-1"></span>Hapus
                                </button>
                            </form>
                        @elseif ($rekamMedis->status === 'F')
                            <form id="reverseForm_{{ $rekamMedis->id }}"
                                action="{{ url('rekamMedis/reverse/' . $rekamMedis->id) }}" method="POST"
                                style="display: inline-block;">
                                @csrf
                                <button type="button" class="btn btn-danger mb-0"
                                    onclick="showConfirmationReverse('{{ $rekamMedis->id }}')">
                                    <span class="fa fa-trash me-1"></span>Reverse
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form role="form" method="POST">
        @csrf
        @method('PUT')
        <div class="container-fluid py-4">
            <!-- Header -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h5>Header</h5>
                            <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="--" value="{{ $rekamMedis->id }}"
                                                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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->no_rm }}"
                                                id="nik" name="no_rm" required readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="inputDate" class="text-lg">Tanggal</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="date" class="form-control" value="{{ $rekamMedis->tgl }}"
                                                name="tgl" id="tgl" required readonly>
                                            <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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->nama }}"
                                                id="nama" name="nama" required readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="inputReference" class="text-lg">Title</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->title }}"
                                                id="title" name="title" required readonly>
                                        </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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control"
                                                value="{{ $rekamMedis->tgl_lahir }}" 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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->gender }}"
                                                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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->umur }}"
                                                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</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control"
                                                value="{{ $rekamMedis->departemen }}" id="departemen" name="departemen"
                                                required readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="inputDokter" class="text-lg">Dokter</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" value="{{ $rekamMedis->dokter }}"
                                                id="departemen" name="departemen" required readonly>
                                        </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</label>
                                                </div>
                                                <hr>
                                                <div class="row mb-3">
                                                    <div class="col-lg-20">
                                                        <input type="text" value="{{ $rekamMedis->ds }}"
                                                            class="form-control" id="ds[]" name="ds" readonly>
                                                    </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="text" value="{{ $rekamMedis->tb }}"
                                                                class="form-control" id="tb" name="tb"
                                                                readonly>
                                                            <span class="input-group-text">cm</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <label for="bb" class="text-lg">BB</label>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="input-group">
                                                            <input type="text" value="{{ $rekamMedis->bb }}"
                                                                class="form-control" id="bb" name="bb"
                                                                readonly>
                                                            <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="text" value="{{ $rekamMedis->nadi }}"
                                                                class="form-control" id="nadi" name="nadi"
                                                                readonly>
                                                            <span class="input-group-text">x/mnt</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="text" value="{{ $rekamMedis->rr }}"
                                                                class="form-control" id="rr" name="rr"
                                                                readonly>
                                                            <span class="input-group-text">x/mnt</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <div class="col-lg-2">
                                                        <label for="suhu" class="text-lg">Suhu</label>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="input-group">
                                                            <input type="text" value="{{ $rekamMedis->suhu }}"
                                                                class="form-control" id="suhu" name="suhu"
                                                                readonly>
                                                            <span class="input-group-text">°C</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <label for="" class="text-lg">Tensi</label>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <input type="number" value="{{ $rekamMedis->tekanan_sistolik }}"
                                                            class="form-control" name="tekanan_sistolik"
                                                            id="tekanan_sistolik" value="0" required readonly>
                                                    </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"
                                                            value="{{ $rekamMedis->tekanan_diastolik }}"
                                                            class="form-control" name="tekanan_diastolik"
                                                            id="tekanan_diastolik" value="0" required readonly>
                                                    </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="text" value="{{ $rekamMedis->o2 }}"
                                                                class="form-control" id="o2" name="o2"
                                                                readonly>
                                                            <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="text" value="{{ $rekamMedis->asam_urat }}"
                                                                class="form-control" id="asam_urat" name="asam_urat"
                                                                readonly>
                                                            <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="text" value="{{ $rekamMedis->glukosa }}"
                                                                class="form-control" id="glukosa" name="glukosa"
                                                                readonly>
                                                            <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="text" value="{{ $rekamMedis->kolesterol }}"
                                                                class="form-control" id="kolesterol" name="kolesterol"
                                                                readonly>
                                                            <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">Swab Ag</label>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <select class="form-control" id="swab" name="swab"
                                                            disabled>
                                                            <option value="{{ $rekamMedis->swab }}">
                                                                @if ($rekamMedis->swab == '-')
                                                                    - (Negatif)
                                                                @elseif ($rekamMedis->swab == '+')
                                                                    + (Positif)
                                                                @else
                                                                    {{ $rekamMedis->swab }}
                                                                @endif
                                                            </option>
                                                        </select>
                                                    </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 class="text-lg">Lain-lain</label>
                                                </div>
                                                <hr>
                                                <div class="row mb-3">
                                                    <div class="col-lg-20">
                                                        <input type="text" value="{{ $rekamMedis->lain_lain }}"
                                                            name="lain_lain" id="lain_lain" class="form-control"
                                                            readonly></input>
                                                    </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</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">Diagnosa</label>
                                                </div>
                                                <hr>
                                                <div class="row mb-3">
                                                    <div class="col-lg-20">
                                                        <input value="{{ $rekamMedis->diagnosa }}" class="form-control"
                                                            name="diagnosa" id="diagnosa" value="0" required
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </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</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">Foto Luka</label>
                                                </div>
                                                <hr>
                                                <div class="row mb-3">
                                                    <div class="col-lg-20">
                                                        @if ($rekamMedis->gambar)
                                                            <!-- Tambahkan class 'zoom' untuk memicu Magnific Popup -->
                                                            <img id="mainLukaImage" width="400px" height="400px"
                                                                src="{{ asset('storage/' . $rekamMedis->gambar) }}"
                                                                alt="Gambar Luka" class="img-fluid">
                                                        @else
                                                            <img id="mainLukaImage" width="400px" height="400px"
                                                                src="{{ asset('images/default.jpg') }}"
                                                                alt="Gambar Default" class="img-fluid">
                                                        @endif
                                                    </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>
                        </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">Item</th>
                                            <th scope="col">Tipe</th>
                                            <th scope="col">Kode</th>
                                            <th scope="col">Nama Obat</th>
                                            <th scope="col">Pemakaian</th>
                                            <th scope="col">Jumlah</th>
                                            <th scope="col" colspan="3">Aturan Minum</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table-data">
                                        @foreach ($details as $d)
                                            <tr>
                                                <td>{{ $d->item }}</td>
                                                <td>{{ $d->tipe }}</td>
                                                <td>{{ $d->kode_obat }}</td>
                                                <td>{{ $d->nama_obat }}</td>
                                                <td>{{ $d->pemakaian }}</td>
                                                <td>{{ $d->qty }}</td>
                                                <td>{{ $d->aturan_pakai1 }} {{ $d->aturan_pakai2 }}
                                                    {{ $d->aturan_pakai3 }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <!-- Tambahkan class modal-lg untuk modal yang lebih besar -->
            <div class="modal-content">
                <div class="modal-body text-center">
                    <!-- Tambahkan tag img di dalam modal untuk menampilkan gambar -->
                    <img id="modalLukaImage" class="img-fluid" width="800px" height="800px">
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function showConfirmation(id, status) {
            var postUrl = "{{ url('rekamMedis/post/') }}/" + id;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin memposting data rekam medis dengan ID ' + id + ' ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, lanjutkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    postrekamMedis(postUrl); // Panggil fungsi untuk melakukan posting
                }
            });
        }

        function postrekamMedis(postUrl) {
            $.ajax({
                url: postUrl,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Sukses',
                        text: 'Data rekam medis berhasil diposting.',
                        icon: 'success',
                        showConfirmButton: true,
                        // timer: 1500
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat memposting data.',
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);
                }
            });
        }

        function showConfirmationReverse(id) {
            var reverseUrl = "{{ url('rekamMedis/reverse') }}/" + id;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin membatalkan data rekam medis dengan ID ' + id + ' ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, batalkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Jika konfirmasi diterima, kirim permintaan pembatalan
                    reverserekamMedis(reverseUrl);
                }
            });
        }

        function reverserekamMedis(reverseUrl) {
            $.ajax({
                url: reverseUrl,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Sukses',
                        text: 'Rekam medis berhasil dibatalkan.',
                        icon: 'success',
                        showConfirmButton: true,
                        // timer: 1500
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat membatalkan rekam medis.',
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);
                }
            });
        }
        document.addEventListener('DOMContentLoaded', function() {
            var id = "{{ $rekamMedis->id }}"; // Mengambil ID penerimaan
            if ("{{ $rekamMedis->status }}" == 'E') {
                document.getElementById('editButton').style.display = 'inline-block';
                var editButton = document.getElementById('editButton');
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + id;
            }
        });
    </script>
    <script>
        // Tambahkan event listener pada gambar untuk membuka modal ketika diklik
        document.getElementById('mainLukaImage').addEventListener('click', function() {
            $('#imageModal').modal('show'); // Buka modal secara manual
            // Setel sumber gambar pada modal sesuai dengan gambar yang diklik
            $('#modalLukaImage').attr('src', $(this).attr('src'));
        });
    </script>
@endpush