@push('style')
@push('style')

<link rel="stylesheet" type="text/css" href="/editor/trix.css">
<link rel="stylesheet" href="/assets/extensions/choices.js/public/assets/styles/choices.css">

<link rel="stylesheet" href="/assets/extensions/filepond/filepond.css">
<link rel="stylesheet" href="/assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.css">
<link rel="stylesheet" href="/assets/extensions/toastify-js/src/toastify.css">
<link rel="stylesheet" href="/map/leaflet.css"
integrity=""
crossorigin=""/>
<style>
.modal.tambah-pohon .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
}

.modal.tambah-pohon.show .modal-dialog {
    transform: translateY(0);
}

.tambah-pohon {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
}
.tambah-pohon .modal-header {
    border-bottom: none; 
}
trix-toolbar [data-trix-button-group="file-tools"] {
    display: none;
}

/* responsive */
@media (max-width: 560px) {
    .tambah-pohon .text-header {
        font-size: 12px;
    }
    .tambah-pohon .label-size {
        font-size: 10px;
    }
    .tambah-pohon .btn-submit {
        font-size: 10px;
    }
    .tambah-pohon .text-error {
        font-size: 8px;
    }
    .map { height: 250px; z-index: 0;}
    trix-editor.trix-size {
        font-size: 10px !important;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .tambah-pohon .text-header {
        font-size: 14px;
    }
    .tambah-pohon .label-size {
        font-size: 12px;
    }
    .tambah-pohon .btn-submit {
        font-size: 12px;
    }
    .tambah-pohon .text-error {
        font-size: 9px;
    }
    .map { height: 250px; z-index: 0;}
    trix-editor.trix-size {
        font-size: 12px !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tambah-pohon .text-header {
        font-size: 16px;
    }
    .tambah-pohon .label-size {
        font-size: 14px;
    }
    .tambah-pohon .btn-submit {
        font-size: 14px;
    }
    .tambah-pohon .text-error {
        font-size: 11px;
    }
    .map { height: 300px; z-index: 0;}
}

@media (min-width: 1201px) {
    .tambah-pohon .text-header {
        font-size: 18px;
    }
    .tambah-pohon .label-size {
        font-size: 16px;
    }
    .tambah-pohon .btn-submit {
        font-size: 16px;
    }
    .tambah-pohon .text-error {
        font-size: 12px;
    }
    .map { height: 350px; z-index: 0;}
}
</style>
@endpush

<style>
@media (max-width: 560px) {
    .img-edit {
        height: 100px;
    }
    .btn-delete-img {
        width: 20px; height: 20px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .img-edit {
        height: 150px;
    }
    .btn-delete-img {
        width: 30px; height: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .img-edit {
        height: 200px;
    }
    .btn-delete-img {
        width: 40px; height: 40px;
    }
}

@media (min-width: 1201px) {
    .img-edit {
        height: 200px;
    }
    .btn-delete-img {
        width: 40px; height: 40px;
    }
}

.img-edit {
    width: 100%;
    object-fit: cover;
} 
.delete-image {
    position: absolute;
    bottom: -18px;
}
</style>
@endpush

<!-- Modal -->
<div class="modal fade tambah-pohon" id="edit-pohon" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-xl-down modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-4">
                    <button type="" class="btn btn-lg" data-bs-dismiss="modal">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                </div>
                <div class="col-4 text-center text-header" style="margin-top: 10px">Edit Data Pohon</div>
            </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <form id="edit-pohon-form" action="/penanaman/edit" method="POST" enctype="multipart/form-data">
                @csrf
                @php
                    $pivots = DB::table('pohon_jenis_pohons')->where('pohon_id', $pohon->id)->get();
                @endphp
                <input type="hidden" name="pohon_id" id="pohon_id" value="{{ $pohon->id }}">
                <input type="hidden" name="dokumentasi_id" id="dokumentasi_id" value="{{ @$dokumentasi->id }}">
                <div class="row">
                    <div class="col-12 mb-2">
                        <label for="jenis_pohon_id_edit" class="label-size">Jenis Pohon<span class=" text-danger">* </span></label>
                        <div class="form-group">
                            <select class="choices form-select @error('jenis_pohon_id_edit')
                                is-invalid
                                @enderror" multiple="multiple" name="jenis_pohon_id_edit[]" id="jenis_pohon_id_edit">
                                @foreach ($jenis_pohons as $jenis_pohon)
                                    <option value="{{ $jenis_pohon->id }}"
                                        {{ (collect(old('jenis_pohon_id_edit', $pivots->pluck('jenis_pohon_id')->toArray()))->contains($jenis_pohon->id)) ? 'selected':'' }}>
                                        {{ $jenis_pohon->nama }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-error" id="jenis_pohon_id_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>
                    <div class="col-12 mb-2" >
                        <label for="kawasan_id" class="label-size">Jumlah Pohon<span class=" text-danger">* </span></label>
                        <div id="list-jumlah-pohon">
                            @forelse ($pohon->jenis_pohon as $jenis_pohon)
                                <div class="form-group">
                                    <label for="" class="label-jumlah-pohon">Jumlah Pohon {{ $jenis_pohon->nama }}</label>
                                    <input type="number" class="form-control input-jumlah-pohon" name="jumlah_pohon[{{ $jenis_pohon->id }}]" placeholder="Jumlah Pohon..." value="{{ $pohon->getJumlahPohon($jenis_pohon->id) }}">
                                </div>
                            @empty
                                <p>Silahkan Pilih Jenis Pohon</p>
                            @endforelse
                            
                        </div>
                    </div>
                    <div class="col-12 mb-2">
                        <label for="kawasan_id_edit" class="label-size">Kawasan<span class=" text-danger">* </span></label>
                        <div class="form-group">
                            <select class="choices form-select" name="kawasan_id_edit" id="kawasan_id_edit">
                                <option value=" "></option>
                                @foreach ($kawasans as $kawasan)
                                    <option value="{{ $kawasan->id }}" 
                                        {{ old('kawasan_id_edit', $pohon->kawasan_id) == $kawasan->id ? 'selected' : '' }}>
                                        {{ $kawasan->nama }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-error" id="kawasan_id_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>
                    
                    <div class="col-12 mb-2">
                        <label for="status_kawasan_id_edit" class="label-size">Status Kawasan<span class=" text-danger">* </span></label>
                        <div class="form-group">
                            <select class="choices form-select" name="status_kawasan_id_edit" id="status_kawasan_id_edit">
                                <option value=" "></option>
                                @foreach ($status_kawasans as $status_kawasan)
                                    <option value="{{ $status_kawasan->id }}"
                                        {{ old('status_kawasan_id_edit', $pohon->status_kawasan_id) == $status_kawasan->id ? 'selected' : '' }}>
                                        {{ $status_kawasan->nama }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-error" id="status_kawasan_id_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>
                    {{-- <div class="col-12 mb-2">
                        <label for="umur_pohon_edit" class="label-size">Umur Pohon<span class=" text-danger">* </span>(Tahun)</label>
                        <div class="form-group">
                            <input type="number" id="umur_pohon_edit" class="form-control"
                                name="umur_pohon_edit" value="{{ old('umur_pohon_edit', $pohon->umur_pohon) }}">
                            <small class="text-error" id="umur_pohon_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div> --}}

                    <div class="col-12">
                        <div class="form-group">
                            <label for="tanggal_tanam">Tanggal Tanam<span class="text-danger">*</span></label>
                            <input type="date" id="tanggal_tanam" required value="{{ $pohon->tanggal_tanam }}" name="tanggal_tanam_edit" class="form-control round @error('tanggal_tanam')
                            is-invalid
                            @enderror" value="{{ old('tanggal_tanam') }}">
                            @error('tanggal_tanam')
                                <small class="text-danger ms-3 fst-italic">
                                    {{ $message }}
                                </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 mb-2">
                        <label for="luas_edit" class="label-size">Luas Kawasan<span class=" text-danger">* </span>(Hektar)</label>
                        <div class="form-group">
                            <input type="number" id="luas_edit" class="form-control"
                                name="luas_edit"  value="{{ old('luas_edit', $pohon->luas) }}">
                            <small class="text-error" id="luas_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>

                    <div class="col-12 mb-2">
                        <label for="user_id_edit" class="label-size">Pelaksana<span class=" text-danger">* </span></label>
                        <div class="form-group">
                            <select class="form-select" id="user_id_edit" name="user_id_edit">
                                <option value="{{ Auth::user()->id }}">{{ Auth::user()->nama }} ({{ Auth::user()->email }})</option>
                            </select>
                            <small class="text-error" id="user_id_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>

                    <div class="col-12 mb-2">
                        <label for="pengelola_id_edit" class="label-size">Pengelola<span class=" text-danger">* </span></label>
                        <div class="form-group">
                            <select class="choices form-select dropup" name="pengelola_id_edit" id="pengelola_id_edit" data-direction="ltr">
                                <option value=" "></option>
                                @foreach ($pengelolas as $pengelola)
                                    <option value="{{ $pengelola->id }}"
                                        {{ old('pengelola_id_edit', $pohon->pengelola_id) == $pengelola->id ? 'selected' : '' }}>
                                        {{ $pengelola->nama }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-error" id="pengelola_id_error_edit"
                                style="font-style: italic; color: red">
                            </small>
                        </div>
                    </div>
                    <div class="col-12 mb-2">
                        <label for="koordinat_edit" class="label-size">Koordinat Pohon<span class=" text-danger">* </span> <span>(perkelompok tanam)</span></label>
                        <div class="form-group position-relative has-icon-right">
                            <input type="text" id="koordinat_edit" class="form-control"
                                name="koordinat_edit" value="{{ old('koordinat_edit', $pohon->koordinat) }}"  onchange="moveMarkerToCoordinates()">
                            <div class="form-control-icon">
                                <i class="fa fa-map-marker"></i>
                            </div>
                        <small class="text-error" id="koordinat_error_edit"
                            style="font-style: italic; color: red">
                        </small>
                        </div>
                        <div id="mapid" class="mb-3 map"></div>
                    </div>

                    <div class="col-12 mb-2 mt-2">
                        <div class="col-4 text-center mx-auto text-header" style="margin-top: 10px">Dokumentasi Penanaman</div>
                    </div>

                    <div class="col-12 mb-2">
                        <label for="judul_edit" class="label-size">Judul Kegiatan<span class="text-danger">*</span></label>
                        <input type="text" id="judul_edit" name="judul_edit" class="form-control round @error('judul_edit')
                        is-invalid
                        @enderror" value="{{ old('judul_edit', @$dokumentasi->judul) }}">
                        <small class="text-error" id="judul_error_edit"
                            style="font-style: italic; color: red">
                        </small>
                    </div>
                    <div class="col-12 mb-2">
                        <label for="deskripsi_edit" class="label-size">Deskripsi Kegiatan<span class="text-danger">*</span></label>
                        <input id="deskripsi_edit" type="hidden" name="deskripsi_edit" value="{{ old('deskripsi_edit', @$dokumentasi->deskripsi) }}">
                        <trix-editor class="trix-size" input="deskripsi_edit"></trix-editor>
                        <small class="text-error" id="deskripsi_error_edit"
                            style="font-style: italic; color: red">
                        </small>
                    </div>
                    <div class="col-12 mb-2">
                        <label for="image_edit" class="label-size">Foto</label>
                        {{-- <input type="file" class="with-validation-filepond" multiple data-max-file-size="10MB" id="image_edit" name="image_edit[]"> --}}
                        <input type="file" class="multiple-files-filepond" id="image_edit" name="image_edit[]" multiple>
                        <small class="text-error" id="image_error_edit"
                            style="font-style: italic; color: red">
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-success btn-submit" type="button" onclick="editForm()">Submit Data</button>
                    </div>
                </div>
            </form>
            <div class="row mt-3">
                <div class="col-12">
                    <div class="card-body">
                        <div id="carasoul" class="carousel slide" data-bs-ride="carousel">
                          <div class="carousel-inner">
                            @foreach ($dok_images as $key => $dok_image)
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/' . $dok_image->image) }}" class="d-block img-edit" alt="...">
                                    <div class="carousel-caption delete-image">
                                        <form class="deleteImageForm" action="/dokumentasi-admin/delete-img/{{ $dok_image->image }}" method="POST">
                                            @csrf
                                            <button type="submit" class="mx-auto btn btn-danger rounded-circle btn-delete-img" style="padding: 0;" >
                                                <i class="the-icon fa-fw select-all fas"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                            
                          </div>
                          <a class="carousel-control-prev" href="#carasoul" role="button" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                          </a>
                          <a class="carousel-control-next" href="#carasoul" role="button" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                          </a>
                        </div>
                      </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('script')
<script type="text/javascript" src="/editor/trix.umd.min.js"></script>
<script src="/assets/extensions/choices.js/public/assets/scripts/choices.js"></script>
<script src="/assets/static/js/pages/form-element-select.js"></script>

<script src="/assets/extensions/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="/assets/extensions/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-filter/filepond-plugin-image-filter.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="/assets/extensions/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
<script src="/assets/extensions/filepond/filepond.js"></script>
<script src="/assets/extensions/toastify-js/src/toastify.js"></script>
<script src="/assets/static/js/pages/filepond.js?v=1"></script>

<script src="/map/leaflet.js"
integrity=""
crossorigin=""></script>

<script>
var koordinat = {!! json_encode($pohon->koordinat) !!};

const map_edit = L.map('mapid').setView([{{ $pohon->koordinat }}], 12);

// map
function loadMapEdit() {
    L.tileLayer('https://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}',{
        maxZoom: 21,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map_edit);
}

$('#edit-pohon').on('shown.bs.modal', function () {      
    loadMapEdit();
    setTimeout(function() {
        map_edit.invalidateSize();
    }, 0);
})

// custom marker
var greenIcon = L.icon({
    iconUrl: '/map/marker.png',
    iconSize:     [32, 50], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

if (koordinat) {
    var coordinates = koordinat.split(', '); // Pisahkan koordinat menjadi latitude dan longitude
    var latitude = parseFloat(coordinates[0]);
    var longitude = parseFloat(coordinates[1]);
    
    // custom marker
    var redIcon = L.icon({
        iconUrl: '/map/marker-edit.png',
        iconSize:     [32, 50], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    // Buat marker dan tambahkan ke peta
    let marker_edit = L.marker([latitude, longitude], { icon: redIcon }).addTo(map_edit);
    
    // Tampilkan popup jika perlu
    marker_edit.bindPopup("Koordinat : " + latitude + ", " + longitude).openPopup();
}

marker_edit = {};

// Fungsi untuk memindahkan marker ke koordinat yang diinput
function moveMarkerToCoordinates() {
    const koordinatInput = document.getElementById('koordinat_edit').value;
    const [latitude, longitude] = koordinatInput.split(', ').map(parseFloat);

    if (!isNaN(latitude) && !isNaN(longitude) && latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180) {
        if (marker_edit !== undefined) {
            map_edit.removeLayer(marker_edit);
        }
        // var popup = L.popup()
        //     .setLatLng([latitude, longitude])
        //     .setContent("Koordinat : " + latitude + ", " + longitude)
        //     .openOn(map_edit);
        var popupContent = `<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Koordinat: ${latitude}, ${longitude}</div>`;
        var popup = L.popup()
            .setLatLng([latitude, longitude])
            .setContent(popupContent)
            .openOn(map_edit);
        marker_edit = L.marker([latitude, longitude], { icon: greenIcon }).addTo(map_edit);
        map_edit.setView([latitude, longitude], 19);
    } else {
        Swal.fire({
            icon: 'info',
            title: 'Tidak Valid!',
            text: 'Koordinat tidak valid. Harap masukkan koordinat yang valid.',
        })
        document.getElementById('koordinat_edit').value = "{{ $pohon->koordinat }}";
        if(marker_edit != undefined) {
            map_edit.removeLayer(marker_edit);
        }
    }
}

map_edit.on('click', function(e) {
    // alert(e.latlng);
    let latitude = e.latlng.lat.toString().substring(0, 15);
    let longitude = e.latlng.lng.toString().substring(0, 15);

    if(marker_edit != undefined) {
        map_edit.removeLayer(marker_edit);
    }
    var popup = L.popup()
        .setLatLng([latitude, longitude])
        .setContent("Koordinat : " + latitude + ", " + longitude)
        .openOn(map_edit);
    marker_edit = L.marker([latitude, longitude], {icon: greenIcon}).addTo(map_edit);

    // Mengisi input koordinat dengan nilai latitude dan longitude
    document.getElementById('koordinat_edit').value = latitude + ", " + longitude;
})

// Cek apakah ada koordinat yang disimpan di local storage saat halaman dimuat
document.addEventListener('DOMContentLoaded', function () {
    // Pastikan halaman sepenuhnya dimuat sebelum memeriksa koordinat dan menampilkan marker
    const koordinatInput = document.getElementById('koordinat_edit').value;
    if (koordinatInput) {
        moveMarkerToCoordinates();
    }
});
</script>

<script>
function editForm() {
    const form = document.querySelector('form#edit-pohon-form'); 

    document.getElementById('jenis_pohon_id_error_edit').innerHTML = '';
    document.getElementById('kawasan_id_error_edit').innerHTML = '';
    document.getElementById('status_kawasan_id_error_edit').innerHTML = '';
    // document.getElementById('umur_pohon_error_edit').innerHTML = '';
    document.getElementById('luas_error_edit').innerHTML = '';
    document.getElementById('user_id_error_edit').innerHTML = '';
    document.getElementById('pengelola_id_error_edit').innerHTML = '';
    document.getElementById('koordinat_error_edit').innerHTML = '';
    document.getElementById('judul_error_edit').innerHTML = '';
    document.getElementById('deskripsi_error_edit').innerHTML = '';
    document.getElementById('image_error_edit').innerHTML = '';

    // Mendapatkan nilai koordinat dari input
    const koordinatInput = document.getElementById('koordinat_edit').value;

    // Membuat regular expression untuk memeriksa format koordinat
    const koordinatRegex = /^[-+]?\d+(\.\d+)?, [-+]?\d+(\.\d+)?$/;
    
    // Mengirimkan formulir dengan Fetch API
    if (!koordinatRegex.test(koordinatInput)) {
        // Format koordinat tidak sesuai
        document.getElementById('koordinat_error_edit').innerHTML = 'Format koordinat tidak valid. Gunakan format "latitude, longitude".';
        document.getElementById('koordinat_edit').value = '';
    }

    fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}', 
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.errors) {
            // Tampilkan pesan kesalahan di bawah bidang yang sesuai dengan ID yang sesuai
            if (data.errors.jenis_pohon_id_edit) {
                document.getElementById('jenis_pohon_id_error_edit').innerHTML  = data.errors.jenis_pohon_id_edit[0];
            }
            if (data.errors.kawasan_id_edit) {
                document.getElementById('kawasan_id_error_edit').innerHTML  = data.errors.kawasan_id_edit[0];
            }
            if (data.errors.status_kawasan_id_edit) {
                document.getElementById('status_kawasan_id_error_edit').innerHTML  = data.errors.status_kawasan_id_edit[0];
            }
            if (data.errors.umur_pohon_edit) {
                document.getElementById('umur_pohon_error_edit').innerHTML  = data.errors.umur_pohon_edit[0];
            }
            if (data.errors.umur_pohon_edit) {
                document.getElementById('umur_pohon_error_edit').innerHTML  = data.errors.umur_pohon_edit[0];
            }
            if (data.errors.user_id_edit) {
                document.getElementById('user_id_error_edit').innerHTML  = data.errors.user_id_edit[0];
            }
            if (data.errors.pengelola_id_edit) {
                document.getElementById('pengelola_id_error_edit').innerHTML  = data.errors.pengelola_id_edit[0];
            }
            if (data.errors.koordinat_edit) {
                document.getElementById('koordinat_error_edit').innerHTML  = data.errors.koordinat_edit[0];
            }
            if (data.errors.judul_edit) {
                document.getElementById('judul_error_edit').innerHTML  = data.errors.judul_edit[0];
            }
            if (data.errors.deskripsi_edit) {
                document.getElementById('deskripsi_error_edit').innerHTML  = data.errors.deskripsi_edit[0];
            }
            if (data.errors.image_edit) {
                document.getElementById('image_error_edit').innerHTML  = data.errors.image_edit[0];
            }
        } else {
            form.reset();
            $('#edit-pohon').modal('hide');
            Swal.fire({
                icon: 'success',
                title: 'Succes!',
                text: data.message,
                timer: 3000, // Waktu dalam milidetik (3 detik dalam contoh ini)
                timerProgressBar: true, // Menampilkan progress bar waktu
                showConfirmButton: true // Menyembunyikan tombol OK
            }).then((result) => {
                // Setelah tampilan pesan ditutup, arahkan pengguna ke halaman lain
                var pohonId = data.pohon_id;
                var dokumentasiId = data.dokumentasi_id;
                window.location.href = '/penanaman/' + pohonId;
            });
        }
    })
    .catch(error => {
        console.error('Terjadi kesalahan:', error);
    });
}

</script>
    

@endpush