@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 toggleTidakSesuai(field, inputId) {
            const selectedValue = $(`[name="${field}"]:checked, [name="${field}"]:checked`).val();
            const inputField = $(`#${inputId}`);

            if (selectedValue === 'tidak sesuai' || selectedValue === 'lainnya') {
                inputField.show();
            } else {
                inputField.hide().val('');
            }
        }

        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 inputs = newElement.querySelectorAll('input, textarea');
            inputs.forEach(input => (input.value = ''));

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

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