<?php
include("connection.php");
include("header.php");
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

if (isset($_POST['submit'])) {
    if (isset($_FILES['Image']) && $_FILES['Image']['error'] === 0) {

        // Original image info
        $originalName = $_FILES['Image']['name'];
        $img_tmp = $_FILES['Image']['tmp_name'];

        // Get file extension
        $ext = pathinfo($originalName, PATHINFO_EXTENSION);

        // Create unique file name with timestamp
      $uniqueName = 'img_' . time() . '_' . uniqid() . '.' . $ext;
$img_path = "./assets/images/client/" . $uniqueName;

        // Sanitize other inputs
        $para = mysqli_real_escape_string($con, $_POST['para']);
        $customer_name = mysqli_real_escape_string($con, $_POST['customer_name']);
        $customer_designation = isset($_POST['customer_designation']) && $_POST['customer_designation'] !== ''
            ? "'" . mysqli_real_escape_string($con, $_POST['customer_designation']) . "'"
            : "NULL";

        // Insert query
        $sql = "INSERT INTO `testimonial`(`Image`, `customer_name`, `customer_designation`, `para`) 
                VALUES ('$uniqueName', '$customer_name', $customer_designation, '$para')";
        $query = mysqli_query($con, $sql);

        if ($query) {
            if (move_uploaded_file($img_tmp, $img_path)) {
                header("Location: viewtestimoni.php");
                exit();
            } else {
                echo "Failed to move uploaded file.";
            }
        } else {
            echo "Database error: " . mysqli_error($con);
        }
    } else {
        echo "No image uploaded or there was an error uploading the image.";
    }
}
?>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>ADD About us</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <!-- <link rel="shortcut icon" href="assets/images/favicon.ico" /> -->

    <!-- Plugins css -->
    <link href="assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="./assets/logo/fav.png" />
    <!-- Icons Css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    <!-- App js -->
    <!-- <script src="assets/js/plugin.js"></script> -->
    <style>
    .form .input {
        width: 100%;
        background: white;
        border: none;
        padding: 15px 20px;
        border-radius: 20px;
        margin-bottom: 9px;
        margin-top: 15px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border-inline: 2px solid transparent;

    }

    input[name='Image'] {
        display: none;

    }

    div#upload {
        cursor: pointer;

    }


    ::-webkit-file-upload-button {
        /* width: 100%;
            height: 100%; */
        display: none;
        /* color: transparent; */
    }


    .filepath {
        display: none;
    }

    img[alt="img"] {
        width: clamp(50px, 15%, 100px);
        aspect-ratio: 1/0.70;
    }
    </style>
</head>

<body data-sidebar="dark">
    <!-- <body data-layout="horizontal" data-topbar="dark"> -->

    <!-- Begin page -->
    <div id="layout-wrapper">

        <div class="w-80 ">
            <div class="page-content">
                <div class="container">
                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0 font-size-18">Add Testimonial</h4>


                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body" style="margin-left: 10% !important;">

                                    <div>
                                        <form class="form" action="" method="POST" enctype="multipart/form-data">
                                            <div class="dropzone">
                                                <div class="fallback">

                                                    <input class="form-control" name="Image" type="file" required />
                                                </div>
                                                <div class="dz-message needsclick" id="upload">
                                                    <div class="mb-3">
                                                        <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                                                    </div>

                                                    <h4>Drop files here or click to upload.</h4>
                                                </div>
                                            </div>
                                            <ul class="list-unstyled mb-0" id="dropzone-preview">

                                            </ul>
                                            <div class="filepath">
                                                <img src="" alt="img">

                                                <span id="filename"></span>
                                            </div>

                                            <br>

                                            <input type="text" class="form-control" name="customer_name"
                                                placeholder="Enter Your customer_name" required />
                                            <br>
                                            <input type="text" class="form-control" name="customer_designation"
                                                placeholder="Enter Customer Designation (Optional)" />
                                            <br>

                                            <textarea placeholder="text" name="para" type="text" id="Experience"
                                                class="input" required=""></textarea>

                                            <div class="text-center mt-4">
                                                <button type="submit" name="submit" class="btn btn-primary">
                                                    <i class="fa fa-cloud-upload"></i> Submit
                                                </button>
                                                <a href="viewtestimoni.php" class="btn btn-danger">View Data</a>
                                            </div>

                                        </form>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->
                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->


        </div>
        <!-- end main content-->
    </div>
    <!-- END layout-wrapper -->




    <!-- JAVASCRIPT -->
    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/metismenu/metisMenu.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/node-waves/waves.min.js"></script>

    <!-- Plugins js -->
    <script src="assets/libs/dropzone/dropzone-min.js"></script>

    <!-- Form file upload init js -->
    <script src="assets/js/pages/form-file-upload.init.js"></script>

    <script src="assets/js/app.js"></script>
    <script src="./ck editor/ckeditor.js"></script>
    <script>
    CKEDITOR.replace('Experience');
    </script>

    <script>
    var img = document.querySelector("input[name='Image']");
    document.getElementById('upload').onclick = () => {
        img.click();
    }

    img.oninput = () => {
        document.getElementById('filename').innerHTML = img.value.replace(/(C:\\fakepath\\)/, "");
        // alert(img.value);
        document.querySelector(".filepath").style.display = 'block';


        let file = img.files[0];
        let fileSrc = URL.createObjectURL(file);
        console.log(fileSrc)

        document.querySelector("img[alt='img']").src = fileSrc;
    }
    </script>
</body>


</html>


<?php
    include("footer.php");
    ?>