<!-- Informasi Tata Ruang -->
<div class="w-full border card border-agi-100">
    <div class="card-header light:bg-agi-50">
        <h3 class="uppercase card-title">
            @if (strtolower($permohonan->tujuanPenilaian->name) == 'rap')
                ATURAN TATA KOTA
            @else
                Informasi Dinas Tata Ruang
            @endif
        </h3>
    </div>
    <div class="card-body">
        <!-- Informasi Tata Ruang Form -->
        <div class="grid gap-5">
            @php
                $inputDinasTata = [
                    [
                        'label' => 'Peruntukan',
                        'name' => 'peruntukan',
                        'index' => 0,
                        'value' => old(
                            'peruntukan',
                            isset($forminspeksi['fakta']['peruntukan']) ? $forminspeksi['fakta']['peruntukan'] : '',
                        ),
                    ],
                    [
                        'label' => 'KDB',
                        'name' => 'kdb',
                        'index' => 1,
                        'value' => old(
                            'kdb',
                            isset($forminspeksi['fakta']['kdb']) ? $forminspeksi['fakta']['kdb'] : '',
                        ),
                    ],
                    [
                        'label' => 'KDH',
                        'name' => 'kdh',
                        'index' => 2,
                        'value' => old(
                            'kdh',
                            isset($forminspeksi['fakta']['kdh']) ? $forminspeksi['fakta']['kdh'] : '',
                        ),
                    ],
                    [
                        'label' => 'GSB',
                        'name' => 'gsb',
                        'index' => 3,
                        'value' => old(
                            'gsb',
                            isset($forminspeksi['fakta']['gsb']) ? $forminspeksi['fakta']['gsb'] : '',
                        ),
                    ],
                    [
                        'label' => 'Max Lantai',
                        'name' => 'max_lantai',
                        'index' => 4,
                        'value' => old(
                            'max_lantai',
                            isset($forminspeksi['fakta']['max_lantai']) ? $forminspeksi['fakta']['max_lantai'] : '',
                        ),
                    ],
                    [
                        'label' => 'KLB',
                        'name' => 'klb',
                        'index' => 5,
                        'value' => old(
                            'klb',
                            isset($forminspeksi['fakta']['klb']) ? $forminspeksi['fakta']['klb'] : '',
                        ),
                    ],
                    [
                        'label' => 'GSS',
                        'name' => 'gss',
                        'index' => 6,
                        'value' => old(
                            'gss',
                            isset($forminspeksi['fakta']['gss']) ? $forminspeksi['fakta']['gss'] : '',
                        ),
                    ],
                    [
                        'label' => 'Pelebaran Jalan',
                        'name' => 'pelebaran_jalan',
                        'index' => 7,
                        'value' => old(
                            'pelebaran_jalan',
                            isset($forminspeksi['fakta']['pelebaran_jalan'])
                                ? $forminspeksi['fakta']['pelebaran_jalan']
                                : '',
                        ),
                    ],
                    [
                        'label' => 'Nama Petugas TK',
                        'name' => 'nama_petugas',
                        'index' => 8,
                        'value' => old(
                            'nama_petugas',
                            isset($forminspeksi['fakta']['nama_petugas']) ? $forminspeksi['fakta']['nama_petugas'] : '',
                        ),
                    ],
                ];
            @endphp

            @if (count($inputDinasTata) > 0)
                @foreach ($inputDinasTata as $item)
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">{{ $item['label'] }}</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="text" name="{{ $item['name'] }}" class="input"
                                placeholder="Masukkan {{ $item['label'] }}" value="{{ $item['value'] }}">
                            @error($item['name'])
                                <em class="text-sm alert text-danger"></em>
                            @enderror
                        </div>
                    </div>
                @endforeach
            @endif

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                <label class="form-label max-w-56">
                    <span class="form-label">Gambar Surat Ukur</span>
                </label>
                <div class="flex gap-2 w-full input-group">
                    <input class="upload_gs" type="hidden" name="upload_gs" value="upload_gs">
                    <div class="w-full">
                        <input id="inputGistaru" type="file" name="upload_gs"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'upload-gs-preview', 'upload_gs')">

                        <img id="upload-gs-preview"
                            src="{{ isset($forminspeksi['upload_gs']) && is_string($forminspeksi['upload_gs']) && !empty($forminspeksi['upload_gs']) ? asset('storage/' . $forminspeksi['upload_gs']) : '' }}"
                            alt="Foto Gs" class="mt-2 max-w-full h-auto"
                            style="{{ isset($forminspeksi['upload_gs']) && is_string($forminspeksi['upload_gs']) && !empty($forminspeksi['upload_gs']) ? '' : 'display: none;' }} max-width: 30rem;" />

                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                <label class="form-label max-w-56">
                    <span class="form-label">Sentuh Tanahku</span>
                </label>
                <div class="flex gap-2 w-full input-group">
                    <input class="name_rute" type="hidden" name="name_rute" value="rute">
                    <div class="w-full">
                        <input id="inputGistaru" type="file" name="foto_sentuh_tanahku"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'sentuh_tanahku-preview', 'foto_sentuh_tanahku')"
                            >

                        <img id="sentuh_tanahku-preview"
                             src="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? asset('storage/' . $forminspeksi['foto_sentuh_tanahku']) : '' }}"
                            alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
                            style="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? '' : 'display: none;' }} max-width: 30rem;"/>

                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                <label class="form-label max-w-56">
                    <span class="form-label">Gistaru</span>
                </label>
                <div class="flex gap-2 w-full input-group">
                    <input class="name_rute" type="hidden" name="name_rute" value="rute">
                    <div class="w-full">
                        <input id="inputGistaru" type="file" name="foto_gistaru"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'gistaru-preview', 'foto_gistaru')">

                        <img id="gistaru-preview"
                            src="{{ isset($forminspeksi['foto_gistaru']) && is_string($forminspeksi['foto_gistaru']) && !empty($forminspeksi['foto_gistaru']) ? asset('storage/' . $forminspeksi['foto_gistaru']) : '' }}"
                            alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
                            style="{{ isset($forminspeksi['foto_gistaru']) && is_string($forminspeksi['foto_gistaru']) && !empty($forminspeksi['foto_gistaru']) ? '' : 'display: none;' }} max-width: 30rem;" />


                    </div>
                    <a href="https://gistaru.atrbpn.go.id/rtronline" type="button" class="btn btn-light"
                        target="_blank">
                        <i class="ki-filled ki-map"></i> Gistaru
                    </a>
                </div>
            </div>

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                <label class="form-label max-w-56">
                    <span class="form-label">Bhumi</span>
                </label>
                <div class="flex gap-2 w-full input-group">
                    <input class="name_rute" type="hidden" name="name_rute" value="rute">
                    <div class="grid gap-2 w-full">


                        <input id="inputBhumi" type="file" name="foto_bhumi"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'bhumi-preview', 'foto_bhumi')">
                            @php
                                $bhumiPath = isset($forminspeksi['foto_bhumi']) && is_string($forminspeksi['foto_bhumi']) && !empty($forminspeksi['foto_bhumi'])
                                    ? asset('storage/' . $forminspeksi['foto_bhumi'])
                                    : '';
                            @endphp
                        <img id="bhumi-preview"
                            src="{{ $bhumiPath }}"
                            alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
                            style="{{ $bhumiPath ? '' : 'display: none;' }} max-width: 30rem;" />
                    </div>
                    <a href="https://bhumi.atrbpn.go.id/peta" type="button" class="btn btn-light" target="_blank">
                        <i class="ki-filled ki-map"></i> Bhumi
                    </a>
                </div>
            </div>


            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                <label class="form-label max-w-56">
                    <span class="form-label">Blad Tata Ruang Perdaerah</span>
                </label>
                <div class="flex gap-2 w-full input-group">
                    <input class="name_rute" type="hidden" name="name_rute" value="rute">
                    <div class="w-full">
                        <input id="inputArgisRegion" type="file" name="foto_argis_region"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'argis-region-preview', 'foto_argis_region')">
                        @php
                            $argisRegionPath = isset($forminspeksi['foto_argis_region']) && is_string($forminspeksi['foto_argis_region']) && !empty($forminspeksi['foto_argis_region'])
                                ? asset('storage/' . $forminspeksi['foto_argis_region'])
                                : '';
                        @endphp

                        <img id="argis-region-preview"
                            src="{{ $argisRegionPath }}"
                            alt="Foto Argis Region" class="mt-2 max-w-full h-auto"
                            style="{{ $argisRegionPath ? '' : 'display: none;' }} max-width: 30rem;">
                    </div>
                    < </div>
                </div>
            </div>
            <!-- Upload Photo Button -->

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">
                <label for="" class="text-sm font-medium text-gray-700 form-label max-w-56">Upload
                    Peta</label>
                <div class="grid gap-5 w-full">
                    <div class="flex gap-2 w-full input-group">
                        <input id="foto_tempat" type="file" name="foto_tempat"
                            class="w-full file-input file-input-bordered"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="uploadFile(this, 'foto_tempat-preview', 'foto_tempat')">
                        <button type="button" id="btnCamera" class="btn btn-light"
                            data-modal-toggle="#cameraModal">
                            <i class="ki-outline ki-abstract-33"></i> Camera
                        </button>
                    </div>
                    @php
                        $fotoTempat = isset($forminspeksi['foto_tempat']) && is_string($forminspeksi['foto_tempat']) && !empty($forminspeksi['foto_tempat'])
                            ? asset('storage/' . $forminspeksi['foto_tempat'])
                            : '';
                    @endphp

                    <img id="foto_tempat-preview" src="{{ $fotoTempat ?: '' }}" alt="Foto Tempat"
                        class="mt-2 max-w-full h-auto"
                        style="max-width: 30rem; {{ $fotoTempat ? '' : 'display: none;' }}">

                </div>
            </div>

            <!-- Notes Section -->

            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">

                <label class="form-label lg:form-label max-w-56">Catatan yang Perlu Diperhatikan
                </label>
                <div class="w-full">
                    <div id="keterangan-container" class="flex flex-wrap gap-2.5 items-baseline w-full">
                        @if (!empty($forminspeksi['fakta']['keterangan']) && is_array($forminspeksi['fakta']['keterangan']))
                            @foreach ($forminspeksi['fakta']['keterangan'] as $index => $item)
                                <div class="flex gap-2 items-center mt-2 w-full keterangan textarea-group">
                                    <textarea name="keterangan[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan.$index", $item) }}</textarea>
                                    <button class="btn btn-danger btn-sm remove-btn" type="button"
                                        style="display: none;">
                                        <i class="ki-outline ki-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <div class="flex gap-2 items-center mt-2 w-full keterangan textarea-group">
                                <textarea name="keterangan[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10"></textarea>
                                <button class="btn btn-danger btn-sm remove-btn" type="button"
                                    style="display: none;">
                                    <i class="ki-outline ki-trash"></i>
                                </button>
                                <em id="error-keterangan" class="text-sm alert text-danger"></em>
                            </div>
                        @endif
                    </div>
                    <button type="button" onclick="addClonableItem('keterangan-container', 'keterangan')"
                        class="mt-5 btn btn-primary btn-sm">
                        <i class="ki-outline ki-plus"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    @include('lpj::surveyor.components.modal-kamera')

    @push('scripts')
        <script stype="text/javascript">
            function uploadFile(inputElement, previewElement, url) {
                // Ambil file dari elemen input
                const file = inputElement.files[0];

                if (!file) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak ada file yang dipilih.',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    return;
                }

                if (inputElement.files && file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#' + previewElement).attr('src', e.target.result).show();
                    }
                    reader.readAsDataURL(inputElement.files[0]);
                } else {
                    $('#' + previewElement).hide();
                }

                // Buat FormData untuk mengirim file
                const formData = new FormData();

                const dokument = "{{ request('documentId') }}";
                const permohonan = "{{ $permohonan->id }}";
                formData.append('file', file);
                formData.append('dokument_id', dokument);
                formData.append('permohonan_id', permohonan);

                $.ajax({
                    url: '/surveyor/upload-file-foto/' + url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {


                        if (response.success) {
                            // Tampilkan pesan sukses
                            Swal.fire({
                                icon: 'success',
                                title: response.message || 'File berhasil diunggah!',
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 1500
                            });

                            // Perbarui elemen preview
                            $(previewElement).attr('src', response.data.path).show();
                            $(inputElement).data('file-name', response.data.file_name);
                        } else {
                            // Tampilkan pesan kesalahan dari server
                            Swal.fire({
                                icon: 'error',
                                title: response.message || 'Gagal mengunggah file!',
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    },
                    error: function(xhr, status, error) {


                        // Tampilkan pesan kesalahan
                        Swal.fire({
                            icon: 'error',
                            title: xhr.responseJSON?.message || 'Terjadi kesalahan saat mengunggah file.',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        console.error(`Error: ${error}`);
                    }
                });
            }
        </script>
        @include('lpj::surveyor.js.camera-editor')
    @endpush
