@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <a href="{{ url('trperm') }}" class="btn btn-secondary"><i
                                class="fas fa-chevron-left me-1"></i>Kembali</a>
                        <button type="submit" id="saveButton" class="btn btn-primary" onclick="saveData(event)"><i
                                class="fas fa-download me-1"></i>Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                @if (session('status'))
                    <div class="alert alert-success">{{ session('status') }}</div>
                @endif
                <div class="card">
                    <div class="card-header">
                        <h4>Edit Permintaan Barang</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <form id="my-form">
                                @csrf
                                <div class="mb-3">
                                    <label for="" class="form-label">Kode Transaksi</label>
                                    <input type="text" class="form-control" id="kode" name="kode"
                                        value="{{ $tr_permintaan_h->kode }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="tgl" class="form-label">Tanggal</label>
                                    <input type="date" class="form-control" id="tgl" name="tgl"
                                        value="{{ $tr_permintaan_h->tgl }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="dpt" class="form-label">Departemen</label>
                                    <input type="text" class="form-control" id="dpt" name="dpt"
                                        value="{{ $tr_permintaan_h->dpt }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="nama" class="form-label">Nama</label>
                                    <input type="text" class="form-control" id="nama" name="nama"
                                        value="{{ $tr_permintaan_h->nama }}" readonly>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="openModal()"><i
                                        class="fas fa-plus me-1"></i>
                                    Tambah Barang
                                </button>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="table-barang" class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th style="text-align: center;">Jenis Barang</th>
                                                    <th style="text-align: center;">Nama Barang</th>
                                                    <th style="text-align: center;">Deskripsi</th>
                                                    <th style="text-align: center;">Kode Barang</th>
                                                    <th style="text-align: center;">Qty saat ini</th>
                                                    <th style="text-align: center;">Qty Order</th>
                                                    <th style="text-align: center;">Satuan</th>
                                                    <th style="text-align: center;">Catatan</th>
                                                    @if ($tr_permintaan_h->status == 'revisi')
                                                        <th style="text-align: center;">Status</th>
                                                        <th style="text-align: center;">Catatan</th>
                                                    @endif
                                                    <th style="text-align: center;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($tr_permintaan_d as $detail)
                                                    @if ($detail->tr_permintaan_h == $tr_permintaan_h->kode)
                                                        <tr>
                                                            <td>{{ $detail->jenis_barang }}</td>
                                                            <td>{{ $detail->nama_barang }}</td>
                                                            <td>{{ $detail->deskripsi_barang }}</td>
                                                            <td>{{ $detail->idatk }}</td>
                                                            <td style="text-align: right"
                                                                data-jumlah-stok="{{ $mst_barangatk[$detail->idatk]->jumlah_stok }}">
                                                                {{ $mst_barangatk[$detail->idatk]->jumlah_stok }}
                                                            </td>
                                                            <td style="text-align: right;">{{ $detail->qty }}</td>
                                                            <td>{{ $detail->satuan }}</td>
                                                            <td>{{ $detail->keterangan }}</td>
                                                            @if ($tr_permintaan_h->status == 'revisi')
                                                                <td class="posisi" style="text-align: center">
                                                                    @if ($detail->posisi == 'terima')
                                                                        <span
                                                                            class="badge bg-success">{{ $detail->posisi }}</span>
                                                                    @elseif ($detail->posisi == 'tolak')
                                                                        <span
                                                                            class="badge bg-danger">{{ $detail->posisi }}</span>
                                                                    @elseif ($detail->posisi == 'revisi')
                                                                        <span
                                                                            class="badge bg-info">{{ $detail->posisi }}</span>
                                                                    @else
                                                                        {{ $detail->posisi }}
                                                                    @endif
                                                                </td>
                                                                <td>{{ $detail->revisi }}</td>
                                                            @endif
                                                            @if ($tr_permintaan_h->status == 'revisi' && $detail->posisi == 'revisi')
                                                                <td style="text-align: center;">
                                                                    <button type="button" class="btn btn-success btn-sm"
                                                                        onclick="editBaris(this)">
                                                                        <i class="fas fa-pencil me-1"></i>Edit
                                                                    </button>
                                                                </td>
                                                            @endif
                                                            @if ($tr_permintaan_h->status == 'entry')
                                                                <td style="text-align: center;">
                                                                    <button type="button" class="btn btn-danger btn-sm"
                                                                        onclick="hapusBaris(this)"><i
                                                                            class="fas fa-trash me-1"></i>Hapus</button>
                                                                    <button type="button" class="btn btn-success btn-sm"
                                                                        onclick="editBaris(this)"><i
                                                                            class="fas fa-pencil me-1"></i>Edit</button>
                                                                </td>
                                                            @endif
                                                            @if ($tr_permintaan_h->status == 'revisi')
                                                                @if (empty($detail->posisi))
                                                                    <td style="text-align: center;">
                                                                        <button type="button" class="btn btn-danger btn-sm"
                                                                            onclick="hapusBaris(this)">
                                                                            <i class="fas fa-trash me-1"></i> Hapus
                                                                        </button>
                                                                        <button type="button"
                                                                            class="btn btn-success btn-sm"
                                                                            onclick="editBaris(this)">
                                                                            <i class="fas fa-pencil me-1"></i> Edit
                                                                        </button>
                                                                    </td>
                                                                @endif
                                                            @endif
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                            @if ($tr_permintaan_h->status == 'revisi')
                                                <tfoot>
                                                    <tr>
                                                        <th colspan="1">Catatan Permintaan Barang</th>
                                                        <td colspan="8">{{ $tr_permintaan_h->catatan }}</td>
                                                    </tr>
                                                </tfoot>
                                            @endif
                                        </table>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel">Tambah Permintaan Barang</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-hover datatable" id="dataDisplay">
                                    <tbody style="background-color: #daecff;">
                                        <div class="mb-3">
                                            <label for="jenis_barang" class="form-label">Jenis Barang</label>
                                            <select name="jenis_barang" id="jenis_barang" class="form-control" required>
                                                <option value="" selected disabled>Pilih Jenis Barang</option>
                                                @foreach ($mst_jenis as $js)
                                                    <option value="{{ $js->nama }}">{{ $js->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="nama_barang">Pilih Barang</label>
                                            <select name="nama_barang" id="nama_barang" class="form-control" required>
                                                <option value="" selected disabled>Pilih Nama Barang</option>
                                                @foreach ($mst_barangatk as $stok)
                                                    @if ($stok->isactive == '1')
                                                        <option value="{{ $stok->nama_barang }}"
                                                            data-jenis="{{ $stok->jenis_barang }}">
                                                            {{ $stok->nama_barang }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="deskripsi_barang" class="form-label">Deskripsi</label>
                                            <input type="text" class="form-control" id="deskripsi_barang"
                                                name="deskripsi_barang" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="idatk" class="form-label">Kode Barang</label>
                                            <input type="text" class="form-control" id="idatk" name="idatk"
                                                readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="jumlah_stok" class="form-label">Stok Saat Ini</label>
                                            <input type="text" class="form-control" id="jumlah_stok"
                                                name="jumlah_stok" readonly required>
                                            <small id="stokInfo" class="form-text text-muted">
                                                Stok saat ini pada: <span id="currentDate"></span>, Jam: <span
                                                    id="currentTime"></span>
                                            </small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="qty" class="form-label">Qty Order</label>
                                            <input type="number" class="form-control" id="qty" name="qty"
                                                min="1" oninput="validateQty()" required>
                                            <small id="qtyError" class="form-text text-danger"
                                                style="display: none;">Qty Order tidak boleh melebihi Jumlah Stok.</small>
                                        </div>
                                        {{-- <div class="mb-3">
                                        <label for="qty" class="form-label">Qty</label>
                                        <input type="number" class="form-control" id="qty" name="qty" min="1" oninput="this.value = Math.abs(this.value)" required>
                                    </div> --}}
                                        <div class="mb-3">
                                            <label for="satuan" class="form-label">Satuan</label>
                                            <input type="text" class="form-control" id="satuan" name="satuan"
                                                readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="gambar" class="form-label">Gambar</label>
                                            <br>
                                            <img id="gambar" src="" alt="Tidak Ada Foto Barang"
                                                class="img-fluid"
                                                style="max-width: 100px; max-height: 70px; display:none;" />
                                        </div>
                                        <div id="previewModal" class="modal-preview">
                                            <div class="modal-content-preview">
                                                <img id="previewImage" src="" alt="Tidak Ada Foto Barang" />
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="keterangan" class="form-label">Catatan</label>
                                            <input type="text" class="form-control" id="keterangan" name="keterangan"
                                                maxlength="46">
                                        </div>
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                                <button type="button" class="btn btn-dark" onclick="resetModal()">Reset</button>
                                <button type="button" class="btn btn-primary" onclick="tambahBarang()">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="staticBackdrop1" tabindex="-1" aria-labelledby="staticBackdropLabel1"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel1">Edit Permintaan Barang</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-hover datatable" id="dataDisplay">
                                    <tbody style="background-color: #daecff;">
                                        <div class="mb-3">
                                            <label for="jenis_barang" class="form-label">Jenis Barang</label>
                                            <select name="jenis_barang" id="jenis_barang_modal" class="form-control"
                                                required>
                                                <option value="" selected disabled>Pilih Jenis Barang</option>
                                                @foreach ($mst_jenis as $js)
                                                    <option value="{{ $js->nama }}"
                                                        {{ isset($selected_jenis_barang) && $js->name == $selected_jenis_barang ? 'selected' : '' }}>
                                                        {{ $js->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="nama_barang">Pilih Barang</label>
                                            <select name="nama_barang" id="nama_barang_modal" class="form-control"
                                                required>
                                                <option value="" disabled>Pilih Nama Barang</option>
                                                @foreach ($mst_barangatk as $stok)
                                                    @if ($stok->isactive == '1')
                                                        <option value="{{ $stok->nama_barang }}"
                                                            data-jenis="{{ $stok->jenis_barang }}"
                                                            {{ isset($nama_barang) && $stok->nama_barang == $nama_barang ? 'selected' : '' }}>
                                                            {{ $stok->nama_barang }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="deskripsi_barang" class="form-label">Deskripsi</label>
                                            <input type="text" class="form-control" id="deskripsi_barang_modal"
                                                name="deskripsi_barang" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="idatk" class="form-label">Kode Barang</label>
                                            <input type="text" class="form-control" id="idatk_modal" name="idatk"
                                                readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="jumlah_stok_modal" class="form-label">Stok Saat Ini</label>
                                            <input type="text" class="form-control" id="jumlah_stok_modal"
                                                name="jumlah_stok" readonly required>
                                            <small id="stokInfo1" class="form-text text-muted">
                                                Stok saat ini pada: <span id="currentDate1"></span>, Jam: <span
                                                    id="currentTime1"></span>
                                            </small>
                                        </div>
                                        <div class="mb-3">
                                            <label for="qty_modal" class="form-label">Qty Order</label>
                                            <input type="number" class="form-control" id="qty_modal" name="qty"
                                                min="1" oninput="validateQty()" required>
                                            <small id="qtyError_modal" class="form-text text-danger"
                                                style="display: none;">Qty Order tidak boleh melebihi Jumlah Stok.</small>
                                        </div>
                                        {{-- <div class="mb-3">
                                        <label for="qty" class="form-label">Qty</label>
                                        <input type="number" class="form-control" id="qty_modal" name="qty" min="1" oninput="this.value = Math.abs(this.value)" required>
                                    </div> --}}
                                        <div class="mb-3">
                                            <label for="satuan" class="form-label">Satuan</label>
                                            <input type="text" class="form-control" id="satuan_modal" name="satuan"
                                                readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="gambar" class="form-label">Gambar</label>
                                            <br>
                                            <img id="gambar" src="" alt="Tidak Ada Foto Barang"
                                                class="img-fluid"
                                                style="max-width: 100px; max-height: 70px; display:none;" />
                                        </div>
                                        <div id="previewModal" class="modal-preview">
                                            <div class="modal-content-preview">
                                                <img id="previewImage" src="" alt="Tidak Ada Foto Barang" />
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="keterangan" class="form-label">Catatan</label>
                                            <input type="text" class="form-control" id="keterangan_modal"
                                                maxlength="46" name="keterangan">
                                        </div>
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                                {{-- <button type="button" class="btn btn-primary"
                                    onclick="tambahBarangBaru()">Simpan</button> --}}
                                <button type="button" class="btn btn-primary" id="btnSimpanBarang"
                                    onclick="tambahBarangBaru()">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#nama_barang').on('change', function() {
            var selectedOption = $(this).val();
            console.log(selectedOption);
            $.ajax({
                url: '{{ route('getKodeBarang') }}',
                method: 'GET',
                data: {
                    idatk: selectedOption
                },
                success: function(response) {
                    console.log('response', response);
                    $('#idatk').val(response.idatk);
                    $('#satuan').val(response.satuan);
                    $('#jumlah_stok').val(response.jumlah_stok);
                    $('#deskripsi_barang').val(response.deskripsi_barang);

                    // Tampilkan gambar jika tersedia
                    if (response.gambar) {
                        $('#gambar').attr('src', response.gambar).show();
                    } else {
                        $('#gambar').attr('src', '').hide();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", status, error);
                    console.error("Response:", xhr.responseText);
                }
            });
        });

        $('#gambar').on('click', function() {
            var src = $(this).attr('src');
            $('#previewImage').attr('src', src);
            $('#previewModal').show();
        });

        // Menangani klik pada tombol close modal
        $('#closeModal').on('click', function() {
            $('#previewModal').hide();
        });

        // Menangani klik di luar gambar modal untuk menutup modal
        $(window).on('click', function(event) {
            if (event.target === document.getElementById('previewModal')) {
                $('#previewModal').hide();
            }
        });

        function updateDateTime() {
            const now = new Date();
            const date = now.toLocaleDateString(); // Format tanggal
            const time = now.toLocaleTimeString(); // Format waktu

            document.getElementById('currentDate').innerText = date;
            document.getElementById('currentTime').innerText = time;
        }

        updateDateTime();

        function updateDateTime1() {
            const now = new Date();
            const date = now.toLocaleDateString(); // Mendapatkan tanggal saat ini
            const time = now.toLocaleTimeString(); // Mendapatkan waktu saat ini

            // Update untuk input #jumlah_stok_modal dan #currentDate1, #currentTime1
            document.getElementById('currentDate1').innerText = date;
            document.getElementById('currentTime1').innerText = time;
            // document.getElementById('jumlah_stok_modal').value = `${date} ${time}`;
        }

        // Jalankan fungsi updateDateTime pertama kali saat halaman dimuat
        updateDateTime1();

        function validateQty() {
            // Mendapatkan elemen input yang memanggil fungsi ini
            const inputElement = event.target;
            const qtyOrder = parseFloat(inputElement.value) || 0;

            // Menentukan elemen stok dan elemen error yang sesuai
            const stockId = inputElement.id === 'qty' ? 'jumlah_stok' : 'jumlah_stok_modal';
            const errorId = inputElement.id === 'qty' ? 'qtyError' : 'qtyError_modal';
            const jumlahStok = parseFloat(document.getElementById(stockId).value) || 0;

            if (qtyOrder > jumlahStok) {
                document.getElementById(errorId).style.display = 'block'; // Tampilkan pesan kesalahan
                inputElement.value = jumlahStok; // Batasi ke jumlah stok maksimum
            } else {
                document.getElementById(errorId).style.display = 'none'; // Sembunyikan pesan kesalahan
            }
        }

        $(document).ready(function() {
            // Atur select2 untuk jenis_barang di sini
            $('#jenis_barang').select2({
                placeholder: 'Pilih Jenis Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#jenis_barang').parent()
            });

            // Atur select2 untuk nama_barang di sini
            $('#nama_barang').select2({
                placeholder: 'Pilih Nama Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#nama_barang').parent()
            });

            // Kosongkan pilihan nama_barang pada awalnya
            $('#nama_barang').empty().append('<option value="" disabled selected>Pilih Nama Barang</option>');

            $('#jenis_barang').on('change', function() {
                var jenisBarang = $(this).val();
                var namaBarangSelect = $('#nama_barang');

                // Kosongkan semua opsi kecuali yang pertama
                namaBarangSelect.empty().append(
                    '<option value="" disabled selected>Pilih Nama Barang</option>');

                <br />
<b>Warning</b>:  Undefined variable $mst_barangatk in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>487</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>487</b><br />

                // Refresh select2
                namaBarangSelect.trigger('change');
            });
        });

        function openModal() {
            $('#staticBackdrop').modal('show');
        }

        var dataArray = [];
        <br />
<b>Warning</b>:  Undefined variable $tr_permintaan_d in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>504</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>504</b><br />

        document.getElementById('qty_modal').addEventListener('input', function(e) {
            let value = e.target.value;
            if (value.includes('.') || value.includes(',')) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Qty tidak boleh mengandung koma atau titik. Harus berupa angka bulat.',
                });
                e.target.value = value.replace(/[\.,]/g, '');
            }
        });

        var status = "{{ $tr_permintaan_h->status }}";
        console.log('status', status);

        function tambahBarang() {
            let jenis_barang = $("#jenis_barang option:selected").text();
            let nama_barang = $("#nama_barang option:selected").text();
            let deskripsi_barang = $('#deskripsi_barang').val();
            let idatk = $('#idatk').val();
            let jumlah_stok = $('#jumlah_stok').val(); // Stok yang ditampilkan di input
            let qty = $('#qty').val();
            let satuan = $('#satuan').val();
            let keterangan = $('#keterangan').val();

            // Validasi kolom kosong
            if (!jenis_barang || !nama_barang || !deskripsi_barang || !idatk || !qty || !satuan) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Mohon lengkapi semua kolom sebelum menyimpan.',
                });
                return;
            }

            // Validasi minimal qty
            if (parseInt(qty) < 1) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Qty harus lebih besar dari atau sama dengan 1.',
                });
                return;
            }

            // AJAX request untuk cek stok terbaru
            $.ajax({
                url: '{{ URL::to('/') }}/getStock',
                method: 'GET',
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    idatk: idatk
                },
                success: function(response) {
                    const stokTerbaru = response.stok;
                    const qtyOrder = parseInt(qty);

                    // Tampilkan stok terbaru
                    $('#jumlah_stok').val(stokTerbaru);

                    // Jika stok tidak cukup
                    if (qtyOrder > stokTerbaru) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Stok Tidak Cukup',
                            html: `
                        <p style="font-size: 20px; margin-top: 10px;">Stok hanya tersisa ${stokTerbaru}.</p>
                    `,
                        });
                        return; // Hentikan proses tambah
                    }

                    // Push data ke dataArray dan buat baris baru di tabel
                    dataArray.push({
                        'jenis_barang': jenis_barang,
                        'nama_barang': nama_barang,
                        'deskripsi_barang': deskripsi_barang,
                        'idatk': idatk,
                        'jumlah_stok': stokTerbaru, // Simpan stok terbaru
                        'qty': qtyOrder,
                        'satuan': satuan,
                        'keterangan': keterangan
                    });

                    let newRow = `
                <tr>
                    <td>${jenis_barang}</td>
                    <td>${nama_barang}</td>
                    <td>${deskripsi_barang}</td>
                    <td>${idatk}</td>
                    <td style="text-align: right;" data-jumlah-stok="${stokTerbaru}" data-idatk="${idatk}">${stokTerbaru}</td>
                    <td style="text-align: right;">${qtyOrder}</td>
                    <td>${satuan}</td>
                    <td>${keterangan}</td>
                    <td style="text-align: center;">
                        <button type="button" class="btn btn-danger btn-sm" onclick="hapusBaris(this)">
                            <i class="fas fa-trash me-1"></i>Hapus
                        </button>
                        <button type="button" class="btn btn-success btn-sm" onclick="editBaris(this)">
                            <i class="fas fa-pen me-1"></i>Edit
                        </button>
                    </td>
                </tr>`;

                    $('#table-barang tbody').append(newRow);

                    // Tutup modal setelah menambahkan barang
                    $('#staticBackdrop').modal('hide');
                    resetModal();
                    updateNamaBarangDropdown();
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal mengambil data stok.',
                    });
                }
            });
        }

        function updateNamaBarangDropdown() {
            $('#nama_barang_modal').select2('destroy');

            let selectedIds = dataArray.map(item => item.idatk);
            $('#nama_barang option').each(function() {
                let idatk = $(this).val();
                if (selectedIds.includes(idatk)) {
                    $(this).prop('disabled', true);
                } else {
                    $(this).prop('disabled', false);
                }
            });

            if ($('#nama_barang option:not(:disabled)').length === 0) {
                $('#nama_barang_modal').append('<option value="" disabled selected>Semua barang sudah dipilih</option>');
            }

            $('#nama_barang_modal').select2({
                placeholder: 'Pilih Nama Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#nama_barang_modal').parent()
            });
        }

        function resetModal() {
            $('#jenis_barang').val('').trigger('change');
            $('#nama_barang').val('');
            $('#deskripsi_barang').val('');
            $('#idatk').val('');
            $('#qty').val('');
            $('#satuan').val('');
            $('#keterangan').val('');
        }

        $(document).ready(function() {
            $('#table-barang tbody').on('click', '.btn-danger', function() {
                let button = $(this);
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menghapus baris ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Temukan baris yang akan dihapus
                        let row = $(button).closest('tr');
                        // Ambil index baris
                        let index = row.index();
                        // Hapus baris dari array
                        dataArray.splice(index, 1);
                        // Hapus baris dari tabel
                        row.remove();

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Data berhasil dihapus'
                        })
                    }
                });
            });
        });

        $(document).ready(function() {
            $('#table-barang tbody').on('click', '.btn-danger', function() {
                let button = $(this);
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menghapus baris ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let row = $(button).closest('tr');
                        let index = row.index();
                        dataArray.splice(index, 1);
                        row.remove();
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Data berhasil dihapus'
                        })
                    }
                });
            });
        });

        {{-- function editBaris(button) {
            $('#table-barang tbody tr').removeClass('selected');

            var tr = $(button).closest('tr');
            var idBaris = tr.data('id'); // Peroleh ID baris data yang diklik
            var jenisBarang = tr.find('td:eq(0)').text();
            var namaBarang = tr.find('td:eq(1)').text();
            var deskripsi_barang = tr.find('td:eq(2)').text();
            var idatk = tr.find('td:eq(3)').text();
            var qty = tr.find('td:eq(5)').text();
            var satuan = tr.find('td:eq(6)').text();

            // Set nilai yang tepat ke dalam modal
            $('#jenis_barang_modal').val(jenisBarang).trigger('change');
            $('#nama_barang_modal').val(idatk).trigger('change');
            $('#deskripsi_barang_modal').val(deskripsi_barang);
            $('#idatk_modal').val(idatk); // Pastikan idatk_modal sesuai dengan idatk dari baris data

            // Set nama barang yang terpilih di dropdown select
            $('#nama_barang_modal').val(idatk); // Memilih opsi berdasarkan idatk

            $('#qty_modal').val(qty);
            $('#satuan_modal').val(satuan);

            // Menampilkan modal
            $('#staticBackdrop1').data('idBaris', idBaris);

            // Menyembunyikan elemen dengan class selected
            $('.selected').removeClass('selected');

            // Menampilkan modal
            $('#staticBackdrop1').modal('show');
            tr.addClass('selected');
        } --}}

        $('#nama_barang_modal').on('change', function() {
            var selectedOption = $(this).val();

            // Disable tombol simpan saat loading
            $('#btnSimpanBarang').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm"></span> Loading...');

            if (!selectedOption) {
                $('#btnSimpanBarang').prop('disabled', false).html('Simpan');
                return;
            }

            $.ajax({
                url: '{{ route('getKodeBarang') }}',
                method: 'GET',
                data: {
                    idatk: selectedOption
                },
                success: function(response) {
                    $('#idatk_modal').val(response.idatk);
                    $('#satuan_modal').val(response.satuan);
                    $('#jumlah_stok_modal').val(response.jumlah_stok);
                    $('#deskripsi_barang_modal').val(response.deskripsi_barang);

                    if (response.gambar) {
                        $('#gambar').attr('src', response.gambar).show();
                    } else {
                        $('#gambar').attr('src', '').hide();
                    }

                    // Enable tombol setelah data berhasil dimuat
                    $('#btnSimpanBarang').prop('disabled', false).html('Simpan');
                },
                error: function(xhr, status, error) {
                    console.error("Error:", status, error);
                    console.error("Response:", xhr.responseText);

                    // Tetap enable tombol agar user bisa retry
                    $('#btnSimpanBarang').prop('disabled', false).html('Simpan');
                }
            });
        });

        $(document).ready(function() {
            // Inisialisasi select2 untuk jenis_barang_modal
            $('#jenis_barang_modal').select2({
                placeholder: 'Pilih Jenis Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#jenis_barang_modal').parent()
            });

            // Inisialisasi select2 untuk nama_barang_modal
            $('#nama_barang_modal').select2({
                placeholder: 'Pilih Nama Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#nama_barang_modal').parent()
            });

            // Event listener untuk perubahan pada jenis_barang_modal
            $('#jenis_barang_modal').on('change', function() {
                var jenisBarang = $(this).val();
                var namaBarangSelect1 = $('#nama_barang_modal');
                var options = namaBarangSelect1.get(0).options;

                // Menghapus semua opsi kecuali opsi pertama (placeholder)
                for (var i = options.length - 1; i >= 1; i--) {
                    options[i].remove();
                }

                // Menambahkan opsi barang yang sesuai dengan jenis_barang yang dipilih
                <br />
<b>Warning</b>:  Undefined variable $mst_barangatk in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>859</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/opt/lampp/htdocs/msjatk/resources/views/pages/trperm/edit.blade.php</b> on line <b>859</b><br />

                // Memperbarui tampilan select2
                namaBarangSelect1.trigger('change');
            });

            // Event listener untuk memperbarui ID ATK saat nama barang berubah
            $('#nama_barang_modal').on('change', function() {
                let selectedIdatk = $(this).val(); // Mengambil nilai ID ATK baru
                $('#idatk_modal').val(selectedIdatk); // Setel nilai ID ATK baru di input modal
            });
        });

        function editBaris(button) {
            $('#table-barang tbody tr').removeClass('selected');

            const tr = $(button).closest('tr');
            const idBaris = tr.data('id');
            const jenisBarang = tr.find('td:eq(0)').text().trim();
            const namaBarang = tr.find('td:eq(1)').text().trim();
            const deskripsi_barang = tr.find('td:eq(2)').text().trim();
            const idatk = tr.find('td:eq(3)').text().trim();
            const jumlah_stok = tr.find('td:eq(4)').text().trim();
            const qty = tr.find('td:eq(5)').text().trim();
            const satuan = tr.find('td:eq(6)').text().trim();
            const keterangan = tr.find('td:eq(7)').text().trim();


            // Tambahkan kembali opsi ke select jika belum ada
            if ($("#jenis_barang_modal option[value='" + jenisBarang + "']").length === 0) {
                $('#jenis_barang_modal').append(`<option value="${jenisBarang}">${jenisBarang}</option>`);
            }
            $('#jenis_barang_modal').val(jenisBarang).trigger('change');

            // Delay agar opsi barang masuk terlebih dahulu setelah jenis dipilih
            setTimeout(() => {
                if ($("#nama_barang_modal option[value='" + idatk + "']").length === 0) {
                    $('#nama_barang_modal').append(`<option value="${idatk}">${namaBarang}</option>`);
                }
                $('#nama_barang_modal').val(idatk).trigger('change');

                // Setelah opsi dipilih, set field lainnya
                $('#deskripsi_barang_modal').val(deskripsi_barang);
                $('#idatk_modal').val(idatk);
                $('#jumlah_stok_modal').val(jumlah_stok);
                $('#qty_modal').val(qty);
                $('#satuan_modal').val(satuan);
                $('#keterangan_modal').val(keterangan);
            }, 300); // bisa diatur delay-nya sesuai kebutuhan

            // Tampilkan modal dan tandai baris
            $('#staticBackdrop1').data('idBaris', idBaris).modal('show');
            tr.addClass('selected');
        }

        {{-- function tambahBarangBaru() {
            var jenisBarangBaru = $("#jenis_barang_modal option:selected").text();
            var namaBarangBaru = $("#nama_barang_modal option:selected").text();
            var deskripsi_barangBaru = $('#deskripsi_barang_modal').val();
            var idatkBaru = $('#idatk_modal').val(); // IDATK yang baru
            var jumlah_stokbr = $('#jumlah_stok_modal').val();
            var qtyBaru = $('#qty_modal').val();
            var satuanBaru = $('#satuan_modal').val();
            var idpenerimaans = $('#table-barang tbody tr.selected').index();

            // Validasi input
            if (!jenisBarangBaru || !namaBarangBaru || !deskripsi_barangBaru || !idatkBaru || !qtyBaru || !satuanBaru) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Mohon lengkapi semua kolom sebelum menyimpan.',
                });
                return; // Hentikan eksekusi jika ada kolom yang belum diisi
            }

            if (parseInt(qtyBaru) > parseInt(jumlah_stokbr)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Stok Tidak Cukup',
                    text: `Jumlah stok yang tersedia hanya ${jumlah_stokbr}.`,
                });
                return; // Hentikan eksekusi jika qtyBaru lebih besar dari jumlah_stokbr
            }

            // Validasi qty
            if (parseInt(qtyBaru) < 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Qty harus lebih besar dari atau sama dengan 1.',
                });
                return; // Hentikan eksekusi jika qty kurang dari 1
            }

            if (idpenerimaans >= 0 && idpenerimaans < dataArray.length) {
                // Perbarui data yang ada di dalam dataArray
                dataArray[idpenerimaans].jenis_barang = jenisBarangBaru;
                dataArray[idpenerimaans].nama_barang = namaBarangBaru;
                dataArray[idpenerimaans].deskripsi_barang = deskripsi_barangBaru;
                dataArray[idpenerimaans].idatk = idatkBaru; // IDATK baru
                dataArray[idpenerimaans].jumlah_stok = jumlah_stokbr;
                dataArray[idpenerimaans].qty = qtyBaru;
                dataArray[idpenerimaans].satuan = satuanBaru;

                // Update tampilan pada tabel untuk baris yang dipilih
                var selectedRow = $('#table-barang tbody tr.selected');
                selectedRow.find('td:eq(0)').text(jenisBarangBaru);
                selectedRow.find('td:eq(1)').text(namaBarangBaru);
                selectedRow.find('td:eq(2)').text(deskripsi_barangBaru);
                selectedRow.find('td:eq(3)').text(idatkBaru); // IDATK yang baru
                selectedRow.find('td:eq(5)').text(qtyBaru);
                selectedRow.find('td:eq(6)').text(satuanBaru);

                // Perbarui stok pada kolom yang sesuai
                selectedRow.find('td:eq(4)').text(jumlah_stokbr); // Kolom jumlah stok
            } else {
                // Jika baris belum ada, tambahkan data baru ke dalam array dan DOM
                dataArray.push({
                    'jenis_barang': jenisBarangBaru,
                    'nama_barang': namaBarangBaru,
                    'deskripsi_barang': deskripsi_barangBaru,
                    'idatk': idatkBaru,
                    'jumlah_stok': jumlah_stokbr,
                    'qty': qtyBaru,
                    'satuan': satuanBaru
                });

                // Tambahkan row baru ke tabel
                var newRow = '<tr class="selected">' +
                    '<td>' + jenisBarangBaru + '</td>' +
                    '<td>' + namaBarangBaru + '</td>' +
                    '<td>' + deskripsi_barangBaru + '</td>' +
                    '<td>' + idatkBaru + '</td>' +
                    '<td data-idatk="' + idatkBaru + '" data-jumlah-stok="' + jumlah_stokbr + '">' +
                    jumlah_stokbr + '</td>' + // Kolom jumlah stok
                    '<td>' + qtyBaru + '</td>' +
                    '<td>' + satuanBaru + '</td>' +
                    '<td><button type="button" class="btn btn-danger btn-sm" onclick="hapusBaris(this)"><i class="fas fa-trash me-1"></i>Hapus</button></td>' +
                    '<td><button type="button" class="btn btn-success btn-sm" onclick="editBaris(this)"><i class="fas fa-pen me-1"></i>Edit</button></td>' +
                    '</tr>';

                $('#table-barang tbody').append(newRow);
            }

            // Tutup modal setelah menyimpan
            $('#staticBackdrop1').modal('hide');
        } --}}

        function tambahBarangBaru() {
            var jenisBarangBaru = $("#jenis_barang_modal option:selected").text();
            var namaBarangBaru = $("#nama_barang_modal option:selected").text();
            var deskripsi_barangBaru = $('#deskripsi_barang_modal').val();
            var idatkBaru = $('#idatk_modal').val();
            var jumlah_stokbr = $('#jumlah_stok_modal').val();
            var qtyBaru = $('#qty_modal').val();
            var satuanBaru = $('#satuan_modal').val();
            var keteranganBaru = $('#keterangan_modal').val();


            var selectedRow = $('#table-barang tbody tr.selected');
            var idpenerimaans = selectedRow.index();

            // Validasi input
            if (!jenisBarangBaru || !namaBarangBaru || !deskripsi_barangBaru || !idatkBaru || !qtyBaru || !satuanBaru) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Mohon lengkapi semua kolom sebelum menyimpan.',
                });
                return;
            }

            if (parseInt(qtyBaru) > parseInt(jumlah_stokbr)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Stok Tidak Cukup',
                    text: `Jumlah stok yang tersedia hanya ${jumlah_stokbr}.`,
                });
                return;
            }

            if (parseInt(qtyBaru) < 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Qty harus lebih besar dari atau sama dengan 1.',
                });
                return;
            }

            if (selectedRow.length > 0 && idpenerimaans >= 0) {
                // Update dataArray jika diperlukan
                dataArray[idpenerimaans] = {
                    'jenis_barang': jenisBarangBaru,
                    'nama_barang': namaBarangBaru,
                    'deskripsi_barang': deskripsi_barangBaru,
                    'idatk': idatkBaru,
                    'jumlah_stok': jumlah_stokbr,
                    'qty': qtyBaru,
                    'satuan': satuanBaru,
                    'keterangan': keteranganBaru
                };

                // Update isi baris yang dipilih
                selectedRow.find('td:eq(0)').text(jenisBarangBaru);
                selectedRow.find('td:eq(1)').text(namaBarangBaru);
                selectedRow.find('td:eq(2)').text(deskripsi_barangBaru);
                selectedRow.find('td:eq(3)').text(idatkBaru);
                selectedRow.find('td:eq(4)').text(jumlah_stokbr);
                selectedRow.find('td:eq(5)').text(qtyBaru);
                selectedRow.find('td:eq(6)').text(satuanBaru);
                selectedRow.find('td:eq(7)').text(keteranganBaru);
            } else {
                // Tambahkan baris baru
                dataArray.push({
                    'jenis_barang': jenisBarangBaru,
                    'nama_barang': namaBarangBaru,
                    'deskripsi_barang': deskripsi_barangBaru,
                    'idatk': idatkBaru,
                    'jumlah_stok': jumlah_stokbr,
                    'qty': qtyBaru,
                    'satuan': satuanBaru,
                    'keterangan': keteranganBaru
                });

                var newRow = '<tr>' +
                    '<td>' + jenisBarangBaru + '</td>' +
                    '<td>' + namaBarangBaru + '</td>' +
                    '<td>' + deskripsi_barangBaru + '</td>' +
                    '<td>' + idatkBaru + '</td>' +
                    '<td data-idatk="' + idatkBaru + '" data-jumlah-stok="' + jumlah_stokbr + '">' + jumlah_stokbr +
                    '</td>' +
                    '<td>' + qtyBaru + '</td>' +
                    '<td>' + satuanBaru + '</td>' +
                    '<td>' + keteranganBaru + '</td>' +
                    '<td><button type="button" class="btn btn-danger btn-sm" onclick="hapusBaris(this)"><i class="fas fa-trash me-1"></i>Hapus</button></td>' +
                    '<td><button type="button" class="btn btn-success btn-sm" onclick="editBaris(this)"><i class="fas fa-pen me-1"></i>Edit</button></td>' +
                    '</tr>';

                $('#table-barang tbody').append(newRow);
            }

            $('#staticBackdrop1').modal('hide'); // Tutup modal setelah simpan
        }

        function saveData(event) {
            event.preventDefault();

            let saveButton = $('#saveButton');
            let originalButtonText = saveButton.html();

            if (dataArray.length === 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Harap tambahkan barang sebelum menyimpan.',
                });
                return;
            }
            let stokValid = true;



            let checkStokPromises = dataArray.map((item) => {
                return $.ajax({
                    url: '{{ URL::to('/') }}/getStock',
                    method: 'GET',
                    dataType: 'JSON',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        idatk: item.idatk
                    }
                }).then((response) => {
                    let stokTerbaru = response.stok;
                    if (parseInt(item.qty) > stokTerbaru) {
                        stokValid = false;
                        Swal.fire({
                            icon: 'error',
                            title: 'Stok Tidak Cukup',
                            text: `Qty untuk barang ${item.nama_barang} (${item.qty}) melebihi stok yang tersedia (${stokTerbaru}).`,
                        });
                    }
                });
            });

            // Tunggu pengecekan stok selesai sebelum melanjutkan penyimpanan
            Promise.all(checkStokPromises).then(() => {
                if (!stokValid) return; // Jika ada stok tidak valid, hentikan eksekusi
                saveButton.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Loading...');
                let dataToSend = {
                    _token: '{{ csrf_token() }}',
                    kode: $('#kode').val(),
                    dpt: $('#dpt').val(),
                    tgl: $('#tgl').val(),
                    nama: $('#nama').val(),
                    catatan: $('#catatan').val(),
                    tr_permintaan_d: dataArray
                };

                $.ajax({
                    url: '{{ route('permintaan.update', $tr_permintaan_h->kode) }}',
                    type: 'PUT',
                    data: dataToSend,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: 'Data berhasil disimpan dengan kode: ' + response.kode
                        }).then(() => {
                            window.location.href = response.redirect;
                        });
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Data gagal disimpan',
                        });
                    },
                    complete: function() {
                        // Enable kembali tombol dan kembalikan teks asli
                        saveButton.prop('disabled', false).html(originalButtonText);
                    }
                });
            });
        };
    </script>
@endsection
<style>
    /* Modal background */
    .modal-preview {
        display: none;
        /* Hide modal by default */
        position: fixed;
        /* Stay in place */
        z-index: 1000;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgba(0, 0, 0, 0.5);
        /* Black background with opacity */
    }

    /* Modal content */
    .modal-content-preview {
        background-color: #fff;
        /* White background */
        margin: 10% auto;
        /* Center modal */
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        /* Width of the modal */
        max-width: 800px;
        /* Maximum width */
        position: relative;
        /* Position relative for the close button */
        text-align: center;
        /* Center content */
    }

    /* Close button */
    #modalClose {
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        color: #000;
        /* Black color for close button */
    }

    /* Hide the close button on mobile */
    @media (max-width: 600px) {
        #modalClose {
            font-size: 25px;
            right: 15px;
        }
    }

    /* Image styling */
    #previewImage {
        max-width: 100%;
        height: auto;
    }
</style>