@extends('layouts.main')

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

@section('content')
    <style>
        .pdf-preview {
            width: 100%;
            max-width: 100%;
            border: 1px solid #ddd;
            margin-top: 10px;
        }
    </style>

    @include('lpj::assetsku.includenya')
    <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">
                        Denah
                    </h3>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('surveyor.show', ['id' => request('denah')]) }}?form=denah"
                            class="btn btn-xs btn-info">
                            <i class="ki-filled ki-exit-left"></i> Back
                        </a>
                    </div>
                </div>
                <div data-accordion="true">
                    @foreach ($permohonan->debiture->documents as $dokumen)
                        <div class="accordion-item [&:not(:last-child)]:border-b border-b-gray-200"
                            data-accordion-item="true" id="accordion_1_item_1">
                            <button class="accordion-toggle py-4 group mx-8"
                                data-accordion-toggle="#accoordion_detail_jaminan_{{ $loop->index }}">
                                <span class="text-base text-gray-900 font-medium">
                                    Jaminan {{ $loop->index + 1 }}
                                </span>
                                <i class="ki-outline ki-plus text-gray-600 text-2sm accordion-active:hidden block">
                                </i>
                                <i class="ki-outline ki-minus text-gray-600 text-2sm accordion-active:block hidden">
                                </i>
                            </button>
                            <div class="accordion-content hidden" id="accoordion_detail_jaminan_{{ $loop->index }}">
                                <div class="card-body lg:py-7.5 grid grid-cols-2">
                                    <div class="mb-5">
                                        <h3 class="text-md font-medium text-gray-900">
                                            Pemilik Jaminan:
                                        </h3>
                                        <span class="text-2sm text-gray-700">
                                            {{ $dokumen->pemilik->name ?? '' }}
                                        </span>
                                    </div>
                                    <div class="mb-5">
                                        <h3 class="text-md font-medium text-gray-900">
                                            Jenis Jaminan:
                                        </h3>
                                        <span class="text-2sm text-gray-700">
                                            {{ $dokumen->jenisJaminan->name ?? '' }}
                                        </span>
                                    </div>
                                    <div class="mb-5">
                                        <h3 class="text-md font-medium text-gray-900">
                                            Hubungan Pemilik Jaminan:
                                        </h3>
                                        <span class="text-2sm text-gray-700">
                                            {{ $dokumen->pemilik->hubungan_pemilik->name ?? '' }}
                                        </span>
                                    </div>
                                    <div class="mb-5">
                                        <h3 class="text-md font-medium text-gray-900">
                                            Alamat Pemilik Jaminan:
                                        </h3>
                                        <span class="text-2sm text-gray-700">
                                            {{ $dokumen->pemilik->address ?? '' }},
                                            <br> {{ $dokumen->pemilik->village->name ?? '' }},
                                            {{ $dokumen->pemilik->district->name ?? '' }},
                                            {{ $dokumen->pemilik->city->name ?? '' }},
                                            {{ $dokumen->pemilik->province->name ?? '' }} -
                                            {{ $dokumen->pemilik->village->postal_code ?? '' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-table scrollable-x-auto pb-3">
                                    <table class="table align-middle text-sm text-gray-500">
                                        @foreach ($dokumen->detail as $detail)
                                            <tr>
                                                <td class="py-2 text-gray-600 font-normal max-w-[100px]">
                                                    {{ $loop->index + 1 }}. {{ $detail->jenisLegalitasJaminan->name }}
                                                </td>
                                                <td class="py-2 text-gray-800 font-normaltext-sm">
                                                    {{ $detail->name ?? '' }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="py-3  max-w-[100px]">
                                                    Dokumen Jaminan
                                                </td>
                                                <td class="py-3 text-gray-700 text-2sm font-normal">
                                                    @if (isset($detail->dokumen_jaminan))
                                                        <a href="{{ route('debitur.jaminan.download', ['id' => $permohonan->debiture->id, 'dokumen' => $detail->id]) }}"
                                                            class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
                                                            <i class="ki-filled ki-cloud-download"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="py-3  max-w-[100px]">
                                                    Keterangan
                                                </td>
                                                <td class="py-3 text-gray-700 text-2sm font-normal">
                                                    {{ $detail->keterangan ?? '' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>



        <div class="card">
            <div class="card-body">

                <form id="formDenah" method="POST" class="grid gap-5" enctype="multipart/form-data">
                    @if (isset($debitur->id))
                        <input type="hidden" name="id" value="{{ $debitur->id }}">
                        @method('PUT')
                    @endif
                    @csrf

                    <input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id">
                    <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
                    <div class="mt-2">
                        <div class=" mx-auto overflow-hidden">
                            <div class="flex flex-wrap gap-4" style="margin-top: 20px">
                                <div class="flex w-full items-center justify-center gap-4">
                                    <label class="form-label max-w-56">
                                        <span class="form-label">Upload Denah (Foto/PDF)</span>
                                    </label>
                                    <div class="w-full grid gap-5">
                                        <!-- Preview Container -->
                                        <div id="preview-container">
                                            <!-- Image preview -->
                                            <img id="foto_denah-preview"
                                                src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}"
                                                alt="Gambar foto_denah"
                                                style="{{ isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') === false ? 'width: 30rem;' : 'display: none;' }}">

                                            <!-- PDF preview -->
                                            @if (isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') !== false)
                                                <div id="pdf-preview" class="pdf-preview">
                                                    <embed src="{{ asset('storage/' . $formDenah['foto_denah']) }}"
                                                        type="application/pdf" width="100%" height="500px">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="input-group w-full flex gap-2">
                                            <input type="file"
                                                value="{{ old('foto_denah', isset($formDenah['foto_denah']) ? $formDenah['foto_denah'] : '') }}"
                                                name="foto_denah" class="file-input file-input-bordered w-full"
                                                accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <em id="error-foto_denah" class="alert text-danger text-sm"></em>
                        </div>

                    </div>

                    <div class="mt-2">
                        <div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">

                            <div class="flex flex-wrap gap-4">
                                <div class="flex w-full items-center justify-center gap-4">

                                    <label class="form-label max-w-56">
                                        <span class="form-label">Masukkan total luas tanah</span>
                                    </label>
                                    <input type="text" name="luas" class="input w-full "
                                        value="{{ old('luas', isset($formDenah['luas']) ? $formDenah['luas'] : '') }}">
                                </div>

                            </div>

                            <em id="error-luas" class="alert text-danger text-sm"></em>

                        </div>
                    </div>
                    <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
                        <button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
                            <span id="saveButtonText">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white p-4 rounded-lg">
            <div class="loader"></div>
            <p class="mt-2 text-center">Sedang memproses...</p>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        function previewFile(input) {
            const previewContainer = document.getElementById('preview-container');
            const imagePreview = document.getElementById('foto_denah-preview');
            const file = input.files[0];

            // Hapus preview PDF yang ada (jika ada)
            const existingPdfPreview = document.getElementById('pdf-preview');
            if (existingPdfPreview) {
                existingPdfPreview.remove();
            }

            if (file) {
                // Cek tipe file
                if (file.type.startsWith('image/')) {
                    // Jika file adalah gambar
                    imagePreview.style.display = 'block';
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        imagePreview.src = e.target.result;
                        imagePreview.style.width = '30rem';
                    }

                    reader.readAsDataURL(file);
                } else if (file.type === 'application/pdf') {
                    // Jika file adalah PDF
                    imagePreview.style.display = 'none';

                    // Buat preview PDF
                    const pdfPreview = document.createElement('div');
                    pdfPreview.id = 'pdf-preview';
                    pdfPreview.className = 'pdf-preview';

                    const pdfEmbed = document.createElement('embed');
                    pdfEmbed.src = URL.createObjectURL(file);
                    pdfEmbed.type = 'application/pdf';
                    pdfEmbed.width = '100%';
                    pdfEmbed.height = '500px';

                    pdfPreview.appendChild(pdfEmbed);
                    previewContainer.appendChild(pdfPreview);
                }
            } else {
                // Jika tidak ada file yang dipilih
                imagePreview.style.display = 'none';
                imagePreview.src = '';
            }
        }


        function submitDenah() {
            showLoadingSwal('Mengirim data ke server...');

            const formElement = $('#formDenah')[0];
            const formData = new FormData(formElement);

            $.ajax({
                url: '{{ route('surveyor.storeDenah') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        hideLoadingSwal();
                        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]);
                        });
                    }
                    console.error('Terjadi error:', error); // Menampilkan pesan error di konsol
                    console.log('Status:', status);
                    console.log('Response:', xhr.responseText);
                    console.log(errors);
                    hideLoadingSwal();
                    toastrErrorBuild(error);
                },

            });

        }
    </script>

@include('lpj::surveyor.js.utils')
@endpush