@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>
                <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">
                                    {{ $dokumen->pemilik->address ?? '' }},
                                    {{ $dokumen->pemilik->village->name ?? '' }},
                                    {{ $dokumen->pemilik->district->name ?? '' }},
                                    {{ $dokumen->pemilik->city->name ?? '' }},
                                    {{ $dokumen->pemilik->province->name ?? '' }} -
                                    {{ $dokumen->pemilik->village->postal_code ?? '' }}
                                </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>


        {{-- <div class="card">
            <div class="card-body"> --}}
        <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') }}">


            @foreach ($permohonan->debiture->documents as $dokumen)
            @if ($dokumen->jenisJaminan)
                @php
                    $formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
                @endphp
                <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)
                        @include('lpj::surveyor.components.' . str_replace('-', '_', $kategori), [
                            'dokumen' => $dokumen,
                        ])
                    @endforeach
                @endif
            @endif
        @endforeach


            <div class="card bg-white rounded-lg shadow-md">
                <div class="card-body">
                    <div class=" 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($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</span>
                                    </label>
                                    <div class="input-group w-full flex flex-col gap-2">
                                        <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 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-{{ $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>

                                    <!-- Delete button to remove photo -->
                                    <button type="button" class="btn btn-danger btn-sm delete-btn"
                                        onclick="deletePhoto('{{ $index }}')">
                                        <i class="ki-filled ki-trash"></i>
                                    </button>
                                </div>
                        @endforeach
                </div>
            @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">

                            <img id="foto_rute-preview" src="" alt="Foto Rute" class="mt-2 h-auto"
                                style="display: none; width: 30rem;">
                            <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="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 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="rute">
                            <img id="foto_gerbang-preview"
                                src="{{ isset($formFoto['gerbang']) ? asset('storage/' . $formFoto['gerbang']) : '' }}"
                                alt="Foto Gerbong" class="mt-2 max-w-full h-auto"
                                style="{{ isset($formFoto['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">
                </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 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>
                            <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_object']) ? asset('storage/' . $formFoto['object_jaminan'][$view['index']]['foto_object']) : '' }}"
                                    alt="{{ $view['label'] }}" class="mb-2 w-48 h-auto"
                                    onchange="previewImage(this, 'foto_object_jaminan_preview_{{ $view['index'] }}')" style="{{ isset($formFoto['foto_object']) ? '' : 'display: none;' }} width: 30rem;">

                                <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">
                                    <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) && 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
            @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="w-full ">
                    <div class=" 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($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="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>

                                @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>
                                <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="basement"
                                    src="{{ isset($formFoto['basement']) ? asset('storage/' . old('basement', $formFoto['basement'])) : '#' }}"
                                    alt="Gambar basement" style="width: 30rem;" onerror="this.style.display='none';"
                                    onchange="previewImage(this, 'basement')">
                                <div class="input-group w-full flex gap-2">
                                    <input id="inputLantai" 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>
                        @error('foto_lantai_unit.*')
                            <span class="alert text-danger text-sm">{{ $message }}</span>
                        @enderror
                    </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 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($formFoto['lingkungan']))
                @foreach ($formFoto['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">
                                <img src="{{ asset('storage/' . old('foto_lingkungan', $item['foto_lingkungan'])) }}"
                                    alt="Gambar Pendamping" style="width: 30rem;">

                                <div class="input-group w-full flex gap-2">
                                    <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" 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" 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 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">

                        <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>
        </div> --}}
    </div>


    <!-- Modal Kamera -->
    <div class="modal fade" data-modal="true" id="cameraModal" data-backdrop="" data-keyboard="false">
        <div class="modal-content">

            <div class="modal-header">
                <h3 class="modal-title">Ambil Foto</h3>
                <button class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true" id="closeModal">
                    <i class="ki-outline ki-cross"></i>
                </button>
            </div>
            <!-- Camera Interface -->
            <div class="modal-body">
                <div class="camera-container relative">
                    <video id="video" class="w-full h-auto" autoplay playsinline></video>
                    <canvas id="canvas" class="hidden w-full h-auto"></canvas>
                    <canvas id="drawingCanvas" class="hidden absolute top-0 left-0 w-full h-full"></canvas>
                    <div id="textOverlay" class="position-absolute top-0 left-0 w-100 h-100 pointer-events-none">
                        <!-- Text elements will be added here dynamically -->
                    </div>
                </div>

                <div class="modal-footer mt-2">
                    <div id="cameraControls" class="flex justify-center gap-2 mt-4">
                        <button id="startButton" class="btn btn-primary">
                            <i class="ki-outline ki-camera"></i> Start Camera
                        </button>
                        <button id="takePhotoButton" class="btn btn-success" disabled>
                            <i class="ki-outline ki-photograph"></i> Ambil Foto
                        </button>
                        <button id="switchButton" class="btn btn-info" disabled>
                            <i class="ki-outline ki-arrows-circle"></i> Switch Camera
                        </button>
                    </div>

                    <!-- Editor Controls -->
                    <div id="editorControls" class=" flex flex-wrap gap-2 mt-4">
                        <div class="drawing-tools flex gap-2">

                            <button class="tool-btn btn btn-sm" data-tool="brush">
                                <i class="ki-filled ki-brush"></i>
                            </button>
                            <button class="tool-btn btn btn-sm" data-tool="rectangle">
                                <i class="ki-filled ki-frame"></i>
                            </button>
                            <button class="btn btn-light btn-sm tool-btn" data-tool="arrow">
                                <i class="ki-duotone ki-arrow-right fs-2"></i>
                            </button>
                            <button class="tool-btn btn btn-sm" data-tool="circle">
                                <i class="ki-filled ki-mouse-circle"></i>
                            </button>
                            <button class="tool-btn btn btn-sm" data-tool="text">
                                <i class="ki-filled ki-text"></i>
                            </button>
                        </div>

                        <div class="drawing-settings flex gap-2">
                            <input type="color" id="colorPicker" class="w-8 h-8 rounded">
                            <div class="flex items-center gap-2">
                                <input type="range" id="brushSize" min="1" max="20" value="5"
                                    class="range range-sm">
                                <span id="brushSizeValue" class="text-sm">5px</span>
                            </div>
                            <input type="text" id="textInput" class="input" placeholder="Enter text">
                            <button type="button" class="btn btn-primary" id="confirmTextBtn">Add Text</button>
                        </div>

                        <div class="history-controls flex gap-2">
                            <button id="undoButton" class="btn btn-sm">
                                <i class="ki-filled ki-arrows-loop"></i>
                            </button>
                            <button id="resetButton" class="btn btn-sm">
                                <i class="ki-outline ki-trash"></i>
                            </button>
                        </div>

                        <div class="final-controls flex gap-2">
                            <button type="button" class="btn btn-light btn-sm" data-modal-dismiss="true">Cancel</button>
                            <button id="backButton" class="btn btn-warning btn-sm">
                                <i class="ki-outline ki-arrow-left"></i> Kembali
                            </button>
                            <button id="saveButton" class="btn btn-success btn-sm">
                                <i class="ki-outline ki-check"></i> Simpan
                            </button>

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



@push('scripts')
    <script>
        function previewImage(input, previewId) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#' + previewId).attr('src', e.target.result).show();
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $('#' + previewId).hide();
            }
        }


        function submitFoto() {
            const formElement = $('#formFoto')[0];
            const formData = new FormData(formElement);
            for (const [key, value] of formData.entries()) {
                console.log(`Key: ${key}, Value: ${value}`);
            }

            // Disable the button and show the spinner
            $('#saveButtonFoto').prop('disabled', true);
            $('#saveButtonFotoText').hide();
            $('#saveButtonSpinner').show();

            $.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) {
                    //     window.location.href =
                    //         '{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=foto';
                    // }
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    let errors = xhr.responseJSON?.errors;
                    $('.alert').text('');
                    if (errors) {
                        $.each(errors, function(key, value) {
                            $(`#error-${key}`).text(value[0]);
                        });
                    }
                    console.error('Terjadi error:', error); // Menampilkan pesan error di konsol
                    console.log('Status:', status);
                    console.log('Response:', xhr.responseText);
                    console.log(errors);
                },
                complete: function() {
                    // Re-enable the button and hide the spinner
                    $('#saveButtonFoto').prop('disabled', false);
                    $('#saveButtonFotoText').show();
                    $('#saveButtonSpinner').hide();
                }
            });
        }
    </script>
    @include('lpj::surveyor.js.camera-editor')


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const ruteLainnyaDiv = document.getElementById("ruteLainnya");
            const lantaiLainnyaDiv = document.getElementById("lantaiLainnya");

            // Function to add delete event listeners to existing buttons
            function addDeleteListeners(container) {
                container.querySelectorAll(".delete-button").forEach(button => {
                    button.addEventListener("click", function() {
                        this.closest(
                            ".flex.items-baseline.flex-wrap.lg\\:flex-nowrap.gap-2\\.5.mb-5"
                        ).remove();
                    });
                });
            }

            // Add delete listeners to existing buttons
            addDeleteListeners(ruteLainnyaDiv);
            addDeleteListeners(lantaiLainnyaDiv);

            function createNewDiv(container, inputName) {
                const newDiv = document.createElement("div");
                newDiv.className = "flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5";
                newDiv.innerHTML = `
            <label class="flex flex-col form-label max-w-56">
                Masukkan nama ${inputName}
            </label>
            <div class="flex flex-wrap items-baseline w-full">
                <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_${inputName}[]">
                    </div>
                    <div class="flex flex-wrap items-baseline w-full">
                        <div class="input-group w-full flex gap-2">
                            <input id="inputPendamping" type="file" name="foto_${inputName}"
                                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-button">
                        <i class="ki-filled ki-trash"></i>
                    </button>
                </div>
            </div>
        `;
                container.appendChild(newDiv);
                addDeleteListeners(container);
            }

            document.getElementById("btnAddMore").addEventListener("click", function() {
                createNewDiv(ruteLainnyaDiv, "rute_lainnya");
            });

            document.getElementById("btnAddMoreObject").addEventListener("click", function() {
                createNewDiv(lantaiLainnyaDiv, "lantai_lainnya");
            });
        });



        const style = document.createElement('style');
        style.textContent = `
        .draggable-text {
            z-index: 1000;
        }
        .draggable-text:hover {
            outline: 1px dashed #666;
        }
    `;
        document.head.appendChild(style);
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize camera editor
            const editor = new UniversalCameraEditor();

            // Get all camera buttons
            const cameraButtons = document.querySelectorAll('#btnCamera');
            const modal = document.getElementById('cameraModal');
            const closeModal = document.getElementById('closeModal');

            // Current input field to update
            let currentInputField = null;

            // Confirm text button


            // Handle camera button click
            cameraButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const inputContainer = this.closest('.input-group');
                    currentInputField = inputContainer.querySelector('input[type="file"]');
                    modal.classList.remove('hidden');
                    modal.classList.add('modal-open');
                    editor.startCamera();
                });
            });


            closeModal.addEventListener('click', function() {
                modal.classList.add('hidden');
                editor.closeCamera();
            });



            // Override save function
            editor.saveAndUpload = async function() {
                try {
                    // Membuat canvas akhir
                    const finalCanvas = document.createElement('canvas');
                    finalCanvas.width = this.canvas.width;
                    finalCanvas.height = this.canvas.height;
                    const ctx = finalCanvas.getContext('2d');

                    // Menggambar foto asli dan hasil edit di canvas akhir
                    ctx.drawImage(this.canvas, 0, 0);
                    ctx.drawImage(this.drawingCanvas, 0, 0);

                    // Konversi canvas ke Blob dan buat file
                    finalCanvas.toBlob(async (blob) => {
                        const file = new File([blob], `camera_photo_${Date.now()}.jpg`, {
                            type: "image/jpeg"
                        });

                        // Membuat FileList dan memperbarui field input
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);

                        if (currentInputField) {
                            currentInputField.files = dataTransfer.files;

                            // Trigger event "change" untuk memperbarui tampilan
                            const event = new Event('change', {
                                bubbles: true
                            });
                            currentInputField.dispatchEvent(event);

                            // Tampilkan preview jika container preview ada
                            const previewContainer = currentInputField.closest('.input-group')
                                .querySelector('.preview-container');
                            if (previewContainer) {
                                const img = document.createElement('img');
                                img.src = URL.createObjectURL(file);
                                img.className = 'w-full h-32 object-cover rounded-lg';
                                previewContainer.innerHTML = ''; // Bersihkan container preview
                                previewContainer.appendChild(img); // Tambah gambar preview
                            }
                        }

                        // Menutup modal
                        const modal = document.getElementById('cameraModal');
                        modal.classList.remove('show');
                        modal.style.display = 'none';
                        modal.setAttribute('aria-hidden', 'true');
                        document.body.classList.remove('modal-open');

                        // Menghapus backdrop modal jika ada
                        const backdrop = document.querySelector('.modal-backdrop');
                        if (backdrop) {
                            backdrop.remove();
                        }

                        // Hentikan stream kamera
                        if (editor.stream) {
                            editor.stream.getTracks().forEach(track => track.stop());
                            editor.stream = null;
                        }

                        // Mengatur ulang ke kondisi awal (reset kamera)
                        editor.closeCamera()

                    }, 'image/jpeg', 0.8);

                } catch (error) {
                    console.error('Error saving photo:', error);
                    alert('Error saving photo. Please try again.');
                }
            };

        });




        // Preview for regular file input change
        document.addEventListener('change', function(e) {
            if (e.target && e.target.type === 'file') {
                const file = e.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    const previewContainer = e.target.closest('.input-group').querySelector('.preview-container');
                    if (previewContainer) {
                        const img = document.createElement('img');
                        img.src = URL.createObjectURL(file);
                        img.className = 'w-full h-32 object-cover rounded-lg';
                        previewContainer.innerHTML = '';
                        previewContainer.appendChild(img);
                    }
                }
            }
        });



        // Handle escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const modal = document.getElementById('cameraModal');
                if (modal.classList.contains('modal-open')) {
                    modal.classList.remove('modal-open');
                    modal.classList.add('hidden');
                    if (editor.stream) {
                        editor.stream.getTracks().forEach(track => track.stop());
                    }
                }
            }
        });





        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