<?php
require("header.php")
?>
<style>
    .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
        background: black;
    }

    .btn-group>.btn-group:not(:first-child)>.btn {
        background: black;
    }

    .page-item.active .page-link {
        background: black;
    }

    .dt-button-collection .dropdown-menu .buttons-columnVisibility {
        background-color: black;
    }
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <!-- <h1>View User and Reseller</h1> -->
                </div>
                <div class="col-sm-6">

                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- /.card -->

                    <div class="card card-secondary">
                        <div class="card-header" style="background-color: black;">
                            <h3 class="card-title">View all Product</h3>
                            <ol class="breadcrumb float-sm-right" style="background-color: black;">
                                <li class="breadcrumb-item"><a href="dashboad.php">Home</a></li>
                                <li class="breadcrumb-item">User</li>
                                <li class="breadcrumb-item active">view all</li>
                            </ol>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Sr. No</th>
                                        <th>Product Name</th>
                                        <th>Product Image</th>
                                        <th>Label</th>
                                        <th>Datetime</th>
                                        <th>Action</th>
                                        <!-- <th>User Id</th>
                                            <th>Action</th>
                                            <th>Status</th> -->

                                    </tr>
                                </thead>
                                <tbody>
                                    <?php

                                    include('connection.php');

                                    $sql = "SELECT * FROM add_catalouge ";
                                    $query = mysqli_query($conn, $sql);
                                    while ($row = mysqli_fetch_assoc($query)) {

                                    ?>
                                        <tr>

                                            <td><?php echo $row['id']; ?></td>
                                            <td><?php echo $row['title']; ?></td>
                                            <td>
                                                <img src="../admin/<?php echo $row['product_image']; ?>" alt="Image 1" style="height:50px;width:50px">
                                            </td>
                                            <td id="labelCell_<?php echo $row['id']; ?>"><?php echo $row['label']; ?></td>
                                            <td><?php echo $row['datetime'] ?></td>
                                            <td>
                                                <div class="form-group">
                                                    <!-- <label for="exampleInputStatus">Label</label> -->
                                                    <select class="statusSelect form-control" data-rowid="<?php echo $row['id']; ?>">
                                                        <option value="Active">---Select---</option>
                                                        <option value="Comming soon">Comming soon</option>
                                                        <option value="New">New</option>
                                                        <option value="Available">Available</option>
                                                        <option value="Out of stock">Out of stock</option>
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php
                                    }
                                    ?>
                                    <!-- user id modal -->

                                </tbody>
                                <!-- update label start here -->
                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script>
                                    $(document).ready(function() {
                                        $('.statusSelect').change(function() {
                                            var selectedLabel = $(this).val();
                                            var rowId = $(this).data('rowid');

                                            $.ajax({
                                                url: 'update_label.php', // PHP script to handle AJAX request
                                                method: 'POST',
                                                data: {
                                                    label: selectedLabel,
                                                    id: rowId
                                                },
                                                success: function(response) {
                                                    $('#labelCell_' + rowId).text(
                                                        selectedLabel);
                                                }
                                            });
                                        });
                                    });
                                </script>
                                <!-- update label end here -->



                        </div>
                    </div>

                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


        </table>
</div>
</div>
<!-- /.card-body -->

</div>

<!-- /.card -->
</div>

<!-- /.col -->
</div>
<!-- /.row -->

<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- for searching -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<!-- searching end -->

<!-- pagination -->

<?php
require("footer.php")
?>