@push('styles')
    <style>
        .kwb-signature-container {
            width: 100%;
            height: 200px;
            border: 1px solid #d2d6de;
            border-radius: 4px;
            background: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box
        }

        .kwb-signature-container canvas {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain
        }

        .signature-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px
        }

        .signature-label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #444
        }

        @media (max-width:576px) {
            .kwb-signature-container {
                height: 150px
            }

            .modal-dialog {
                max-width: 95%
            }
        }

        /* --- Custom Modal Styling --- */
        .modal-content-custom {
            border: none;
            border-radius: 1.25rem;
            box-shadow: 0 15px 50px rgba(0,0,0,0.15);
            overflow: hidden;
        }
        .modal-header-custom {
            background-color: #f8f9fa;
            border-bottom: 2px solid #ebedf2;
            padding: 1.25rem 1.75rem;
        }
        .modal-title-custom {
            font-weight: 700;
            color: #2c3e50;
            font-size: 1.35rem;
            display: flex;
            align-items: center;
        }
        .modal-body-custom {
            padding: 1.75rem 2rem;
        }
        .modal-footer-custom {
            border-top: 1px solid #ebedf2;
            background-color: #fafbfa;
            padding: 1.25rem 1.75rem;
            border-bottom-left-radius: 1.25rem;
            border-bottom-right-radius: 1.25rem;
        }
        .statement-box {
            background-color: #f0f3ff;
            border: 1px solid #d0d7ff;
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: flex-start;
        }
        .statement-box .icon {
            font-size: 1.5rem;
            color: #6c63ff;
            margin-right: 1rem;
            line-height: 1;
        }
        .statement-box p {
            margin-bottom: 0;
            color: #344767;
            font-weight: 500;
            line-height: 1.5;
        }
        .custom-checkbox-wrapper {
            background: #fff;
            border: 1px solid #e9ecef;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
            transition: all 0.2s ease;
        }
        .custom-checkbox-wrapper:hover {
            border-color: #6c63ff;
            background: #fdfdff;
        }
        .custom-checkbox-wrapper .form-check-input {
            width: 1.25em;
            height: 1.25em;
            margin-top: 0.15em;
            cursor: pointer;
        }
        .custom-checkbox-wrapper .form-check-label {
            font-weight: 600;
            color: #2c3e50;
            margin-left: 0.5rem;
            cursor: pointer;
        }
        .kwb-signature-container {
            border: 2px dashed #cbd5e1;
            border-radius: 0.75rem;
            background-color: #f8fafc;
            transition: all 0.3s ease;
        }
        .kwb-signature-container:hover {
            border-color: #94a3b8;
            background-color: #fff;
        }
        .btn-hapus-ttd {
            border-radius: 50px;
            padding: 0.3rem 1.25rem;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .btn-kirim-modal {
            background: linear-gradient(135deg, #6c63ff, #8e84ff);
            border: none;
            padding: 0.6rem 2rem;
            font-weight: 600;
            border-radius: 50px;
            box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
            color: #fff;
            transition: all 0.3s ease;
        }
        .btn-kirim-modal:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(108, 99, 255, 0.4);
            color: #fff;
        }
        .btn-kirim-modal:disabled {
            background: #e9ecef;
            color: #adb5bd;
            box-shadow: none;
            opacity: 1;
        }
        .btn-batal-modal {
            border-radius: 50px;
            padding: 0.6rem 2rem;
            font-weight: 600;
            border: 1px solid #dee2e6;
            color: #6c757d;
        }
        .btn-batal-modal:hover {
            background-color: #f8f9fa;
            color: #495057;
            border-color: #ced4da;
        }
    </style>
@endpush

{{-- PENTING: cegah Livewire memorph seluruh isi modal --}}
<div wire:ignore.self class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content modal-content-custom">
            <div class="modal-header modal-header-custom">
                <h5 class="modal-title modal-title-custom" id="confirmationModalLabel">
                    <i class="bi bi-shield-check text-success me-2" style="font-size: 1.5rem;"></i> Konfirmasi Data
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body modal-body-custom">
                <div class="statement-box">
                    <div class="icon"><i class="bi bi-info-circle-fill"></i></div>
                    <div>
                        <p>Dengan ini saya menyatakan bahwa data yang saya berikan adalah benar dan sesuai dengan kenyataan.</p>
                        <small class="text-muted mt-1 d-block">Kesalahan pada data dapat mempengaruhi proses tindak lanjut layanan Anda.</small>
                    </div>
                </div>

                <div class="custom-checkbox-wrapper mb-4">
                    <div class="form-check d-flex align-items-center mb-0">
                        <input id="confirmData" type="checkbox" class="form-check-input mt-0" wire:model.live="confirmData">
                        <label class="form-check-label w-100" for="confirmData">Saya mengerti dan menyetujui pernyataan di atas</label>
                    </div>
                </div>
                @error('confirmData')
                    <div class="text-danger small mb-3 mt-neg-2"><i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}</div>
                @enderror

                {{-- Kanvas signature dipasang oleh jQuery plugin, jadi di-ignore --}}
                <div class="form-group mb-2" wire:ignore>
                    <label class="signature-label fw-bold mb-2"><i class="bi bi-pen me-1"></i> Tanda Tangan Digital:</label>
                    <div id="sig" class="kwb-signature-container"></div>
                    <div class="signature-controls mt-2">
                        <small class="text-secondary"><i class="bi bi-hand-index-thumb me-1"></i> Silakan gambar tanda tangan di area di atas</small>
                        <button id="clear" class="btn btn-outline-danger btn-hapus-ttd" type="button"><i class="bi bi-eraser me-1"></i> Hapus Tanda Tangan</button>
                    </div>
                </div>
                @error('signed')
                    <div class="text-danger small mt-2"><i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}</div>
                @enderror

                {{-- Nilai base64 untuk dikirim ke Livewire --}}
                <input type="hidden" id="signed-hidden" wire:model.live="signed">
            </div>

            <div class="modal-footer modal-footer-custom">
                <button type="button" class="btn btn-batal-modal" wire:click="resetForm"
                    data-bs-dismiss="modal">Batal</button>

                {{-- PENTING: type="button" + wire:click ke method store --}}
                <button id="btnKirim" type="button" class="btn btn-kirim-modal" wire:click.prevent="storeNewData"
                    wire:loading.attr="disabled" wire:target="storeNewData">
                    <span wire:loading.remove wire:target="storeNewData"><i class="bi bi-cloud-arrow-up me-1"></i> Kirim Formulir</span>
                    <span wire:loading wire:target="storeNewData"><span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Menyimpan…</span>
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        (function() {
            // Hindari init ganda ketika halaman/komponen re-render
            if (window.__modalKonfirmasiInited) return;
            window.__modalKonfirmasiInited = true;

            document.addEventListener('livewire:init', function() {
                const modalEl = document.getElementById('confirmationModal');
                const bsModal = new bootstrap.Modal(modalEl, {
                    backdrop: 'static',
                    keyboard: false
                });
                const checkbox = document.getElementById('confirmData');
                const hidden = document.getElementById('signed-hidden');
                const btnKirim = document.getElementById('btnKirim');
                let $sig = null;

                function refreshKirim() {
                    const ok = checkbox.checked && hidden.value.trim() !== '';
                    btnKirim.disabled = !ok;
                }

                window.addEventListener('lw-debug', e => console.log('[LW]', e.detail));


                // === LISTENER BROWSER EVENT (v3): gunakan window.addEventListener ===
                // Show modal (dipanggil dari controller: $this->dispatch('showConfirmationModal'))
                window.addEventListener('showConfirmationModal', () => {
                    bsModal.show();
                    // Init canvas signature hanya sekali
                    $(modalEl).off('shown.bs.modal.confirm').on('shown.bs.modal.confirm', function() {
                        if (!$sig) {
                            $sig = $('#sig').signature({
                                syncFormat: 'PNG'
                            });
                        }
                        refreshKirim();
                    });
                });

                // Tangkap garis tangan → isi hidden + evaluasi tombol
                $('#sig').off('mouseup.confirm touchend.confirm').on('mouseup.confirm touchend.confirm',
                    function() {
                        if ($sig) {
                            const data = $sig.signature('toDataURL');
                            $('#signed-hidden').val(data).trigger('input'); // sinkron ke Livewire
                            // ❗ kirim ke komponen supaya properti $signed pasti ter-set
                            Livewire.dispatch('signatureUpdated', {
                                value: data
                            });
                            refreshKirim();
                        }
                    });

                // Hapus tanda tangan
                $('#clear').off('click.confirm').on('click.confirm', function(e) {
                    e.preventDefault();
                    if ($sig) {
                        $sig.signature('clear');
                    }
                    $('#signed-hidden').val('').trigger('input');
                    refreshKirim();
                });

                // Centang persetujuan mempengaruhi state tombol
                checkbox.addEventListener('change', refreshKirim, true);

                // Setelah Livewire memproses roundtrip apapun, pastikan state tombol benar
                Livewire.hook('message.processed', refreshKirim);
                Livewire.hook('message.failed', refreshKirim);

                // Sukses simpan (controller: $this->dispatch('swal-success', message:'...'))
                window.addEventListener('swal-success', (e) => {
                    try {
                        bootstrap.Modal.getInstance(modalEl)?.hide();
                    } catch (_) {}
                    const msg = e.detail?.message || 'Data berhasil disimpan.';
                    if (window.Swal) {
                        Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: msg
                            })
                            .then(() => window.location.reload());
                    } else {
                        alert(msg);
                        window.location.reload();
                    }
                });

                // Error umum/validasi (opsional kalau kamu dispatch 'swal-error')
                window.addEventListener('swal-error', (e) => {
                    const msg = e.detail?.message || 'Gagal menyimpan data.';
                    if (window.Swal) Swal.fire({
                        icon: 'error',
                        title: 'Oops',
                        text: msg
                    });
                    refreshKirim();
                });

                // Bersih-bersih handler saat modal ditutup
                modalEl.addEventListener('hidden.bs.modal', () => {
                    $(modalEl).off('.confirm');
                });
            });
        })();
    </script>
@endpush