@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- Sweet Alert handlers untuk session error/success --}}
    @if (session('error'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: @json(session('error')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('success'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: @json(session('success')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Edit {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body">
                            @include('components.alert')
                            <form action="{{ URL::to($url_menu . '/edit/' . encrypt($list->id)) }}" method="POST" id="formTtd">
                                @csrf
                                @method('PUT')

                                {{-- Karyawan (readonly — tidak bisa diganti saat edit) --}}
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-control-label">Karyawan</label>
                                            <input type="text" class="form-control"
                                                value="{{ $list->nik ?? $list->username }} - {{ $list->nama_karyawan ?? $list->firstname }}" readonly>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-lock me-1"></i>Karyawan tidak dapat diganti pada mode edit.
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                {{-- Departemen & Jabatan (read-only) --}}
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Departemen</label>
                                            <input type="text" class="form-control" readonly
                                                value="{{ $list->departemen ?? '-' }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Jabatan</label>
                                            <input type="text" class="form-control" readonly
                                                value="{{ $list->jabatan ?? '-' }}">
                                        </div>
                                    </div>
                                </div>

                                <hr class="horizontal dark">
                                <p class="text-uppercase text-sm">Tanda Tangan Digital</p>
                                <hr class="horizontal dark mt-0">

                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="signature-input" class="form-control-label">
                                                Tanda Tangan <span class="text-danger">*</span>
                                            </label>
                                            <small class="d-block text-muted mb-2">
                                                <i class="fas fa-info-circle me-1"></i>
                                                Tanda tangan yang sudah tersimpan dimuat sebagai background. Anda dapat menggambar ulang di atasnya atau menghapus dan membuat baru.
                                            </small>

                                            <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; position: relative;">
                                                @if (!empty($list->signature))
                                                    <img id="signatureBgImg" src="{{ old('signature', $list->signature) }}" alt="Old Signature Background"
                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0.8; z-index: 1;">
                                                @endif
                                                <canvas id="signature-pad" class="signature-pad"
                                                    style="cursor: crosshair; display: block; position: relative; z-index: 2; background: transparent;"></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-secondary btn-sm" id="undoBtn" title="Undo (Ctrl+Z)">
                                                        <i class="fas fa-undo me-1"></i>Undo
                                                    </button>
                                                    <button type="button" class="btn btn-secondary btn-sm" id="redoBtn" title="Redo (Ctrl+Y)">
                                                        <i class="fas fa-redo me-1"></i>Redo
                                                    </button>
                                                    <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-check me-2"></i>Set Tanda Tangan
                                                </button>
                                                <span id="signatureStatus" class="text-muted small">
                                                    <i class="fas fa-info-circle me-1"></i>Tanda tangan lama dimuat sebagai background.
                                                </span>
                                            </div>

                                            <input type="hidden" name="signature" id="signatureData" value="{{ old('signature', $list->signature) }}">
                                            <input type="hidden" name="nama" id="nama" value="{{ old('nama', $list->nama_karyawan ?? $list->firstname) }}">
                                            <input type="hidden" name="isactive" value="{{ old('isactive', $list->isactive) }}">

                                            <div id="signaturePreview" class="mt-3" style="display: block;">
                                                <p class="text-sm text-muted mb-2">Preview Tanda Tangan (yang akan disimpan):</p>
                                                <img src="{{ old('signature', $list->signature) }}" alt="Signature Preview"
                                                    class="border border-2 rounded" style="max-width: 300px; height: auto; background: white; padding: 4px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="horizontal dark mt-4">

                                <div class="d-flex justify-content-between">
                                    <a href="{{ URL::to($url_menu) }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </a>
                                    <button type="submit" class="btn btn-primary" id="btnSubmit">
                                        <i class="fas fa-save me-1"></i>Simpan Perubahan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

    <script>
        let signaturePad = null;
        let undoStack = [];   // stack of stroke arrays (untuk undo/redo stroke-based)
        let redoStack = [];
        const CANVAS_WIDTH = 800;
        const CANVAS_HEIGHT = 320;

        (function () {
            'use strict';

            const canvas = document.getElementById('signature-pad');
            const signatureInput = document.getElementById('signatureData');
            const penColorInput = document.getElementById('penColor');
            const penWidthInput = document.getElementById('penWidth');
            const saveBtn = document.getElementById('saveSignatureBtn');
            const clearBtn = document.getElementById('clearSignature');
            const uploadBtn = document.getElementById('uploadSignatureBtn');
            const uploadInput = document.getElementById('uploadSignatureImage');
            const undoBtn = document.getElementById('undoBtn');
            const redoBtn = document.getElementById('redoBtn');
            const statusEl = document.getElementById('signatureStatus');
            const previewWrap = document.getElementById('signaturePreview');
            const previewImg = previewWrap ? previewWrap.querySelector('img') : null;

            let isApplyingHistory = false;

            function onStrokeEnd() {
                if (isApplyingHistory) return;
                try {
                    undoStack.push(JSON.parse(JSON.stringify(signaturePad.toData())));
                    redoStack = [];
                } catch (e) {}
            }

            const bgImg = document.getElementById('signatureBgImg');

            function initSignaturePad() {
                const wrapper = canvas.parentElement;
                const wrapperWidth = wrapper.clientWidth - 4;
                const scale = Math.min(wrapperWidth / CANVAS_WIDTH, 1);
                const actualWidth = Math.floor(CANVAS_WIDTH * scale);
                const actualHeight = Math.floor(CANVAS_HEIGHT * scale);

                canvas.width = actualWidth;
                canvas.height = actualHeight;
                canvas.style.width = actualWidth + 'px';
                canvas.style.height = actualHeight + 'px';

                signaturePad = new SignaturePad(canvas, {
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    penColor: penColorInput.value,
                    minWidth: 0.5,
                    maxWidth: 2.5,
                    throttle: 16,
                    velocityFilterWeight: 0.7
                });

                undoStack = [JSON.parse(JSON.stringify(signaturePad.toData()))];
                redoStack = [];

                signaturePad.removeEventListener('endStroke', onStrokeEnd);
                signaturePad.addEventListener('endStroke', onStrokeEnd);
            }

            function getCompositeSignatureDataUrl() {
                if (!signaturePad) return null;

                const hasStrokes = !signaturePad.isEmpty();
                const hasBg = bgImg && bgImg.complete && bgImg.naturalWidth > 0 && bgImg.style.display !== 'none' && bgImg.src !== '';

                if (!hasStrokes && hasBg) {
                    return bgImg.src;
                }

                if (hasStrokes && hasBg) {
                    const tempCanvas = document.createElement('canvas');
                    tempCanvas.width = canvas.width;
                    tempCanvas.height = canvas.height;
                    const ctx = tempCanvas.getContext('2d');

                    try {
                        ctx.drawImage(bgImg, 0, 0, tempCanvas.width, tempCanvas.height);
                    } catch (e) {}

                    try {
                        ctx.drawImage(canvas, 0, 0);
                    } catch (e) {}

                    return tempCanvas.toDataURL('image/png');
                }

                if (hasStrokes) {
                    return signaturePad.toDataURL('image/png');
                }

                return null;
            }

            function setSignatureData(dataURL) {
                signatureInput.value = dataURL;
                if (previewImg && previewWrap) {
                    previewImg.src = dataURL;
                    previewWrap.style.display = 'block';
                }
                if (statusEl) {
                    statusEl.innerHTML = '<i class="fas fa-check-circle text-success me-1"></i>Tanda tangan baru sudah diset. Klik "Simpan Perubahan" untuk menyimpan.';
                }
            }

            function saveSignature() {
                let dataURL = getCompositeSignatureDataUrl();

                if (!dataURL) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Kosong!',
                        text: 'Silakan buat tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }

                const estimatedSize = dataURL.length * 0.75;
                const maxSize = 60000;
                if (estimatedSize > 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;
                }
                setSignatureData(dataURL);
                Swal.fire({
                    icon: 'success',
                    title: 'Tanda Tangan Disimpan!',
                    text: 'Tanda tangan telah diset. Klik tombol "Simpan Perubahan" untuk menyimpan data.',
                    confirmButtonColor: '#028284',
                    timer: 2000,
                    showConfirmButton: false
                });
            }

            function handleImageUpload(e) {
                const file = e.target.files[0];
                if (!file || !file.type.match('image.*')) return;
                const maxSize = 5 * 1024 * 1024;
                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'error',
                        title: 'File Terlalu Besar!',
                        text: 'Ukuran file maksimal 5MB.',
                        confirmButtonColor: '#d33'
                    });
                    e.target.value = '';
                    return;
                }
                const reader = new FileReader();
                reader.onload = function (event) {
                    if (bgImg) {
                        bgImg.src = event.target.result;
                        bgImg.style.display = 'block';
                    }
                    if (signaturePad) signaturePad.clear();
                    undoStack = [JSON.parse(JSON.stringify(signaturePad ? signaturePad.toData() : []))];
                    redoStack = [];
                    Swal.fire({
                        icon: 'success',
                        title: 'Gambar Berhasil Diupload!',
                        text: 'Klik "Set Tanda Tangan" untuk memperbarui preview.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                };
                reader.readAsDataURL(file);
                e.target.value = '';
            }

            function clearSignature() {
                if (signaturePad) signaturePad.clear();
                if (bgImg) {
                    bgImg.src = '';
                    bgImg.style.display = 'none';
                }
                undoStack = [JSON.parse(JSON.stringify(signaturePad ? signaturePad.toData() : []))];
                redoStack = [];
            }

            function undo() {
                if (!signaturePad) return;
                if (undoStack.length > 1) {
                    redoStack.push(JSON.parse(JSON.stringify(signaturePad.toData())));
                    undoStack.pop();
                    const prev = undoStack[undoStack.length - 1];
                    isApplyingHistory = true;
                    signaturePad.fromData(JSON.parse(JSON.stringify(prev)));
                    setTimeout(function () { isApplyingHistory = false; }, 50);
                }
            }

            function redo() {
                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);
                }
            }

            document.addEventListener('DOMContentLoaded', function () {
                initSignaturePad();
            });

            window.addEventListener('resize', function () {
                if (signaturePad) {
                    const saved = signaturePad.toData();
                    initSignaturePad();
                    if (saved && saved.length > 0) {
                        signaturePad.fromData(saved);
                    }
                }
            });

            if (saveBtn) saveBtn.addEventListener('click', saveSignature);
            if (clearBtn) clearBtn.addEventListener('click', clearSignature);
            if (uploadBtn) uploadBtn.addEventListener('click', function () { uploadInput.click(); });
            if (uploadInput) uploadInput.addEventListener('change', handleImageUpload);
            if (undoBtn) undoBtn.addEventListener('click', undo);
            if (redoBtn) redoBtn.addEventListener('click', redo);

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

            // Keyboard shortcuts
            document.addEventListener('keydown', function (e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
                    e.preventDefault();
                    if (e.shiftKey) {
                        redo();
                    } else {
                        undo();
                    }
                } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') {
                    e.preventDefault();
                    redo();
                }
            });
        })();

        // Form submit validation
        document.getElementById('formTtd').addEventListener('submit', function (e) {
            const signature = document.getElementById('signatureData').value;
            if (!signature) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Tanda Tangan Kosong',
                    text: 'Silakan buat tanda tangan di canvas lalu klik tombol "Set Tanda Tangan".',
                    confirmButtonColor: '#028284'
                });
                return;
            }
        });
    </script>
@endpush