<?php
require("header.php")
?>
<style>
    .thumbnail {
        position: relative;
        /* Position relative for containing image and caption */
    }

    .caption h4 {
        color: white;
        background-color: #343a40;
        padding: 10px;
        margin: 0;
        cursor: default;
        font-size: 18px;
    }

    .thumbnail img {
        width: 100%;
        /* Set image width to fill the column */
        height: auto;
        /* Automatically adjust height to maintain aspect ratio */
    }

    /* Custom CSS for modal */
    .modal-dialog {
        max-width: 1000px;
        margin: auto;
        /* Center the modal horizontally */
    }

    .ribbon {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: #e74c3c;
        color: white;
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 3px;
    }
</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>Add Salt</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"> Product Picture</h3>
                            <ol class="breadcrumb float-sm-right" style="background-color: black;">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item ">Catalouge</li>

                            </ol>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <form method="POST" action="add_catalouge_code.php" enctype="multipart/form-data">
                                <div class="card-body">
                                    <!-- Existing form fields ... -->

                                    <!-- Title Name Input -->
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Product Name<span style="color:red; font-size:25px;">*<span></label>
                                            <input type="text" name="title_name" class="form-control" id="exampleInputEmail1" placeholder="Enter Title Name" required>
                                        </div>
                                    </div>

                                    <!-- Upload Picture Input -->
                                    <!--<div class="col-sm-12">-->
                                    <!--    <div class="form-group">-->
                                    <!--        <label for="exampleInputFile">Product Image <span-->
                                    <!--                style="color:red; font-size:25px;">*<span></label>-->
                                    <!--        <div class="input-group">-->
                                    <!--            <div class="custom-file">-->
                                    <!--                <input type="file" class="" name="product_image"-->
                                    <!--                    maxsize="1mb" id="exampleInputFile"-->
                                    <!--                    accept="image/jpg, image/jpeg" required>-->
                                    <!--                <label class="custom-file-label" for="exampleInputFile">Choose Image-->
                                    <!--                    (only jpg and jpeg images) </label>-->
                                    <!--            </div>-->

                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="exampleInputFile">Product Image<span style="color:red; font-size:25px;">*</span></label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="product_image" maxsize="1mb" id="exampleInputFile" required>
                                                    <label class="custom-file-label" for="exampleInputFile" id="fileLabel">Choose Image (only jpg and jpeg images)</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- Status Dropdown -->
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label for="exampleInputStatus">Label</label>
                                            <select name="Label" class="form-control" id="exampleInputStatus">
                                                <option value="Active">---Select---</option>
                                                <option value="Comming soon">Comming soon</option>
                                                <option value="New">New</option>
                                                <option value="Available" selected>Available</option>
                                                <option value="Out of stock">Out of stock</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Submit button -->
                                    <div class="col-sm-12">
                                        <button type="submit" class="btn btn-primary" style="background:black;border:none">Submit</button>
                                    </div>
                                </div>
                            </form>

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

                    </div>

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

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

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

    <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"> Product Picture</h3>
                            <ol class="breadcrumb float-sm-right" style="background-color: black;">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item ">Catalouge</li>

                            </ol>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="container">
                                <div class="container">
                                    <div class="row">
                                        <?php
                                        include('connection.php');
                                        $sql = "SELECT * FROM add_catalouge  ";
                                        $res = mysqli_query($conn, $sql);
                                        while ($row = mysqli_fetch_assoc($res)) {
                                        ?>
                                            <div class="col-md-3">
                                                <div class="thumbnail position-relative my-3" style="border: 1px solid black;">
                                                    <a href="#" data-toggle="" data-target="">
                                                        <img src="<?php echo $row['product_image']; ?>" alt="Image 1" style="height:200px; ">
                                                        <div class="ribbon" ><?php echo $row['label']; ?></div>
                                                        <div class="caption" >
                                                            <h4 style="background-color: black;"><?php echo $row['title']; ?></h4>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        <?php } ?>

                                        <!-- Add more columns for more images -->
                                    </div>
                                </div>

                                <!-- Modal -->
                                <div id="modal-1" class="modal fade" role="dialog">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-body text-center">
                                                <img src="dist/img/avatar5.png" style="max-width: 100%;" alt="Image 1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->

                    </div>

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

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

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


<!-- <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script>
    const fileInput = document.getElementById('exampleInputFile');
    const fileLabel = document.getElementById('fileLabel');

    fileInput.addEventListener('change', function() {
        if (fileInput.files.length > 0) {
            fileLabel.innerText = fileInput.files[0].name;
        } else {
            fileLabel.innerText = 'Choose file (Choose an Image file for filter)';
        }
    });
</script>
<!-- Sweet Alert  start-->
<?php if (isset($_REQUEST['msg']) && $_REQUEST['msg'] == 1) { ?>
    <script>
        Swal.fire(
            'Success',
            'Product Added Successfully!!',
            'success'
        ).then(() => {
            window.location.href = "catalouge.php";
        });
    </script>
<?php } ?>

<?php if (isset($_REQUEST['msg']) && $_REQUEST['msg'] == 2) { ?>
    <script>
        Swal.fire(
            'Oops...',
            'Something went wrong!!',
            'error'
        ).then(() => {
            window.location.href = "catalouge.php";
        });
    </script>
<?php } ?>

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