@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- Section Content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        {{-- Manual: Dependesi modal manual --}}
        {{-- Photoswipe --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/photoswipe.css">
    @endpush

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Detail Pengaju</h5>
                    </div>
                    {{-- Menampilkan NIK dan Nama pengaju --}}
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nik" class="form-label">NIK</label>
                                <input type="text" id="nik" class="form-control" value="{{ $pengaju->nik }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" id="nama" class="form-control" value="{{ $pengaju->nama }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="departemen" class="form-label">Departemen</label>
                                <input type="text" id="departemen" class="form-control" value="{{ $pengaju->departemen }}"
                                    readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="mb-0">Detail Pengajuan Cuti</h5>
                    </div>
                    <div class="card-body">
                        {{-- Dropdown untuk memilih histori cuti (jika ada) --}}
                        @if ($historiPermohonanCuti->isNotEmpty())
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <label for="histori_dropdown" class="form-label">Pilih Histori Permohonan Cuti</label>
                                    <select id="histori_dropdown" class="form-select" onchange="updateFields(this)">
                                        <option value="">{{ $permohonanCuti->updated_at }} - Diedit oleh
                                            {{ $permohonanCuti->user_update }}
                                        </option>
                                        @foreach ($historiPermohonanCuti as $index => $histori)
                                            <option value="{{ $index }}">
                                                {{ $histori->created_at }} -
                                                {{ $histori->user_update ? 'Diedit oleh ' . $histori->user_update : 'Dibuat oleh ' . $histori->user_create }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif

                        {{-- Display Leave Application Details --}}
                        <div class="row">
                            {{-- ID Cuti --}}
                            <div class="col-md-6 mb-3">
                                <label for="idcuti" class="form-label">ID Cuti</label>
                                <input type="text" id="idcuti" class="form-control" value="{{ $permohonanCuti->idcuti }}"
                                    readonly>
                            </div>
                            {{-- Jenis Cuti --}}
                            <div class="col-md-6 mb-3">
                                <label for="jenis_cuti_id" class="form-label">Jenis Cuti</label>
                                <input type="text" id="jenis_cuti_id" class="form-control"
                                    value="{{ $permohonanCuti->jenis_cuti_id }}" readonly>
                            </div>
                        </div>

                        <div class="row">
                            {{-- Karyawan Pengganti --}}
                            <div class="col-md-6 mb-3">
                                <label for="nik_karyawan_pengganti" class="form-label">Karyawan Pengganti</label>
                                <input type="text" id="nik_karyawan_pengganti" class="form-control"
                                    value="{{ $permohonanCuti->nik_karyawan_pengganti }}" readonly>
                            </div>
                            {{-- Alasan Cuti --}}
                            <div class="col-md-6 mb-3">
                                <label for="alasan" class="form-label">Alasan Cuti</label>
                                <textarea id="alasan" class="form-control" readonly>{{ $permohonanCuti->alasan }}</textarea>
                            </div>
                        </div>

                        <div class="row">
                            {{-- Tanggal Mulai --}}
                            <div class="col-md-6 mb-3">
                                <label for="tanggal_mulai" class="form-label">Tanggal Mulai</label>
                                <input id="tanggal_mulai" type="text" class="form-control text-end"
                                    value="{{ old('tanggal_mulai', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_mulai)->format('d/m/Y')) }}"
                                    readonly>
                            </div>

                            {{-- Tanggal Berakhir --}}
                            <div class="col-md-6 mb-3">
                                <label for="tanggal_berakhir" class="form-label">Tanggal Berakhir</label>
                                <input id="tanggal_berakhir" type="text" class="form-control text-end"
                                    value="{{ old('tanggal_mulai', \Carbon\Carbon::createFromFormat('Y-m-d', $permohonanCuti->tanggal_berakhir)->format('d/m/Y')) }}"
                                    readonly>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3" id="tanggal_array">
                                <label for="tanggal" class="form-label">Tanggal yang Diambil</label>
                                <table class="table table-bordered table-striped" id="tanggal_table">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" style="width: 50px;">No</th>
                                            <th class="text-center">Tanggal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($permohonanCuti->tanggal_array as $index => $tanggal)
                                            @php
                                                $tanggalOrig = $tanggal->tanggal_cuti;
                                                $tanggal->tanggal_cuti = \Carbon\Carbon::createFromFormat(
                                                    'Y-m-d',
                                                    $tanggalOrig,
                                                )->format('d-m-Y');
                                            @endphp
                                            <tr>
                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                <td class="tanggal_cuti_{{ $index }} text-center" data-order="{{ $tanggalOrig }}">
                                                    {{ $tanggal->tanggal_cuti }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            {{-- Total Hari --}}
                            <div class="col-md-6 mb-3">
                                <label for="total_hari" class="form-label">Total Hari</label>
                                <input type="text" class="form-control text-end" value="{{ $permohonanCuti->total_hari }}"
                                    readonly>
                            </div>
                            {{-- Jumlah Cuti Minus yang Dipakai --}}
                            {{-- Hanya tampilkan jika jumlahnya tidak 0 --}}
                        </div>

                        <div class="row">
                            @if ($permohonanCuti->jumlah_cuti_minus_yang_dipakai != 0)
                                <div class="col-md-12 mb-3">
                                    <label for="jumlah_cuti_minus_yang_dipakai" class="form-label">Jumlah Cuti Minus yang
                                        Dipakai</label>
                                    <input type="text" id="jumlah_cuti_minus_yang_dipakai" class="form-control text-end"
                                        value="{{ $permohonanCuti->jumlah_cuti_minus_yang_dipakai }}" readonly>
                                </div>
                            @endif
                            {{-- Pekerjaan yang Belum Diselesaikan --}}
                            <div class="col-md-6 mb-3">
                                <label for="pekerjaan_yang_belum_diselesaikan" class="form-label">Pekerjaan yang Belum
                                    Diselesaikan</label>
                                <textarea id="pekerjaan_yang_belum_diselesaikan" class="form-control"
                                    readonly>{{ $permohonanCuti->pekerjaan_yang_belum_diselesaikan }}</textarea>
                            </div>
                        </div>

                        <div class="row">
                            {{-- Alamat --}}
                            <div class="col-md-6 mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <input type="text" id="alamat" class="form-control" value="{{ $permohonanCuti->alamat }}"
                                    readonly>
                            </div>
                            {{-- Nomor Telepon --}}
                            <div class="col-md-6 mb-3">
                                <label for="nomor_telepon" class="form-label">Nomor Telepon</label>
                                <input type="text" id="nomor_telepon" class="form-control"
                                    value="{{ $permohonanCuti->nomor_telepon }}" readonly>
                            </div>
                        </div>

                        {{-- Lampiran --}}
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="lampiran" class="form-label">Lampiran</label>
                                <div id="lampiran-preview" class="d-flex flex-wrap gap-2">
                                    @foreach ($permohonanCuti->lampiran as $lampiran)
                                        <div class="preview-item">
                                            <a href="{{ asset('storage/' . $lampiran->gambar_lampiran) }}" class="lampiran-link"
                                                data-pswp-width="{{ $lampiran->width }}"
                                                data-pswp-height="{{ $lampiran->height }}" target="_blank">
                                                <img src="{{ asset('storage/' . $lampiran->gambar_lampiran) }}" alt="Lampiran"
                                                    class="img-thumbnail" style="width: 100px; height: auto;">
                                            </a>
                                        </div>
                                    @endforeach

                                    {{-- Display a message if no attachments are available --}}
                                    @if ($permohonanCuti->lampiran->isEmpty())
                                        <div>Tidak ada lampiran yang tersedia.</div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Photoswipe Root -->
                        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="pswp__bg"></div>
                            <div class="pswp__scroll-wrap">
                                <div class="pswp__container">
                                    <div class="pswp__item"></div>
                                    <div class="pswp__item"></div>
                                    <div class="pswp__item"></div>
                                </div>
                                <div class="pswp__ui pswp__ui--hidden">
                                    <div class="pswp__top-bar">
                                        <div class="pswp__counter"></div>
                                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                                        <div class="pswp__preloader">
                                            <div class="pswp__preloader__icn">
                                                <div class="pswp__preloader__cut">
                                                    <div class="pswp__preloader__donut"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pswp__caption">
                                        <div class="pswp__caption__center"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Card untuk Persetujuan oleh Atasan --}}
                        @if (!collect($persetujuanAtasan)->isEmpty())
                            <div class="card mb-4">
                                <div class="card-header">
                                    Persetujuan oleh Atasan
                                </div>
                                <div class="card-body">
                                    @foreach ($persetujuanAtasan as $approval)
                                        <div class="mb-3">
                                            <h6 class="card-subtitle mb-2 text-muted">On Step: {{ $approval->on_step }}
                                            </h6>
                                            <p><strong>Atasan Pemberi Keputusan:</strong>
                                                {{ $approval->atasan_pemberi_keputusan }}
                                            </p>
                                            @if ($approval->status == 'menyetujui')
                                                <p><strong>Status:</strong> <span
                                                        style="color: green; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                                </p>
                                            @elseif ($approval->status == 'menolak')
                                                <p><strong>Status:</strong> <span
                                                        style="color: red; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                                </p>
                                            @else
                                                <p><strong>Status:</strong> <span
                                                        style="color: gray; font-weight: bold;">{{ ucfirst($approval->status) }}</span>
                                                </p>
                                            @endif
                                            <p><strong>Catatan:</strong> {{ $approval->catatan }}</p>
                                            <hr>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- Card untuk Persetujuan oleh Personalia --}}
                        <div class="card mb-4">
                            <div class="card-header">
                                Persetujuan oleh Personalia
                            </div>
                            <div class="card-body">
                                @if ($persetujuanPersonalia->status == 'disetujui')
                                    <p><strong>Status:</strong> <span style="color: green; font-weight: bold;">Menyetujui</span>
                                    </p>
                                @elseif ($persetujuanPersonalia->status == 'ditolak')
                                    <p><strong>Status:</strong> <span style="color: red; font-weight: bold;">Menolak</span>
                                    </p>
                                @else
                                    <p><strong>Status:</strong> <span style="color: gray; font-weight: bold;">Belum
                                            Memutuskan</span></p>
                                @endif
                                <p><strong>Catatan:</strong> {{ $persetujuanPersonalia->catatan_dari_personalia }}</p>
                            </div>
                        </div>

                        @if ($authorize->approval == '1')
                            <!-- Approval and Rejection Buttons -->

                            <div class="mb-4">
                                <!-- Approval and Rejection Buttons -->
                                @if ($permohonanCuti->status == 'disetujui')
                                    <!-- Button for 'menyetujui' status -->
                                    <button type="button" class="btn btn-sm btn-secondary mb-0"
                                        onclick="showSwal('Anda telah menyetujui')">
                                        <i class="fas fa-circle"></i><span class="font-weight-bold"> Anda telah
                                            menyetujui</span></button>
                                @elseif ($permohonanCuti->status == 'ditolak')
                                    <!-- Button for 'menolak' status -->
                                    <button type="button" class="btn btn-sm btn-secondary mb-0"
                                        onclick="showSwal('Anda telah menolak')">
                                        <i class="fas fa-ban"></i><span class="font-weight-bold"> Anda telah
                                            menolak</span></button>
                                @else
                                    <button type="button" class="btn btn-sm btn-primary mb-0"
                                        onclick="openModal('{{ encrypt($id) }}')" title="Setujui Data">
                                        <i class="fas fa-check"></i><span class="font-weight-bold"> Beri Keputusan</span>
                                    </button>
                                @endif
                            </div>
                        @endif

                        {{-- Tombol Kembali --}}
                        <div class="d-flex justify-content-end">
                            <button class="btn btn-secondary me-2" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    {{-- Photoswipe --}}
    <script src="{{ asset('/') }}assets/js/photoswipe.umd.min.js"></script>
    <script src="{{ asset('/') }}assets/js/photoswipe-lightbox.umd.min.js"></script>

    {{-- Show Lampiran --}}
    <script src="{{ asset('/') }}assets/js/show_lampiran.js"></script>


    {{-- JavaScript untuk mengubah field sesuai histori yang dipilih --}}
    <script>
        const historiData = @json($historiPermohonanCuti);

        function updateFields(select) {
            const selectedIndex = select.value;
            if (selectedIndex === "") {
                window.location.reload();
                return;
            }

            const selectedHistori = historiData[selectedIndex];

            document.getElementById('jenis_cuti_id').value = selectedHistori.jenis_cuti ?? '';
            document.getElementById('nik_karyawan_pengganti').value = selectedHistori.nik_karyawan_pengganti ?? '';
            document.getElementById('alasan').value = selectedHistori.alasan ?? '';
            document.getElementById('pekerjaan_yang_belum_diselesaikan').value = selectedHistori
                .pekerjaan_yang_belum_diselesaikan ?? '';
            document.getElementById('tanggal_mulai').value = selectedHistori.tanggal_mulai ?? '';
            document.getElementById('tanggal_berakhir').value = selectedHistori.tanggal_berakhir ?? '';
            document.getElementById('tanggal_array').style.display = 'none';
            document.getElementById('alamat').value = selectedHistori.alamat ?? '';
            document.getElementById('nomor_telepon').value = selectedHistori.nomor_telepon ?? '';

            // Update lampiran preview
            const lampiranPreviewContainer = document.getElementById('lampiran-preview');
            lampiranPreviewContainer.innerHTML = '';

            if (selectedHistori.histori_lampiran.length > 0) {
                selectedHistori.histori_lampiran.forEach((lampiran) => {
                    const anchor = document.createElement('a');
                    anchor.href = `{{ asset('storage/') }}/${lampiran.gambar_lampiran}`;
                    anchor.className = 'lampiran-link';

                    // Set atribut PhotoSwipe dari backend
                    // Ensure these are numbers for PhotoSwipe
                    anchor.setAttribute('data-pswp-width', parseInt(lampiran.width, 10) || 0);
                    anchor.setAttribute('data-pswp-height', parseInt(lampiran.height, 10) || 0);

                    const img = document.createElement('img');
                    img.src = anchor.href; // Set src for the image
                    img.alt = 'Lampiran';
                    img.className = 'img-thumbnail'; // Bootstrap class for some basic styling

                    // --- START OF MODIFIED/IMPROVED LOGIC ---
                    const originalWidth = parseFloat(lampiran.width);
                    const originalHeight = parseFloat(lampiran.height);

                    const desiredThumbnailMaxWidth = 100; // Max width for the thumbnail

                    if (originalWidth > 0 && originalHeight > 0) {
                        // Calculate dimensions for the thumbnail
                        const aspectRatio = originalHeight / originalWidth;
                        let thumbnailWidth = desiredThumbnailMaxWidth;
                        let thumbnailHeight = desiredThumbnailMaxWidth * aspectRatio;

                        // Optional: If you also want to cap the maximum height of a thumbnail
                        // const desiredThumbnailMaxHeight = 150; // Example max height
                        // if (thumbnailHeight > desiredThumbnailMaxHeight) {
                        //     thumbnailHeight = desiredThumbnailMaxHeight;
                        //     thumbnailWidth = thumbnailHeight / aspectRatio; // Recalculate width to maintain aspect ratio
                        // }

                        img.style.width = thumbnailWidth + 'px';
                        img.style.height = thumbnailHeight + 'px';

                        // Control how the image content fits into the dimensions:
                        // 'cover': Fills the dimensions, maintains aspect ratio, crops if necessary. Good for uniform look.
                        // 'contain': Fits entire image within dimensions, maintains aspect ratio, letterboxes if necessary.
                        img.style.objectFit = 'cover';
                    } else {
                        // Fallback for invalid or missing dimensions from backend
                        img.style.width = desiredThumbnailMaxWidth + 'px'; // Default width
                        img.style.height = desiredThumbnailMaxWidth + 'px'; // Default height (making it square)
                        img.style.objectFit = 'contain'; // Try to show what's there in a square box
                        img.alt = 'Lampiran (invalid dimensions)';
                        console.warn('Lampiran has invalid dimensions:', lampiran);
                    }
                    // --- END OF MODIFIED/IMPROVED LOGIC ---

                    anchor.appendChild(img);

                    const previewItem = document.createElement('div');
                    previewItem.className = 'preview-item'; // You might want to style this container
                    previewItem.appendChild(anchor);

                    lampiranPreviewContainer.appendChild(previewItem);
                });

                // Re-inisialisasi PhotoSwipeLightbox agar bisa memuat ulang galeri dinamis
                if (window.lampiranLightbox) {
                    window.lampiranLightbox.destroy();
                }

                window.lampiranLightbox = new PhotoSwipeLightbox({
                    gallery: '#lampiran-preview',
                    children: 'a.lampiran-link',
                    pswpModule: PhotoSwipe
                });
                window.lampiranLightbox.init();
            } else {
                lampiranPreviewContainer.innerHTML = '<div>Tidak ada lampiran yang tersedia.</div>';
            }
        }
    </script>

    <!-- Inisialisasi DataTables -->
    <script>
        $(document).ready(function () {
            $('#tanggal_table').DataTable({
                "paging": true, // Enable pagination
                "lengthChange": true, // Allow changing the number of rows per page
                "searching": true, // Enable search box
                "ordering": true, // Allow sorting by columns
                "info": true, // Show info about the table
                "autoWidth": false, // Disable auto-width adjustment
                "order": [[1, 'asc']],
                "columnDefs": [
                    { "targets": 1, "type": "date", "render": function (data, type, row, meta) {
                        if (type === 'sort') {
                            var cell = $('#tanggal_table').DataTable().cell(meta).node();
                            if (cell) {
                                var orderAttr = cell.getAttribute('data-order');
                                if (orderAttr) return orderAttr;
                            }
                            return data;
                        }
                        return data;
                    }}
                ]
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // get $permohonanCuti->tanggal_array
            let tanggalArray = @json($permohonanCuti->tanggal_array);
            // count the array

            // Ambil semua elemen dengan kelas 'tanggal_cuti'
            let tanggalElements = [];
            tanggalArray.forEach((tanggal, index) => {
                tanggalElements.push(document.querySelector(`.tanggal_cuti_${index}`));
            });

            // Fungsi untuk mengubah format tanggal
            function formatTanggal(tanggal) {
                // Pecah format "30-01-2025" menjadi [30, 01, 2025]
                let parts = tanggal.split("-");
                let date = new Date(parts[2], parts[1] - 1, parts[0]); // (tahun, bulan-1, hari)

                // Format tanggal ke "Jumat, 02 Februari 2024"
                let formattedDate = new Intl.DateTimeFormat('id-ID', {
                    weekday: 'long',
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                }).format(date);

                let options = {
                    weekday: 'long',
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                };
                let formattedDateParts = new Intl.DateTimeFormat('id-ID', options).formatToParts(date);

                let weekday = formattedDateParts.find(part => part.type === 'weekday').value;
                let day = formattedDateParts.find(part => part.type === 'day').value;
                let month = formattedDateParts.find(part => part.type === 'month').value;
                let year = formattedDateParts.find(part => part.type === 'year').value;

                return {
                    weekday,
                    day,
                    month,
                    year
                };
            }

            // Loop melalui setiap elemen tanggal dan format tanggalnya
            tanggalElements.forEach(function (tanggalElement) {
                let tanggal = tanggalElement.textContent
                    .trim(); // Mengambil teks tanggal dalam format "30-01-2025"
                let formattedDate = formatTanggal(tanggal); // Mendapatkan format tanggal baru

                // Update elemen dengan format gabungan: "Jumat, 10 September 2026"
                tanggalElement.textContent = formattedDate.weekday + ', ' + formattedDate.day + ' ' + formattedDate.month + ' ' + formattedDate.year;
            });
        });
    </script>

    <script>
        // Untuk ketika user sudah menyetujui/menolak
        function showSwal(message) {
            Swal.fire({
                title: 'Status',
                text: message,
                icon: 'info', // You can use 'success', 'error', or 'info'
                confirmButtonText: 'Ya',
                confirmButtonColor: '#028284'
            });
        }
    </script>

    {{-- Js untuk fitur memberi keputusan --}}
    <script>
        function openModal(primary) {
            window.currentPrimary = primary;

            Swal.fire({
                title: 'Konfirmasi Keputusan',
                html: `
                                <div style="text-align:left;">
                                    <label for="swalNote" style="font-weight:600; margin-bottom:6px; display:block;">
                                        Catatan (Bisa dikosongkan jika menyetujui):
                                    </label>
                                    <textarea id="swalNote" placeholder="Masukkan catatan..."
                                        style="width:100%; max-width:100%; box-sizing:border-box; min-height:120px; font-size:14px;"></textarea>
                                </div>
                            `,
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Setujui',
                denyButtonText: 'Tolak',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                denyButtonColor: '#dc3545',
                preConfirm: () => {
                    return {
                        note: document.getElementById('swalNote').value
                    };
                },
                preDeny: () => {
                    return {
                        note: document.getElementById('swalNote').value.trim()
                    };
                }
            }).then((result) => {
                const baseUrlApprove = "{{ URL::to('/approve/cuti/personalia') }}";
                const baseUrlReject = "{{ URL::to('/reject/cuti/personalia') }}";

                if (result.isConfirmed) {
                    submitFormSweet('approve', result.value, baseUrlApprove);
                }

                if (result.isDenied) {
                    if (!result.value.note) {
                        Swal.fire('Alasan wajib diisi', '', 'warning');
                        return;
                    }
                    submitFormSweet('reject', result.value, baseUrlReject);
                }
            });
        }

        // Fungsi submit form ke controller
        function submitFormSweet(type, data, baseUrl) {
            const url = `${baseUrl}/${window.currentPrimary}`;
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;

            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';

            const noteInput = document.createElement('input');
            noteInput.type = 'hidden';
            noteInput.name = 'note';
            noteInput.value = data.note;

            form.appendChild(csrfInput);
            form.appendChild(noteInput);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
@endpush