@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">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Tambah {{ $title_menu }}</h5>
                        </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"
                                            placeholder="--" 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="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label for="dpt" class="form-label">Departemen</label>
                                        @if ($hasMultipleEntries)
                                            <select class="form-select" id="dpt" name="dpt">
                                                @foreach ($groupedUsers[$user_login->firstname][$user_login->idroles] as $user)
                                                    <option value="{{ $user->lastname }}">
                                                        {{ $user->lastname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <input type="text" class="form-control" id="dpt" name="dpt"
                                                value="{{ $user_login->lastname }}" readonly>
                                        @endif
                                        <input type="hidden" id="kd_dpt" name="kd_dpt"
                                            value="{{ $mst_departemen->kode }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="nama" class="form-label">Nama</label>
                                        <input type="text" class="form-control" id="nama" name="nama"
                                            placeholder="isi nama">
                                    </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 id="first-row">
                                                        <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</th>
                                                        <th style="text-align: center">Satuan</th>
                                                        <th style="text-align: center">Catatan</th>
                                                        <th style="text-align: center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </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 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->kode }}">{{ $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="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 class="mb-3">
                                                <label for="keterangan" class="form-label">Catatan</label>
                                                <input type="text" class="form-control" id="keterangan"
                                                    name="keterangan" maxlength="46">
                                            </div>
                                            <div id="previewModal" class="modal-preview">
                                                <div class="modal-content-preview">
                                                    <img id="previewImage" src="" alt="Tidak Ada Foto Barang" />
                                                </div>
                                            </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>
            </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();
            }
        });

        $(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/add.blade.php</b> on line <b>275</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/add.blade.php</b> on line <b>275</b><br />

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

        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 validateQty() {
            const qtyOrder = parseFloat(document.getElementById('qty').value) || 0;
            const jumlahStok = parseFloat(document.getElementById('jumlah_stok').value) || 0;

            if (qtyOrder > jumlahStok) {
                document.getElementById('qtyError').style.display = 'block'; // Tampilkan pesan kesalahan
                document.getElementById('qty').value = jumlahStok; // Sesuaikan dengan jumlah stok maksimum
            } else {
                document.getElementById('qtyError').style.display = 'none'; // Sembunyikan pesan kesalahan
            }
        }

        function validateUsername() {
            var nama = document.getElementById('nama').value;
            if (nama.trim() === '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Harap isi nama sebelum menambahkan barang.',
                })
                return false;
            }
            // Jika nama pengguna sudah diisi, tampilkan modal
            return true;
        }

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

        document.getElementById('qty').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, ''); // Hapus koma atau titik
            }
        });

        var dataArray = [];

        function tambahBarang() {
            console.log(dataArray);

            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 qty = $('#qty').val();
            let satuan = $('#satuan').val();
            let keterangan = $('#keterangan').val();

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

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

            $.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) {
                    let stok = response.stok;
                    let qty = parseInt($('#qty').val());

                    let now = new Date();
                    let dateString = now.toLocaleDateString();
                    let timeString = now.toLocaleTimeString();

                    if (qty > stok) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Stok Tidak Cukup',
                            html: `
                    <p style="font-size: 20px; margin-top: 10px;"><small>Tanggal ${dateString} Jam ${timeString}.</small></p>
                    <p style="font-size: 18px;">Stok hanya tersisa ${stok}.</p>
                `,
                        });
                        return;
                    }

                    dataArray.push({
                        'jenis_barang': jenis_barang,
                        'nama_barang': nama_barang,
                        'deskripsi_barang': deskripsi_barang,
                        'idatk': idatk,
                        'qty': qty,
                        '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;">
                    <input type="number" class="form-control qty-input" value="${qty}" data-index="${dataArray.length - 1}" style="width: 80px;" min="1" oninput="this.value = Math.abs(this.value);" />
                </td>
                <td>${satuan}</td>
                <td>
    <input type="text" class="form-control keterangan-input"
        value="${keterangan}" data-index="${dataArray.length - 1}"
        oninput="dataArray[this.dataset.index].keterangan = this.value" />
</td>
                <td style="text-align: center;">
                    <button type="button" class="btn btn-danger" onclick="hapusBaris(this)">
                        <i class="fas fa-trash me-1"></i>Hapus
                    </button>
                </td>
                </tr>
                `;
                    $('#table-barang tbody').append(newRow);

                    $('#staticBackdrop').modal('hide');
                    resetModal();

                    updateNamaBarangDropdown();
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal mengambil data stok.',
                    });
                }
            });
        }

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

            // Update opsi
            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').append('<option value="" disabled selected>Semua barang sudah dipilih</option>');
            }

            // Re-inisialisasi Select2
            $('#nama_barang').select2({
                placeholder: 'Pilih Nama Barang',
                width: '100%',
                minimumInputLength: 0,
                allowClear: true,
                dropdownParent: $('#nama_barang').parent()
            });
        }

        $(document).on('input', '.qty-input', function() {
            let inputElement = $(this); // Simpan referensi ke elemen input
            let inputQty = inputElement.val(); // Ambil nilai qty dari input
            let index = inputElement.data('index'); // Ambil index dari data attribute
            let idatk = dataArray[index].idatk; // Ambil idatk dari dataArray
            let stok = 0; // Variabel untuk menyimpan stok

            $.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) {
                    stok = response.stok; // Ambil stok dari response
                    let now = new Date();
                    let dateString = now.toLocaleDateString();
                    let timeString = now.toLocaleTimeString();

                    if (parseInt(inputQty) > stok) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Stok Tidak Cukup',
                            html: `
                        <p style="font-size: 20px; margin-top: 10px;"><small>Tanggal ${dateString} Jam ${timeString}.</small></p>
                        <p style="font-size: 18px;">Stok hanya tersisa ${stok}.</p>
                    `,
                            willClose: () => {
                                // Update nilai input ke stok yang tersedia saat notifikasi ditutup
                                inputElement.val(stok);
                                dataArray[index].qty = stok; // Update qty di dataArray
                            }
                        });
                    } else {
                        // Update qty di dataArray jika stok cukup
                        dataArray[index].qty = inputQty;
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal mengambil data stok.',
                    });
                }
            });
        });

        function hapusBaris(button) {
            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 resetModal() {
            $('#jenis_barang').val('').trigger('change');
            $('#nama_barang').val('');
            $('#deskripsi_barang').val('');
            $('#idatk').val('');
            $('#qty').val('');
            $('#satuan').val('');
            $('#keterangan').val('');
        }

        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;
            }

            document.querySelectorAll('.keterangan-input').forEach(input => {
                const index = input.dataset.index;
                dataArray[index].keterangan = input.value;
            });

            saveButton.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Loading...');

            $.ajax({
                url: '{{ route('permintaan.store') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    kode: $('#kode').val(),
                    tgl: $('#tgl').val(),
                    dpt: $('#dpt').val(),
                    kd_dpt: $('#kd_dpt').val(),
                    nama: $('#nama').val(),
                    tr_permintaan_d: dataArray
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Data dengan kode: ' + response.kode + ' berhasil disimpan'
                    }).then(() => {
                        window.location.href = response.redirect;
                        resetModal();
                        $('#table').prepend($('#table tbody tr:first'));
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR.responseJSON);
                },
                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>