@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 type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
            <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
            @foreach ($permohonan->debiture->documents as $dokumen)
                @if ($dokumen->jenisJaminan)
                    @php
                        $formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
                    @endphp
                    @if (isset($formKategori) && $formKategori)
                        <input type="hidden" name="action"
                            value="{{ is_array($formKategori) ? implode(',', $formKategori) : $formKategori }}">
                        <input type="hidden" name="type"
                            value="{{ is_array($formKategori) ? implode(',', $formKategori) : $formKategori }}">
                        @if (is_array($formKategori))
                            @foreach ($formKategori as $kategori)
                                @include('lpj::surveyor.components.' . str_replace('-', '-', $kategori), [
                                    'dokumen' => $dokumen,
                                ])
                            @endforeach
                        @endif
                    @endif
                @endif
            @endforeach

            <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
                <button type="button" class="btn btn-success" id="saveButton" onclick="submitData()">
                    <span id="saveButtonText">Save</span>
                    <div class="spinner-border spinner-border-sm text-light" role="status" style="display: none;"
                        id="saveButtonSpinner">

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

@push('scripts')
    <script type="text/javascript">
        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);
                }
            });
        }

        function previewImage(input, previewId) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#' + previewId).attr('src', e.target.result).show();
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $('#' + previewId).hide();
            }
        }

        function addClonableItem(containerId, itemClass) {
            const container = document.getElementById(containerId);
            if (!container) {
                console.error(`Container with ID "${containerId}" not found.`);
                return;
            }

            const template = container.querySelector(`.${itemClass}`);
            if (!template) {
                console.error(`Template with class "${itemClass}" not found in container "${containerId}".`);
                return;
            }

            // Clone the template element
            const newElement = template.cloneNode(true);

            // Reset input fields
            const inputs = newElement.querySelectorAll('input');
            inputs.forEach(input => {
                input.value = '';
            });

            // Make the delete button visible and bind the click event
            const deleteButton = newElement.querySelector('.remove-btn');
            if (deleteButton) {
                deleteButton.style.display = 'inline-block';
                deleteButton.addEventListener('click', () => {
                    newElement.remove();
                });
            }

            // Append the cloned element to the container
            container.appendChild(newElement);
        }

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



        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