<?php
    session_start();
    include "../../db.php";
    date_default_timezone_set('Asia/Kolkata');
     $currentTime = date('jS  F Y');
    if ( !isset($_SESSION['uid']) && !isset($_SESSION['uref']) && !isset($_SESSION['utype']) )
        header("Location: logout.php");
?>


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

<head>
    <?php include "includes/meta.php"; ?>
    <?php include "includes/css.php"; ?>
    <link href="css/all.min.css" rel="stylesheet" type="text/css">
    <link href="css/alltable.css" rel="stylesheet">
    <link rel="stylesheet" href="vendor/croppie/croppie.css" />
</head>

<body>
    <!--==========================  Header  ============================-->
    <?php include "includes/header2.php"; ?>
    <!-- #header -->
    <!--==========================
    Intro Section
  ============================-->

    <div class="container">
        <div class="">
            <h3 class="text-center mb-4" style="margin-top: 90px">
                <font color="black">Upload Thumbnails</font>
            </h3>
        </div>

        <!-- Form -->
        <div class="row mx-0 just ify-content-center">
            <div class="col-12 col-sm-12 col-md-12">
                <div class="card-body">

                    <div class="form-row">

                        <input type="hidden" id="refid" value="<?php echo $_GET['refid']; ?>">
                        <div class="col-md-6 mt-5">
                            <font color="black">Upload Thumbnails</font>
                            <div class="custom-file" style="height: 134px;">
                                <input type="file" class="custom-file-input" name="up_position" id="file"
                                    accept="image/*" required>
                                <label class="custom-file-label" for="file"
                                    style="height: 100%;margin-top: auto;padding-top: 50px;padding-left: 80px;">Select
                                    an
                                    aricle for thumbnail </label>
                            </div>
                        </div>
                        <?php
                            $sql = "SELECT * FROM data_thumbnail  WHERE refid = '$_GET[refid]'";
                            $run = mysqli_query($con, $sql);    
                            if($rows = mysqli_fetch_assoc($run)){
                            ?>
                        <div class="col-md-6 mt-5" align='center'>
                            <img src="<?php echo $rows['thumbnail']?>" class="img-fluid" alt=""
                                style="border: solid 1px grey;">
                            <input type="hidden" id="previousThumbnail" value="<?php echo $rows['thumbnail']; ?>">
                        </div>
                        <?php
                            }
                            ?>

                    </div>
                    <a href="aa.php" class="btn btn-warning my-4"> Cancel </a>

                </div>
            </div>
        </div>


        <br> <br> <br> <br> <br> <br><br>
    </div>

    <!--============================== -->

    <div id="uploadimageModal" class="modal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Upload & Crop Image</h4>
                </div>

                <div class="modal-body">
                    <div class="row mx-0">
                        <div class="col-md-12 col-sm-12 col-12 text-center">
                            <div id="image_demo" style="margin-top:10px;height:40%;"></div>
                            <p class="small">scroll through mouse to zoom in or out</p>
                        </div>
                        <div class="col-md-12 col-sm-12 col-12 text-center">
                            <button class="btn btn-success crop_image" id="cropppp">Crop & Upload Image</button>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

    <script>
    $(document).ready(function() {
        // $('#thisismytable').DataTable();
        $('#show-img').on('show.bs.modal', function(e) {
            var src = $(e.relatedTarget).attr('src');
            $(this).find('.modal-body > img').attr('src', src);
        });
        $image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 300,
                height: 315,
                type: 'square' //circle
            },
            boundary: {
                width: 310,
                height: 325
            }
        });
        $('#file').on('change', function() {
            var reader = new FileReader();
            reader.onload = function(event) {
                $image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function() {
                    console.log('jQuery bind complete');
                });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
        });
        $('.crop_image').click(function(event) {
            $('#cropppp').html('uploading <i class="fas fa-spinner fa-pulse"></i>');

            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(response) {

                var refid = $('#refid').val();
                var previousThumbnail = $('#previousThumbnail').val();
                // Send cropped image data to the server for processing
                $.ajax({
                    url: "update-blog-thumbnail-ajax.php", // Replace with your PHP processing script
                    method: "POST",
                    data: {
                        image: response,
                        refid: refid,
                        previousThumbnail: previousThumbnail
                    },
                    success: function(data) {
                        // Handle success (e.g., show success message or update UI)
                        $('#uploadimageModal').modal('hide');
                        $('#uploaded_image').html(
                            data); // Update uploaded image display
                        var refid = $('#refid').val();
                        $(location).attr('href',
                            'update-blog-thumbnail.php?refid=' +
                            refid); // Redirect if needed
                    },
                    error: function() {
                        // Handle error (e.g., show error message)
                    }
                });
            });
        });
    });
    </script>



    <!--==========================
   

    Footer

  ============================-->

    <?php include "includes/ft.php"; ?>

    <?php include "includes/js.php"; ?>


    <script src="vendor/croppie/croppie.js"></script>

    <script src="vendor/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor5/39.0.1/ckeditor.min.js"></script>
</body>

</html>



<script>
CKEDITOR.replace('content', {

    height: 200,

    filebrowserUploadUrl: "aa-ck.php"

});


function checkFileDetails() {
    var fi = document.getElementById('file');
    if (fi.files.length > 0) {
        for (var i = 0; i <= fi.files.length - 1; i++) {
            var fileName, fileExtension, fileSize, fileType, dateModified;
            fileName = fi.files.item(i).name;
            fileExtension = fileName.replace(/^.*\./, '');
            if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg') {
                readImageFile(fi.files.item(i));
            }
        }

        function readImageFile(file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var img = new Image();
                img.src = e.target.result;
                img.onload = function() {
                    var imgWidth = this.width;
                    var imgHeight = this.height;

                    if (imgWidth == 1200 && imgHeight == 512 || imgWidth == 1500 && imgHeight == 640) {
                        var imgCheck = "<i class='fas fa-check-circle text-success'></i>";
                    } else {
                        var imgCheck = "<i class='fas fa-times-circle text-danger'></i>";
                    }
                    document.getElementById('fileInfo').innerHTML =
                        document.getElementById('fileInfo').innerHTML + '<br> ' +
                        'Name: <b>' + file.name + '</b> <br>' +
                        'Size: <b>' + Math.round((file.size / 1024)) + '</b> KB <br>' +
                        'Dimension: <b>' + imgWidth + '</b> x <b>' + imgHeight + '</b> ' + imgCheck +
                        ' <br>';
                }
            };
            reader.readAsDataURL(file);
        }
    }
}
</script>

<?php
// Compress image
    function compressedImage($source, $path, $quality) {
            $info = getimagesize($source);
            if ($info['mime'] == 'image/jpeg') 
                $image = imagecreatefromjpeg($source);
            elseif ($info['mime'] == 'image/gif') 
                $image = imagecreatefromgif($source);
               elseif ($info['mime'] == 'image/png') 
                $image = imagecreatefrompng($source);
               imagejpeg($image, $path, $quality);
    }
?>