@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4" style="margin-bottom: 30px;">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'"><i
                                class="fas fa-chevron-left me-1"></i>Kembali</button>
                        <button type="submit" id="saveButton" class="btn btn-primary mb-0" onclick="saveData(event)"><i
                                class="fas fa-download me-1"></i>Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header py-2" style="margin-top: 20px;">
                        <h5 class="mb-0 pb-2">Header {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body py-3">
                        <form id="my-form" autocomplete="off">
                            @csrf
                            <div class="row mb-2">
                                {{-- <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="id" class="form-label me-2" style="min-width:100px;">ID</label>
                                        <input type="text" class="form-control" id="id" name="id" placeholder="-- Auto Generate --" readonly>
                                    </div>
                                </div> --}}
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="tanggal" class="form-label me-2"
                                            style="min-width:100px;">Tanggal</label>
                                        <input type="date" class="form-control" id="tanggal" name="tanggal"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="supplier" class="form-label me-2"
                                            style="min-width:100px;">Vendor</label>
                                        <select id="supplier" name="supplier" class="form-control">
                                            <option value="">-- Pilih Vendor --</option>
                                            @foreach ($supplier as $s)
                                                <option value="{{ $s->id }}">{{ $s->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="tipe_barang" class="form-label me-2" style="min-width:100px;">Tipe
                                            Barang</label>
                                        <select id="tipe_barang" name="tipe_barang" class="form-control">
                                            <option value="">-- Pilih Tipe --</option>
                                            <option value="Sparepart">Sparepart</option>
                                            <option value="Penunjang">Penunjang</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header py-2">
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tgrpo-tbl-detail" class="table table-bordered table-striped">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        <th style="text-align:center; border-color: #daecff;">Act</th>
                                        <th style="text-align:center; border-color: #daecff;">No</th>
                                        <th style="text-align:center; border-color: #daecff;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff;">Stok</th>
                                        <th style="text-align:center; border-color: #daecff;">Min Stok</th>
                                        <th style="text-align:center; border-color: #daecff;">Kelipatan</th>
                                        <th style="text-align:center; border-color: #daecff;">QTY</th>
                                        <th style="text-align:center; border-color: #daecff;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff;">Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-grpo">
                                    <tr id="add-row">
                                        <td colspan="11" class="text-left">
                                            <span type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                <i class="fas fa-plus"></i> Tambah
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Barang --}}
    <div class="modal fade bd-example-modal-lg" id="barangModal" tabindex="-1" aria-labelledby="barangModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="barangModalLabel">List Nama Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tbl-barang" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Kode Baru</th>
                                    <th style="border-color: #daecff;">Kode Lama</th>
                                    <th style="border-color: #daecff;">Nama</th>
                                    <th style="border-color: #daecff;">Stok</th>
                                    <th style="border-color: #daecff;">Min Stok</th>

                                    <th style="border-color: #daecff;">Satuan</th>
                                </tr>
                            </thead>
                            <tbody id="tbl-barang-body">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <style>
            .input-group .form-control {
                border-right: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-group .btn {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            .input-group.input-group-sm .form-control {
                height: calc(1.5em + .5rem + 2px);
            }

            .input-group .form-control:focus {
                box-shadow: none;
            }
        </style>
        <script>
            // All barang data from server, grouped by tipe
            const allBarang = @json($barang);

            // Filter barang by tipe and populate modal table
            function populateBarangModal(tipe) {
                const tipeNormalized = String(tipe || '').trim().toLowerCase();

                // Destroy DataTable first to avoid stale rows being restored on re-init.
                if ($.fn.DataTable.isDataTable('#tbl-barang')) {
                    $('#tbl-barang').DataTable().destroy();
                }

                const filtered = allBarang.filter(b => String(b.tipe || '').trim().toLowerCase() === tipeNormalized);
                console.log('[populateBarangModal] tipe dropdown:', tipe, '| tipeNormalized:', tipeNormalized);
                console.log('[populateBarangModal] allBarang count:', allBarang.length, '| filtered count:', filtered.length);
                console.log('[populateBarangModal] sample tipe values:', allBarang.slice(0, 5).map(b => b.tipe));
                const tbody = document.getElementById('tbl-barang-body');
                tbody.innerHTML = '';

                filtered.forEach(b => {
                    const tr = document.createElement('tr');
                    tr.dataset.id = b.id;
                    tr.dataset.kodeBaru = b.kode_baru;
                    tr.dataset.kodeLama = b.kode_lama;
                    tr.dataset.name = b.nama;
                    tr.dataset.stok = b.stok;
                    tr.dataset.minStok = b.min_stok;
                    tr.dataset.satuan = b.satuan_nama;
                    tr.dataset.satuanId = b.satuan_id;
                    tr.innerHTML =
                        '<td><button type="button" class="btn btn-primary btn-sm choose-barang mb-0">Pilih</button></td>' +
                        '<td>' + (b.kode_baru || '') + '</td>' +
                        '<td>' + (b.kode_lama || '') + '</td>' +
                        '<td>' + (b.nama || '') + '</td>' +
                        '<td>' + parseFloat(b.stok || 0) + '</td>' +
                        '<td>' + parseFloat(b.min_stok || 0) + '</td>' +
                        '<td>' + (b.satuan_nama || '') + '</td>';
                    tbody.appendChild(tr);
                });

                // Re-init DataTable with freshly populated rows.
                const dt = $('#tbl-barang').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [3, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data yang tersedia",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan data yang sesuai",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        sInfoFiltered: "(disaring dari _MAX_ total data)",
                        sSearch: "Cari:",
                    }
                });

                dt.on('draw', function() {
                    highlightSelectedBarang();
                });
                highlightSelectedBarang();
            }

            // Handle tipe_barang change
            document.getElementById('tipe_barang').addEventListener('change', function() {
                const tipe = this.value;
                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');
                if (rows.length > 0) {
                    Swal.fire({
                        title: 'Ganti Tipe Barang?',
                        text: 'Data detail akan dihapus jika tipe barang diganti.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Ganti',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            rows.forEach(r => r.remove());
                            rowIdx = 0;
                            populateBarangModal(tipe);
                        } else {
                            // Revert selection
                            this.value = this.dataset.prevValue || '';
                        }
                    });
                } else {
                    populateBarangModal(tipe);
                }
                this.dataset.prevValue = tipe;
            });

            function highlightSelectedBarang() {
                $('#tbl-barang tbody tr').removeClass('table-success').find('.choose-barang').removeClass('btn-success')
                    .addClass('btn-primary').text('Pilih').css('cursor', 'pointer');

                const selectedIds = new Set();
                const selectedCodesNoId = new Set();
                const allSelectedCodes = new Set();

                document.querySelectorAll('#tbody-grpo tr.form-row').forEach(row => {
                    const idVal = String(row.querySelector('[name="tmp_id_barang[]"]')?.value || '').trim();
                    const rawKode = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                    const kodeVal = rawKode.includes('|') ? rawKode.split('|')[0] : rawKode;

                    if (idVal) {
                        selectedIds.add(idVal);
                    } else if (kodeVal) {
                        selectedCodesNoId.add(kodeVal);
                    }

                    if (kodeVal) {
                        allSelectedCodes.add(kodeVal);
                    }
                });

                $('#tbl-barang tbody tr').each(function() {
                    const idBarang = String($(this).data('id') || '').trim();
                    const kodeBaru = String($(this).data('kode-baru') || '').trim();

                    let isSelected = false;
                    if (idBarang) {
                        isSelected = selectedIds.has(idBarang) || (kodeBaru && selectedCodesNoId.has(kodeBaru));
                    } else if (kodeBaru) {
                        isSelected = allSelectedCodes.has(kodeBaru);
                    }

                    if (isSelected) {
                        $(this).addClass('table-success');
                        $(this).find('.choose-barang').removeClass('btn-primary').addClass('btn-success').text(
                            'Terpilih').css('cursor', 'not-allowed');
                    }
                });
            }

            // Calculate recommended qty
            function calcRecommendedQty(stok, minStok, kelipatan) {
                console.log('[calcRecommendedQty] RAW input → stok:', stok, typeof stok, '| minStok:', minStok, typeof minStok,
                    '| kelipatan:', kelipatan, typeof kelipatan);
                stok = parseFloat(stok) || 0;
                minStok = parseFloat(minStok) || 0;
                kelipatan = parseFloat(kelipatan) || 0;


                if (stok >= minStok) {
                    console.log('[calcRecommendedQty] → RESULT: 0 (stok cukup)');
                    return 0;
                }
                var selisih = minStok - stok;
                console.log('[calcRecommendedQty] selisih:', selisih);
                if (kelipatan > 0) {
                    var result = Math.ceil(selisih / kelipatan) * kelipatan;
                    console.log('[calcRecommendedQty] → RESULT:', result, '(ceil(' + selisih + '/' + kelipatan + ')=' + Math
                        .ceil(selisih / kelipatan) + ' * ' + kelipatan + ')');
                    return result;
                }
                console.log('[calcRecommendedQty] → RESULT:', selisih, '(kelipatan=0, pakai selisih)');
                return selisih;
            }
        </script>
        <script>
            let rowIdx = 0;
            let activeRow = null;

            function parseNumberValue(value) {
                value = String(value ?? '').trim();

                if (value === '') return 0;

                // Kalau format ribuan: 20.000 atau 20,000 => jadi 20000
                if (/^\d{1,3}([.,]\d{3})+$/.test(value)) {
                    value = value.replace(/[.,]/g, '');
                } else {
                    value = value.replace(',', '.');
                }

                return parseFloat(value) || 0;
            }

            function calcRecommendedQty(stok, minStok, kelipatan) {
                stok = parseNumberValue(stok);
                minStok = parseNumberValue(minStok);
                kelipatan = parseNumberValue(kelipatan);

                if (stok >= minStok) {
                    return 0;
                }

                var selisih = minStok - stok;

                if (kelipatan > 0) {
                    return Math.ceil(selisih / kelipatan) * kelipatan;
                }

                return selisih;
            }

            function recalcQtyByRow($row) {
                var stok = $row.find('input[name="tmp_stok_display[]"]').val();
                var minStok = $row.find('input[name="tmp_min_stok_display[]"]').val();
                var kelipatan = $row.find('input[name="tmp_kelipatan_display[]"]').val();

                var qty = calcRecommendedQty(stok, minStok, kelipatan);

                $row.find('input[name="tmp_qty[]"]').val(qty);
            }

            document.addEventListener('DOMContentLoaded', () => {
                const tbody = document.getElementById('tbody-grpo');
                const btnAdd = document.getElementById('btnAddRow');

                btnAdd.addEventListener('click', () => {
                    const tipe = document.getElementById('tipe_barang').value;
                    if (!tipe) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Pilih Tipe Barang',
                            text: 'Silakan pilih tipe barang pada header terlebih dahulu.',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }

                    rowIdx += 10;
                    const formRow =
                        '<tr class="form-row">' +
                        '  <td class="text-center" style="white-space:nowrap;">' +
                        '    <button type="button" class="btn btn-danger btn-sm btn-cancel"><i class="fas fa-times"></i></button>' +
                        '  </td>' +
                        '  <td class="text-center">' + rowIdx +
                        '    <input type="hidden" name="tmp_urut[]" value="' + rowIdx + '">' +
                        '  </td>' +
                        '  <td>' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_nama_barang[]" class="form-control form-control-sm" placeholder="Pilih Barang…" readonly required>' +
                        '      <input type="hidden" name="tmp_id_barang[]">' +
                        '      <input type="hidden" name="tmp_nama_barang_id[]">' +
                        '      <input type="hidden" name="tmp_kode_lama[]">' +
                        '      <input type="hidden" name="tmp_satuan_id[]">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </td>' +
                        '  <td><input name="tmp_kode_lama_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td><input name="tmp_kode_baru_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td style="width:80px"><input name="tmp_stok_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td style="width:80px"><input name="tmp_min_stok_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td style="width:80px"><input type="number" step="1" min="0" name="tmp_kelipatan_display[]" class="form-control form-control-sm kelipatan-input" required></td>' +
                        '  <td style="width:120px"><input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required></td>' +
                        '  <td style="width:120px"><input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled></td>' +
                        '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                        '</tr>';

                    const addRow = document.getElementById('add-row');
                    addRow.insertAdjacentHTML('beforebegin', formRow);
                });

                $(document).on('input change', '.kelipatan-input', function() {
                    var $row = $(this).closest('tr');
                    recalcQtyByRow($row);
                });

                // Event delegation
                tbody.addEventListener('click', (e) => {
                    const tr = e.target.closest('tr.form-row');
                    if (!tr) return;

                    if (e.target.closest('.btn-cancel')) {
                        tr.remove();
                        renumber();
                        highlightSelectedBarang();
                        return;
                    }

                    if (e.target.closest('.btn-find-barang')) {
                        activeRow = tr;
                        const tipe = document.getElementById('tipe_barang').value;
                        populateBarangModal(tipe);
                        new bootstrap.Modal(document.getElementById('barangModal')).show();
                        return;
                    }
                });

                function renumber() {
                    let n = 10;
                    document.querySelectorAll('#tbody-grpo tr.form-row').forEach(r => {
                        const td = r.querySelector('td:nth-child(2)');
                        if (td) {
                            td.firstChild.nodeType === 3 ? (td.firstChild.nodeValue = n) : (td.textContent = n);
                        }
                        const hid = r.querySelector('input[name="tmp_urut[]"]');
                        if (hid) hid.value = n;
                        n += 10;
                    });
                    rowIdx = n - 10;
                }

                // Barang selection from modal
                document.getElementById('tbl-barang').addEventListener('click', (e) => {
                    const btn = e.target.closest('.choose-barang');
                    if (!btn || !activeRow) return;
                    if (btn.classList.contains('btn-success')) return;

                    const row = btn.closest('tr');
                    const kodeBaru = row.dataset.kodeBaru || '';
                    const kodeLama = row.dataset.kodeLama || '';
                    const name = row.dataset.name || '';
                    const satuan = row.dataset.satuan || '';
                    const satuanId = row.dataset.satuanId || '';
                    const stok = row.dataset.stok || '0';
                    const minStok = row.dataset.minStok || '0';
                    const kelipatan = row.dataset.kelipatan || '0';
                    console.log('[choose-barang] Barang:', name, '| dataset → stok:', row.dataset.stok,
                        '| minStok:', row.dataset.minStok, '| kelipatan:', row.dataset.kelipatan);

                    activeRow.querySelector('[name="tmp_nama_barang[]"]').value = name;
                    activeRow.querySelector('[name="tmp_id_barang[]"]').value = row.dataset.id || '';
                    activeRow.querySelector('[name="tmp_nama_barang_id[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_kode_baru_display[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama_display[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_satuan[]"]').value = satuan;
                    activeRow.querySelector('[name="tmp_satuan_id[]"]').value = satuanId;
                    activeRow.querySelector('[name="tmp_stok_display[]"]').value = parseFloat(stok) || '0';
                    activeRow.querySelector('[name="tmp_min_stok_display[]"]').value = parseFloat(minStok) ||
                        '0';
                    activeRow.querySelector('[name="tmp_kelipatan_display[]"]').value = kelipatan;

                    // Auto-calculate recommended qty
                    const recQty = calcRecommendedQty(stok, minStok, kelipatan);
                    activeRow.querySelector('[name="tmp_qty[]"]').value = recQty;

                    bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
                    setTimeout(() => highlightSelectedBarang(), 100);
                });
            });
        </script>
        <script>
            function saveData(event) {
                event.preventDefault();

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');

                const getVal = f => (document.querySelector(`[name="${f}"]`)?.value || '').trim();

                const headerFields = ['tanggal', 'supplier', 'tipe_barang'];
                headerFields.forEach(f => formData.set(f, getVal(f)));

                const headerKurang = headerFields.some(f => !getVal(f));
                if (headerKurang) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data header belum lengkap',
                        text: 'Silakan lengkapi Tanggal, Vendor, dan Tipe Barang.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');
                if (rows.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Data Detail!',
                        text: 'Silakan tambahkan minimal 1 data detail.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                let validationError = '';
                rows.forEach((row, i) => {
                    const rowNum = i + 1;
                    const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                    const qty = row.querySelector('[name="tmp_qty[]"]')?.value || '';
                    if (!barangId) validationError += `Baris ${rowNum}: Barang harus dipilih\n`;
                    if (!qty || parseFloat(qty) <= 0) validationError += `Baris ${rowNum}: Qty harus lebih dari 0\n`;
                });

                if (validationError) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Detail Belum Sesuai!',
                        html: '<pre style="text-align:left; white-space:pre-wrap;">' + validationError + '</pre>',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                rows.forEach((row, i) => {
                    const urutValue = row.querySelector('[name="tmp_urut[]"]')?.value || '';
                    formData.append(`details[${i}][urut]`, urutValue || ((i + 1) * 10));
                    formData.append(`details[${i}][id_barang]`, row.querySelector('[name="tmp_id_barang[]"]')?.value || '');
                    formData.append(`details[${i}][kode_baru]`, row.querySelector('[name="tmp_nama_barang_id[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][kode_lama]`, row.querySelector('[name="tmp_kode_lama[]"]')?.value ||
                        '');
                    formData.append(`details[${i}][qty]`, row.querySelector('[name="tmp_qty[]"]')?.value || '');
                    formData.append(`details[${i}][satuan]`, row.querySelector('[name="tmp_satuan_id[]"]')?.value ||
                        '');
                    formData.append(`details[${i}][catatan]`, row.querySelector('[name="tmp_catatan[]"]')?.value || '');
                    formData.append(`details[${i}][kelipatan]`, row.querySelector('[name="tmp_kelipatan_display[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][stok]`, row.querySelector('[name="tmp_stok_display[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][min_stok]`, row.querySelector('[name="tmp_min_stok_display[]"]')
                        ?.value || '');
                });

                fetch("{{ URL::to($url_menu) }}/store", {
                        method: "POST",
                        body: formData,
                    })
                    .then(async res => {
                        const text = await res.text();
                        try {
                            const data = JSON.parse(text);
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sukses',
                                    html: '<strong>Data Pembelian Berhasil Dibuat</strong><br><br>Kode Transaksi: <strong>' +
                                        (data.id_transaksi || '-') + '</strong>',
                                    showConfirmButton: true,
                                }).then(() => {
                                    window.location.href = "{{ url($url_menu) }}";
                                });
                            } else {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Gagal!',
                                    text: 'Gagal menyimpan data: ' + (data.message),
                                    confirmButtonText: 'OK'
                                });
                            }
                        } catch (err) {
                            console.warn("Response bukan JSON:", text);
                            Swal.fire({
                                icon: 'error',
                                title: 'Kesalahan!',
                                html: '<p>Server mengirim respons yang tidak bisa dibaca.</p><pre>' + text +
                                    '</pre>',
                                confirmButtonText: 'Tutup'
                            });
                        }
                    })
                    .catch(err => {
                        console.error("Error:", err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal konek ke server!',
                            text: 'Silakan cek koneksi internet atau server.',
                            confirmButtonText: 'OK'
                        });
                    });
            }
        </script>
    @endpush