@extends('layouts.app')

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

    @php
        $historyIdRaw = (int) ($history['id'] ?? 0);
        $historyIdEncrypted = \App\Helpers\Function_Helper::encryptUrlId($historyIdRaw);
    @endphp

    <div class="container-fluid py-3">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="mb-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h6 class="mb-0 text-dark font-weight-bold">Edit BAK/BAP</h6>
                        <p class="text-sm mb-0 text-secondary">Ubah data berita acara</p>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ url('/trsbak') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i>Kembali
                        </a>
                    </div>
                </div>

                <form id="bakForm" onsubmit="submitBakForm(event)">
                    <div class="row">
                        {{-- ===== KOLOM KIRI ===== --}}
                        <div class="col-md-6">
                            {{-- Nama Karyawan --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Nama Karyawan <span class="text-danger">*</span></label>
                                <input type="hidden" id="nik_pick" value="{{ $history['nik'] ?? '' }}">
                                <input type="hidden" id="nama_karyawan" value="{{ $history['nama'] ?? '' }}">
                                <input type="hidden" id="departemen_karyawan" value="{{ $history['departemen'] ?? '' }}">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ $history['nik'] ?? '' }} - {{ $history['nama'] ?? '' }} - {{ $history['departemen'] ?? '' }}">
                                    <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>

                            {{-- Referensi Hukuman --}}
                            <div class="mb-3">
                                <label for="referensi_hukuman" class="form-label text-sm font-weight-bold">Referensi Hukuman <span class="text-danger">*</span></label>
                                <select class="form-select" id="referensi_hukuman" required>
                                    <option value="">-- Pilih Referensi Hukuman --</option>
                                    <option value="Surat Teguran" {{ ($history['referensi_hukuman'] ?? '') == 'Surat Teguran' ? 'selected' : '' }}>Surat Teguran</option>
                                    <option value="Surat Peringatan" {{ ($history['referensi_hukuman'] ?? '') == 'Surat Peringatan' ? 'selected' : '' }}>Surat Peringatan</option>
                                </select>
                            </div>

                            {{-- Kejadian --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Kejadian <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="kejadian" value="{{ $history['kejadian'] ?? '' }}" placeholder="Contoh: Pelanggaran prosedur keselamatan" required>
                            </div>

                            {{-- Tanggal Kejadian --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Tanggal Kejadian <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="tanggal_kejadian" value="{{ $history['tanggal_kejadian'] ?? '' }}" required>
                            </div>

                            {{-- Lokasi --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Lokasi <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="lokasi" value="{{ $history['lokasi'] ?? '' }}" placeholder="Contoh: Area Produksi Line 1" required>
                            </div>

                            {{-- Lain-lain --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Lain-lain</label>
                                <input type="text" class="form-control" id="lain_lain" value="{{ $history['lain_lain'] ?? '' }}" placeholder="Informasi tambahan (opsional)">
                            </div>
                        </div>

                        {{-- ===== KOLOM KANAN ===== --}}
                        <div class="col-md-6">
                            {{-- Kronologi --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Kronologi <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="kronologi" rows="5" placeholder="Jelaskan kronologi kejadian secara detail" required>{{ $history['kronologi'] ?? '' }}</textarea>
                            </div>

                            {{-- Akibat Kejadian --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Akibat Kejadian <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="akibat_kejadian" rows="5" placeholder="Jelaskan akibat yang timbul dari kejadian (opsional)" requaired>{{ $history['akibat_kejadian'] ?? '' }}</textarea>
                            </div>

                            {{-- Tindak Lanjut --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Tindak Lanjut <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="tindak_lanjut" rows="5" placeholder="Tindak lanjut yang telah dilakukan (opsional)" required>{{ $history['tindak_lanjut'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Tanda Tangan Karyawan --}}
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card border">
                                <div class="card-body">
                                    <h6 class="text-dark font-weight-bold mb-1">
                                        <i class="fas fa-signature me-1"></i>Tanda Tangan Karyawan
                                    </h6>
                                    <p class="text-sm text-secondary mb-3">Silakan tanda tangan langsung pada kotak di bawah ini.</p>
                                    <div class="d-flex flex-wrap align-items-start gap-3">
                                        <div class="signature-wrapper">
                                            <canvas id="ttdCanvas" width="500" height="200" style="border: 2px dashed #ccc; border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none;"></canvas>
                                            <input type="hidden" id="ttd_karyawan" name="ttd_karyawan" value="{{ $history['ttd_karyawan'] ?? '' }}">
                                        </div>
                                        <div class="d-flex flex-column gap-2">
                                            <button type="button" class="btn btn-warning btn-sm" onclick="clearSignature()">
                                                <i class="fas fa-eraser me-1"></i>Bersihkan
                                            </button>
                                            <small class="text-muted">Gambar tanda tangan dengan mouse/touchpad atau sentuhan jari (jika layar sentuh).</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="{{ url('/trsbak') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Kembali
                                </a>
                                <button type="button" class="btn btn-primary" onclick="submitBakForm('draft')">
                                    <i class="fas fa-save me-2"></i>Simpan
                                </button>
                                <button type="button" class="btn btn-success" onclick="submitBakForm('posted')">
                                    <i class="fas fa-paper-plane me-2"></i>Post
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL KARYAWAN PICKER --}}
    <div class="modal fade" id="karyawanPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">List Data Karyawan</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="karyawanPickerSearch" placeholder="Cari..." oninput="filterKaryawanPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterKaryawanPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        #bakForm textarea { resize: vertical; }
        .input-group > .form-control { height: calc(1.5em + 1rem + 2px); }
        .input-group > .input-group-text { height: calc(1.5em + 1rem + 2px); }
        .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
        .hover-row:hover { background-color: #f8f9fa; }
    </style>

    <script>
        // ===== SIGNATURE CANVAS =====
        let ttdCanvas = null;
        let ttdCtx = null;
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        function initSignatureCanvas() {
            ttdCanvas = document.getElementById('ttdCanvas');
            if (!ttdCanvas) return;
            ttdCtx = ttdCanvas.getContext('2d');
            ttdCtx.strokeStyle = '#000';
            ttdCtx.lineWidth = 2;
            ttdCtx.lineCap = 'round';
            ttdCtx.lineJoin = 'round';

            // Mouse events
            ttdCanvas.addEventListener('mousedown', startDraw);
            ttdCanvas.addEventListener('mousemove', draw);
            ttdCanvas.addEventListener('mouseup', endDraw);
            ttdCanvas.addEventListener('mouseleave', endDraw);

            // Touch events
            ttdCanvas.addEventListener('touchstart', (e) => {
                e.preventDefault();
                const touch = e.touches[0];
                const rect = ttdCanvas.getBoundingClientRect();
                const scaleX = ttdCanvas.width / rect.width;
                const scaleY = ttdCanvas.height / rect.height;
                lastX = (touch.clientX - rect.left) * scaleX;
                lastY = (touch.clientY - rect.top) * scaleY;
                isDrawing = true;
            });
            ttdCanvas.addEventListener('touchmove', (e) => {
                e.preventDefault();
                if (!isDrawing) return;
                const touch = e.touches[0];
                const rect = ttdCanvas.getBoundingClientRect();
                const scaleX = ttdCanvas.width / rect.width;
                const scaleY = ttdCanvas.height / rect.height;
                const x = (touch.clientX - rect.left) * scaleX;
                const y = (touch.clientY - rect.top) * scaleY;
                ttdCtx.beginPath();
                ttdCtx.moveTo(lastX, lastY);
                ttdCtx.lineTo(x, y);
                ttdCtx.stroke();
                lastX = x;
                lastY = y;
            });
            ttdCanvas.addEventListener('touchend', (e) => {
                e.preventDefault();
                isDrawing = false;
            });

            // Load existing signature if available
            const existingTtd = document.getElementById('ttd_karyawan').value;
            if (existingTtd) {
                loadExistingSignature(existingTtd);
            }
        }

        function loadExistingSignature(dataUrl) {
            if (!ttdCtx || !dataUrl) return;
            const img = new Image();
            img.onload = function() {
                ttdCtx.clearRect(0, 0, ttdCanvas.width, ttdCanvas.height);
                ttdCtx.drawImage(img, 0, 0, ttdCanvas.width, ttdCanvas.height);
            };
            img.src = dataUrl;
        }

        function startDraw(e) {
            const rect = ttdCanvas.getBoundingClientRect();
            const scaleX = ttdCanvas.width / rect.width;
            const scaleY = ttdCanvas.height / rect.height;
            lastX = (e.clientX - rect.left) * scaleX;
            lastY = (e.clientY - rect.top) * scaleY;
            isDrawing = true;
        }

        function draw(e) {
            if (!isDrawing) return;
            const rect = ttdCanvas.getBoundingClientRect();
            const scaleX = ttdCanvas.width / rect.width;
            const scaleY = ttdCanvas.height / rect.height;
            const x = (e.clientX - rect.left) * scaleX;
            const y = (e.clientY - rect.top) * scaleY;
            ttdCtx.beginPath();
            ttdCtx.moveTo(lastX, lastY);
            ttdCtx.lineTo(x, y);
            ttdCtx.stroke();
            lastX = x;
            lastY = y;
        }

        function endDraw() {
            isDrawing = false;
        }

        function clearSignature() {
            if (!ttdCtx) return;
            ttdCtx.clearRect(0, 0, ttdCanvas.width, ttdCanvas.height);
            document.getElementById('ttd_karyawan').value = '';
        }

        function getSignatureData() {
            if (!ttdCanvas) return '';
            // Check if canvas is empty
            const imageData = ttdCtx.getImageData(0, 0, ttdCanvas.width, ttdCanvas.height);
            const pixels = imageData.data;
            let hasContent = false;
            for (let i = 3; i < pixels.length; i += 4) {
                if (pixels[i] !== 0) {
                    hasContent = true;
                    break;
                }
            }
            if (!hasContent) return '';
            return ttdCanvas.toDataURL('image/png');
        }

        // Initialize on document ready
        $(document).ready(function() {
            initSignatureCanvas();
        });

        const historyId = @json($historyIdEncrypted);
        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForEdit = null;

        function openKaryawanModal() {
            document.getElementById('karyawanPickerSearch').value = '';
            loadKaryawanPickerData();
            new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
        }

        function loadKaryawanPickerData() {
            $.ajax({
                url: '{{ url("/trsbak/getkaryawan") }}',
                method: 'GET',
                data: { query: '' },
                success: function(response) {
                    if (response.success) {
                        if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                        renderKaryawanPickerRows(response.data || []);
                        initKaryawanPickerTable();
                    }
                }
            });
        }

        function renderKaryawanPickerRows(data) {
            karyawanPickerData = data;
            const tbody = document.getElementById('karyawanPickerBody');
            if (!data.length) { tbody.innerHTML = '<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>'; return; }
            let html = '';
            data.forEach((k, idx) => {
                html += `<tr style="cursor:pointer;" onclick="selectKaryawanFromModal(${idx})" class="hover-row">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                    <td>${escapeHtml(k.nik||'-')}</td>
                    <td>${escapeHtml(k.nama||'-')}</td>
                    <td>${escapeHtml(k.departemen||'-')}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        }

        function initKaryawanPickerTable() {
            if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
            karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                language: { zeroRecords: 'Maaf - Data tidak ada', info: 'Showing _START_ to _END_ of _TOTAL_ entries', infoEmpty: 'Showing 0 to 0 of 0 entries', infoFiltered: '(filtered from _MAX_ total entries)', paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' } },
                pageLength: 10, lengthChange: false, searching: true, ordering: true, order: [[1, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
            });
        }

        function filterKaryawanPicker() {
            const keyword = document.getElementById('karyawanPickerSearch').value.trim();
            if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
        }

        function selectKaryawanFromModal(index) {
            const karyawan = karyawanPickerData[index];
            if (!karyawan) return;
            selectedKaryawanForEdit = karyawan;
            document.getElementById('nik_pick').value = karyawan.nik || '';
            document.getElementById('nama_karyawan').value = karyawan.nama || '';
            document.getElementById('departemen_karyawan').value = karyawan.departemen || '';
            document.getElementById('karyawan_pick').value = `${karyawan.nik || ''} - ${karyawan.nama || ''} - ${karyawan.departemen || ''}`;

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

        function escapeHtml(value) {
            return String(value||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/'/g,'&#039;');
        }

        function submitBakForm(statusPost) {
            if (statusPost === 'posted') {
                Swal.fire({
                    title: 'Pilih Departemen Tujuan',
                    html: `
                        <div class="d-flex flex-column gap-3" style="text-align: left;">
                            <button type="button" class="btn btn-primary btn-lg w-100" id="swalPersonalia">
                                <i class="fas fa-building me-2"></i>Kirim ke Personalia
                            </button>
                            <button type="button" class="btn btn-secondary btn-lg w-100" id="swalJishuken">
                                <i class="fas fa-users me-2"></i>Kirim ke Jishuken
                            </button>
                        </div>
                    `,
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: 'Batal',
                    cancelButtonColor: '#d33',
                    customClass: {
                        popup: 'swal-wide'
                    }
                });

                setTimeout(() => {
                    document.getElementById('swalPersonalia').addEventListener('click', function() {
                        Swal.close();
                        Swal.fire({
                            title: 'Konfirmasi Posting',
                            text: "Apakah Anda yakin ingin memposting surat ini?",
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ya, Post',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                doSubmit(statusPost, 'Personalia');
                            }
                        });
                    });
                    document.getElementById('swalJishuken').addEventListener('click', function() {
                        Swal.close();
                        Swal.fire({
                            title: 'Konfirmasi Posting',
                            text: "Apakah Anda yakin ingin memposting surat ini?",
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ya, Post',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                doSubmit(statusPost, 'Jishuken');
                            }
                        });
                    });
                }, 100);

                return;
            }

            doSubmit(statusPost, null);
        }

        function doSubmit(statusPost, dptTujuan) {
            const nik = document.getElementById('nik_pick').value.trim();
            const kejadian = document.getElementById('kejadian').value.trim();
            const tanggalKejadian = document.getElementById('tanggal_kejadian').value || '';
            const lokasi = document.getElementById('lokasi').value.trim();
            const kronologi = document.getElementById('kronologi').value.trim();

            if (!nik) { showWarn('NIK', 'NIK karyawan wajib diisi.'); return; }
            if (!kejadian) { showWarn('Kejadian', 'Kejadian wajib diisi.'); return; }
            if (!tanggalKejadian) { showWarn('Tanggal Kejadian', 'Tanggal Kejadian wajib diisi.'); return; }
            if (!lokasi) { showWarn('Lokasi', 'Lokasi wajib diisi.'); return; }
            if (!kronologi) { showWarn('Kronologi', 'Kronologi wajib diisi.'); return; }

            const ttd = getSignatureData();
            if (!ttd) { showWarn('Tanda Tangan', 'Silakan tanda tangani terlebih dahulu.'); return; }

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', historyId);
            formData.append('history_key', historyId);
            formData.append('nik', nik);
            formData.append('referensi_hukuman', document.getElementById('referensi_hukuman').value || '');
            formData.append('kejadian', kejadian);
            formData.append('tanggal_kejadian', tanggalKejadian);
            formData.append('lokasi', lokasi);
            formData.append('kronologi', kronologi);
            formData.append('akibat_kejadian', document.getElementById('akibat_kejadian').value || '');
            formData.append('tindak_lanjut', document.getElementById('tindak_lanjut').value || '');
            formData.append('ttd_karyawan', ttd);
            formData.append('status_post', statusPost);
            
            if (dptTujuan) {
                formData.append('dpt_tujuan', dptTujuan);
            }

            $.ajax({
                url: '{{ url("/trsbak/update") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({ icon:'success', title:'Berhasil', text: response.message||'BAK/BAP berhasil diperbarui', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trsbak") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menyimpan perubahan');
                }
            });
        }

        function showWarn(title, text) {
            Swal.fire({ icon:'warning', title, text, confirmButtonColor:'#028284' });
        }

        function showError(text) {
            Swal.fire({ icon:'error', title:'Error', text, confirmButtonColor:'#028284' });
        }
    </script>
@endsection