@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Profile'])
    <div class="card shadow-lg mx-4 card-profile">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        {{-- photo profile --}}
                        <img src="{{ asset('/storage' . '/' . $user_login->image) }}" alt="profile_image"
                            class="w-100 border-radius-lg shadow-sm">
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">
                            {{ $user_login->firstname }}
                        </h5>
                        <p class="mb-0 font-weight-bold text-sm">
                            {{ session('username') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md">
                <form role="form" method="post" action="{{ URL::to('profile/update') }}" id="profile-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Informasi Akun</p>
                            <hr class="horizontal dark mt-0">
                            {{-- alert --}}
                            @include('components.alert')
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Username</label>

                                        <p class="px-2"><label for="example-text-input"
                                                class="form-control-label text-primary">{{ session('username') }}</label>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Email address</label>
                                        <input class="form-control" type="email" name="profile_email"
                                            value="{{ $user_login->email }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">First name</label>
                                        <input class="form-control" type="text" name="profile_firstname"
                                            value="{{ $user_login->firstname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Last name</label>
                                        <input class="form-control" type="text" name="profile_lastname"
                                            value="{{ $user_login->lastname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="col-sm-auto">
                                        <div class="position-relative">
                                            <div>
                                                <label for="file-input" style="left: -5px !important;" id="ProfileImageedit"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="" aria-hidden="true"
                                                        data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('/storage' . '/' . $user_login->image) }}"
                                                        id="preview" alt="image" data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        class="w-30 border-radius-lg shadow-sm">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" value="{{ $user_login->image }}"
                                        id="ProfileImage" name="profile_image" style="display: none;">
                                    <p class='text-primary text-xs pt-2 mb-0'>Maksimal Size :
                                        <b>2048 KB</b>
                                    </p>
                                    <p class='text-primary text-xs pt-1'>Format Image :
                                        <b>PNG,JPG,JPEG</b>
                                    </p>
                                    <script>
                                        ProfileImage.onchange = evt => {
                                            const [file] = ProfileImage.files
                                            if (file) {
                                                preview.src = URL.createObjectURL(file)
                                            }
                                        }
                                        $('#ProfileImageedit').click(function() {
                                            $('input[name="profile_image"]').click();

                                        });
                                    </script>
                                </div>
                            </div>

                            {{-- Single signature field for non-scrt12 users --}}
                            @if ($user_login->idroles != 'scrt12')
                            <style>
                                #signatureModal .signature-pad-wrapper {
                                    position: relative;
                                    border: 2px solid #d2d6da;
                                    border-radius: 8px;
                                    background: #f8f9fa;
                                    overflow: hidden;
                                }
                                #signatureModal #signatureBgImg {
                                    position: absolute;
                                    top: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    max-width: 100%;
                                    height: auto;
                                    pointer-events: none;
                                    z-index: 0;
                                }
                                #signatureModal .signature-pad {
                                    position: relative;
                                    z-index: 1;
                                }
                                #signatureModal .signature-pad {
                                    cursor: crosshair;
                                    display: block;
                                    width: 100%;
                                }
                                #signatureModal .modal-dialog {
                                    max-width: 880px;
                                }
                            </style>
                            <hr class="horizontal dark">
                            <p class="text-uppercase text-sm">Tanda Tangan Digital</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Hidden input stays inside the profile form so the bottom "Simpan" persists it --}}
                            <input type="hidden" name="profile_signature" id="signatureData"
                                value="{{ $user_login->signature ?? '' }}">

                            {{-- Display area: differs based on whether a signature exists --}}
                            <div id="signatureDisplayArea" class="mt-3">
                                @if ($user_login->signature)
                                    <p class="text-sm text-muted mb-2">Preview Signature Tersimpan:</p>
                                    <div class="mb-3">
                                        <img id="signaturePreviewImg" src="{{ $user_login->signature }}"
                                            alt="Signature Preview"
                                            class="border border-2 rounded"
                                            style="max-width: 300px; height: auto; background: #fff;">
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" class="btn btn-outline-danger btn-sm" id="deleteSignatureBtn"
                                            title="Hapus Tanda Tangan">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <button type="button" class="btn btn-primary btn-sm" id="editSignatureBtn">
                                            <i class="fas fa-edit me-2"></i>Edit Tanda Tangan
                                        </button>
                                    </div>
                                @else
                                    <button type="button" class="btn btn-primary btn-sm" id="createSignatureBtn">
                                        <i class="fas fa-pen me-2"></i>Buat Tanda Tangan
                                    </button>
                                @endif
                            </div>

                            {{-- Bootstrap 5 modal: used for both create and edit flows --}}
                            <div class="modal fade" id="signatureModal" tabindex="-1"
                                aria-labelledby="signatureModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="signatureModalLabel">Buat Tanda Tangan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="signature-pad-wrapper position-relative mb-3 d-flex justify-content-center"
                                                style="border: 2px solid #d2d6da; border-radius: 8px; background: #f8f9fa; overflow: hidden;">
                                                {{-- Background image for edit mode (old TTD shown behind transparent canvas) --}}
                                                <img id="signatureBgImg" src="" alt=""
                                                    style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%; height: auto; pointer-events: none; z-index: 0; display: none;">
                                                <canvas id="signature-pad-modal" class="signature-pad"
                                                    style="position: relative; z-index: 1; cursor: crosshair; display: block;"></canvas>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="d-flex align-items-center">
                                                        <label for="penColorModal" class="form-label me-2 mb-0">Warna Pena:</label>
                                                        <input type="color" id="penColorModal" value="#000000"
                                                            class="form-control form-control-color"
                                                            style="width: 40px; height: 30px; padding: 2px;">
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <label for="penWidthModal" class="form-label me-2 mb-0">Ketebalan:</label>
                                                        <input type="range" id="penWidthModal" min="1" max="10" value="2"
                                                            class="form-range" style="width: 120px;">
                                                    </div>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                                        id="undoSignatureBtn" title="Undo (Ctrl+Z)">
                                                        <i class="fas fa-undo"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                                        id="redoSignatureBtn" title="Redo (Ctrl+Y)">
                                                        <i class="fas fa-redo"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                <div class="d-flex gap-2">
                                                    <button type="button" class="btn btn-primary btn-sm" id="uploadSignatureBtnModal">
                                                        <i class="fas fa-upload me-2"></i>Upload Gambar
                                                    </button>
                                                    <input type="file" id="uploadSignatureImageModal"
                                                        accept="image/png,image/jpg,image/jpeg" style="display: none;">
                                                    <button type="button" class="btn btn-danger btn-sm" id="clearSignatureModal">
                                                        <i class="fas fa-eraser me-2"></i>Hapus Canvas
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="button" class="btn btn-success btn-sm" id="saveSignatureModal">
                                                <i class="fas fa-save me-2"></i>Simpan Tanda Tangan
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                        <div class="card-footer">
                            <div class="d-flex align-items-center">
                                <button class="btn btn-primary btn-sm"
                                    onclick="event.preventDefault(); document.getElementById('profile-form').submit();">Simpan</button>
                            </div>
                        </div>
                    </div>
                </form>

                {{-- Multiple signatures for scrt12 users only --}}
                @if ($user_login->idroles == 'scrt12')
                <div class="card mt-4">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Tanda Tangan Digital</p>
                        <hr class="horizontal dark mt-0">

                        {{-- Daftar Tanda Tangan yang Sudah Ada --}}
                        @if ($user_login->signatures && $user_login->signatures->count() > 0)
                            <div class="row justify-content-center mb-4">
                                <div class="col-md-10">
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <h6 class="mb-0">Daftar Tanda Tangan</h6>
                                        <span class="badge bg-info">
                                            <i class="fas fa-info-circle me-1"></i>Maksimal 1 tanda tangan aktif
                                        </span>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width: 50px;" class="text-center">#</th>
                                                    <th>Nama Tanda Tangan</th>
                                                    <th style="width: 150px;" class="text-center">Preview</th>
                                                    <th style="width: 120px;" class="text-center">Status</th>
                                                    <th style="width: 180px;" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($user_login->signatures as $idx => $sig)
                                                    <tr class="{{ $sig->is_active ? 'table-success' : '' }}">
                                                        <td class="text-center fw-bold">{{ $idx + 1 }}</td>
                                                        <td>
                                                            <span class="fw-semibold">{{ $sig->nama }}</span>
                                                            @if ($sig->is_active)
                                                                <br><small class="text-success"><i class="fas fa-check-circle me-1"></i>Sedang digunakan</small>
                                                            @endif
                                                        </td>
                                                        <td class="text-center">
                                                            <img src="{{ $sig->signature }}" alt="Signature"
                                                                style="max-width: 120px; max-height: 60px; border: 1px solid #dee2e6; border-radius: 4px; padding: 2px; background: white;">
                                                        </td>
                                                        <td class="text-center">
                                                            @if ($sig->is_active)
                                                                <span class="badge bg-success px-3 py-2"><i class="fas fa-check me-1"></i>Aktif</span>
                                                            @else
                                                                <span class="badge bg-secondary px-3 py-2">Nonaktif</span>
                                                            @endif
                                                        </td>
                                                        <td class="text-center">
                                                            <div class="d-flex justify-content-center gap-2">
                                                                @if (!$sig->is_active)
                                                                    <form action="{{ url('/signature/' . $sig->id . '/set-active') }}" method="POST" class="d-inline">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-outline-success btn-sm" title="Jadikan Aktif">
                                                                            <i class="fas fa-power-off me-1"></i>Aktifkan
                                                                        </button>
                                                                    </form>
                                                                @else
                                                                    <form action="{{ url('/signature/' . $sig->id . '/set-inactive') }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menonaktifkan tanda tangan ini? Tanda tangan tidak akan digunakan untuk check-in/out sampai diaktifkan kembali.');">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-outline-warning btn-sm" title="Nonaktifkan">
                                                                            <i class="fas fa-power-off me-1"></i>Nonaktifkan
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                                <form action="{{ url('/signature/' . $sig->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus tanda tangan ini?');">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-outline-danger btn-sm" title="Hapus">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Form Tambah Tanda Tangan Baru --}}
                        <form role="form" method="post" action="{{ URL::to('signature/store') }}" id="signature-form" enctype="multipart/form-data">
                            @csrf
                            <div class="row justify-content-center">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="signature_nama" class="form-control-label">Nama Tanda Tangan</label>
                                        <input type="text" class="form-control mb-3" id="signature_nama" name="signature_nama"
                                            placeholder="Contoh: Arianto" required>

                                        <label for="signature-input" class="form-control-label">Tanda Tangan Baru</label>

                                        <div class="signature-pad-wrapper position-relative mb-3 d-flex justify-content-center"
                                            style="border: 2px solid #d2d6da; border-radius: 8px; background: #f8f9fa; overflow: hidden;">
                                            <canvas id="signature-pad" class="signature-pad" style="cursor: crosshair; display: block;"></canvas>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="d-flex align-items-center">
                                                    <label for="penColor" class="form-label me-2 mb-0">Warna Pena:</label>
                                                    <input type="color" id="penColor" value="#000000" class="form-control form-control-color"
                                                        style="width: 40px; height: 30px; padding: 2px;">
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <label for="penWidth" class="form-label me-2 mb-0">Ketebalan:</label>
                                                    <input type="range" id="penWidth" min="1" max="10" value="2"
                                                        class="form-range" style="width: 120px;">
                                                </div>
                                            </div>
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-primary btn-sm" id="uploadSignatureBtn">
                                                    <i class="fas fa-upload me-2"></i>Upload Gambar
                                                </button>
                                                <input type="file" id="uploadSignatureImage" accept="image/png,image/jpg,image/jpeg"
                                                    style="display: none;">
                                                <button type="button" class="btn btn-danger btn-sm" id="clearSignature">
                                                    <i class="fas fa-eraser me-2"></i>Hapus Canvas
                                                </button>
                                            </div>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <button type="button" class="btn btn-success btn-sm" id="saveSignatureBtn">
                                                <i class="fas fa-plus me-2"></i>Tambah Tanda Tangan
                                            </button>
                                        </div>

                                        <input type="hidden" name="signature_image" id="signatureData" value="">
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr class="horizontal dark">
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Signature Pad Library -->
    @push('js')
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

    <script>
        (function() {
            'use strict';

            // DOM Elements
            const canvas = document.getElementById('signature-pad');
            const signatureInput = document.getElementById('signatureData');
            const signatureNamaInput = document.getElementById('signature_nama');
            const penColorInput = document.getElementById('penColor');
            const penWidthInput = document.getElementById('penWidth');
            const saveBtn = document.getElementById('saveSignatureBtn');
            const saveNonScrt12Btn = document.getElementById('saveSignature');
            const clearBtn = document.getElementById('clearSignature');
            const uploadBtn = document.getElementById('uploadSignatureBtn');
            const uploadInput = document.getElementById('uploadSignatureImage');

            // Non-scrt12 users now use the modal-based pad (handled by a separate IIFE below).
            // The inline `signature-pad` canvas only exists for scrt12 users. Bail out early
            // so we don't try to attach listeners to null elements.
            if (!canvas) {
                return;
            }

            // Signature Pad instance
            let signaturePad;

            // Canvas dimensions - maximum size
            const CANVAS_WIDTH = 800;
            const CANVAS_HEIGHT = 320;

            // Keep track of current canvas data for resize
            // Exposed globally so clearSavedSignature() can reset it
            window.savedSignatureData = null;

            /**
             * Initialize Signature Pad
             * Canvas dimensions are set to fit container while maintaining 1:1 ratio
             * between internal bitmap and display pixels to prevent cursor offset.
             */
            function initSignaturePad() {
                // Calculate actual dimensions to fit container
                const wrapper = canvas.parentElement;
                const wrapperWidth = wrapper.clientWidth - 4; // subtract border
                const scale = Math.min(wrapperWidth / CANVAS_WIDTH, 1);
                const actualWidth = Math.floor(CANVAS_WIDTH * scale);
                const actualHeight = Math.floor(CANVAS_HEIGHT * scale);

                // Set both internal and display dimensions to same value
                // This is critical for accurate cursor/touch positioning
                canvas.width = actualWidth;
                canvas.height = actualHeight;
                canvas.style.width = actualWidth + 'px';
                canvas.style.height = actualHeight + 'px';

                // Initialize SignaturePad
                signaturePad = new SignaturePad(canvas, {
                    backgroundColor: 'rgba(0, 0, 0, 0)', // Transparent background
                    penColor: penColorInput.value,
                    minWidth: 0.5,
                    maxWidth: 2.5,
                    throttle: 16, // ms, for smoother drawing on touch devices
                    velocityFilterWeight: 0.7 // for smoother curves
                });

                // Load existing signature if available
                const existingSignature = signatureInput.value;
                if (existingSignature && existingSignature !== '') {
                    signaturePad.fromDataURL(existingSignature);
                } else if (window.savedSignatureData) {
                    // Restore from saved data after resize
                    signaturePad.fromData(window.savedSignatureData);
                }
            }

            /**
             * Save signature and submit form
             */
            function saveSignature() {
                if (signaturePad.isEmpty()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Kosong!',
                        text: 'Silakan buat tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }

                if (!signatureNamaInput.value.trim()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Nama Tanda Tangan Kosong!',
                        text: 'Silakan isi nama tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    signatureNamaInput.focus();
                    return;
                }

                // Get data URL as PNG (transparent background by default)
                let dataURL = signaturePad.toDataURL('image/png');

                // Validate size (MySQL TEXT field limit ~65KB)
                const estimatedSize = dataURL.length * 0.75;
                const maxSize = 60000; // 60KB safety limit

                if (estimatedSize > maxSize) {
                    // Try JPEG compression if PNG is too large
                    dataURL = signaturePad.toDataURL('image/jpeg', 0.85);

                    if ((dataURL.length * 0.75) > maxSize) {
                        dataURL = signaturePad.toDataURL('image/jpeg', 0.7);
                    }

                    if ((dataURL.length * 0.75) > maxSize) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Tanda Tangan Terlalu Besar',
                            html: 'Tanda tangan terlalu kompleks. Silakan buat yang lebih sederhana atau upload gambar dengan resolusi lebih kecil.',
                            confirmButtonColor: '#f39c12'
                        });
                        return;
                    }
                }

                // Update hidden input
                signatureInput.value = dataURL;

                // Submit the form
                document.getElementById('signature-form').submit();
            }

            /**
             * Handle image upload and load into signature pad
             */
            function handleImageUpload(e) {
                const file = e.target.files[0];
                if (!file || !file.type.match('image.*')) {
                    return;
                }

                // Check file size (max 5MB)
                const maxSize = 5 * 1024 * 1024;
                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'error',
                        title: 'File Terlalu Besar!',
                        text: 'Ukuran file maksimal 5MB. Silakan pilih gambar yang lebih kecil.',
                        confirmButtonColor: '#d33'
                    });
                    e.target.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(event) {
                    // Use signature pad's built-in fromDataURL method
                    signaturePad.fromDataURL(event.target.result, {
                        ratio: 1,
                        width: CANVAS_WIDTH,
                        height: CANVAS_HEIGHT,
                        xOffset: 0,
                        yOffset: 0
                    });

                    Swal.fire({
                        icon: 'success',
                        title: 'Gambar Berhasil Diupload!',
                        text: 'Gambar telah disesuaikan dengan ukuran canvas. Klik "Simpan Tanda Tangan" untuk melanjutkan.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                };
                reader.readAsDataURL(file);

                // Reset input
                e.target.value = '';
            }

            /**
             * Clear signature
             */
            function clearSignature() {
                signaturePad.clear();
                window.savedSignatureData = null;
            }

            /**
             * Save signature for non-scrt12 users (stores to profile form hidden input)
             */
            function saveSignatureNonScrt12() {
                if (signaturePad.isEmpty()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Kosong!',
                        text: 'Silakan buat tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }

                // Get data URL as PNG
                let dataURL = signaturePad.toDataURL('image/png');

                // Validate size (MySQL TEXT field limit ~65KB)
                const estimatedSize = dataURL.length * 0.75;
                const maxSize = 60000;

                if (estimatedSize > maxSize) {
                    dataURL = signaturePad.toDataURL('image/jpeg', 0.85);
                    if ((dataURL.length * 0.75) > maxSize) {
                        dataURL = signaturePad.toDataURL('image/jpeg', 0.7);
                    }
                    if ((dataURL.length * 0.75) > maxSize) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Tanda Tangan Terlalu Besar',
                            html: 'Tanda tangan terlalu kompleks. Silakan buat yang lebih sederhana atau upload gambar dengan resolusi lebih kecil.',
                            confirmButtonColor: '#f39c12'
                        });
                        return;
                    }
                }

                // Update hidden input in profile form
                signatureInput.value = dataURL;

                Swal.fire({
                    icon: 'success',
                    title: 'Tanda Tangan Disimpan!',
                    text: 'Tanda tangan telah disimpan. Klik tombol "Simpan" di bawah untuk menyimpan perubahan profil.',
                    confirmButtonColor: '#028284'
                });
            }

            // Global function for "Hapus Signature Tersimpan" button
            window.clearSavedSignature = function() {
                if (signaturePad) {
                    signaturePad.clear();
                }
                window.savedSignatureData = null;
                if (signatureInput) {
                    signatureInput.value = '';
                }
                Swal.fire({
                    icon: 'success',
                    title: 'Tanda Tangan Dihapus!',
                    text: 'Tanda tangan tersimpan telah dihapus. Klik tombol "Simpan" di bawah untuk menyimpan perubahan profil.',
                    confirmButtonColor: '#028284'
                });
            };

            // Initialize immediately when DOM is ready
            document.addEventListener('DOMContentLoaded', function() {
                initSignaturePad();
            });

            // Handle window resize - save signature data, reinitialize, and restore
            window.addEventListener('resize', function() {
                if (signaturePad) {
                    window.savedSignatureData = signaturePad.toData();
                }
                initSignaturePad();
            });

            // Save button for scrt12 users
            if (saveBtn) {
                saveBtn.addEventListener('click', saveSignature);
            }

            // Save button for non-scrt12 users
            if (saveNonScrt12Btn) {
                saveNonScrt12Btn.addEventListener('click', saveSignatureNonScrt12);
            }

            // Clear button
            if (clearBtn) {
                clearBtn.addEventListener('click', clearSignature);
            }

            // Upload button
            if (uploadBtn) {
                uploadBtn.addEventListener('click', function() {
                    uploadInput.click();
                });
            }

            // File input change
            if (uploadInput) {
                uploadInput.addEventListener('change', handleImageUpload);
            }

            // Pen color change
            penColorInput.addEventListener('change', function(e) {
                if (signaturePad) {
                    signaturePad.penColor = e.target.value;
                }
            });

            // Pen width change
            penWidthInput.addEventListener('input', function(e) {
                if (signaturePad) {
                    const width = parseFloat(e.target.value);
                    signaturePad.minWidth = width * 0.25;
                    signaturePad.maxWidth = width * 1.25;
                }
            });

            // Handle keyboard shortcuts
            canvas.addEventListener('keydown', function(e) {
                // Ctrl+Z for undo
                if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
                    e.preventDefault();
                    const data = signaturePad.toData();
                    if (data) {
                        data.pop(); // remove the last dot or line
                        signaturePad.fromData(data);
                    }
                }
            });
        })();

        // =====================================================================
        // Non-scrt12 modal-based signature pad.
        // Only runs when the modal canvas exists (i.e. non-scrt12 users).
        // Keeps undo/redo stacks using SignaturePad.toData()/fromData().
        // =====================================================================
        (function() {
            'use strict';

            // DOM Elements (modal-only)
            const modalCanvas = document.getElementById('signature-pad-modal');
            if (!modalCanvas) {
                // scrt12 users don't render this modal; nothing to do.
                return;
            }

            const signatureInput = document.getElementById('signatureData');
            const penColorInput = document.getElementById('penColorModal');
            const penWidthInput = document.getElementById('penWidthModal');
            const clearBtn = document.getElementById('clearSignatureModal');
            const uploadBtn = document.getElementById('uploadSignatureBtnModal');
            const uploadInput = document.getElementById('uploadSignatureImageModal');
            const saveBtn = document.getElementById('saveSignatureModal');
            const undoBtn = document.getElementById('undoSignatureBtn');
            const redoBtn = document.getElementById('redoSignatureBtn');
            const modalEl = document.getElementById('signatureModal');
            const modalLabel = document.getElementById('signatureModalLabel');
            const createBtn = document.getElementById('createSignatureBtn');
            const editBtn = document.getElementById('editSignatureBtn');
            const deleteBtn = document.getElementById('deleteSignatureBtn');
            const displayArea = document.getElementById('signatureDisplayArea');
            const bgImg = document.getElementById('signatureBgImg');

            // Signature Pad instance (lazily initialized when modal opens)
            let signaturePad = null;
            let modalInstance = null;
            let isEditMode = false;
            let oldSignatureDataUrl = null;

            // Canvas dimensions - same as before
            const CANVAS_WIDTH = 800;
            const CANVAS_HEIGHT = 320;

            // Undo / redo stacks (SignaturePad stroke arrays)
            let undoStack = [];
            let redoStack = [];
            // Flag to suppress endStroke during undo/redo (prevents duplicate entries)
            let isApplyingHistory = false;

            /**
             * Initialize / re-initialize the modal canvas.
             * Preserves existing strokes across re-inits (e.g. on window resize).
             */
            function initModalCanvas() {
                const wrapper = modalCanvas.parentElement;
                const wrapperWidth = (wrapper.clientWidth || CANVAS_WIDTH) - 4; // subtract border
                const scale = Math.min(wrapperWidth / CANVAS_WIDTH, 1);
                const actualWidth = Math.floor(CANVAS_WIDTH * scale);
                const actualHeight = Math.floor(CANVAS_HEIGHT * scale);

                // 1:1 between internal bitmap and display pixels to prevent cursor offset.
                modalCanvas.width = actualWidth;
                modalCanvas.height = actualHeight;
                modalCanvas.style.width = actualWidth + 'px';
                modalCanvas.style.height = actualHeight + 'px';

                // Preserve any existing strokes across re-init.
                let prevData = null;
                if (signaturePad) {
                    try {
                        prevData = signaturePad.toData();
                    } catch (e) {
                        prevData = null;
                    }
                }

                signaturePad = new SignaturePad(modalCanvas, {
                    backgroundColor: 'rgba(0, 0, 0, 0)', // transparent background
                    penColor: penColorInput ? penColorInput.value : '#000000',
                    minWidth: 0.5,
                    maxWidth: 2.5,
                    throttle: 16,
                    velocityFilterWeight: 0.7
                });

                // Restore strokes if we had any (resize scenario).
                if (prevData && prevData.length > 0) {
                    signaturePad.fromData(prevData);
                } else {
                    undoStack = [JSON.parse(JSON.stringify(signaturePad.toData()))];
                    redoStack = [];
                }

                // Set up background image for edit mode (old TTD shown behind transparent canvas)
                if (bgImg) {
                    if (isEditMode && oldSignatureDataUrl) {
                        bgImg.src = oldSignatureDataUrl;
                        bgImg.style.display = 'block';
                    } else {
                        bgImg.src = '';
                        bgImg.style.display = 'none';
                    }
                }

                // Push every completed stroke onto the undo stack and clear redo.
                // Each endStroke captures the NEW state (with the stroke just drawn).
                signaturePad.removeEventListener('endStroke', onStrokeEnd);
                signaturePad.addEventListener('endStroke', onStrokeEnd);
            }

            // Handler reference for add/remove (prevents duplicate listeners on re-init).
            function onStrokeEnd() {
                // Suppress during undo/redo to prevent duplicate stack entries.
                if (isApplyingHistory) return;
                try {
                    undoStack.push(JSON.parse(JSON.stringify(signaturePad.toData())));
                    redoStack = [];
                } catch (e) {}
            }

            function openModal(editMode) {
                isEditMode = !!editMode;
                // Store old signature data URL for background image display
                oldSignatureDataUrl = (isEditMode && signatureInput && signatureInput.value)
                    ? signatureInput.value : null;
                if (modalLabel) {
                    modalLabel.textContent = isEditMode ? 'Edit Tanda Tangan' : 'Buat Tanda Tangan';
                }
                if (modalInstance) {
                    modalInstance.show();
                }
            }

            function closeModal() {
                if (modalInstance) {
                    modalInstance.hide();
                }
            }

            function handleSave() {
                // If canvas is empty but background exists (edit mode, no new strokes),
                // keep the old signature as-is.
                if (!signaturePad || signaturePad.isEmpty()) {
                    if (isEditMode && oldSignatureDataUrl) {
                        if (signatureInput) signatureInput.value = oldSignatureDataUrl;
                        updateDisplay(oldSignatureDataUrl);
                        closeModal();
                        Swal.fire({
                            icon: 'success',
                            title: 'Tanda Tangan Tidak Berubah',
                            text: 'Tidak ada goresan baru. Tanda tangan lama tetap dipakai.',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Kosong!',
                        text: 'Silakan buat tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }

                // Composite: draw background (old TTD) + canvas strokes on temp canvas
                const tempCanvas = document.createElement('canvas');
                tempCanvas.width = modalCanvas.width;
                tempCanvas.height = modalCanvas.height;
                const ctx = tempCanvas.getContext('2d');

                // White background
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);

                // Draw old TTD (background image) if exists
                if (bgImg && bgImg.complete && bgImg.naturalWidth > 0 && bgImg.style.display !== 'none') {
                    try { ctx.drawImage(bgImg, 0, 0, tempCanvas.width, tempCanvas.height); } catch (e) {}
                }

                // Draw new strokes on top
                try { ctx.drawImage(modalCanvas, 0, 0); } catch (e) {}

                let dataURL = tempCanvas.toDataURL('image/png');
                const maxSize = 60000;

                if ((dataURL.length * 0.75) > maxSize) {
                    dataURL = tempCanvas.toDataURL('image/jpeg', 0.85);
                    if ((dataURL.length * 0.75) > maxSize) {
                        dataURL = tempCanvas.toDataURL('image/jpeg', 0.7);
                    }
                    if ((dataURL.length * 0.75) > maxSize) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Tanda Tangan Terlalu Besar',
                            html: 'Tanda tangan terlalu kompleks. Silakan buat yang lebih sederhana.',
                            confirmButtonColor: '#f39c12'
                        });
                        return;
                    }
                }

                if (signatureInput) signatureInput.value = dataURL;

                // 2) Update display area to show preview + edit/delete buttons.
                updateDisplay(dataURL);

                // 3) Close the modal.
                closeModal();

                // 4) Notify user that they still need to click "Simpan" on the profile form.
                Swal.fire({
                    icon: 'success',
                    title: 'Tanda Tangan Disimpan!',
                    text: 'Tanda tangan telah disimpan. Klik tombol Simpan di bawah untuk menyimpan perubahan profil.',
                    confirmButtonColor: '#028284'
                });
            }

            function updateDisplay(dataURL) {
                if (!displayArea) return;
                // Escape any double quotes in the data URL for safe attribute embedding.
                const safeURL = String(dataURL).replace(/"/g, '&quot;');
                displayArea.innerHTML =
                    '<p class="text-sm text-muted mb-2">Preview Signature Tersimpan:</p>' +
                    '<div class="mb-3">' +
                        '<img id="signaturePreviewImg" src="' + safeURL + '" alt="Signature Preview" ' +
                            'class="border border-2 rounded" style="max-width: 300px; height: auto; background: #fff;">' +
                    '</div>' +
                    '<div class="d-flex align-items-center gap-2">' +
                        '<button type="button" class="btn btn-outline-danger btn-sm" id="deleteSignatureBtn" title="Hapus Tanda Tangan">' +
                            '<i class="fas fa-trash"></i>' +
                        '</button>' +
                        '<button type="button" class="btn btn-primary btn-sm" id="editSignatureBtn">' +
                            '<i class="fas fa-edit me-2"></i>Edit Tanda Tangan' +
                        '</button>' +
                    '</div>';
                bindDisplayButtons();
            }

            function showCreateButton() {
                if (!displayArea) return;
                displayArea.innerHTML =
                    '<button type="button" class="btn btn-primary btn-sm" id="createSignatureBtn">' +
                        '<i class="fas fa-pen me-2"></i>Buat Tanda Tangan' +
                    '</button>';
                const newCreateBtn = document.getElementById('createSignatureBtn');
                if (newCreateBtn) {
                    newCreateBtn.addEventListener('click', function() { openModal(false); });
                }
            }

            function bindDisplayButtons() {
                const editBtnNow = document.getElementById('editSignatureBtn');
                const deleteBtnNow = document.getElementById('deleteSignatureBtn');
                if (editBtnNow) {
                    editBtnNow.addEventListener('click', function() { openModal(true); });
                }
                if (deleteBtnNow) {
                    deleteBtnNow.addEventListener('click', handleDelete);
                }
            }

            function handleDelete() {
                Swal.fire({
                    icon: 'warning',
                    title: 'Hapus Tanda Tangan?',
                    text: 'Yakin ingin menghapus tanda tangan?',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        if (signatureInput) {
                            signatureInput.value = '';
                        }
                        showCreateButton();
                        Swal.fire({
                            icon: 'success',
                            title: 'Tanda Tangan Dihapus!',
                            text: 'Tanda tangan telah dihapus. Klik tombol Simpan di bawah untuk menyimpan perubahan profil.',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            }

            function handleImageUpload(e) {
                const file = e.target.files[0];
                if (!file || !file.type.match('image.*')) return;
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'error',
                        title: 'File Terlalu Besar!',
                        text: 'Ukuran file maksimal 5MB. Silakan pilih gambar yang lebih kecil.',
                        confirmButtonColor: '#d33'
                    });
                    e.target.value = '';
                    return;
                }
                const reader = new FileReader();
                reader.onload = function(event) {
                    // Set uploaded image as background, clear canvas strokes
                    if (bgImg) {
                        bgImg.src = event.target.result;
                        bgImg.style.display = 'block';
                    }
                    if (signaturePad) signaturePad.clear();
                    redoStack = [];
                    Swal.fire({
                        icon: 'success',
                        title: 'Gambar Berhasil Diupload!',
                        text: 'Klik "Simpan Tanda Tangan" untuk melanjutkan.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                };
                reader.readAsDataURL(file);
                e.target.value = '';
            }

            function handleClear() {
                // Clear canvas strokes
                if (signaturePad) {
                    signaturePad.clear();
                }
                // Also clear background image (old TTD) so "Hapus Canvas" = hapus semua
                if (bgImg) {
                    bgImg.src = '';
                    bgImg.style.display = 'none';
                }
                oldSignatureDataUrl = null;
                // Reset stacks
                undoStack = [JSON.parse(JSON.stringify(signaturePad ? signaturePad.toData() : []))];
                redoStack = [];
            }

            function handleUndo() {
                if (!signaturePad) return;
                if (undoStack.length > 1) {
                    redoStack.push(JSON.parse(JSON.stringify(signaturePad.toData())));
                    undoStack.pop();
                    const prev = undoStack[undoStack.length - 1];
                    // Set flag to prevent endStroke from pushing duplicate entries
                    isApplyingHistory = true;
                    signaturePad.fromData(JSON.parse(JSON.stringify(prev)));
                    // Reset flag after a brief delay (allow events to settle)
                    setTimeout(function() { isApplyingHistory = false; }, 50);
                }
            }

            function handleRedo() {
                if (!signaturePad) return;
                if (redoStack.length > 0) {
                    const next = redoStack.pop();
                    undoStack.push(next);
                    isApplyingHistory = true;
                    signaturePad.fromData(JSON.parse(JSON.stringify(next)));
                    setTimeout(function() { isApplyingHistory = false; }, 50);
                }
            }

            // Bootstrap modal instance (Bootstrap 5 is loaded globally via layout).
            if (window.bootstrap && modalEl) {
                modalInstance = new bootstrap.Modal(modalEl);
            }

            // Initialize canvas when the modal is fully shown (wrapper has dimensions).
            if (modalEl) {
                modalEl.addEventListener('shown.bs.modal', function() {
                    initModalCanvas();
                });
                modalEl.addEventListener('hidden.bs.modal', function() {
                    // Clear strokes + background after closing so reopening starts fresh.
                    if (signaturePad) {
                        try { signaturePad.clear(); } catch (e) {}
                    }
                    if (bgImg) {
                        bgImg.src = '';
                        bgImg.style.display = 'none';
                    }
                    undoStack = [];
                    redoStack = [];
                });
            }

            // Re-init on window resize while modal is open (preserves strokes).
            window.addEventListener('resize', function() {
                if (modalEl && modalEl.classList.contains('show')) {
                    initModalCanvas();
                }
            });

            // Keyboard shortcuts inside the modal.
            if (modalEl) {
                modalEl.addEventListener('keydown', function(e) {
                    if (!signaturePad) return;
                    // Ctrl/Cmd+Z -> undo
                    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z' && !e.shiftKey) {
                        e.preventDefault();
                        handleUndo();
                    }
                    // Ctrl/Cmd+Y or Ctrl+Shift+Z -> redo
                    if (((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') ||
                        ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'z')) {
                        e.preventDefault();
                        handleRedo();
                    }
                });
            }

            // Bind static buttons (rendered by Blade on page load).
            if (createBtn) {
                createBtn.addEventListener('click', function() { openModal(false); });
            }
            if (editBtn) {
                editBtn.addEventListener('click', function() { openModal(true); });
            }
            if (deleteBtn) {
                deleteBtn.addEventListener('click', handleDelete);
            }
            if (saveBtn) {
                saveBtn.addEventListener('click', handleSave);
            }
            if (clearBtn) {
                clearBtn.addEventListener('click', handleClear);
            }
            if (uploadBtn) {
                uploadBtn.addEventListener('click', function() { uploadInput.click(); });
            }
            if (uploadInput) {
                uploadInput.addEventListener('change', handleImageUpload);
            }
            if (undoBtn) {
                undoBtn.addEventListener('click', handleUndo);
            }
            if (redoBtn) {
                redoBtn.addEventListener('click', handleRedo);
            }
            if (penColorInput) {
                penColorInput.addEventListener('change', function(e) {
                    if (signaturePad) {
                        signaturePad.penColor = e.target.value;
                    }
                });
            }
            if (penWidthInput) {
                penWidthInput.addEventListener('input', function(e) {
                    if (signaturePad) {
                        const width = parseFloat(e.target.value);
                        signaturePad.minWidth = width * 0.25;
                        signaturePad.maxWidth = width * 1.25;
                    }
                });
            }
        })();

    </script>
    @endpush
@endsection