<!-- Informasi Tata Ruang -->
<div class="card border border-agi-100 w-full ">
    <div class="card-header light:bg-agi-50">
        <h3 class="card-title uppercase">
            @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 items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <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="alert text-danger text-sm"></em>
                            @enderror
                        </div>
                    </div>
                @endforeach
            @endif

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">
                    <span class="form-label">Gambar Surat Ukur</span>
                </label>
                <div class="input-group w-full flex gap-2">
                    <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="file-input file-input-bordered w-full"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="previewImage(this, 'upload-gs-preview')">

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

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

            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">
                    <span class="form-label">Sentuh Tanahku</span>
                </label>
                <div class="input-group w-full flex gap-2">
                    <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="file-input file-input-bordered w-full"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="previewImage(this, 'sentuh_tanahku-preview')">

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

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



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

                        <img id="gistaru-preview"
                            src="{{ asset('storage/' . (isset($forminspeksi['foto_gistaru']) ? $forminspeksi['foto_gistaru'] : '')) }}"
                            alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
                            style="{{ isset($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 items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                <label class="form-label max-w-56">
                    <span class="form-label ">Bhumi</span>
                </label>
                <div class="input-group w-full flex gap-2">
                    <input class="name_rute" type="hidden" name="name_rute" value="rute">
                    <div class="w-full grid gap-2">


                        <input id="inputBhumi" type="file" name="foto_bhumi"
                            class="file-input file-input-bordered w-full "
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                            onchange="previewImage(this, 'bhumi-preview')">
                        <img id="bhumi-preview"
                            src="{{ asset('storage/' . (isset($forminspeksi['foto_bhumi']) ? $forminspeksi['foto_bhumi'] : '')) }}"
                            alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
                            style="{{ isset($forminspeksi['foto_bhumi']) ? ' ' : '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 items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                    <label class="form-label max-w-56">
                        <span class="form-label">Blad Tata Ruang Perdaerah</span>
                    </label>
                    <div class="input-group w-full flex gap-2">
                        <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="file-input file-input-bordered w-full"
                                accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                                onchange="previewImage(this, 'argis-region-preview')">
                            <img id="argis-region-preview"
                                src="{{ asset('storage/' . (isset($forminspeksi['foto_argis_region']) ? $forminspeksi['foto_argis_region'] : '')) }}"
                                alt="Foto Argis Region" class="mt-2 max-w-full h-auto"
                                style="{{ isset($forminspeksi['foto_argis_region']) ? '' : 'display: none;' }} max-width: 30rem;">
                        </div>
                        <
                    </div>
                </div>
        </div>
        <!-- Upload Photo Button -->

        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
            <label for="" class="form-label max-w-56 text-sm font-medium text-gray-700">Upload Peta</label>
            <div class="w-full grid gap-5">
                <div class="input-group w-full flex gap-2">
                    <input id="foto_tempat" type="file" name="foto_tempat"
                        class="file-input file-input-bordered w-full"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
                        onchange="previewImage(this, 'foto_tempat-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>
                @php
                $fotoTempat = $forminspeksi['foto_tempat'] ?? null;
                $fotoSrc = '';

                if (is_array($fotoTempat)) {
                    $fotoSrc = asset('storage/' . $fotoTempat[0]);
                } elseif (!empty($fotoTempat)) {
                    $fotoSrc = asset('storage/' . $fotoTempat);
                }
            @endphp

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

            </div>
        </div>

        <!-- Notes Section -->

        <div class="flex items-baseline flex-wrap lg:flex-nowrap  gap-2.5" 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 items-baseline flex-wrap  gap-2.5 w-full">
                    @if (!empty($forminspeksi['fakta']['keterangan']) && is_array($forminspeksi['fakta']['keterangan']))
                        @foreach ($forminspeksi['fakta']['keterangan'] as $index => $item)
                            <div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
                                <textarea name="keterangan[]" class="textarea mt-2" 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="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
                            <textarea name="keterangan[]" class="textarea mt-2" 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="alert text-danger text-sm"></em>
                        </div>
                    @endif
                </div>
                <button type="button" onclick="addClonableItem('keterangan-container', 'keterangan')"
                    class="btn btn-primary btn-sm mt-5 ">
                    <i class="ki-outline ki-plus"></i>
                </button>
            </div>
        </div>
    </div>
</div>

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

@push('scripts')
    @include('lpj::surveyor.js.camera-editor')
@endpush
