lpj/resources/views/surveyor/components/inspeksi.blade.php

@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    @include('lpj::assetsku.includenya')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <form id="formInspeksi" method="POST" enctype="multipart/form-data" class="grid gap-5">
            @csrf
            <input id="permohonan_id" type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
            <input id="dokument_id" type="hidden" name="dokument_id" value="{{ request('dokument') }}">
            <input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">

            @if (strtolower($permohonan->tujuanPenilaian->name) == 'rap')
                <input type="hidden" name="action" value="rap">
                <input type="hidden" name="type" value="rap">

                @include('lpj::surveyor.components.header')
                @include('lpj::surveyor.components.rap')
            @else
                @foreach ($permohonan->documents as $dokumen)
                    @if ($dokumen->jenisJaminan)
                        @php
                            $formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
                        @endphp
                        @if (isset($formKategori) && $formKategori)
                            @php
                                $kategoriArray = is_array($formKategori) ? $formKategori : [$formKategori];
                                $kategoriUnik = array_unique($kategoriArray);
                            @endphp
                            <input type="hidden" name="action" value="{{ implode(',', $kategoriUnik) }}">
                            <input type="hidden" name="type" value="{{ implode(',', $kategoriUnik) }}">
                            @if (array_intersect($kategoriUnik, ['tanah', 'bangunan', 'apartemen-kantor']))
                                @include('lpj::surveyor.components.header')
                            @endif

                            @foreach ($kategoriUnik as $kategori)
                                {{-- Tampilkan komponen sesuai kategori --}}
                                @include('lpj::surveyor.components.' . str_replace('-', '-', $kategori), [
                                    'dokumen' => $dokumen,
                                ])
                            @endforeach
                        @endif
                    @endif
                @endforeach
            @endif
            <div class="card border border-agi-100 w-full rounded-lg shadow-md overflow-hidden">
                <div class="card-header bg-agi-50">
                    <h3 class="card-title uppercase">
                        Tanda Tangan
                    </h3>
                </div>
                <div class="card-body">
                    <div class="flex items-baseline justify-between flex-wrap lg:flex-nowrap">
                        @foreach (['penilai', 'cabang', 'debitur', 'kjjp'] as $type)
                            @include('lpj::component.signature-pad', ['type' => $type])
                        @endforeach

                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
                <button type="button" class="btn btn-primary" id="saveButton" onclick="submitData()">
                    <i class="ki-filled ki-save-2"></i>
                    <span id="saveButtonText">Save</span>
                </button>
                <a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('dokument'), 'jenis_jaminan_id' => request('jenis_jaminan')]) }}" class="btn btn-info" id="saveButton">
                    <i class="ki-filled ki-printer"></i>
                    <span>Print Out</span>
                </a>

            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
    <script type="text/javascript">

const datas = @json($forminspeksi ?? '');
    console.log(datas);

        document.addEventListener('DOMContentLoaded', function() {
            const signaturePads = {};
            const types = ['penilai', 'cabang', 'debitur', 'kjjp'];

            // Inisialisasi semua signature pad
            types.forEach(type => {
                initSignaturePad(type);
            });

            function initSignaturePad(type) {
                const canvas = document.getElementById(`signature-pad-${type}`);
                if (!canvas) return;

                // Set ukuran canvas yang responsif
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;

                signaturePads[type] = new SignaturePad(canvas, {
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    penColor: 'rgb(0, 0, 0)',
                    minWidth: 0.5,
                    maxWidth: 2.5
                });

                // Load existing signature
                loadSignature(type);

                // Event listeners
                const saveBtn = document.getElementById(`save-${type}`);
                const clearBtn = document.getElementById(`clear-${type}`);
                const deleteBtn = document.getElementById(`delete-${type}`);

                if (saveBtn) {
                    saveBtn.addEventListener('click', () => saveSignature(type));
                }
                if (clearBtn) {
                    clearBtn.addEventListener('click', () => clearSignature(type));
                }
                if (deleteBtn) {
                    deleteBtn.addEventListener('click', () => deleteSignature(type));
                }
            }

            function saveSignature(type) {
                const signaturePad = signaturePads[type];

                if (!signaturePad || signaturePad.isEmpty()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Harap memberikan tanda tangan terlebih dahulu.'
                    });
                    return;
                }

                const data = {
                    signature: signaturePad.toDataURL('image/png'),
                    type: type,
                    document_id: document.getElementById('dokument_id')?.value,
                    permohonan_id: document.getElementById('permohonan_id')?.value
                };
                console.log(data);


                // Tampilkan loading
                Swal.fire({
                    title: 'Menyimpan...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                fetch(`{{ url('/surveyor/signatures') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(data => {
                        Swal.close();
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Tanda tangan berhasil disimpan!',
                                timer: 1500
                            });

                        } else {
                            throw new Error(data.message || 'Terjadi kesalahan');
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
                        });

                    });
            }

            function loadSignature(type) {
                const params = new URLSearchParams({
                    document_id: document.getElementById('dokument_id')?.value,
                    permohonan_id: document.getElementById('permohonan_id')?.value
                });

                fetch(`{{ url('/surveyor/signatures/${type}?${params}') }}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.data?.signature) {
                            const canvas = document.getElementById(`signature-pad-${type}`);
                            if (!canvas) return;

                            const signaturePad = signaturePads[type];
                            const image = new Image();

                            image.onload = function() {
                                const context = canvas.getContext('2d');
                                context.clearRect(0, 0, canvas.width, canvas.height);
                                context.drawImage(image, 0, 0, canvas.width, canvas.height);
                            };
                            image.src = data.data.signature;
                        }
                    })
                    .catch(error => {
                        console.error('Error loading signature:', error);
                    });
            }

            function deleteSignature(type) {
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menghapus tanda tangan ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const data = {
                            type: type,
                            document_id: document.getElementById('dokument_id')?.value,
                            permohonan_id: document.getElementById('permohonan_id')?.value
                        };

                        fetch(`{{ url('/surveyor/signatures/${type}') }}`, {
                                method: 'DELETE',
                                headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify(data)
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    clearSignature(type);
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        text: 'Tanda tangan berhasil dihapus!',
                                        timer: 1500
                                    });
                                } else {
                                    throw new Error(data.message || 'Terjadi kesalahan');
                                }
                            })
                            .catch(error => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: error.message ||
                                        'Terjadi kesalahan saat menghapus tanda tangan'
                                });
                                console.error('Error:', error);
                            });
                    }
                });
            }

            function clearSignature(type) {
                const signaturePad = signaturePads[type];
                if (signaturePad) {
                    signaturePad.clear();
                    updateStatus(type, '');
                }
            }

            function updateStatus(type, message, status = '') {
                const statusElement = document.getElementById(`status-${type}`);
                if (statusElement) {
                    statusElement.textContent = message;
                    statusElement.className = `status-message ${status}`;
                }
            }

            // Handle window resize untuk canvas responsif
            window.addEventListener('resize', function() {
                types.forEach(type => {
                    const canvas = document.getElementById(`signature-pad-${type}`);
                    if (canvas) {
                        const ratio = Math.max(window.devicePixelRatio || 1, 1);
                        canvas.width = canvas.offsetWidth * ratio;
                        canvas.height = canvas.offsetHeight * ratio;
                        canvas.getContext('2d').scale(ratio, ratio);

                        // Reload signature jika ada
                        loadSignature(type);
                    }
                });
            });
        });





        function submitData() {
            showLoadingSwal('Mengirim data ke server...');
            const form = document.querySelector('form');
            const formData = new FormData(form);
            console.log('Form data entries:', Array.from(formData.entries()));

            $.ajax({
                url: '{{ route('surveyor.store') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    hideLoadingSwal();
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((response) => {
                            if (response.isConfirmed) {
                                window.location.href =
                                    '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                    console.log(response);
                },
                error: function(xhr, status, error) {

                    let errors = xhr.responseJSON?.errors;
                    $('.alert').text('');
                    if (errors) {
                        $.each(errors, function(key, value) {
                            $(`#error-${key}`).text(value[0]);
                            toastrErrorBuild(value[0]);
                        });
                        // toastrErrorBuild(error);
                    }
                    hideLoadingSwal();
                    console.log(errors);
                }
            });
        }



        // Ensure existing remove buttons are functional
        document.addEventListener('DOMContentLoaded', () => {
            const removeButtons = document.querySelectorAll('.remove-btn');
            removeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.closest('.perwakilan').remove();
                });
            });

            document.querySelectorAll('.number-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatNumber(this);
                });
            });
        });




    </script>

    <script></script>
    @include('lpj::surveyor.js.utils')
@endpush