@extends('layouts.main')

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

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <div class="card min-w-full">
            <div class="card min-w-full">
                <div class="card-header">
                    <h3 class="card-title">
                        Form Inspeksi
                    </h3>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('surveyor.show', ['id' => request('inspeksi')]) }}?form=inspeksi"
                            class="btn btn-xs btn-info">
                            <i class="ki-filled ki-exit-left"></i> Back
                        </a>
                    </div>
                </div>
            </div>
        </div>



        {{-- <div class="card">
            <div class="card-body"> --}}
        <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">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </button>
            </div>
        </form>
        {{-- </div>
        </div> --}}
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">
        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 submitData() {
            const formElement = $('#formInspeksi')[0];
            const formData = new FormData(formElement);

            // Disable the button and show the spinner
            $('#saveButton').prop('disabled', true);
            $('#saveButtonText').hide();
            $('#saveButtonSpinner').show();

            $.ajax({
                url: '{{ route('surveyor.store') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        window.location.href =
                            '{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=inspeksi';
                    }
                    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]);
                        });
                    }
                    console.error('Terjadi error:', error); // Menampilkan pesan error di konsol
                    console.log('Status:', status);
                    console.log('Response:', xhr.responseText);
                    console.log(errors);
                },
                complete: function() {
                    // Re-enable the button and hide the spinner
                    $('#saveButton').prop('disabled', false);
                    $('#saveButtonText').show();
                    $('#saveButtonSpinner').hide();
                }
            });
        }

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

            const newElement = template.cloneNode(true);
            const textarea = newElement.querySelector('textarea');
            if (textarea) {
                textarea.value = '';
            }

            const deleteButton = newElement.querySelector('.remove-btn');
            if (deleteButton) {
                deleteButton.style.display = 'inline-block';
                deleteButton.addEventListener('click', () => newElement.remove());
            }

            container.appendChild(newElement);
        }
    </script>
@endpush