<?= $this->extend('Admin/Layout/app_layout'); ?>
<?= $this->section('content'); ?>
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-6">
                <h4>
                    Template Surat </h4>
            </div>
            <div class="col-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<?= base_url('home') ?>">
                            <svg class="stroke-icon">
                                <use href="<?= base_url() ?>assets/svg/icon-sprite.svg#stroke-home"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item active">Template Surat</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <!-- HTML (DOM) sourced data  Starts-->
        <div class="col-sm-12">
            <div class="card">
                <form action="#" id="template-form" class="needs-validation">
                    <div class="card-header card-no-border total-revenue">
                        <h4>Template Surat</h4>

                        <div class="card-header-right-icon">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Simpan</button>
                        </div>

                    </div>
                    <div class="card-body pt-0">

                        <input type="hidden" name="id" class="form-control form-control-sm" required="">
                        <div class="form-group mb-3">
                            <label>Header Surat</label>
                            <div id="editor-header" style="height: 100px;"></div>
                            <input type="hidden" id="header_surat" name="header_surat">
                            <div class="invalid-feedback">Header Wajib diisi</div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-3 col-md-4">
                                <label>Judul Surat</label>
                                <input type="text" name="judul" class="form-control form-control-sm" required>
                                <div class="invalid-feedback">Judul Wajib diisi</div>
                            </div>
                            <div class="form-group mb-3 col-md-4">
                                <label>No Surat</label>
                                <input type="text" name="no_surat" class="form-control form-control-sm" required>
                                <div class="invalid-feedback">Judul Wajib diisi</div>
                            </div>
                            <div class="form-group mb-3 col-md-4">
                                <label>Tanggal Surat</label>
                                <input type="text" name="tgl_surat" class="form-control form-control-sm" required>
                                <div class="invalid-feedback">Judul Wajib diisi</div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label>Dasar Surat</label>
                            <div id="editor-dasar" style="height: 100px;"></div>
                            <input type="hidden" id="dasar_surat" name="dasar_surat">
                            <div class="invalid-feedback">Pengumuman Wajib diisi</div>
                        </div>
                        <div class="form-group mb-3">
                            <label>Isi Surat</label>
                            <div id="editor-isi" style="height: 100px;"></div>
                            <input type="hidden" id="isi_surat" name="isi_surat">
                            <div class="invalid-feedback">Pengumuman Wajib diisi</div>
                        </div>
                        <div class="form-group mb-3">
                            <label>Penutup Surat</label>
                            <div id="editor-penutup" style="height: 100px;"></div>
                            <input type="hidden" id="penutup_surat" name="penutup_surat">
                            <div class="invalid-feedback">Pengumuman Wajib diisi</div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-3 col-md-4">
                                <label>Tanda Tangan dan Stempel</label>
                                <div class="custom-file">
                                    <input type="file" name="ttd" class="custom-file-input form-control" id="ttd">
                                </div>
                                <div class="form-text text-muted">The image must have a maximum size of 1MB</div>
                                <img id="ttdPreview" src="" alt="ttd Preview" style="max-width: 100px; display: none;">
                            </div>
                            <div class="col-xl-4 col-sm-6">
                                <div class="card-wrapper border rounded-3 h-100 checkbox-checked">
                                    <h6 class="sub-title">Opsi Tambahan </h6>
                                    <div class="form-check checkbox checkbox-primary mb-0">
                                        <input class="form-check-input" id="nilai" name="nilai" type="checkbox" value="Y">
                                        <label class="form-check-label" for="nilai">Tampilkan Nilai ?</label>
                                    </div>
                                    <div class="form-check checkbox checkbox-success mb-0">
                                        <input class="form-check-input" id="kop_img" name="kop_img" value="Y" type="checkbox">
                                        <label class="form-check-label" for="kop_img">Pakai Kop Gambar ?</label>
                                    </div>
                                    <div class="form-check checkbox checkbox-success mb-0">
                                        <input class="form-check-input" id="jurusan" name="jurusan" value="Y" type="checkbox">
                                        <label class="form-check-label" for="jurusan">Pakai Jurusan ?</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<!-- Container-fluid Ends-->
<?= $this->endSection(); ?>
<?= $this->section('pagejs'); ?>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            url: "<?= site_url('kelulusan/template/getdata') ?>",
            type: "GET",
            dataType: "JSON",
            success: function(data) {

                $('[name="judul"]').val(data.nama_surat);
                $('[name="tgl_surat"]').val(data.tgl_surat);
                $('[name="no_surat"]').val(data.no_surat);
                quillheader.root.innerHTML = data.header_surat;
                quilldasar.root.innerHTML = data.dasar_surat;
                quillisi.root.innerHTML = data.isi_surat;
                quillpenutup.root.innerHTML = data.penutup_surat;
                $("#jurusan").prop("checked", data.jurusan === "Y");
                $("#nilai").prop("checked", data.nilai === "Y");
                $("#kop_img").prop("checked", data.kop_img === "Y");
                $('#ttdPreview').attr('src', '<?= base_url('assets/img/') ?>' + data.ttd).show();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //console.log(jqXHR);
                alert('Error get data from ajax');
            }
        });
        // Inisialisasikan Quill editor
        var save_method; //for save method string
        var table;
        const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],
            ['link'],
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }, {
                'list': 'check'
            }],
            [{
                'header': [1, 2, 3, 4, 5, 6, false]
            }],

            [{
                'color': []
            }, {
                'background': []
            }], // dropdown with defaults from theme
            [{
                'font': []
            }],
            [{
                'align': []
            }],

            ['clean'] // remove formatting button
        ];
        var quillheader = new Quill('#editor-header', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow' // Anda bisa memilih tema yang lain jika diinginkan
        });
        var quilldasar = new Quill('#editor-dasar', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow' // Anda bisa memilih tema yang lain jika diinginkan
        });
        var quillisi = new Quill('#editor-isi', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow' // Anda bisa memilih tema yang lain jika diinginkan
        });
        var quillpenutup = new Quill('#editor-penutup', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow' // Anda bisa memilih tema yang lain jika diinginkan
        });
        // Tambahkan event listener untuk menyimpan konten Quill editor ke dalam input hidden setiap kali terjadi perubahan
        quillheader.on('text-change', function() {
            var html = quillheader.root.innerHTML;
            $('#header_surat').val(html);
        });
        quilldasar.on('text-change', function() {
            var html = quilldasar.root.innerHTML;
            $('#dasar_surat').val(html);
        });
        quillisi.on('text-change', function() {
            var html = quillisi.root.innerHTML;
            $('#isi_surat').val(html);
        });
        quillpenutup.on('text-change', function() {
            var html = quillpenutup.root.innerHTML;
            $('#penutup_surat').val(html);
        });
        $('#ttd').change(function() {
            readURL(this, '#ttdPreview');
            $(this).next('.custom-file-label').html(event.target.files[0].name);
        });

        function readURL(input, previewElement) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $(previewElement).attr('src', e.target.result).show();
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
        $('#template-form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            // console.log(formData);
            $.ajax({
                url: '<?= base_url('kelulusan/template/update') ?>', // Sesuaikan dengan URL CI4 Anda
                type: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    // $('#responseMessage').html('<div class="alert alert-success" role="alert">' + response.message + '</div>');
                    showToast(response.message);
                },
                error: function() {
                    // $('#responseMessage').html('<div class="alert alert-danger" role="alert">Terjadi kesalahan saat mengirim data.</div>');
                }
            });
        });
    });
</script>
<?= $this->endSection(); ?>