@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">
                        Data Jaminan
                    </h3>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('surveyor.show', ['id' => request('foto')]) }}?form=foto"
                            class="btn btn-xs btn-info">
                            <i class="ki-filled ki-exit-left"></i> Back
                        </a>
                    </div>
                </div>
                @php
                    $jenisJaminanData = null;
                @endphp
                <div data-accordion="true">
                    @foreach ($permohonan->debiture->documents as $dokumen)
                        @php
                            $jenisJaminanData = $dokumen->jenisJaminan->name ?? '';
                        @endphp
                        <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="#accordion_1_content_1">
                                <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="accordion_1_content_1">
                                <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 action="{{ route('surveyor.storeFoto') }}" method="POST" class="grid gap-5"
                    enctype="multipart/form-data">
                    @if (isset($fotoJaminan->id))
                        <input type="hidden" name="id" value="{{ $fotoJaminan->id }}">
                        @method('PUT')
                    @endif
                    @csrf

                    <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
                    <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">


                    @php
                        $data = [
                            'tanah' => 'Tanah',
                            'unit_rumah' => 'Rumah Tinggal / Ruko (Unit) / Apartemen (Unit) / Gudang',
                            'tanah_bangunan' => 'Kawasan Industrial / Komersil / Residensial - Perumahan',
                            'unit_gedung' => 'Gedung Apartement / Kantor / Condotel (Strata Title)',
                            'tanah_bangunan' => 'Mall',
                        ];

                        $analisaType = 'unknown';
                        if (isset($analisa->id)) {
                            $analisaType = $analisa->type ?? 'unknown';
                        } else {
                            foreach ($data as $key => $value) {
                                if (
                                    isset($jenisJaminanData) &&
                                    trim(strtolower($jenisJaminanData)) === trim(strtolower($value))
                                ) {
                                    $analisaType = $key;
                                    break;
                                }
                            }
                        }
                        if ($analisaType === 'tanah') {
                            $analisaType = 'tanah_bangunan';
                        }

                        if ($analisaType === 'unit_rumah' || $analisaType === 'unit_gedung') {
                            $analisaType = 'unit';
                        }
                    @endphp
                    <input type="hidden" name="analisa_type" value="{{ $analisaType }}">
                    <div class="bg-white rounded-lg shadow-md">
                        <div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
                            <h1 class="text-md font-medium text-gray-900">Rute Menuju Lokasi</h1>
                            <button id="btnRute" type="button" class="btn btn-primary btn-sm">
                                <i class="ki-filled ki-plus text-lg"></i>
                            </button>
                        </div>

                        @if (isset($fotoJaminan))
                            @foreach ($fotoJaminan->ruteJaminan as $item)

                                <div id="inputContainerRute" style="margin-top: 10px">
                                    <div class="flex w-full items-center justify-center gap-4 mb-4">
                                        <label class="form-label max-w-56">
                                            <span class="form-label">Foto Rute Menuju Lokasi</span>
                                        </label>
                                        <div class="w-full grid gap-5">
                                        @if (isset($item->foto_rute))
                                    <img src="{{ asset('storage/' . old('foto_rute', $item->foto_rute)) }}"
                                        alt="Gambar Pendamping" style="width: 12rem;">
                                @endif
                                        <input class="name_rute" type="hidden" name="name_rute[]" value="rute">
                                        <input id="inputRute" type="file" name="foto_rute[]"
                                            class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                        <button type="button" class="btn btn-danger btn-sm delete-btn"
                                            style="display: none;" id="btnDelete">
                                            <i class="ki-filled ki-trash"></i>
                                        </button>
                                    </div>
                                    </div>
                                    @error('foto_rute.*')
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                    @error('name_rute.*')
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        @else
                            <div id="inputContainerRute" style="margin-top: 10px">
                                <div class="flex w-full items-center justify-center gap-4 mb-4">
                                    <label class="form-label max-w-56">
                                        <span class="form-label">Foto Rute Menuju Lokasi</span>
                                    </label>
                                    <input class="name_rute" type="hidden" name="name_rute[]" value="rute">
                                    <input id="inputRute" type="file" name="foto_rute[]"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                    <button type="button" class="btn btn-danger btn-sm delete-btn"
                                        style="display: none;" id="btnDelete">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                </div>
                                @error('foto_rute.*')
                                    <span class="alert text-danger text-sm">{{ $message }}</span>
                                @enderror
                                @error('name_rute.*')
                                    <span class="alert text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                    </div>


                    <div class="bg-white rounded-lg shadow-md">
                        <div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
                            <h1 class="text-md font-medium text-gray-900">Objek Jaminan</h1>
                        </div>
                        @php
                            $objekViews = [];
                            if ($analisaType === 'tanah_bangunan') {
                                $objekViews = [
                                    ['label' => 'Tampak Samping Kiri', 'index' => 0],
                                    ['label' => 'Tampak Samping Kanan', 'index' => 1],
                                    ['label' => 'Nomor Rumah/Unit', 'index' => 2],
                                ];
                            } elseif ($analisaType === 'unit') {
                                $objekViews = [
                                    ['label' => 'Tampak Loby', 'index' => 0],
                                    ['label' => 'Tampak Lift', 'index' => 1],
                                    ['label' => 'Tampak Samping Kiri Unit', 'index' => 2],
                                    ['label' => 'Tampak Samping Kanan Unit', 'index' => 3],
                                    ['label' => 'Tampak Depan Unit', 'index' => 4],
                                    ['label' => 'Nomor Unit', 'index' => 5],
                                ];
                            }
                        @endphp

                        @if (count($objekViews) > 0)
                            @foreach ($objekViews as $view)
                                <div class="flex flex-wrap gap-4 {{ !$loop->first ? 'mt-2' : '' }}">
                                    <div class="flex w-full gap-4">
                                        <label class="form-label max-w-56"><span
                                                class="form-label">{{ $view['label'] }}</span>
                                        </label>
                                        <div class="w-full grid gap-5">
                                            @if (isset($fotoJaminan) && isset($fotoJaminan->objekJaminan[$view['index']]))
                                                <img src="{{ asset('storage/' . $fotoJaminan->objekJaminan[$view['index']]->foto_objek) }}"
                                                    alt="{{ $view['label'] }}" class="mb-2 w-48 h-auto"
                                                    style="width: 12rem;">
                                            @endif
                                            <input type="file" name="foto_objek[]"
                                                class="file-input file-input-bordered w-full" accept="image/*"
                                                capture="camera">
                                            <textarea name="name_objek[]" class="textarea" rows="3" placeholder="Deskripsi">{{ isset($fotoJaminan) && isset($fotoJaminan->objekJaminan[$view['index']]) ? str_replace($view['label'] . ': ', '', $fotoJaminan->objekJaminan[$view['index']]->name_objek) : '' }}</textarea>
                                        </div>
                                    </div>
                                    @error('foto_objek.' . $view['index'])
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                    @error('name_objek.' . $view['index'])
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        @else
                            <div class="p-4">
                                <p class="text-gray-500">Tipe analisa tidak valid atau belum dipilih.</p>
                            </div>
                        @endif


                        <div class="flex flex-wrap gap-4 w-full">
                            <div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between w-full">
                                <label class="form-label">
                                    <span class="form-label">Lantai</span>
                                </label>
                                <button type="button" id="btnLantai" class="btn btn-primary btn-sm">
                                    <i class="ki-filled ki-plus text-lg"></i>
                                </button>
                            </div>

                            @if (isset($fotoJaminan))
                                @foreach ($fotoJaminan->lantaiUnit as $item)
                                    <div id="inputContainerLantai" class="w-full">

                                        <div class="flex w-full items-center justify-center gap-4">
                                            <label class="form-label max-w-56">
                                                <span class="form-label">Foto Lantai 1</span>
                                            </label>
                                            <div class="w-full grid gap-5">
                                                @if (isset($fotoJaminan))
                                                    <img src="{{ asset('storage/' . old('foto_lantai_unit', $item->foto_lantai_unit)) }}"
                                                        alt="Gambar Pendamping" style="width: 12rem;">
                                                @endif


                                                <input type="hidden" name="name_lantai_unit[]" value="lantai">
                                                <input id="inputLantai" type="file" name="foto_lantai_unit[]"
                                                    class="file-input file-input-bordered w-full" accept="image/*"
                                                    capture="camera">
                                                <button type="button" class="btn btn-danger btn-sm delete-btn"
                                                    style="display: none;" id="btnDelete">
                                                    <i class="ki-filled ki-trash"></i>
                                                </button>
                                            </div>

                                        </div>

                                        @error('foto_lantai_unit.*')
                                            <span class="alert text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endforeach
                            @else
                                <div id="inputContainerLantai" class="w-full">
                                    <div class="flex w-full items-center justify-center gap-4">
                                        <label class="form-label max-w-56">
                                            <span class="form-label">Foto Lantai 1</span>
                                        </label>
                                        <input type="hidden" name="name_lantai_unit[]" value="lantai">
                                        <input id="inputLantai" type="file" name="foto_lantai_unit[]"
                                            class="file-input file-input-bordered w-full" accept="image/*"
                                            capture="camera">
                                        <button type="button" class="btn btn-danger btn-sm delete-btn"
                                            style="display: none;" id="btnDelete">
                                            <i class="ki-filled ki-trash"></i>
                                        </button>
                                    </div>
                                    @error('foto_lantai_unit.*')
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endif


                        </div>
                    </div>



                    <div class=" bg-white rounded-lg shadow-md">
                        <div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
                            <h1 class="text-md font-medium text-gray-900">Lingkungan</h1>
                            <button id="btnLingkungan" type="button" class="btn btn-primary btn-sm">
                                <i class="ki-filled ki-plus text-lg"></i>
                            </button>
                        </div>

                        @if (isset($fotoJaminan))
                            @foreach ($fotoJaminan->lingkungan as $item)
                                <div id="inputContainerLingkungan" style="margin-top: 10px">
                                    <div class="flex w-full items-center justify-center gap-4 mb-4">
                                        <label class="form-label max-w-56">
                                            <span class="form-label">Lingkungan</span>
                                        </label>
                                        <div class="w-full grid gap-5">
                                            @if (isset($fotoJaminan))
                                                <img src="{{ asset('storage/' . old('foto_lingkungan', $item->foto_lingkungan)) }}"
                                                    alt="Gambar Pendamping" style="width: 12rem;">
                                            @endif
                                            <input type="hidden" name="name_lingkungan[]" value="lingkungan">
                                            <input id="inputLingkungan" type="file" name="foto_lingkungan[]"
                                                class="file-input file-input-bordered w-full" accept="image/*"
                                                capture="camera">
                                            <button type="button" class="btn btn-danger btn-sm delete-btn"
                                                style="display: none;" id="btnDelete">
                                                <i class="ki-filled ki-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @error('foto_lingkungan.*')
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                    @error('name_lingkungan.*')
                                        <span class="alert text-danger text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        @else
                            <div id="inputContainerLingkungan" style="margin-top: 10px">
                                <div class="flex w-full items-center justify-center gap-4 mb-4">
                                    <label class="form-label max-w-56">
                                        <span class="form-label">Lingkungan</span>
                                    </label>
                                    <input type="hidden" name="name_lingkungan[]" value="lingkungan">
                                    <input id="inputLingkungan" type="file" name="foto_lingkungan[]"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                    <button type="button" class="btn btn-danger btn-sm delete-btn"
                                        style="display: none;" id="btnDelete">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                </div>
                                @error('foto_lingkungan.*')
                                    <span class="alert text-danger text-sm">{{ $message }}</span>
                                @enderror
                                @error('name_lingkungan.*')
                                    <span class="alert text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                    </div>

                    <div class=" bg-white rounded-lg shadow-md">


                        <div class="bg-blue-600 text-white py-4 px-6 flex items-center justify-between">
                            <h1 class="text-md font-medium text-gray-900">Pendamping</h1>
                        </div>
                        <div style="margin-top: 5px">
                            <div class="flex w-full items-center justify-center gap-4 mb-4">

                                <label class="form-label max-w-56">
                                    <span class="form-label">Pendamping</span>
                                </label>
                                <div class="w-full grid gap-5">
                                    @if (isset($fotoJaminan))
                                        <img src="{{ asset('storage/' . old('pendamping', $fotoJaminan->pendamping)) }}"
                                            alt="Gambar Pendamping" style="width: 12rem;">
                                    @endif
                                    <input id="inputPendamping" type="file" name="pendamping"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                    <button type="button" class="btn btn-danger btn-sm delete-btn"
                                        style="display: none;" id="btnDelete">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                </div>
                            </div>
                            @error('pendamping')
                                <span class="alert text-danger text-sm">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
                        <button type="submit" class="btn btn-success">
                            Save
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Generic function to handle adding new input and delete functionality
            function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
                const inputContainer = document.getElementById(containerId);
                const addButton = document.getElementById(buttonId);

                // Function to update the labels with the correct number
                function updateLabels() {
                    const labels = inputContainer.querySelectorAll('.form-label span');
                    labels.forEach((label, index) => {
                        label.textContent = `${labelText} ${index + 1}`;
                    });


                }

                // Function to show or hide delete buttons
                function handleDeleteButtons() {
                    const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
                    deleteBtns.forEach(btn => {
                        btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
                    });
                }

                // Function to create a new input
                function createNewInput() {
                    // Clone the first child (input group) and reset input values
                    const newDiv = inputContainer.children[0].cloneNode(true);

                    // Clear the input file value
                    const inputFile = newDiv.querySelector(`.${inputDataClass}`);
                    if (inputFile) {
                        inputFile.value = ''; // Ensure the input field exists before resetting
                    }

                    // Find and set up the delete button for the new input group
                    const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`);
                    if (deleteBtn) { // Ensure the delete button exists before adding the listener
                        deleteBtn.addEventListener('click', function() {
                            inputContainer.removeChild(newDiv);
                            handleDeleteButtons();
                            updateLabels();
                        });
                    } else {
                        console.error('Delete button not found in the cloned element.');
                    }

                    // Add margin to new inputs
                    newDiv.style.marginTop = '10px';

                    // Append the new input group
                    inputContainer.appendChild(newDiv);
                    updateLabels();
                    handleDeleteButtons();
                }

                // Add event listener for the "Add" button
                if (addButton) { // Ensure the add button exists
                    addButton.addEventListener('click', createNewInput);
                } else {
                    console.error('Add button not found.');
                }

                // Initialize delete button on the first input
                const firstDeleteBtn = inputContainer.children[0].querySelector(`.${buttonDeleteClass}`);
                if (firstDeleteBtn) {
                    firstDeleteBtn.addEventListener('click', function() {
                        if (inputContainer.children.length > 1) {
                            inputContainer.removeChild(this.closest('.flex'));
                            handleDeleteButtons();
                            updateLabels();
                        }
                    });
                } else {
                    console.error('Initial delete button not found.');
                }

                // Initial update of the labels
                updateLabels();
            }

            // Call the function for both "Rute Menuju Lokasi" and "Lantai"
            setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input',
                'delete-btn');
            setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input', 'delete-btn');
            setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'linkungan', 'file-input',
                'delete-btn');
        });
    </script>
@endpush