@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">
        <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')]) }}" class="btn btn-xs btn-info">
                            <i class="ki-filled ki-exit-left"></i> Back
                        </a>
                    </div>
                </div>
                <div class="card-body grid gap-5 grid-cols-2">
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">Nama Debitur</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (isset($permohonan->debiture))
                                <p class="text-2sm text-gray-700">{{ $permohonan->debiture->name }}</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">Alamat Object</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @foreach ($permohonan->debiture->documents as $dokumen)
                                <span class="text-2sm text-gray-700">
                                    {{ formatAlamat($dokumen->pemilik) }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">Nomor Registrasi</label>
                        <div class="flex flex-wrap items-base line w-full">
                            <p class="text-2sm text-gray-700">{{ $permohonan->nomor_registrasi }}</p>
                        </div>
                    </div>



                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">Cab/Direktorat</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (isset($permohonan->branch))
                                <p class="text-2sm text-gray-700">{{ $permohonan->branch->name }}</p>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">Nomor Laporan</label>
                        <div class="flex flex-wrap items-base line w-full">
                            <p class="text-2sm text-gray-700">{{ $permohonan->nomor_registrasi }}</p>
                        </div>
                    </div>
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">AO</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            @if (isset($permohonan->user))
                                <p class="text-2sm text-gray-700">{{ $permohonan->user->name }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form id="formFoto" method="POST" class="grid gap-5" enctype="multipart/form-data">
            <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
            <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">

            <div class="card bg-white rounded-lg shadow-md">
                <div class="card-body">
                    <div class=" text-white py-4 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($formFoto['rute_menuju_lokasi']))
                        @foreach ($formFoto['rute_menuju_lokasi'] as $index => $photo)
                            <div id="inputContainerRute" style="margin-top: 10px">
                                <div class="flex w-full items-center justify-center gap-4 mb-4"
                                    id="photoContainer-{{ $index }}">
                                    <label class="form-label max-w-56">
                                        <span class="form-label">Foto Rute Menuju Lokasi {{ $index + 1 }}</span>
                                    </label>
                                    <div class="input-group w-full flex flex-col gap-2">
                                        <div class="preview-container">
                                            <img id="foto_rute-preview-{{ $index }}"
                                                src="{{ asset('storage/' . $photo['foto_rute']) }}"
                                                alt="Foto Rute {{ $index }}" class="mt-2 h-auto"
                                                style="display: block; width: 30rem;">
                                        </div>
                                        <div class="input-group w-full gap-2">
                                            <input class="name_rute" type="hidden" name="name_rute[]"
                                                value="rute_{{ $index }}">
                                            <input id="inputRute-{{ $index }}" type="file" name="foto_rute[]"
                                                class="file-input file-input-bordered w-full" accept="image/*"
                                                capture="camera" onchange="previewImage(this, 'foto_rute-preview')">


                                            <button type="button" id="btnCamera-{{ $index }}" class="btn btn-light"
                                                data-modal-toggle="#cameraModal">
                                                <i class="ki-outline ki-abstract-33"></i> Camera
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Delete button to remove photo -->
                                    <button type="button" class="btn btn-danger btn-sm delete-btn" id="btnDelete">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                </div>
                            </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>

                                <div class="input-group w-full flex flex-col gap-2">
                                    <div class="preview-container">
                                        <img id="foto_rute-preview" src="" alt="Foto Rute" class="mt-2 h-auto"
                                            style="display: none; width: 30rem;">
                                    </div>
                                    <div class="input-group w-full gap-2">
                                        <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" onchange="previewImage(this, 'foto_rute-preview')">
                                        <button type="button" id="btnCamera" class="btn btn-light"
                                            data-modal-toggle="#cameraModal">
                                            <i class="ki-outline  ki-abstract-33"></i> Camera
                                        </button>
                                    </div>
                                </div>
                                <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>
                            <span class="alert text-danger text-sm"></span>
                        </div>
                    @endif
                    <div id="inputContainerGerbang" 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 Gerbang & Nama Perumahan</span>
                            </label>
                            <div class="input-group w-full flex flex-col gap-2">
                                <input class="name_gerbang" type="hidden" name="name_gerbang" value="gerbang">
                                <img id="foto_gerbang-preview"
                                    src="{{ isset($formFoto['foto_gerbang']) ? asset('storage/' . $formFoto['foto_gerbang']) : '' }}"
                                    alt="Foto Gerbong" class="mt-2 max-w-full h-auto"
                                    style="{{ isset($formFoto['foto_gerbang']) ? '' : 'display: none;' }} width: 30rem;">
                                <div class="input-group w-full flex gap-2">
                                    <input id="inputRute" type="file" name="foto_gerbang"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera"
                                        onchange="previewImage(this, 'foto_gerbang-preview')">
                                    <button type="button" id="btnCamera" class="btn btn-light"
                                        data-modal-toggle="#cameraModal">
                                        <i class="ki-outline ki-abstract-33"></i> Camera
                                    </button>
                                </div>
                            </div>
                        </div>
                        <span class="alert text-danger text-sm"></span>
                    </div>
                    <div id="ruteLainnya" style="margin-top: 10px">
                        @if (isset($formFoto['foto_rute_lainnya']) && is_array($formFoto['foto_rute_lainnya']))
                            @foreach ($formFoto['foto_rute_lainnya'] as $index => $photo)
                                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5"
                                    id="photoContainer">
                                    <label class="form-label max-w-56">
                                        Masukkan nama rute lainnya {{ $index + 1 }}
                                    </label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <img id="foto_rute_lainnya-preview-{{ $index }}"
                                            src="{{ asset('storage/' . $photo['foto_rute_lainnya']) }}" alt="Foto Rute "
                                            class="mt-2 max-w-full h-auto" style="width: 30rem;">
                                        <div class="flex flex-col lg:flex-row gap-2 w-full">

                                            <div class="flex flex-wrap items-baseline px-2">
                                                <input class="input" type="text" name="name_rute_lainnya[]"
                                                    value="{{ $photo['name_rute_lainnya'] }}">
                                            </div>
                                            <div class="input-group w-full flex flex-col gap-2">

                                                <div class="input-group w-full flex gap-2">
                                                    <input type="file" name="foto_rute_lainnya[]"
                                                        class="file-input file-input-bordered w-full"
                                                        value="{{ $photo['foto_rute_lainnya'] }}" accept="image/*"
                                                        onchange="previewImage(this, 'foto_rute_lainnya-preview-{{ $index }}')">
                                                    <button type="button" id="btnCamera-{{ $index }}"
                                                        class="btn btn-light" data-modal-toggle="#cameraModal">
                                                        <i class="ki-outline ki-abstract-33"></i> Camera
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger btn-sm delete-btn"
                                                onclick="deletePhoto('{{ $index }}')">
                                                <i class="ki-filled ki-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <button type="button" class="btn btn-primary btn-sm" id="btnAddMore" style="margin-top: 10px">
                        <i class="ki-outline ki-plus text-2sm"></i> Lainnya
                    </button>
                </div>
            </div>

            <div class="card bg-white rounded-lg shadow-md">
                <div class="card-body">
                    <div class="text-white py-4 flex items-center justify-between">
                        <h1 class="text-md font-medium text-gray-900">Objek Jaminan</h1>
                    </div>

                    @php
                        $processedCategories = [];
                    @endphp

                    @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)
                                        @if (!in_array($kategori, $processedCategories))
                                            @php
                                                $objekViews = [];
                                                if ($kategori === 'tanah') {
                                                    $objekViews = [
                                                        ['label' => 'Tampak Depan Objek', 'index' => 0],
                                                        ['label' => 'Tampak Samping Kiri', 'index' => 1],
                                                        ['label' => 'Tampak Samping Kanan', 'index' => 2],
                                                        ['label' => 'Nomor Rumah/Unit', 'index' => 3],
                                                    ];
                                                } elseif ($kategori === 'apartemen-kantor') {
                                                    $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],
                                                    ];
                                                } elseif ($kategori === 'kendaraan') {
                                                    $objekViews = [
                                                        ['label' => 'Tampak Depan Objek', 'index' => 0],
                                                        ['label' => 'Tampak Kanan Objek', 'index' => 1],
                                                        ['label' => 'Tampak Samping Kiri Objek', 'index' => 2],
                                                        ['label' => 'Tampak Belakang Objek', 'index' => 3],
                                                        ['label' => 'Tampak Bagian Dalam', 'index' => 4],
                                                        ['label' => 'Nomor Panel Instrument', 'index' => 5],
                                                        ['label' => 'Tampak Odometer', 'index' => 6],
                                                        ['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
                                                        ['label' => 'Tampak Nomor Rangka', 'index' => 8],
                                                        ['label' => 'Tampak Nomor Mesin', 'index' => 9],
                                                        [
                                                            'label' => 'Tampak Penilai dan Pendamping di lapangan',
                                                            'index' => 10,
                                                        ],
                                                    ];
                                                } elseif ($kategori === 'kapal') {
                                                    $objekViews = [
                                                        ['label' => 'Tampak Depan', 'index' => 0],
                                                        ['label' => 'Tampak Kanan', 'index' => 1],
                                                        ['label' => 'Tampak Samping Kiri', 'index' => 2],
                                                        ['label' => 'Tampak Belakang', 'index' => 3],
                                                        ['label' => 'Tampak Bagian Dalam', 'index' => 4],
                                                        ['label' => 'Nomor Panel Instrument', 'index' => 5],
                                                        ['label' => 'Tampak Hours Meters', 'index' => 6],
                                                        ['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
                                                        ['label' => 'Tampak Nomor Rangka', 'index' => 8],
                                                        ['label' => 'Tampak Nomor Mesin', 'index' => 9],
                                                        [
                                                            'label' => 'Tampak Penilai dan Pendamping di lapangan',
                                                            'index' => 10,
                                                        ],
                                                    ];
                                                } elseif ($kategori === 'mesin') {
                                                    $objekViews = [
                                                        ['label' => 'Tampak Depan', 'index' => 0],
                                                        ['label' => 'Tampak Kanan', 'index' => 1],
                                                        ['label' => 'Tampak Samping Kiri', 'index' => 2],
                                                        ['label' => 'Tampak Belakang', 'index' => 3],
                                                        ['label' => 'Tampak Bagian Dalam', 'index' => 4],
                                                        ['label' => 'Nomor Panel Instrument', 'index' => 5],
                                                        ['label' => 'Tampak Hours Meters', 'index' => 6],
                                                        ['label' => 'Tampak Aksesoris Tambahan', 'index' => 7],
                                                        ['label' => 'Tampak Nomor Rangka', 'index' => 8],
                                                        ['label' => 'Tampak Nomor Mesin', 'index' => 9],
                                                        [
                                                            'label' => 'Foto Tampak Aksesoris Tambahan Lainnya',
                                                            'index' => 10,
                                                        ],
                                                        [
                                                            'label' => 'Tampak Penilai dan Pendamping di lapangan',
                                                            'index' => 10,
                                                        ],
                                                    ];
                                                }
                                            @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>
                                                            <input type="hidden" class="form-control"
                                                                name="name_objek[]" value="{{ $view['label'] }}" />
                                                            <div class="w-full grid gap-5">
                                                                <img id="foto_object_jaminan_preview_{{ $view['index'] }}"
                                                                    src="{{ isset($formFoto['object_jaminan'][$view['index']]['foto_objek']) ? asset('storage/' . $formFoto['object_jaminan'][$view['index']]['foto_objek']) : '' }}"
                                                                    alt="{{ $view['label'] }}" class="mb-2 h-auto"
                                                                    style="{{ isset($formFoto['object_jaminan'][$view['index']]['foto_objek']) ? 'width: 30rem;' : 'display: none;' }}"
                                                                    onerror="this.style.display='none';" />
                                                                <div class="input-group w-full flex gap-2">
                                                                    <input type="file" name="foto_objek[]"
                                                                        class="file-input file-input-bordered w-full"
                                                                        accept="image/*" capture="camera"
                                                                        onchange="previewImage(this, 'foto_object_jaminan_preview_{{ $view['index'] }}')">
                                                                    <button type="button" id="btnCamera"
                                                                        class="btn btn-light"
                                                                        data-modal-toggle="#cameraModal">
                                                                        <i class="ki-outline ki-abstract-33"></i> Camera
                                                                    </button>
                                                                </div>
                                                                <textarea name="deskripsi_objek[]" class="textarea" rows="3" placeholder="Deskripsi">{{ isset($formFoto['object_jaminan'][$view['index']]) ? str_replace($view['label'] . ': ', '', $formFoto['object_jaminan'][$view['index']]['deskripsi_objek']) : '' }}</textarea>
                                                            </div>
                                                        </div>
                                                        <span class="alert text-danger text-sm"></span>
                                                    </div>
                                                @endforeach
                                            @endif

                                            @php
                                                $processedCategories[] = $kategori;
                                            @endphp
                                        @endif
                                    @endforeach
                                @endif
                            @endif
                        @endif
                    @endforeach

                    <div class="flex flex-wrap gap-4 w-full">
                        <div class="w-full">
                            <div class="text-white py-4 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($formFoto['foto_lantai_unit']))
                                @foreach ($formFoto['foto_lantai_unit'] 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="input-group w-full grid gap-5">
                                                <img src="{{ asset('storage/' . old('foto_lantai_unit', $item['foto_lantai_unit'])) }}"
                                                    alt="Gambar Pendamping" style="width: 30rem;">
                                                <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>
                                        <span id="inputLantaiError" class="alert text-danger text-sm"></span>
                                    </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>
                                        <div class="input-group w-full flex gap-2">
                                            <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" id="btnCamera" class="btn btn-light"
                                                data-modal-toggle="#cameraModal">
                                                <i class="ki-outline ki-abstract-33"></i> Camera
                                            </button>
                                        </div>
                                        <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 id="inputContainerBasement" class="w-full" style="margin-top: 10px">
                                <div class="flex w-full items-center justify-center gap-4">
                                    <label class="form-label max-w-56">
                                        <span class="form-label">Basement</span>
                                    </label>
                                    <div class="input-group w-full flex flex-col gap-2">
                                        <input type="hidden" name="name_basement" value="basement">
                                        <img id="foto_basement_preview"
                                            src="{{ isset($formFoto['foto_basement']) ? asset('storage/' . old('foto_basement', $formFoto['foto_basement'])) : '#' }}"
                                            alt="Gambar foto_basement" style="width: 30rem;"
                                            onerror="this.style.display='none';"
                                            onchange="previewImage(this, 'foto_basement_preview')">
                                        <div class="input-group w-full flex gap-2">
                                            <input id="inputBasement" type="file" name="foto_basement"
                                                class="file-input file-input-bordered w-full" accept="image/*"
                                                capture="camera">
                                            <button type="button" id="btnCamera" class="btn btn-light"
                                                data-modal-toggle="#cameraModal">
                                                <i class="ki-outline ki-abstract-33"></i> Camera
                                            </button>
                                        </div>
                                    </div>
                                    <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>
                                <span id="alertBasement" class="alert text-danger text-sm"></span>
                            </div>

                            <div id="lantaiLainnya" style="margin-top: 10px"></div>

                            <button type="button" class="btn btn-primary btn-sm" id="btnAddMoreObject"
                                style="margin-top: 10px">
                                <i class="ki-outline ki-plus text-2sm"></i>
                                Lainnya
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-white rounded-lg shadow-md">
                <div class="card-body">
                    <div class="text-white py-4 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($formFoto['lingkungan']) && is_array($formFoto['lingkungan']) && count($formFoto['lingkungan']) > 0)
                        @foreach ($formFoto['lingkungan'] as $key => $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 {{ $key + 1 }}</span>
                                    </label>
                                    <div class="w-full grid gap-5">
                                        <img id="foto_lingkungan_preview_{{ $key }}"
                                            src="{{ asset('storage/' . old('foto_lingkungan.' . $key, $item['foto_lingkungan'])) }}"
                                            alt="Gambar Lingkungan" style="width: 30rem;">
                                        <input type="hidden" name="name_lingkungan[]" value="lingkungan">
                                        <div class="input-group w-full flex gap-2">
                                            <input id="inputLingkungan_{{ $key }}" type="file"
                                                name="foto_lingkungan[]" class="file-input file-input-bordered w-full"
                                                accept="image/*" capture="camera">
                                            <button type="button" id="btnCamera" class="btn btn-light"
                                                data-modal-toggle="#cameraModal">
                                                <i class="ki-outline ki-abstract-33"></i> Camera
                                            </button>
                                        </div>
                                        <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>
                                <span class="alert text-danger text-sm"></span>
                            </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>
                                <div class="input-group w-full flex gap-2">
                                    <input type="hidden" name="name_lingkungan[]" value="lingkungan">
                                    <input id="inputLingkungan_0" type="file" name="foto_lingkungan[]"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                    <button type="button" id="btnCamera" class="btn btn-light"
                                        data-modal-toggle="#cameraModal">
                                        <i class="ki-outline ki-abstract-33"></i> Camera
                                    </button>
                                </div>
                                <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>
                            <span class="alert text-danger text-sm"></span>
                        </div>
                    @endif
                </div>
            </div>

            <div class="card bg-white rounded-lg shadow-md">
                <div class="card-body">
                    <div class=" text-white py-4 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">

                                <img id="pendamping"
                                    src="{{ isset($formFoto['pendamping']) ? asset('storage/' . old('pendamping', $formFoto['pendamping'])) : '#' }}"
                                    alt="Gambar Pendamping" style="width: 30rem;" onerror="this.style.display='none';"
                                    onchange="previewImage(this, 'pendamping')">


                                <div class="input-group w-full flex gap-2">
                                    <input id="inputPendamping" type="file" name="pendamping"
                                        class="file-input file-input-bordered w-full" accept="image/*" capture="camera">
                                    <button type="button" id="btnCamera" class="btn btn-light"
                                        data-modal-toggle="#cameraModal">
                                        <i class="ki-outline  ki-abstract-33"></i> Camera
                                    </button>
                                </div>

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


            <div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
                <button type="button" class="btn btn-success" id="saveButtonFoto" onclick="submitFoto()">
                    <span id="saveButtonFotoText">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>

    <!-- Modal Kamera -->
    @include('lpj::surveyor.components.modal-kamera')
@endsection

@include('lpj::surveyor.js.fotojs')
@include('lpj::surveyor.js.utils')
@push('scripts')
    <script>
        function submitFoto() {
            showLoadingSwal('Mengirim data ke server...');

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

            $.ajax({
                url: '{{ route('surveyor.storeFoto') }}',
                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]) }}';
                            }
                            console.log(response);

                        });
                    } else {
                        hideLoadingSwal();
                        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]);
                        });
                    }
                    hideLoadingSwal();
                    toastrErrorBuild(error);
                }
            });
        }
    </script>
    @include('lpj::surveyor.js.camera-editor')
@endpush