@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->debiture->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>
            </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">
        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 updateAlamatFields(status) {
            // Ambil elemen formulir
            const addressForm = document.getElementById('alamat_form');
            const inputs = addressForm.querySelectorAll('input, select');
            const addressInput = document.getElementById('address');

            if (status === 'sesuai') {
                addressInput.value = "{{ $dokumen->address ?? '' }}";
                inputs.forEach(element => {
                    if (element.tagName === 'INPUT') {
                        element.setAttribute('readonly', true);
                    } else if (element.tagName === 'SELECT') {
                        element.setAttribute('disabled', true);
                        element.classList.add('disabled-input')
                    }
                });

                addressForm.style.display = 'grid';
                addressForm.disabled = true;
                addressForm.classList.add('disabled-input')


            } else if (status === 'tidak sesuai') {
                addressForm.style.display = 'grid';

                addressForm.removeAttribute('disabled');
                addressForm.classList.remove('disabled-input')
                const formInspeksi = @json($forminspeksi);
                const addressInput = document.getElementById('address');

                if (formInspeksi && formInspeksi.asset && formInspeksi.asset.alamat) {
                    if (formInspeksi.asset.alamat['tidak sesuai'] && formInspeksi.asset.alamat['tidak sesuai'].address) {
                        addressInput.value = formInspeksi.asset.alamat['tidak sesuai'].address;
                    } else if (formInspeksi.asset.alamat['sesuai'] && formInspeksi.asset.alamat['sesuai'].address) {
                        addressInput.value = formInspeksi.asset.alamat['sesuai'].address;
                    } else {
                        addressInput.value = "";
                    }
                }

                inputs.forEach(element => {
                    if (element.tagName === 'INPUT') {
                        element.removeAttribute('readonly');
                    } else if (element.tagName === 'SELECT') {
                        element.removeAttribute('disabled');
                        element.classList.remove('disabled-input')
                    }
                });
            }
        }

        function toggleFieldVisibility(fieldName, inputId, visibleValues = []) {
            const selectedValue = $(`[name="${fieldName}"]:checked`).val();
            const inputField = $(`#${inputId}`);

            if (visibleValues.includes(selectedValue)) {
                inputField.show();
            } else {
                inputField.hide().val('');
            }
        }


        function toggleCheckboxVisibility(fieldName, inputId, visibleValues = []) {
            const selectedValues = $(`[name="${fieldName}[]"]:checked`)
                .map(function() {
                    return $(this).val().toLowerCase(); // Konversi nilai ke huruf kecil
                })
                .get();

            const inputField = $(`#${inputId}`);

            // Cek apakah salah satu nilai yang dipilih cocok dengan visibleValues
            const shouldShow = visibleValues.some(value => selectedValues.includes(value.toLowerCase()));

            if (shouldShow) {
                inputField.show();
            } else {
                inputField.hide().val('');
            }
        }


        function toggleMultipleFields(fieldName, mappings) {
            // Ambil semua nilai checkbox yang dicentang
            const selectedValues = $(`[name="${fieldName}[]"]:checked`)
                .map(function() {
                    return $(this).val().toLowerCase(); // Konversi nilai ke huruf kecil
                })
                .get();

            // Iterasi melalui setiap mapping
            for (const [key, inputId] of Object.entries(mappings)) {
                const inputField = $(`#${inputId}`);

                // Tampilkan input jika nilai yang relevan dipilih
                if (selectedValues.includes(key.toLowerCase())) {
                    inputField.show();
                } else {
                    inputField.hide().val(''); // Sembunyikan dan reset nilai
                }
            }
        }


        function toggleAlamatVisibility(idSesuai, idTidakSesuai, selectedValue) {
            // Ambil elemen berdasarkan ID
            const alamatSesuai = document.getElementById(idSesuai);
            const alamatTidakSesuai = document.getElementById(idTidakSesuai);

            // Periksa nilai yang dipilih dan tampilkan elemen yang sesuai
            if (selectedValue === 'sesuai') {
                alamatSesuai.style.display = 'grid'; // Tampilkan "Alamat Sesuai"
                alamatTidakSesuai.style.display = 'none'; // Sembunyikan "Alamat Tidak Sesuai"
            } else if (selectedValue === 'tidak sesuai') {
                alamatSesuai.style.display = 'none'; // Sembunyikan "Alamat Sesuai"
                alamatTidakSesuai.style.display = 'grid'; // Tampilkan "Alamat Tidak Sesuai"
            }
        }



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



        function updateAnalisa(params) {
            const inputMap = {
                jenis_asset: 'jenis_asset_tidak_sesuai',
                analisa_tanah: 'analisa_tanah_tidak_sesuai',
                analisa_unit: 'analisa_luas_unit_tidak_sesuai',
                analisa_bangunan: 'analisa_bangunan_tidak_sesuai',
            };

            // Pastikan elemen ID ada di inputMap
            if (!inputMap[params]) {
                console.error('Parameter tidak valid:', params);
                return;
            }

            // Ambil nilai berdasarkan parameter
            const inputValue = document.getElementById(inputMap[params]).value;
            const data = {
                [params === 'jenis_asset' ? 'jenis_asset' : params.replace('analisa_', 'luas_')]: inputValue,
                types: params
            };

            $.ajax({
                url: '{{ route('surveyor.update_analisa', ['id' => $permohonan->id]) }}',
                type: 'POST',
                data: data,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    if (response.success) {
                        // window.location.href =
                        //     '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
                        toastrSuccessBuild(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Terjadi error:', error);
                    console.log('Status:', status);
                    console.log('Response:', xhr.responseText);
                    if (xhr.responseJSON.message) {
                        toastrErrorBuild(xhr.responseJSON.message);
                    } else {
                        toastrErrorBuild('Terjadi kesalahan');
                    }
                }
            });
        }
    </script>
    @include('lpj::surveyor.js.utils')
@endpush