@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <style>
        .pdf-preview {
            width: 100%;
            max-width: 100%;
            border: 1px solid #ddd;
            margin-top: 10px;
        }
    </style>

    @include('lpj::assetsku.includenya')

    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        <div class="min-w-full border card border-agi-100">
            <div class="card-header bg-agi-50">
                <h3 class="card-title">Denah</h3>
                <div class="flex gap-2 items-center">
                    <a href="{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=denah" class="btn btn-xs btn-info">
                        <i class="ki-filled ki-exit-left"></i> Back
                    </a>
                </div>
            </div>
            <div class="mx-8">
                @include('lpj::component.detail-jaminan', ['status' => true])
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <form id="formDenah" method="POST" enctype="multipart/form-data" class="w-full">
                    @csrf
                    <input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id">
                    <input type="hidden" name="dokument_id" value="{{ request('documentId') }}">
                    <input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">
                    <!-- Container untuk daftar denah -->
                    <div id="denah-container">
                        @if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
                            @foreach ($formDenah['denahs'] as $index => $denah)
                                <div class="grid gap-5 p-4 mb-5 rounded border denah-item">
                                    <div class="flex flex-wrap gap-4">
                                        <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                                            <label class="form-label max-w-56">
                                                <span class="form-label">Upload Denah (Foto/PDF)</span>
                                            </label>
                                            <div class="grid gap-5 w-full">
                                                <!-- Preview Container -->
                                                <div class="preview-container-{{ $index }}">
                                                    @if (isset($denah['foto_denah']))
                                                        @php
                                                            $fileExtension = pathinfo(
                                                                $denah['foto_denah'],
                                                                PATHINFO_EXTENSION,
                                                            );
                                                        @endphp

                                                        @if (in_array($fileExtension, ['jpg', 'jpeg', 'png']))
                                                            <img src="{{ asset('storage/' . $denah['foto_denah']) }}"
                                                                style="max-width: 30rem;">
                                                        @elseif($fileExtension === 'pdf')
                                                            <embed src="{{ asset('storage/' . $denah['foto_denah']) }}"
                                                                type="application/pdf" width="100%" height="500px">
                                                        @endif
                                                    @endif
                                                </div>

                                                <div class="flex gap-2 w-full input-group">
                                                    <input type="file" name="foto_denah[]"
                                                        class="w-full file-input file-input-bordered"
                                                        data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
                                                        onchange="previewFile(this)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                                        <div class="w-full">
                                            <div class="flex flex-wrap gap-4">
                                                <div class="flex gap-4 justify-center items-center w-full">
                                                    <label class="form-label max-w-56">
                                                        <span class="form-label">Nama Denah</span>
                                                    </label>
                                                    <input type="text" name="nama_denah[]" class="w-full input"
                                                        value="{{ $denah['nama_denah'] ?? '' }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <div class="flex flex-wrap gap-4">
                                                <div class="flex gap-4 justify-center items-center w-full">
                                                    <label class="form-label max-w-56">
                                                        <span class="form-label"> Luas</span>
                                                    </label>
                                                    <input type="text" name="luas_denah[]"
                                                        class="w-full input number-format"
                                                        value="{{ isset($denah['luas_denah']) ? $denah['luas_denah'] . ' m²' : '' }}"
                                                        onkeyup="formatNumber(this)">
                                                </div>
                                            </div>
                                        </div>
                                        @if ($index > 0)
                                            <div class="flex items-center">
                                                <button type="button" class="btn btn-danger remove-denah">
                                                    <i class="ki-filled ki-minus"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <!-- Tambahkan satu elemen default jika tidak ada data -->
                            <div class="grid gap-5 p-4 mb-5 rounded border denah-item">
                                <!-- Isi dengan elemen default seperti sebelumnya -->
                                <div class="flex flex-wrap gap-4">
                                    <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                                        <label class="form-label max-w-56">
                                            <span class="form-label">Upload Denah (Foto/PDF)</span>
                                        </label>
                                        <div class="grid gap-5 w-full">
                                            <div class="preview-container-0">
                                                <!-- Preview akan ditampilkan di sini -->
                                            </div>

                                            <div class="flex gap-2 w-full input-group">
                                                <input type="file" name="foto_denah[]"
                                                    class="w-full file-input file-input-bordered" data-index="0"
                                                    accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                                    <div class="w-full">
                                        <div class="flex flex-wrap gap-4">
                                            <div class="flex gap-4 justify-center items-center w-full">
                                                <label class="form-label max-w-56">
                                                    <span class="form-label">Nama Denah</span>
                                                </label>
                                                <input type="text" name="nama_denah[]" class="w-full input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full">
                                        <div class="flex flex-wrap gap-4">
                                            <div class="flex gap-4 justify-center items-center w-full">
                                                <label class="form-label max-w-56">
                                                    <span class="form-label"> Luas</span>
                                                </label>
                                                <input type="text" name="luas_denah[]" class="w-full input number-format"
                                                    onkeyup="formatNumber(this)">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>


                    <div class="p-4 w-full">
                        <div class="flex flex-wrap gap-4">
                            <div class="flex gap-4 justify-center items-center w-full">
                                <label class="form-label max-w-56">
                                    <span class="form-label">Total Luas</span>
                                </label>
                                <input type="text" name="total_luas" id="totalLuas" class="w-full input number-format" readonly>

                            </div>
                        </div>
                    </div>
                    <div class="flex gap-2 justify-end" style="margin-right: 20px; margin-top: 20px">
                        <button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
                            <span id="saveButtonText">Save</span>
                        </button>
                        <button class="btn btn-primary" type="button" id="tambahDenah">
                            Tambah Denah
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @include('lpj::surveyor.js.utils')
    <script>
        const datas = @json($denah);

        let denahIndex = 1; // Mulai dari 1 karena sudah ada satu elemen default

        document.addEventListener('DOMContentLoaded', function() {
            // Format number input
            document.querySelectorAll('.number-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatNumber(this);
                });
                input.addEventListener('focus', function() {
                    if (this.value === 'm²') {
                        this.setSelectionRange(0, 0); // Kursor di awal
                    }
                });
            });



            // Tambah Denah
            document.getElementById('tambahDenah').addEventListener('click', function() {
                const denahContainer = document.getElementById('denah-container');
                const newDenah = createDenahElement(denahIndex);
                denahContainer.appendChild(newDenah);
                denahIndex++;

                const newInputs = newDenah.querySelectorAll('.number-format');
                newInputs.forEach(input => {
                    input.addEventListener('input', function() {
                        formatNumber(this);
                    });

                    input.addEventListener('focus', function() {
                        if (this.value === 'm²') {
                            this.setSelectionRange(0, 0); // Kursor di awal
                        }
                    });
                });
            });

            // Event delegation untuk tombol hapus denah
            document.getElementById('denah-container').addEventListener('click', function(e) {
                if (e.target.closest('.remove-denah')) {
                    e.target.closest('.denah-item').remove();
                }
            });
        });

        /**
         * Menghitung total luas dari semua input denah
         * Mendukung format angka dengan koma sebagai pemisah desimal
         * dan menghapus format ribuan (titik) sebelum perhitungan
         */
        function calculateTotalLuas() {
            let totalLuas = 0;

            const luasInputs = document.querySelectorAll('input[name="luas_denah[]"]');
            luasInputs.forEach(input => {
                // Hapus format ribuan (titik) dan spasi
                let cleanValue = input.value.replace(/\./g, '').replace(/\s/g, '');

                // Ganti koma dengan titik untuk desimal
                cleanValue = cleanValue.replace(',', '.');

                // Parse ke float
                const value = parseFloat(cleanValue);
                if (!isNaN(value)) {
                    totalLuas += value;
                }
            });

            const totalLuasInput = document.getElementById('totalLuas');
            totalLuasInput.value = totalLuas ? `${totalLuas.toLocaleString('id-ID')} m²` : '';

            // Log untuk debugging
            console.log('Total luas dihitung:', totalLuas);
        }

        // Tambahkan event listener untuk setiap input luas_denah[]
        document.addEventListener('input', function(e) {
            if (e.target && e.target.name === 'luas_denah[]') {
                calculateTotalLuas();
            }
        });

        // Jalankan hitung ulang saat halaman dimuat (jika ada nilai default)
        document.addEventListener('DOMContentLoaded', calculateTotalLuas);


        function createDenahElement(index) {
            const denahItem = document.createElement('div');
            denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
            denahItem.innerHTML = `
            <div class="flex flex-wrap gap-4">
                <div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
                    <label class="form-label max-w-56">
                        <span class="form-label">Upload Denah (Foto/PDF)</span>
                    </label>
                    <div class="grid gap-5 w-full">
                        <div class="preview-container-${index}">
                            <!-- Preview akan ditampilkan di sini -->
                        </div>
                        <div class="flex gap-2 w-full input-group">
                            <input type="file" name="foto_denah[]"
                                class="w-full file-input file-input-bordered"
                                data-index="${index}"
                                accept=".jpg,.jpeg,.png,.pdf"
                                onchange="previewFile(this)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
                <div class="w-full">
                    <div class="flex flex-wrap gap-4">
                        <div class="flex gap-4 justify-center items-center w-full">
                            <label class="form-label max-w-56">
                                <span class="form-label">Nama Denah</span>
                            </label>
                            <input type="text" name="nama_denah[]" class="w-full input">
                        </div>
                    </div>
                </div>
                <div class="w-full">
                    <div class="flex flex-wrap gap-4">
                        <div class="flex gap-4 justify-center items-center w-full">
                            <label class="form-label max-w-56">
                                <span class="form-label"> Luas</span>
                            </label>
                            <input type="text" name="luas_denah[]"
                                class="w-full input number-format"
                                onkeyup="formatNumber(this)">
                        </div>
                    </div>
                </div>
                <div class="flex items-center">
                    <button type="button" class="btn btn-danger remove-denah">
                        <i class="ki-filled ki-minus"></i>
                    </button>
                </div>
            </div>
        `;
            return denahItem;
        }

        function previewFile(input) {
            const index = input.getAttribute('data-index');
            const previewContainer = document.querySelector(`.preview-container-${index}`);
            const file = input.files[0];

            // Hapus preview sebelumnya
            previewContainer.innerHTML = '';

            if (file) {
                if (file.type.startsWith('image/')) {
                    // Jika file adalah gambar
                    const img = document.createElement('img');
                    img.style.maxWidth = '30rem';

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        img.src = e.target.result;
                    }
                    reader.readAsDataURL(file);

                    previewContainer.appendChild(img);
                } else if (file.type === 'application/pdf') {
                    // Jika file adalah PDF
                    const pdfEmbed = document.createElement('embed');
                    pdfEmbed.src = URL.createObjectURL(file);
                    pdfEmbed.type = 'application/pdf';
                    pdfEmbed.width = '100%';
                    pdfEmbed.height = '500px';
                    pdfEmbed.className = 'pdf-preview';

                    previewContainer.appendChild(pdfEmbed);
                }
            }
        }

        function submitDenah() {
            showLoadingSwal('Mengirim data ke server...');

            document.querySelectorAll('.number-format').forEach(input => {
                if (input.value.includes('m²')) {
                    input.value = input.value.replace('m²', '').trim();
                }
            });

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

            $.ajax({
                url: '{{ route('surveyor.storeDenah') }}',
                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]) }}';
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                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>
@endpush
