<?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">
                            <h3 class="card-title"> Product Picture</h3>
                            <ol class="breadcrumb float-sm-right">
                                <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: #343a40;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">
                            <h3 class="card-title"> Product Picture</h3>
                            <ol class="breadcrumb float-sm-right">
                                <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 gray;">
                                                 <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><?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")
?>