<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Master Barang</h1>
        <nav>
            <ol class="breadcrumb">

            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body">
                        <br>
                        <!-- Table with stripped rows -->
                        <div class="datatable-wrapper datatable-loading no-footer sortable searchable fixed-columns">
                            <div class="row g-3">
                                <div class="col-md-7">
                                    <input type="text" id="list_item" name="strDeskripsi" data-parsley-trigger="change" required="" placeholder="Cari deskripsi barang" autocomplete="off" class="form-control" list="list_deskripsi">
                                    <datalist id="list_deskripsi">
                                        <?php
                                        $MySQLi = new MySQLi($strDBHostName, $strDBUsername, $strDBPassword, $strDBName);
                                        $query = "SELECT ID, strDeskripsi FROM item;";
                                        $result = $MySQLi->query($query);
                                        while ($row = $result->fetch_array())
                                            echo "<option value='" . $row['strDeskripsi'] . "'  data-realvalue='" . $row['ID'] . "_" . $row['strDeskripsi'] . "'>";
                                        ?>
                                    </datalist>
                                </div>
                                <div class="col-md-5">
                                    <button style="float:left;margin: 2px;" type="button" id="btnview" class="btn btn-primary" onclick="tampildata()"><i class="bi bi-search"></i>&nbsp;Cari</button>
                                    <button style="display:none;float:left;margin: 2px;" class="btn btn-primary" type="button" disabled="" id="btnloading">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        Loading...
                                    </button>

                                    <button style="float:left;margin: 2px;" type="button" id="btnunduh" class="btn btn-success" onclick="unduhdata()"><i class="bi bi-download"></i>&nbsp;Unduh</button>

                                </div>
                            </div>
                            <br>
                            <div class="datatable-container">
                                <div id="tbbrg"></div>
                            </div>
                        </div>
                        <!-- End Table with stripped rows -->

                    </div>
                </div>

            </div>
        </div>
    </section>

</main>

<div class="modal fade" id="Modalupdate" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Master Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="inputName5" class="form-label">Kode barang</label>
                        <input type="text" class="form-control" id="edkodebrg" readonly>
                    </div>
                    <div class="col-md-6">
                        <label for="inputName5" class="form-label">Nama barang</label>
                        <input type="text" class="form-control" id="eddeskripsibrg">
                    </div>
                    <div class="col-md-2">
                        <label for="inputName5" class="form-label">Unit 1</label>
                        <input type="text" class="form-control" id="edunit1brg">
                    </div>
                    <div class="col-md-2">
                        <label for="inputName5" class="form-label">Unit 2</label>
                        <input type="text" class="form-control" id="edunit2brg">
                    </div>
                    <div class="col-md-2">
                        <label for="inputName5" class="form-label">Ratio 2</label>
                        <input type="text" class="form-control" id="edratio2brg">
                    </div>
                    <div class="col-md-2">
                        <label for="inputName5" class="form-label">Unit 3</label>
                        <input type="text" class="form-control" id="edunit3brg">
                    </div>
                    <div class="col-md-2">
                        <label for="inputName5" class="form-label">Ratio 3</label>
                        <input type="text" class="form-control" id="edratio3brg">
                    </div>
                    <div class="col-md-6">
                        <label for="inputName5" class="form-label">Lokasi</label>
                        <input type="text" class="form-control" id="edlokasibrg">
                    </div>
                    <div class="col-md-6">
                        <input type="hidden" class="form-control" id="edidbrg">
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="updatebrg()">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script src="assets/libs/js/jquery-3.6.0.min.js"></script>
<script>
    function msgsimpan(txt) {
        const Toast = Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: false,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
        Toast.fire({
            icon: "success",
            title: txt
        });
    }

    function msgerror(txt) {
        const Toast = Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: false,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
        Toast.fire({
            icon: "error",
            title: txt
        });
    }

    function tampildata() {
        var cari = $("#list_item").val();
        document.getElementById("btnloading").style.display = "block";
        document.getElementById("btnview").style.display = "none";
        $.get("master/barang/tb_brg.php?cari=" + cari, function(data, status) {
            $("#tbbrg").html(data);
            document.getElementById("btnloading").style.display = "none";
            document.getElementById("btnview").style.display = "block";
        });
    }

    $(document).ready(function() {
        $('#tblbrg').DataTable();
    });

    function tambahbrg() {
        var kodebrg = $("#kodebrg").val();
        var deskripsibrg = $("#deskripsibrg").val();
        var unit1brg = $("#unit1brg").val();
        var unit2brg = $("#unit2brg").val();
        var ratio2brg = $("#ratio2brg").val();
        var unit3brg = $("#unit3brg").val();
        var ratio3brg = $("#ratio3brg").val();
        var lokasibrg = $("#lokasibrg").val();

        if (kodebrg == '') {
            msgerror("Kode barang harus diisi");
            $("#kodebrg").focus();
        } else {
            if (deskripsibrg == '') {
                msgerror("Deskripsi barang harus diisi");
                $("#deskripsibrg").focus();
            } else {
                $.ajax({
                    url: "master/barang/simpan_brg.php",
                    type: 'POST',
                    cache: false,
                    data: {
                        kodebrg: kodebrg,
                        deskripsibrg: deskripsibrg,
                        unit1brg: unit1brg,
                        unit2brg: unit2brg,
                        ratio2brg: ratio2brg,
                        unit3brg: unit3brg,
                        ratio3brg: ratio3brg,
                        lokasibrg: lokasibrg
                    },
                    success: function(data) {
                        if (data == 1) {
                            msgsimpan("Data telah disimpan");
                            tampildata();
                        }
                        if (data == 0) {
                            msgerror("Data gagal disimpan");
                        }
                    }
                });
            }
        }
    }

    function editbrg(edidbrg, edkodebrg, eddeskripsibrg, edunit1brg, edunit2brg, edratio2brg, edunit3brg, edratio3brg, edlokasibrg) {
        $("#edidbrg").val(edidbrg);
        $("#edkodebrg").val(edkodebrg);
        $("#eddeskripsibrg").val(eddeskripsibrg);
        $("#edunit1brg").val(edunit1brg);
        $("#edunit2brg").val(edunit2brg);
        $("#edratio2brg").val(edratio2brg);
        $("#edunit3brg").val(edunit3brg);
        $("#edratio3brg").val(edratio3brg);
        $("#edlokasibrg").val(edlokasibrg);
    }

    function updatebrg() {
        var edidbrg = $("#edidbrg").val();
        var edkodebrg = $("#edkodebrg").val();
        var eddeskripsibrg = $("#eddeskripsibrg").val();
        var edunit1brg = $("#edunit1brg").val();
        var edunit2brg = $("#edunit2brg").val();
        var edratio2brg = $("#edratio2brg").val();
        var edunit3brg = $("#edunit3brg").val();
        var edratio3brg = $("#edratio3brg").val();
        var edlokasibrg = $("#edlokasibrg").val();

        if (eddeskripsibrg == '') {
            msgerror("nama Barang harus diisi");
            document.getElementById('eddeskripsibrg').focus();
        } else {
            if (edunit1brg == '') {
                msgerror("Unit 1 harus diisi");
                document.getElementById('edunit1brg').focus();
            } else {
                $.ajax({
                    url: "master/barang/update_brg.php",
                    type: 'POST',
                    cache: false,
                    data: {
                        edidbrg: edidbrg,
                        edkodebrg: edkodebrg,
                        eddeskripsibrg: eddeskripsibrg,
                        edunit1brg: edunit1brg,
                        edunit2brg: edunit2brg,
                        edratio2brg: edratio2brg,
                        edunit3brg: edunit3brg,
                        edratio3brg: edratio3brg,
                        edlokasibrg: edlokasibrg
                    },
                    success: function(data) {
                        if (data == 1) {
                            msgsimpan("Update sukses");
                            tampildata();
                            //$("#Modalupdate").modal('hide');
                            $(this).closest('.Modalupdate').modal('toggle');
                        }
                        if (data == 0) {
                            msgerror("Update gagal");
                        }
                    }
                });
            }
        }
    }

    function hapusbrg(ID) {
        Swal.fire({
            title: "Hapus data ini ? ",
            //text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "master/barang/hapus_brg.php",
                    type: 'POST',
                    cache: false,
                    data: {
                        ID: ID
                    },
                    success: function(data) {

                        if (data == 1) {
                            msgsimpan("Data telah dihapus");
                            tampildata();
                        }
                        if (data == 0) {
                            msgerror("Data gagal dihapus");
                        }

                    }
                });
            }
        });
    }

    function unduhdata() {
        var cari = $("#list_item").val();
        window.open("master/barang/item_list.php?cari=" + cari, "_self");
    }
</script>