@extends('layouts.app')

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

    <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">
                            Form Tambah BAK/BAP
                        </h6>
                        <p class="text-sm mb-0 text-secondary">
                            Lengkapi data berita acara
                        </p>
                    </div>
                </div>

                <form id="bakForm" onsubmit="submitBakForm(event)" enctype="multipart/form-data">
                    <div id="main_form_fields">
                        <div class="row">
                            {{-- ===== KOLOM KIRI ===== --}}
                            <div class="col-md-6">
                                {{-- Nama Karyawan --}}
                                <div class="mb-3">
                                    <label for="karyawan_pick" class="form-label text-sm font-weight-bold">
                                        Nama Karyawan <span class="text-danger">*</span>
                                    </label>
                                    <input type="hidden" id="nik_pick">
                                    <input type="hidden" id="nama_karyawan">
                                    <input type="hidden" id="departemen_karyawan">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly required>
                                        <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">Surat Teguran</option>
                                        <option value="Surat Peringatan">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" placeholder="Contoh:Terlambat datang kerja secara berulang" 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" 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" 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" 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></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)" required></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)" requaired></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">
                                            </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>
                    </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>
        .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;
            });
        }

        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 ctx = ttdCanvas.getContext('2d');
            const imageData = ctx.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();
        });

        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForAdd = 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;
            selectedKaryawanForAdd = 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;');
        }

        /** Submit form */
        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();
            if (!nik || !selectedKaryawanForAdd) { showWarn('Karyawan', 'Silakan pilih karyawan.'); return; }

            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 (!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('nik', nik);
            formData.append('nama', document.getElementById('nama_karyawan').value || '');
            formData.append('departemen', document.getElementById('departemen_karyawan').value || '');
            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/store") }}',
                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 disimpan', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trsbak") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menyimpan BAK/BAP');
                }
            });
        }

        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