<style>
    table.inputs td {
        padding: 5px;
    }

    .hide-column {
        display: none;
    }
</style>
<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/product_index'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke Produk</a></p>
        <h3>Stok Produk</h3>
        <?= $this->session->flashdata('success'); ?>
        <a class="btn btn-success" href="<?= base_url('admin/stocks/transfer_stock'); ?>"><i class="fa fa-refresh" aria-hidden="true"></i> Menu Transfer Stok</a>
        <?php if (count($low_stock_active_products) > 0): ?>
            <div class="alert alert-danger" style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                <div>
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-right: 8px;"></i>
                    <?= count($low_stock_active_products) ?> Produk aktif yang stoknya kurang dari 10
                </div>
                <button type="button" class="btn btn-link" data-toggle="modal" data-target="#lowStockModal">
                    Lihat disini
                </button>
            </div>
        <?php endif; ?>

        <div class="modal fade" id="lowStockModal" tabindex="-1" role="dialog" aria-labelledby="lowStockModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="lowStockModalLabel">Daftar Produk Aktif dengan Stok Rendah</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped" id="lowStockTable">
                            <thead>
                                <tr>
                                    <th>Kode Barang</th>
                                    <th>Merk</th>
                                    <th>Nama Produk</th>
                                    <th>Stok Jual</th>
                                    <th>Stok Keep</th>
                                    <th>Stok Reject</th>
                                    <th>Stok Total</th>
                                    <th>Restock</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($low_stock_active_products as $product): ?>
                                    <tr>
                                        <td><?= ucfirst($product->sku); ?></td>
                                        <td><?= ucfirst($product->brand); ?></td>
                                        <td><?= ucfirst($product->title); ?> - <?= ucfirst($product->attribute_detail); ?></td>
                                        <td><?= ($product->total_stock - $product->total_stock_keep - $product->total_stock_reject); ?></td>
                                        <td><?= $product->total_stock_keep; ?></td>
                                        <td><?= $product->total_stock_reject; ?></td>
                                        <td><?= $product->total_stock ?></td>
                                        <td><?= ucfirst($product->restock); ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <div id="lowStockTableButtons" class="mr-auto"></div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-between">
    <div class="col-sm-6">
        <form action="<?= base_url('admin/stocks'); ?>" method="get">
            <div class="form-group">
                <label for="warehouse">Filter by Gudang:</label>
                <select name="warehouse" id="warehouse" class="form-control">
                    <option value=""></option>
                    <option value="">All Warehouse</option>
                    <?php foreach ($warehouses as $warehouse) : ?>
                        <option value="<?= $warehouse->id; ?>" <?= (isset($selected_warehouse) && $selected_warehouse == $warehouse->id) ? 'selected' : ''; ?>><?= $warehouse->name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </form>
        <div class="form-group">
            <label for="status">Filter by Status:</label>
            <select name="status" id="status" class="form-control">
                <option value="">All Status</option>
                <option value="0">Tidak</option>
                <option value="1">Aktif</option>
            </select>
        </div>

    </div>
    <div class="col-sm-6">
        <!-- Tambahkan input untuk filter rentang -->
        <div class="form-group">
            <label for="min">Min Stok Total :</label>
            <input type="text" id="min" class="form-control">
        </div>
        <div class="form-group">
            <label for="max">Max Stok Total:</label>
            <input type="text" id="max" class="form-control">
        </div>
    </div>
</div>
<script>
    // Add an event listener to the warehouse select element
    document.getElementById('warehouse').addEventListener('change', function() {
        // Trigger the form submission when the warehouse is changed
        this.form.submit();
    });
</script>
<div class="row">
    <div class="col-sm-12">
        <div class="table-responsive">

            <table class="table table-striped" id="productTable">
                <thead>
                    <tr>
                        <th>Kode Barang</th>
                        <th>Merk</th>
                        <th>Nama Produk</th>
                        <th class="hide-column">Status</th>
                        <th>Stok Jual</th>
                        <th>Stok Keep</th>
                        <th>Stok Reject</th>
                        <th>Stok Total</th>
                        <th>Restock</th>
                        <th>Detail Stok</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (count($products)) : ?> <!-- Update this line -->
                        <?php foreach ($products as $product) : ?> <!-- Update this line -->
                            <tr>
                                <td><?= ucfirst($product->sku); ?></td>
                                <td><?= ucfirst($product->brand); ?></td>
                                <td><?= ucfirst($product->title); ?> - <?= ucfirst($product->attribute_detail); ?> <br> </td>
                                <td class="hide-column"><?= ucfirst($product->product_status); ?> </td>
                                <td><?= ($product->total_stock - $product->total_stock_keep - $product->total_stock_reject); ?></td>
                                <td><?= $product->total_stock_keep; ?></td>
                                <td><?= $product->total_stock_reject; ?></td>
                                <td><?= $product->total_stock ?></td>
                                <td><?= ucfirst($product->restock); ?></td>
                                <td> <a href="<?= base_url() . 'admin/stocks/get/' . $product->id_products; ?>" target="_blank"><i class="fa fa-file" aria-hidden="true"></i> Lihat & Edit</a></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <tr>
                            <td colspan="3">Produk tidak ditemukan.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div><!-- end class responsive-->
    </div><!-- end class="col-sm-12" -->
</div>
<!-- Add these dependencies for DataTables Buttons -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.71/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.71/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>

<!-- Your existing script -->
<script>
    $(document).ready(function() {
        const table = $('#productTable').DataTable({
            dom: 'Pfrtip',
            dom: 'Bfrtip', // 'B' for buttons
            buttons: [{
                extend: 'collection',
                text: 'Print',
                className: 'btn-hover',
                buttons: [{
                        extend: 'copy',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8],
                        },
                        filename: function() {
                            return 'Stock_report_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Copy',
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8]
                        },
                        filename: function() {
                            return 'Stock_report_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to Excel',
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8]
                        },
                        filename: function() {
                            return 'Stock_report_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to CSV',
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8]
                        },
                        filename: function() {
                            return 'Stock_report_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to PDF',
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8]
                        },
                        filename: function() {
                            return 'Stock_report_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Print',
                        autoPrint: false, // Set autoPrint to false
                    }
                ],
            }],
            columns: [
                null, // Kode Barang
                null, // Merk
                null,
                null, // Nama Produk
                null, // Stok Jual
                null, // Stok Keep
                null, // Stok Reject
                null, // Stok Total
                null,
                {
                    orderable: false, // Disable sorting for the Detail Stok column
                }, // Detail Stok
            ],
        });

        // Low Stock
        const lowStockTable = $('#lowStockTable').DataTable({
            dom: 'Pfrtip',
            dom: 'Bfrtip',
            buttons: [{
                extend: 'collection',
                text: 'Print',
                className: 'btn-hover',
                buttons: [{
                        extend: 'copy',
                        exportOptions: {
                            columns: ':visible'
                        },
                        filename: function() {
                            return 'Laporan_Stok_Rendah_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Copy',
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':visible'
                        },
                        filename: function() {
                            return 'Laporan_Stok_Rendah_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to Excel',
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':visible'
                        },
                        filename: function() {
                            return 'Laporan_Stok_Rendah_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to CSV',
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: ':visible'
                        },
                        filename: function() {
                            return 'Laporan_Stok_Rendah_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Export to PDF',
                        customize: function(doc) {
                            doc.content[0].text = 'Laporan Produk Stok Rendah';
                            doc.styles.title = {
                                color: 'navy',
                                fontSize: 16,
                                alignment: 'center'
                            };
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible'
                        },
                        filename: function() {
                            return 'Laporan_Stok_Rendah_' + new Date().toISOString().slice(0, 10);
                        },
                        text: 'Print',
                        autoPrint: false,
                    }
                ],
            }],
        });

        // // Move the buttons to the modal footer
        // lowStockTable.buttons().container()
        //     .appendTo($('#lowStockTableButtons'));

        $('#status').on('change', function() {
            const status = $(this).val();
            // Filter baris berdasarkan status yang dipilih
            if (status === '') {
                table.column(3).search('').draw();
            } else {
                table.column(3).search(status).draw();
            }
        });
        // Custom range filtering function
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                var min = parseInt($('#min').val(), 10);
                var max = parseInt($('#max').val(), 10);
                var stockTotal = parseFloat(data[7]) || 0;

                if (
                    (isNaN(min) && isNaN(max)) ||
                    (isNaN(min) && stockTotal <= max) ||
                    (min <= stockTotal && isNaN(max)) ||
                    (min <= stockTotal && stockTotal <= max)
                ) {
                    return true;
                }

                return false; // Jika tidak sesuai filter
            }
        );


        // Changes to the inputs will trigger a redraw to update the table
        $('#min, #max').on('input', function() {
            table.draw();
        });


    });
</script>