<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Posderen - {{ $title }}</title>

    <!-- Custom fonts for this template-->
    <link href="{{ asset('vendor/fontawesome-free/css/all.css') }}" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">
    <link href="https://cdn.datatables.net/v/bs5/dt-1.13.8/r-2.5.0/datatables.css" rel="stylesheet">


    <!-- Custom styles for this template-->
    <link href="{{ asset('css/sb-admin-2.css') }}" rel="stylesheet">

    <style>
        .v1 {
            width: 130px;
            /* Atur lebar sesuai kebutuhan */
            display: inline-block;
        }

        .v2 {
            width: 120px;
            /* Atur lebar sesuai kebutuhan */
            display: inline-block;
        }

        @media print {
            .print-page-break {
                page-break-before: always;
            }

            #printButton {
                display: none;
            }
        }
    </style>

</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">



        <!-- Begin Page Content -->
        <div class="container-fluid mt-3">

            <div class="card shadow mb-4">
                <div class="card m-3">
                    <div class="row no-gutters">
                        <div class="col-md-12">
                            <div class="card-body">

                                <h5 class="card-title text-center" style="text-transform: uppercase">Ibu
                                    {{ $data->details->nama_ibu }}
                                </h5>
                                <hr>
                                <div class="row ">
                                    <div class="col-md-12 mb-2">
                                        <div class="card bg-gray-100 p-2">
                                            <p class="card-text">
                                                Biodata :
                                            </p>
                                            <ul class="aligned-list">
                                                <li>
                                                    <span class="v1">NIK Ibu</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->nik_ibu }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Tanggal Lahir Ibu</span>
                                                    <span>:</span>
                                                    <span>{{ \Carbon\Carbon::parse($data->details->tanggal_lahir_ibu)->format('d - F - Y') }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Nama Ibu</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->nama_ibu }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Umur Ibu</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->umur_ibu }}</span>
                                                </li>

                                                <li>
                                                    <span class="v1">Nama Ayah</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->nama_ayah }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Umur Ayah</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->umur_ayah }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Alamat</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->alamat }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Status Ibu</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->status_ibu }}</span>
                                                </li>
                                                <li>
                                                    <span class="v1">Status Ayah</span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->status_ayah }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-md-12 ">
                                        <div class="card bg-gray-100 p-2">
                                            <p class="card-text ">
                                                Biodata Balita:
                                            </p>
                                            <ul class="aligned-list">
                                                <li>
                                                    <span class="v2">Anak Ke </span>
                                                    <span>:</span>
                                                    <span>{{ $data->details->anak_ke }}</span>
                                                </li>
                                                <li>
                                                    <span class="v2">NIK Balita</span>
                                                    <span>:</span>
                                                    <span>{{ $data->nik_balita }}</span>
                                                </li>
                                                <li>
                                                    <span class="v2">Nama Balita</span>
                                                    <span>:</span>
                                                    <span>{{ $data->nama_balita }}</span>
                                                </li>
                                                <li>
                                                    <span class="v2">Jenis Kelamin</span>
                                                    <span>:</span>
                                                    <span>{{ $data->jenis_kelamin }}</span>
                                                </li>
                                                <li>
                                                    <span class="v2">Tanggal Lahir</span>
                                                    <span>:</span>
                                                    <span>{{ \Carbon\Carbon::parse($data->tanggal_lahir)->format('d - F - Y') }}</span>
                                                </li>

                                                <li>
                                                    <span class="v2">Jam Lahir</span>
                                                    <span>:</span>
                                                    <span>{{ $data->jam_lahir }}</span>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class=" col-md-12 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class=" py-3 d-flex justify-content-between align-items-center">
                                        <h6 class="m-0 font-weight-bold text-primary">Status Periksa balita
                                            {{ $data->nama_bayi }}
                                        </h6>
                                    </div>



                                    <div class="table-responsive">
                                        <table class="table table-stripped table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Tanggal Kunjungan</th>
                                                    <th>Usia</th>
                                                    <th>TB</th>
                                                    <th>BB</th>
                                                    <th>LKB</th>
                                                    <th>Jenis Vitamin</th>
                                                    <th>Jenis Imunisasi</th>


                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($status_periksa_balita as $spb)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td style="width: 15%">
                                                            {{ \Carbon\Carbon::parse($spb->tanggal_kunjungan)->format('d - F - Y') }}
                                                        </td>
                                                        <td style="width: 15%">
                                                            @if ($spb->usia_balita_tahun > 0)
                                                                {{ $spb->usia_balita_tahun }} Tahun
                                                            @endif
                                                            {{ $spb->usia_balita_bulan }} Bulan
                                                        </td>
                                                        <td style="width: 8%">{{ $spb->tinggi_badan }} Cm</td>
                                                        <td style="width: 8%">{{ $spb->berat_badan }} Kg</td>
                                                        <td style="width: 8%">
                                                            {{ $spb->lingkar_kepala_balita }} Cm</td>
                                                        <td>{{ $spb->info->nama_obat }}</td>
                                                        <td>{{ $spb->infov2->nama_obat }}</td>

                                                    </tr>
                                                    <div class="modal fade" id="hapusData{{ $spb->id }}"
                                                        tabindex="-1" role="dialog"
                                                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel">
                                                                        Apakah Kamu
                                                                        Akan Menghapus Data Status Periksa
                                                                        Balita Pada Tanggal
                                                                        {{ \Carbon\Carbon::parse($spb->tanggal_kunjungan)->format('d - F - Y') }}

                                                                    </h5>
                                                                    <button class="close" type="button"
                                                                        data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">×</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body">Pilih "Hapus" di bawah
                                                                    jika Anda ingin
                                                                    menghapus data admin
                                                                    {{ $spb->nama_lengkap }}
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <form
                                                                        action="/status_periksa_balita/delete/{{ $spb->id }}"
                                                                        method="post" class="d-inline">
                                                                        @method('delete')
                                                                        @csrf
                                                                        <button class="btn btn-secondary" type="button"
                                                                            data-dismiss="modal">Cancel</button>
                                                                        <button class="btn btn-danger">Hapus</button>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <div class="print-page-break">
                    <div class="col-md-12 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class=" py-3 d-flex justify-content-between align-items-center">
                                            <h6 class="m-0 font-weight-bold text-primary">Grafik Pertumbuhan Tinggi
                                                Badan
                                                {{ $data->nama_bayi }}</h6>
                                        </div>
                                        <canvas id="chartTinggiBadan"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-12 mb-4 ">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class=" py-3 d-flex justify-content-between align-items-center">
                                            <h6 class="m-0 font-weight-bold text-primary">Grafik Pertumbuhan Berat
                                                Badan
                                                {{ $data->nama_bayi }}</h6>
                                        </div>
                                        <canvas id="chartBeratBadan"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div><br>
                        <div class="">
                            <button class="btn btn-custom btn-icon icon-left btn-primary" onclick="printInvoice()"
                                id="printButton">
                                <i class="fa fa-print"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>





        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; Posderen 2024</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>




    <!-- Bootstrap core JavaScript-->
    <script src="{{ asset('vendor/jquery/jquery.js') }}"></script>
    <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.js') }}"></script>

    <!-- Core plugin JavaScript-->
    <script src="{{ asset('vendor/jquery-easing/jquery.easing.js') }}"></script>

    <!-- Custom scripts for all pages-->
    <script src="{{ asset('js/sb-admin-2.js') }}"></script>

    <!-- Page level plugins -->
    {{-- <script src="{{ asset('vendor/chart.js/Chart.min.js') }}"></script> --}}

    <!-- Page level custom scripts -->
    {{-- <script src="{{ asset('js/demo/chart-area-demo.js') }}"></script> --}}
    <script src="https://cdn.datatables.net/v/bs5/dt-1.13.8/r-2.5.0/datatables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


    <script>
        let table = new DataTable('#myTable');
        $(document).ready(function() {
            $('#example').DataTable({
                responsive: true
            });
        });
    </script>
    <script>
        // Chart
        var ctxTinggi = document.getElementById('chartTinggiBadan').getContext('2d');
        var chartTinggi = new Chart(ctxTinggi, {
            type: 'line',
            data: {
                labels: {!! json_encode(array_keys($tinggi_badan_balita)) !!},
                datasets: [{
                    label: 'Tinggi Badan (cm)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    data: {!! json_encode(array_values($tinggi_badan_balita)) !!},
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                        }
                    }]
                }
            }
        });

        var ctxBerat = document.getElementById('chartBeratBadan').getContext('2d');
        var chartBerat = new Chart(ctxBerat, {
            type: 'line',
            data: {
                labels: {!! json_encode(array_keys($berat_badan_balita)) !!},
                datasets: [{
                    label: 'Berat Badan (kg)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    data: {!! json_encode(array_values($berat_badan_balita)) !!},
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                        }
                    }]
                }
            }
        });




        // hello world
        var formContainer = document.getElementById('formContainer');
        var showFormBtn = document.getElementById('showFormBtn');
        var formContainerv2 = document.getElementById('formContainerv2');
        var showFormBtnv2 = document.getElementById('showFormBtnv2');
        // var formContainerv3 = document.getElementById('formContainerv3');
        // var showFormBtnv3 = document.getElementById('showFormBtnv3');
        var formContainerv4 = document.getElementById('formContainerv4');
        var showFormBtnv4 = document.getElementById('showFormBtnv4');
        var iconToggle = document.getElementById('iconToggle');
        var iconTogglev2 = document.getElementById('iconTogglev2');
        var textToggle = document.getElementById('textToggle');
        var textTogglev2 = document.getElementById('textTogglev2');

        var isFormVisible = false;



        if (showFormBtnv2) {

            showFormBtnv2.addEventListener('click', function() {
                if (!isFormVisible) {
                    formContainerv2.style.display = 'block';
                    // iconTogglev2.className = 'fas fa-times';
                    // textTogglev2.textContent = 'Tutup';
                    isFormVisible = true;
                } else {
                    formContainerv2.style.display = 'none';
                    // iconTogglev2.className = 'fas fa-check';
                    // textTogglev2.textContent = 'Selesai';
                    isFormVisible = false;
                }
            });
        }
        // showFormBtnv3.addEventListener('click', function() {
        // if (!isFormVisible) {
        // formContainerv3.style.display = 'block';
        // iconTogglev2.className = 'fas fa-times';
        // textTogglev2.textContent = 'Tutup';
        // isFormVisible = true;
        // } else {
        // formContainerv3.style.display = 'none';
        // iconTogglev2.className = 'fas fa-check';
        // textTogglev2.textContent = 'Selesai';
        // isFormVisible = false;
        // }
        // });
        if (showFormBtnv4) {
            showFormBtnv4.addEventListener('click', function() {
                if (!isFormVisible) {
                    formContainerv4.style.display = 'block';
                    isFormVisible = true;
                } else {
                    formContainerv4.style.display = 'none';
                    isFormVisible = false;
                }
            });
        }





        window.addEventListener('DOMContentLoaded', function() {
            var errorMessages = document.querySelectorAll('#formContainer .invalid-feedback');
            if (errorMessages.length > 0) {
                formContainer.style.display = 'block';
                isFormVisible = true;
            }
        });
        window.addEventListener('DOMContentLoaded', function() {
            var errorMessages = document.querySelectorAll('#formContainerv2 .invalid-feedback');
            if (errorMessages.length > 0) {
                formContainerv2.style.display = 'block';
                isFormVisible = true;
            }
        });
        window.addEventListener('DOMContentLoaded', function() {
            var errorMessages = document.querySelectorAll('#formContainerv3 .invalid-feedback');
            if (errorMessages.length > 0) {
                formContainerv3.style.display = 'block';
                isFormVisible = true;
            }
        });
        window.addEventListener('DOMContentLoaded', function() {
            var errorMessages = document.querySelectorAll('#formContainerv4 .invalid-feedback');
            if (errorMessages.length > 0) {
                formContainerv4.style.display = 'block';
                isFormVisible = true;
            }
        });

        document.addEventListener('DOMContentLoaded', function() {

            var inputs = document.querySelectorAll('.form-control');
            inputs.forEach(function(input) {
                input.addEventListener('focus', function() {
                    this.classList.remove('is-invalid');
                    var feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback) {
                        feedback.style.display = 'none';
                    }
                });
            });
        });

        showFormBtn.addEventListener('click', function() {
            if (!isFormVisible) {
                formContainer.style.display = 'block';
                iconToggle.className = 'fas fa-minus';
                textToggle.textContent = 'Tutup';
                isFormVisible = true;
            } else {
                formContainer.style.display = 'none';
                iconToggle.className = 'fas fa-plus';
                textToggle.textContent = 'Tambah';
                isFormVisible = false;
            }
        });

        function printInvoice() {
            document.getElementById('printButton').style.display = 'none';
            window.print();
        }
    </script>

</body>

</html>
