@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">Tambah {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body">
                            @include('components.alert')
                            <form action="{{ URL::to($url_menu) }}" method="POST" id="formTtd">
                                @csrf

                                {{-- Pilih karyawan via search modal --}}
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <div class="form-group mb-0">
                                            <label class="form-control-label">
                                                Karyawan <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="karyawan_display"
                                                    placeholder="Klik 'Cari Karyawan' untuk memilih karyawan..."
                                                    readonly style="background-color: #fff; cursor: pointer;"
                                                    onclick="openKaryawanModal()"
                                                    value="{{ old('nik') ? old('nik') . ' - ' . old('nama') : '' }}">
                                                <button type="button" class="btn btn-primary mb-0 d-flex align-items-center"
                                                    onclick="openKaryawanModal()">
                                                    <i class="fas fa-search me-2"></i> Cari Karyawan
                                                </button>
                                            </div>
                                            <input type="hidden" name="user_id" id="user_id" value="{{ old('user_id') }}">
                                            <input type="hidden" name="nik" id="nik" value="{{ old('nik') }}">
                                            <input type="hidden" name="nama" id="nama" value="{{ old('nama') }}">
                                            <small class="form-text text-muted mt-1 d-block">
                                                Pilih karyawan yang akan diberi tanda tangan. Satu karyawan hanya boleh punya satu tanda tangan.
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                {{-- Departemen & Jabatan (read-only, terisi otomatis) --}}
                                <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" id="departemen_display" readonly
                                                style="background-color: #f8f9fa;" value="">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">Jabatan</label>
                                            <input type="text" class="form-control" id="jabatan_display" readonly
                                                style="background-color: #f8f9fa;" value="">
                                        </div>
                                    </div>
                                </div>

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

                                {{-- Signature canvas (modal-based, sama pattern seperti profile.blade.php non-scrt12) --}}
                                <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>

                                            <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-secondary btn-sm mb-0" 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 mb-0" 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 mb-0" 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 mb-0" 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 mb-0" 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>Belum ada tanda tangan yang diset.
                                                </span>
                                            </div>

                                            <input type="hidden" name="signature" id="signatureData" value="{{ old('signature') }}">
                                            <div id="signaturePreview" class="mt-3"
                                                style="display: {{ old('signature') ? 'block' : 'none' }};">
                                                <p class="text-sm text-muted mb-2">Preview Tanda Tangan:</p>
                                                <img src="{{ old('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 mb-0">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </a>
                                    <button type="submit" class="btn btn-primary mb-0" id="btnSubmit">
                                        <i class="fas fa-save me-1"></i>Simpan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Karyawan Search Modal --}}
    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary text-white">
                    <h5 class="modal-title text-white mb-0"><i class="fas fa-users me-2"></i>Cari & Pilih Karyawan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanTable" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" width="80">Aksi</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">NIK</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nama Karyawan</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Departemen</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Jabatan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($karyawanList as $k)
                                    @php
                                        $displayName = $k->nama ?? (trim(($k->firstname ?? '') . ' ' . ($k->lastname ?? '')) ?: $k->username);
                                        $displayNik = $k->nik ?? $k->username;
                                    @endphp
                                    <tr>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-primary mb-0 btn-pilih-karyawan px-3 py-1"
                                                data-user-id="{{ $k->id }}"
                                                data-nik="{{ $displayNik }}"
                                                data-nama="{{ $displayName }}"
                                                data-departemen="{{ $k->departemen ?? '' }}"
                                                data-jabatan="{{ $k->jabatan ?? '' }}">
                                                <i class="fas fa-check me-1"></i>Pilih
                                            </button>
                                        </td>
                                        <td class="text-sm font-weight-bold">{{ $displayNik }}</td>
                                        <td class="text-sm">{{ $displayName }}</td>
                                        <td class="text-sm">{{ $k->departemen ?? '-' }}</td>
                                        <td class="text-sm">{{ $k->jabatan ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Tutup</button>
                </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 karyawanDt = null;
        let signaturePad = null;
        let undoStack = [];   // stack of stroke arrays (untuk undo/redo stroke-based)
        let redoStack = [];
        const CANVAS_WIDTH = 800;
        const CANVAS_HEIGHT = 320;

        // ============================================================
        // KARYAWAN SEARCH MODAL
        // ============================================================
        function openKaryawanModal() {
            const modal = new bootstrap.Modal(document.getElementById('karyawanModal'));
            modal.show();
            if (!karyawanDt) {
                karyawanDt = $('#karyawanTable').DataTable({
                    pageLength: 10,
                    lengthChange: true,
                    ordering: true,
                    language: {
                        search: "Cari :",
                        lengthMenu: "Tampilkan _MENU_ baris",
                        zeroRecords: "Maaf - Data tidak ada",
                        info: "Data _START_ - _END_ dari _TOTAL_",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(pencarian dari _MAX_ data)"
                    }
                });
            }
        }

        // Handler pilih karyawan
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.btn-pilih-karyawan');
            if (!btn) return;
            const userId = btn.dataset.userId;
            const nik = btn.dataset.nik;
            const nama = btn.dataset.nama;
            const departemen = btn.dataset.departemen;
            const jabatan = btn.dataset.jabatan;

            document.getElementById('user_id').value = userId;
            document.getElementById('nik').value = nik;
            document.getElementById('nama').value = nama;
            document.getElementById('karyawan_display').value = nik + ' - ' + nama;
            document.getElementById('departemen_display').value = departemen || '-';
            document.getElementById('jabatan_display').value = jabatan || '-';

            bootstrap.Modal.getInstance(document.getElementById('karyawanModal')).hide();
        });

        // ============================================================
        // SIGNATURE PAD (modal-based, dengan undo/redo stroke-based)
        // ============================================================
        (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) {}
            }

            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);

                const existing = signatureInput.value;
                if (existing && existing !== '') {
                    signaturePad.fromDataURL(existing);
                    undoStack = [JSON.parse(JSON.stringify(signaturePad.toData()))];
                }
            }

            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 sudah diset. Klik "Set Tanda Tangan" lagi untuk memperbarui.';
                }
            }

            function saveSignature() {
                if (signaturePad.isEmpty()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Kosong!',
                        text: 'Silakan buat tanda tangan terlebih dahulu.',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }
                let dataURL = signaturePad.toDataURL('image/png');
                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;
                    }
                }
                setSignatureData(dataURL);
                Swal.fire({
                    icon: 'success',
                    title: 'Tanda Tangan Disimpan!',
                    text: 'Tanda tangan telah diset. Klik tombol "Simpan" di bawah 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) {
                    signaturePad.fromDataURL(event.target.result, {
                        ratio: 1,
                        width: CANVAS_WIDTH,
                        height: CANVAS_HEIGHT,
                        xOffset: 0,
                        yOffset: 0
                    });
                    undoStack.push(JSON.parse(JSON.stringify(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();
                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) {
                    // simpan stroke data sementara sebelum re-init
                    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 (Ctrl+Z = undo, Ctrl+Y / Ctrl+Shift+Z = redo)
            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 userId = document.getElementById('user_id').value;
            const signature = document.getElementById('signatureData').value;
            if (!userId) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Karyawan Belum Dipilih',
                    text: 'Silakan pilih karyawan terlebih dahulu melalui tombol "Cari Karyawan".',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            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