@extends('layouts.main')

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

@section('content')
    @include('lpj::assetsku.includenya')
    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        <form id="form-memo" method="POST" class="grid gap-5 w-full">
            <div class="card">
                <div class="card-header bg-agi-50">
                    <h3 class="uppercase card-title">
                        Memo Antar Kantor
                    </h3>
                    <div class="flex gap-2 items-center">
                        @php
                            use Illuminate\Support\Facades\Route;
                        @endphp
                        @if (Auth::user()->hasAnyRole(['administrator', 'senior-officer', 'EO Appraisal', 'DD Appraisal']) &&
                                Route::currentRouteName('otorisator.show'))
                            <a href="{{ route('otorisator.show', ['id' => $permohonan->id, 'type' => request('header')]) }}"
                                class="btn btn-xs btn-info">
                                <i class="ki-filled ki-exit-left"></i> Back
                            </a>
                        @elseif (Auth::user()->hasAnyRole(['administrator', 'surveyor']) && Route::currentRouteName('penilai.show'))
                            <a href="{{ route('penilai.show', $permohonan->id) }}" class="btn btn-xs btn-info">
                                <i class="ki-filled ki-exit-left"></i> Back
                            </a>
                        @endif
                    </div>
                </div>
                <div class="grid gap-5 card-body">
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Kepada</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="text" name="kepada" class="w-full input" placeholder="Masukkan..."
                                value=" {{ $memo->kepada ?? '' }}">
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Dari</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="text" name="dari" class="w-full input" placeholder="Masukkan..."
                                value="{{ $memo->dari ?? '' }}">
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Nomor Memo</label>
                        <div class="flex flex-wrap w-full items-base line">
                            <input type="text" name="nomor_memo" class="w-full input" placeholder="Masukkan..."
                                value="{{ $nomorLaporan ?? '' }}" @readonly(true)>
                        </div>
                    </div>
                    {{-- 250109828129/ --}}

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Tanggal</label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="date" name="tanggal" class="w-full input" placeholder="Masukkan..."
                                value="{{ $memo->tanggal ?? '' }}">
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Perihal</label>
                        <div class="flex flex-wrap w-full items-base line">
                            <input type="text" name="perihal" class="w-full input" placeholder="Masukkan..."
                                value="{{ $memo->perihal ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full bg-white rounded-lg border shadow-md card border-agi-100">
                <div class="card-header bg-agi-50">
                    <h1 class="font-medium text-gray-900 uppercase text-md">Sehubungan dengan permintaan BAGI Cabang
                        <b>{{ $permohonan->branch->name }}</b>, untuk dilakukan survey untuk penilaian baru/review, calon
                        debitur/debitur an
                        <b>{{ $permohonan->debiture->name }}</b>,dengan deskripsi sebagai berikut :
                    </h1>
                </div>
                <div class="card-body">
                    <div class="grid gap-5 w-full">
                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <label class="form-label max-w-56">Jenis Aset</label>

                            <div class="flex flex-wrap items-baseline w-full">

                                <select id="jenis_asset_tidak_sesuai" class="w-full input" name="jenis_asset_tidak_sesuai">
                                    <option value="">Select Jenis asset</option>
                                    @foreach ($basicData['jenisJaminan'] as $item)
                                        <option value="{{ $item->name }}"
                                            {{ ($memo->jenis_asset_tidak_sesuai ?? '') == $item->name ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                            <div class="grid gap-2.5 w-full">
                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="lokasi" class="form-label max-w-56">Lokasi</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <input type="text" id="lokasi" name="lokasi" class="w-full input"
                                            placeholder="Masukkan Jl."
                                            value="{{ $memo->lokasi->lokasi ?? old('lokasi') }}">
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="province_code" class="form-label max-w-56">Provinsi</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <select id="province_code" name="province_code" class="w-full input">
                                            <option value="">Pilih Provinsi</option>
                                            @foreach ($provinces as $item)
                                                <option value="{{ $item->code }}"
                                                    {{ ($memo->lokasi->province_code ?? '') == $item->code ? 'selected' : '' }}>
                                                    {{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="city_code" class="form-label max-w-56">Kota/Kabupaten</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <select id="city_code" name="city_code" class="w-full select">
                                            <option value="">Pilih Kota/Kabupaten</option>
                                            @if (isset($cities))
                                                @foreach ($cities as $item)
                                                    <option value="{{ $item->code }}"
                                                        {{ ($memo->lokasi->city_code ?? '') == $item->code ? 'selected' : '' }}>
                                                        {{ $item->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="district_code" class="form-label max-w-56">Kecamatan</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <select id="district_code" name="district_code" class="w-full select">
                                            <option value="">Pilih Kecamatan</option>
                                            @if (isset($districts))
                                                @foreach ($districts as $item)
                                                    <option value="{{ $item->code }}"
                                                        {{ ($memo->lokasi->district_code ?? '') == $item->code ? 'selected' : '' }}>
                                                        {{ $item->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="village_code" class="form-label max-w-56">Kelurahan</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <select id="village_code" name="village_code" class="w-full select">
                                            <option value="">Pilih Kelurahan</option>
                                            @if (isset($villages))
                                                @foreach ($villages as $item)
                                                    <option value="{{ $item->code }}"
                                                        {{ ($memo->lokasi->village_code ?? '') == $item->code ? 'selected' : '' }}>
                                                        {{ $item->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="address" class="form-label max-w-56">Address</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <input type="text" id="address" name="address" class="w-full input"
                                            placeholder="Masukkan Jl."
                                            value="{{ $memo->lokasi->address ?? old('address') }}">
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="tanggal_survey" class="form-label max-w-56">Tanggal Survey</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <input type="date-time" id="tanggal_survey" name="tanggal_survey"
                                            class="w-full input" placeholder="Masukkan Tanggal Survey"
                                            value="{{ $permohonan->penilaian->updated_at ?? old('tanggal_survey') }}"
                                            @readonly(true)>
                                    </div>
                                </div>

                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                    <label for="penilai" class="form-label max-w-56">Penilai</label>
                                    <div class="flex flex-wrap items-baseline w-full">
                                        <input type="text" id="penilai" name="penilai" class="w-full input"
                                            placeholder="Masukkan Penilai"
                                            value="{{ $memo->lokasi->penilai ?? old('penilai') }}">
                                    </div>
                                </div>

                            </div>
                        </div>


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


            <div class="card">
                <div class="card-header bg-agi-50">
                    <h3 class="uppercase card-title">
                        Dokumen
                    </h3>
                </div>
                <div class="grid gap-5 card-body">

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Terlampir</label>
                        <div id="fakta-positif-container" class="flex flex-wrap items-baseline w-full">

                            <div class="flex gap-2 items-center mt-2 w-full terlampir textarea-group">
                                <textarea class="mt-2 textarea" name="terlampir[]" rows="3">{{ $memo->terlampir[0] ?? old('terlampir', '') }}</textarea>
                            </div>

                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Berdasarkan hasil survey dapat disampaikan sbb:</label>
                        <div id="hasil_survey" class="flex flex-wrap items-baseline w-full">
                            @if (!empty($memo->hasil_survey))
                                @foreach ($memo->hasil_survey as $index => $positif)
                                    <div class="flex gap-2 items-center mt-2 w-full hasil_survey textarea-group">
                                        <textarea class="mt-2 textarea" name="hasil_survey[]" rows="3">{{ old("hasil_survey.$index", $positif) }}</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 hasil_survey textarea-group">
                                    <textarea class="mt-2 textarea" name="hasil_survey[]" rows="3">{{ old('hasil_survey.0', '') }}</textarea>
                                    <button class="btn btn-danger btn-sm remove-btn" type="button"
                                        style="display: none;">
                                        <i class="ki-outline ki-trash"></i>
                                    </button>
                                </div>
                            @endif
                            <button type="button" class="mt-5 btn btn-primary btn-sm"
                                onclick="addClonableItem('hasil_survey', 'hasil_survey')">
                                <i class="ki-outline ki-plus"></i>
                            </button>
                        </div>
                    </div>


                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">Kesimpulan dan saran</label>
                        <div id="fakta-negatif-container" class="flex flex-wrap items-baseline w-full">
                            @if (!empty($memo->kesimpulan_saran))
                                @foreach ($memo->kesimpulan_saran as $index => $negatif)
                                    <div class="flex gap-2 items-center mt-2 w-full fakta_negatif textarea-group">
                                        <textarea class="mt-2 textarea" name="kesimpulan_saran[]" rows="3">{{ old("kesimpulan_saran.$index", $negatif) }}</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 kesimpulan_saran textarea-group">
                                    <textarea class="mt-2 textarea" name="kesimpulan_saran[]" rows="3">{{ old('kesimpulan_saran.0') }}</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-kesimpulan_saran" class="text-sm alert text-danger"></em>
                                </div>
                            @endif
                            <button type="button" class="mt-5 btn btn-primary btn-sm"
                                onclick="addClonableItem('fakta-negatif-container', 'kesimpulan_saran')">
                                <i class="ki-outline ki-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border shadow-md card border-agi-100">
                <div class="card-body">
                    <div class="flex justify-between items-center py-4">
                        <h1 class="font-medium text-gray-900 text-md">Upload Foto</h1>
                    </div>

                    <div class="dropzone" id="dropzone-upload">
                        <div class="dz-message needsclick" data-foto-type="upload_foto">
                            <i class="text-3xl ki-duotone ki-file-up text-primary"><span class="path1"></span><span
                                    class="path2"></span></i>
                            <div class="ms-4">
                                <h3 class="mb-1 text-gray-900 fs-5 fw-bold">Drop files here or click to upload.</h3>
                                <span class="text-gray-500 fs-7 fw-semibold">Upload up to 10 files</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div id="existing-photos" class="flex gap-5"></div>
                </div>
            </div>

            {{-- @include('lpj::penilai.components.foto-lampiran') --}}

            <div class="flex gap-5 justify-end card-footer">
                @if (Auth::user()->hasAnyRole(['senior-officer', 'surveyor', 'administrator','EO Appraisal']))
                    <a class="btn btn-primary" onclick="saveMemo()"
                        {{ $permohonan->status == 'proses-paparan' || ($permohonan->status == 'proses-laporan' && Auth::user()->hasAnyRole(['surveyor'])) ? 'disabled' : '' }}>
                        <i class="ki-filled ki-save-2"></i>
                        Simpan
                    </a>
                @endif
                @if (Auth::user()->hasAnyRole(['administrator', 'senior-officer', 'EO Appraisal', 'DD Appraisal']))
                    <a class="btn btn-info"
                        href="{{ route('penilai.lampiran') }}?permohonanId={{ request('permohonanId') }}&documentId={{ request('documentId') }}&jaminanId={{ request('jaminanId') }}&statusLpj=1">
                        Lampiran Foto dan Dokumen
                    </a>
                    <a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('documentId'), 'jenis_jaminan_id' => request('jaminanId')]) }}"
                        class="btn btn-light">
                        <i class="ki-filled ki-printer"></i> Hasil Inspeksi
                    </a>
                    <a class="btn btn-success"
                        onclick="checkLaporan('{{ $permohonan->id }}', '{{ request('documentId') }}', {{ request('jaminanId') }}, )">
                        <i class="ki-filled ki-printer"></i> Cetak Laporan
                    </a>
                @endif
            </div>

        </form>
    </div>
@endsection
@include('lpj::surveyor.js.utils')
@push('scripts')
    <script>
        Dropzone.autoDiscover = false;
        let myDropzone;

        document.addEventListener('DOMContentLoaded', function() {
            myDropzone = new Dropzone("#dropzone-upload", {
                url: "{{ route('penilai.uploadTempPhoto') }}?permohonan_id={{ $permohonan->id }}&dokument_id={{ request('documentId') }}", // Temporary upload route
                paramName: "file",
                maxFilesize: 5, // MB
                acceptedFiles: "image/*",
                uploadMultiple: false,
                parallelUploads: 1,
                autoProcessQueue: true,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                init: function() {
                    this.on("success", function(file, response) {
                        file.serverId = response.id; // Store the server's file ID
                    });

                    // Load existing photos
                    loadExistingPhotos();
                }
            });
        });

        function loadExistingPhotos() {
            const existingPhotosContainer = document.getElementById('existing-photos');
            if (!existingPhotosContainer) return;

            @if (isset($memo) && isset($memo->foto))
                let existingPhotos;
                try {
                    existingPhotos = @json($memo->foto);
                } catch (e) {
                    console.error('Error parsing existing photos:', e);
                    return;
                }

                if (Array.isArray(existingPhotos)) {
                    const BASE_URL = "{{ asset('storage/') }}";
                    existingPhotos.forEach(function(photoPath) {
                        if (typeof photoPath === 'string') {
                            const photoDiv = document.createElement('div');
                            photoDiv.className = 'col-md-3 mb-3';

                            const img = document.createElement('img');
                            img.src = BASE_URL + '/' + photoPath;
                            img.className = 'img-fluid';
                            img.style.maxHeight = '150px';
                            const deleteButton = document.createElement('button');

                            deleteButton.className = 'btn btn-danger btn-sm mt-2';
                            deleteButton.textContent = 'Hapus';
                            deleteButton.type = 'button';
                            deleteButton.onclick = function() {
                                handleDeletePhoto(photoPath, photoDiv);
                            };

                            photoDiv.appendChild(img);
                            photoDiv.appendChild(deleteButton);
                            existingPhotosContainer.appendChild(photoDiv);

                            if (myDropzone) {
                                let mockFile = {
                                    name: photoPath.split('/').pop(),
                                    size: 12345
                                };
                                myDropzone.emit("addedfile", mockFile);
                                myDropzone.emit("thumbnail", mockFile, photoPath);
                                myDropzone.emit("complete", mockFile);
                                mockFile.previewElement.classList.add("dz-success");
                                mockFile.previewElement.classList.add("dz-complete");
                            }
                        }
                    });
                } else {
                    console.error('Existing photos is not an array:', existingPhotos);
                }
            @endif
        }

        function handleDeletePhoto(photoPath, photoDiv) {
            const BASE_URL = "{{ asset('storage/') }}";
            Swal.fire({
                title: 'Hapus Foto?',
                text: "Foto ini akan dihapus secara permanen!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('penilai.deleteTempPhoto') }}",
                        method: 'DELETE',
                        data: {
                            path: photoPath,
                            permohonan_id: {{ $permohonan->id ?? 0 }},
                            dokument_id: '{{ request('documentId') ?? '' }}',
                        },
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function() {
                            Swal.fire('Dihapus!', 'Foto berhasil dihapus.', 'success');
                            photoDiv.remove();
                        },
                        error: function() {
                            Swal.fire('Gagal!', 'Foto gagal dihapus.', 'error');
                        }
                    })

                }
            });
        }

        function saveMemo() {
            const form = document.getElementById('form-memo');
            const formData = new FormData(form);

            const jsonData = {
                kepada: formData.get('kepada'),
                dari: formData.get('dari'),
                nomor_memo: formData.get('nomor_memo'),
                tanggal: formData.get('tanggal'),
                perihal: formData.get('perihal'),
                jenis_asset_tidak_sesuai: formData.get('jenis_asset_tidak_sesuai'),
                lokasi: {
                    lokasi: formData.get('lokasi') || '',
                    address: formData.get('address') || '',
                    province_code: formData.get('province_code') || '',
                    city_code: formData.get('city_code') || '',
                    district_code: formData.get('district_code') || '',
                    village_code: formData.get('village_code') || '',
                    tanggal_survey: formData.get('tanggal_survey') || '',
                    penilai: formData.get('penilai') || '',
                },
                terlampir: (formData.getAll('terlampir[]') || []),
                hasil_survey: (formData.getAll('hasil_survey[]') || []),
                kesimpulan_saran: (formData.getAll('kesimpulan_saran[]') || []),
            };

            showLoadingSwal('Mengirim data ke server...');

            const urlParams = new URLSearchParams(window.location.search);
            const permohonanId = urlParams.get('permohonanId');
            const documentId = urlParams.get('documentId');

            // Create a new FormData object to send both JSON and files
            const sendFormData = new FormData();
            sendFormData.append('permohonan_id', permohonanId);
            sendFormData.append('document_id', documentId);
            sendFormData.append('memo', JSON.stringify(jsonData));

            const requestUrl = `{{ route('penilai.storeMemoWithPhotos') }}`;

            $.ajax({
                url: requestUrl,
                type: 'POST',
                data: sendFormData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    hideLoadingSwal();
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((response) => {
                            if (response.isConfirmed) {
                                window.location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    hideLoadingSwal();
                    Swal.fire({
                        title: 'Error!',
                        text: 'Terjadi kesalahan saat mengirim data',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    </script>
@endpush
