<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<main id="main" class="main">
    <div class="pagetitle">
        <h1>Selamat Datang <?= $this->session->strNama; ?></h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
        </nav>
    </div>

    <section class="section dashboard">
        <div class="row">

            <!-- Left side columns -->
            <div class="col-lg-12">
                <div class="row">



                    <!-- Reports -->
                    <div class="col-12">
                        <div class="card">

                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-box-seam"></i> Stock <span>| Finish Goods</span></h5>
                                <div id="chart"></div>
                            </div>

                        </div>
                    </div><!-- End Reports -->


                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-truck"></i> Balance <span>| Transfer VS Receiving</span></h5>
                                <ul class="nav nav-tabs" id="Tab_recv" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#grafik_recv" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="bi bi-bar-chart"></i></button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#table_recv" type="button" role="tab" aria-controls="profile" aria-selected="false" tabindex="-1"><i class="bi bi-table"></i></button>
                                    </li>
                                </ul>
                                <div class="tab-content pt-2" id="Tab_det_recv">
                                    <div class="tab-pane fade active show" id="grafik_recv" role="tabpanel" aria-labelledby="home-tab">
                                        <div id="chart_recv"></div>
                                    </div>
                                    <div class="tab-pane fade" id="table_recv" role="tabpanel" aria-labelledby="profile-tab">
                                        <div id="tbl_recv"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div><!-- End Left side columns -->

        </div>
    </section>

</main>

<div class="modal fade" id="f_dtl_recv" 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">Detail selisih</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="tb_dtl_recv"></div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function apr(url) {
        let timerInterval;
        Swal.fire({
            title: "Loading...",
            timer: 1000,
            timerProgressBar: false,
            didOpen: () => {
                Swal.showLoading();
                const timer = Swal.getPopup().querySelector("b");
                timerInterval = setInterval(() => {
                    timer.textContent = `${Swal.getTimerLeft()}`;
                }, 100);
            },
            willClose: () => {
                clearInterval(timerInterval);
                window.open(url, "_self");
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        $.get("Home/tb_dashboard", function(data, status) {
            $("#tb_dashboard").html(data);
        });
        //grafik_recv();
        //grafik_delivery();
        //tb_recv();
    });

    function apprv(token) {
        window.open("<?= base_url('Lpbj/approve_lpbj?key=') ?>" + token, "_self");
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var options = {
            series: [{
                name: 'Delivery',
                //data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
                data: [<?php foreach ($stok as $s) {
                            echo '"' . $s['stok_akhir'] . '",';
                        } ?>]
            }],
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    borderRadius: 10,
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val;
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },

            xaxis: {
                //categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                categories: [<?php foreach ($stok as $s) {
                                    echo '"' . $s['barang'] . '",';
                                } ?>],
                position: 'bottom',
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#D8E3F0',
                            colorTo: '#BED1E6',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                }
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function(val) {
                        return val + " DUS";
                    }
                }

            },
            title: {
                text: '',
                floating: true,
                offsetY: 330,
                align: 'center',
                style: {
                    color: '#444'
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var options = {
            series: [{
                name: 'Receiving',
                data: [<?php foreach ($recv as $r) {
                            echo '"' . $r['balance'] . '",';
                        } ?>]
            }],
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    borderRadius: 10,
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val;
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },

            xaxis: {
                categories: [<?php foreach ($recv as $r) {
                                    echo '"' . $r['barang'] . '",';
                                } ?>],
                position: 'bottom',
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#D8E3F0',
                            colorTo: '#BED1E6',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                }
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function(val) {
                        return val + " DUS";
                    }
                }

            },
            title: {
                text: '',
                floating: true,
                offsetY: 330,
                align: 'center',
                style: {
                    color: '#444'
                }
            },
            colors: ["#ff9633"]
        };

        var chart = new ApexCharts(document.querySelector("#chart_recv"), options);
        chart.render();

        $.get("Home/tb_recv_monitor", function(data, status) {
            $("#tbl_recv").html(data);
        });
    });

    function tb_recv() {
        $.get("Home/tb_recv_monitor", function(data, status) {
            $("#tbl_recv").html(data);
        });
    }

    function dtl_recv(id) {
        $.get("Home/tb_dtl_recv_monitor?sku=" + id, function(data, status) {
            $("#tb_dtl_recv").html(data);
        });
    }
</script>