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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="Description" content="Enter your description here" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <title>Title</title>
        <style>
            /* mengatur ukuran canvas tanda tangan  */
            canvas {
                border: 1px solid #ccc;
                border-radius: 0.5rem;
                width: 100%;
                height: 400px;
            }
        </style>
    </head>

    <body>

        <div class="container" align="center">
            <h1 style="width: 50%;" class="alert alert-success mt-5 text-dark">
                Tanda Tangan
            </h1>
            <div class="card" style="width: 50%;">
                <div class="card-header">
                    Area Tanda Tangan
                </div>
                <div class="card-body">
                    <!-- canvas tanda tangan  -->
                    <canvas id="signature-pad" class="signature-pad"></canvas>
                    <br>
                    <!-- tombol submit  -->
                    <div>
                        <button id="btn-submit" class="btn btn-primary">
                            Simpan
                        </button>
                        <!-- tombol ganti warna  -->
                        <button hidden type="button" class="btn btn-success" id="change-color">
                            Change Color
                        </button>

                        <!-- tombol undo  -->
                        <button type="button" class="btn btn-dark" id="undo">
                            <span class="fas fa-undo"></span>
                            Undo
                        </button>

                        <!-- tombol hapus tanda tangan  -->
                        <button type="button" class="btn btn-danger" id="clear">
                            <span class="fas fa-eraser"></span>
                            Reset
                        </button>
                    </div>
                    <div><br>
                    <input type="text" placeholder="nama jelas" name="namajelas" id="namajelas" required style="width: 50%;" class="form-control">
                    </div>
                    <div class="">
                    <?php $caseid = $this->uri->segment(3); ?>
                        <input type="hidden" class="form-control" id="caseid" value="<?= $caseid; ?>">
                    </div>

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

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
        <script>
            // script di dalam ini akan dijalankan pertama kali saat dokumen dimuat
            document.addEventListener('DOMContentLoaded', function() {
                resizeCanvas();
            })

            //script ini berfungsi untuk menyesuaikan tanda tangan dengan ukuran canvas
            function resizeCanvas() {
                var ratio = Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }


            var canvas = document.getElementById('signature-pad');

            //warna dasar signaturepad
            var signaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgb(255, 255, 255)'
            });

            //saat tombol clear diklik maka akan menghilangkan seluruh tanda tangan
            document.getElementById('clear').addEventListener('click', function() {
                signaturePad.clear();
            });

            //saat tombol undo diklik maka akan mengembalikan tanda tangan sebelumnya
            document.getElementById('undo').addEventListener('click', function() {
                var data = signaturePad.toData();
                if (data) {
                    data.pop(); // remove the last dot or line
                    signaturePad.fromData(data);
                }
            });

            //saat tombol change color diklik maka akan merubah warna pena
            document.getElementById('change-color').addEventListener('click', function() {

                //jika warna pena biru maka buat menjadi hitam dan sebaliknya
                if (signaturePad.penColor == "rgba(0, 0, 255, 1)") {

                    signaturePad.penColor = "rgba(0, 0, 0, 1)";
                } else {
                    signaturePad.penColor = "rgba(0, 0, 255, 1)";
                }
            })

            //fungsi untuk menyimpan tanda tangan dengan metode ajax
            $(document).on('click', '#btn-submit', function() {
                var signature = signaturePad.toDataURL();
                var CaseID    = $("#caseid").val();
                var namajelas = $("#namajelas").val();

                $.ajax({
                    url: "<?php echo base_url() ?>Formkomunikasi/simpansignatur1",
                    data: {
                        caseid: CaseID,
                        namajelas:namajelas,
                        foto: signature,
                    },
                    method: "POST",
                    success: function() {
                        alert('Tanda Tangan Berhasil Disimpan');
                        window.close();
                    }

                })
            })
        </script>
    </body>

    </html>