<?php 
session_start(); // Start the session
$username = $_SESSION['username'];
$rolemaster_id = $_SESSION['rolemaster_id'];
require("connect.php");	?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Explore</title>
<style>

        #postCreator {
            display: flex;
            justify-content: center;
            align-items: center;
            height: -50vh;
        }

        #postContainer {
            border: 1px solid;
    color: pink;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: auto;
    width: 150%;
    margin-left: 350px;
    position: relative;
        }

        #selectedContent {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }

        #selectedContent img,
        #selectedContent video {
            max-width: 100%;
            height: auto;
        }

        #editingOptions {
            margin-bottom: 20px;
        }

        #contentSelect {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
			width:100%;
			font-size:20px;
        }

        #uploadSection input[type="file"] {
            display: none;
        }

        #uploadSection label {
            display: block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
        }

        #uploadSection label:hover {
            background-color: #0056b3;
        }

        #cropSection,
        #colorFadeSection {
            display: none;
        }

        .stepButtons {
            margin-top: 20px;
        }

        .stepButtons button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }

        .stepButtons button:hover {
            background-color: #0056b3;
        }
		
		
		
/* === BASE HEADING === */ 

h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
h1 em {
  font-style: normal;
  font-weight: 600;
}

/* === HEADING STYLE #1 === */
.one h1 {
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 5px;
}
.one h1:before {
  width: 140px;
  height: 10px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 37%;
  margin-left: 23px;
  background-color:deeppink;
}
.one h1:after {
  width: 600px;
    height: 5px;
    display: block;
    content: "";
    position: relative;
    margin-top: 25px;
    left: -4%;
    margin-left: 55px;
    background-color: deeppink;
}
</style>


<style>
.panel {margin: 100px auto 40px; max-width: 500px; text-align: center;}
.button_outer {background: deeppink; border-radius:30px; text-align: center; height: 50px; width: 200px; display: inline-block; transition: .2s; position: relative; overflow: hidden;}
.btn_upload {padding: 17px 30px 12px; color: #fff; text-align: center; position: relative; display: inline-block; overflow: hidden; z-index: 3; white-space: nowrap;}
.btn_upload input {position: absolute; width: 100%; left: 0; top: 0; width: 100%; height: 105%; cursor: pointer; opacity: 0;}
.file_uploading {width: 100%; height: 10px; margin-top: 20px; background: #ccc;}
.file_uploading .btn_upload {display: none;}
.processing_bar {position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 30px; background:deeppink; transition: 3s;}
.file_uploading .processing_bar {width: 100%;}
.success_box {display: none; width: 50px; height: 50px; position: relative;}
.success_box:before {content: ''; display: block; width: 9px; height: 18px; border-bottom: 6px solid #fff; border-right: 6px solid #fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position: absolute; left: 17px; top: 10px;}
.file_uploaded .success_box {display: inline-block;}
.file_uploaded {margin-top: 0; width: 50px; background:#83ccd3; height: 50px;}
.uploaded_file_view {max-width: 300px; margin: 40px auto; text-align: center; position: relative; transition: .2s; opacity: 0; border: 2px solid #ddd; padding: 15px;}
.file_remove{width: 30px; height: 30px; border-radius: 50%; display: block; position: absolute; background: #aaa; line-height: 30px; color: #fff; font-size: 12px; cursor: pointer; right: -15px; top: -15px;}
.file_remove:hover {background: #222; transition: .2s;}
.uploaded_file_view img {max-width: 100%;}
.uploaded_file_view.show {opacity: 1;}
.error_msg {text-align: center; color: #f00}


</style>
</head>
<body>
<div class="container_vedio">

<div class="one">
   <h1 style="margin-left:400px;margin-top:50px;">Upload  poster or Videos</h2>	
	</div><br><br>
<div id="postCreator">
        <div id="postContainer">
            <div id="selectedContent">
                <!-- Selected image or video will be displayed here -->
            </div>
            <div id="editingOptions">
                <select id="contentSelect" onchange="getContent()">
					<option value="nd">--Choose--</option>
					<option value="image">Image</option>
					<option value="video">Video</option>
				</select>
				 <label style="font-size:35px;margin-left:160px;display:flex;margin-top:60px;"class="gradient-text" id="labeliidd">Post Imgae or Vidoe Here!!!<label>
				<style>

.gradient-text {
    background: linear-gradient(to right, deeppink, pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.savebtnn
{
	text-align: center;
    background: pink;
    height: 41px;
    border: none;
    border-radius: 20px;
    width: 27%;
    /* margin: 0 auto; */
    margin-left: 290px;
    /* display: flex; */
}
.savebtnn:hover{
	background: deeppink;
}


</style>
                
				
				<br>
		
				
            </div>
         
<div id="imgidvvv" style="display:none;">
<main class="main_full" style="border:2px solid;color:deeppink;border-style: dashed;" >
	
		<div class="panel">
			<div class="button_outer">
				<div class="btn_upload">
					<input type="file" id="upload_file" name="">
					Upload Image
				</div>
				<div class="processing_bar"></div>
				<div class="success_box"></div>
			</div>
		</div>
		<div class="error_msg"></div>
		<div class="uploaded_file_view" id="uploaded_view">
			<span class="file_remove">X</span>
		</div>

</main>
<br>
			<label style="color:black;font-size:25px;font-weight:500;">
    Write Caption:&nbsp;&nbsp;<br>
	
	
    <textarea id="captionid" name="captionid" style="width: 100%; border: 1px solid; border-radius: 20px; border-color: pink; height:70px;"></textarea>
</label>
<div id="wordCountMessage" style="color:black;"></div>

<script>
    var textarea = document.getElementById("captionid");
    var wordCountMessage = document.getElementById("wordCountMessage");
    var maxWords = 10;

    textarea.addEventListener("input", function() {
        var words = this.value.trim().split(/\s+/).length;
        if (words > maxWords) {
            var excessWords = words - maxWords;
            this.value = this.value.split(/\s+/).slice(0, maxWords).join(" ");
            wordCountMessage.textContent = "Maximum word limit reached. Excess words removed: " + excessWords;
        } else {
            wordCountMessage.textContent = words + " words";
        }
    });
</script>
<br>
<label style="color:black;font-size:25px;font-weight:500;">Location: &nbsp;&nbsp;<input type="text" id="loactionid" name="loactionid" value="" style="width: 100%; border: 1px solid; border-radius: 20px; border-color: pink; height:50px;"></label>

<br><br>
      <button type="button" class="savebtnn">Save</button>
	</div>	
	
	
	
	
	
	
<!---------------------------------------------------------------------------------------------------------------------------->
	
	
	
	<div id="videoidvvv" style="display:none;">
    <main class="main_full" style="border:2px solid;color:deeppink;border-style: dashed;">
        <div class="panel">
            <div class="button_outer">
                <div class="btn_upload">
                        <input type="file" id="upload_video" name="upload_file">
                    Upload Video
                </div>
                <div class="processing_bar"></div>
                <div class="success_box"></div>
            </div>
        </div>
        <div class="error_msg"></div>
        <div class="uploaded_file_view" id="uploaded_video_view">
            <span class="file_remove">X</span>
        </div>
    </main>
    <br>
    <label style="color:black;font-size:25px;font-weight:500;">
        Write Caption:&nbsp;&nbsp;<br>
        <textarea id="captionid_video" name="captionid_video" style="width: 100%; border: 1px solid; border-radius: 20px; border-color: pink; height:70px;"></textarea>
    </label>
    <div id="wordCountMessage_video" style="color:black;"></div>
    <br>
    <label style="color:black;font-size:25px;font-weight:500;">Location: &nbsp;&nbsp;<input type="text" id="locationid_video" name="locationid_video" value="" style="width: 100%; border: 1px solid; border-radius: 20px; border-color: pink; height:50px;"></label>
    <br><br>
    <button type="button" class="videosavebtn" onclick="videoupoade();">Save</button>
</div>

	
	
	
<!---------------------------------------------------------------------------------------------------------------------------->
        </div>
		
    </div>
	
	
	
	
	

















</div>

<br><br>

<br>


</body>
<!-- <div class="footerlabeel" style="margin-left:400px;display:flex;justify-content:space-between;gap:40px;">
    <label class="lableoffooter" style="font-size:18px;">©&nbspAll&nbsprights&nbspreserved&nbsp@2024</label><br>
    <label class="lableoffooter" style="font-size:18px;">Developed&nbspand&nbspMaintained&nbspby&nbspBluebase&nbspSoftware&nbspServices&nbspPrivate&nbspLimited</label>
</div> -->
</html>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>

    function getContent() {
		debugger;
        var selectedValue = document.getElementById("contentSelect").value;
        if (selectedValue == "image") {
			$("#labeliidd").hide();
			$("#imgidvvv").show();
			$("#videoidvvv").hide();

			
          //  alert("You selected: Image");
        } else if (selectedValue === "video") {
			$("#labeliidd").hide();
			$("#imgidvvv").hide();
			$("#videoidvvv").show();
            //alert("You selected: Video");
        }
		else
		{
			$("#labeliidd").show();
			$("#imgidvvv").hide();
			$("#videoidvvv").hide();
		}
    }

</script>





<script>
var btnUpload = $("#upload_file"),
		btnOuter = $(".button_outer");
	btnUpload.on("change", function(e){
		var ext = btnUpload.val().split('.').pop().toLowerCase();
		if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
			$(".error_msg").text("Not an Image...");
		} else {
			$(".error_msg").text("");
			btnOuter.addClass("file_uploading");
			setTimeout(function(){
				btnOuter.addClass("file_uploaded");
			},3000);
			var uploadedFile = URL.createObjectURL(e.target.files[0]);
			setTimeout(function(){
				$("#uploaded_view").append('<img src="'+uploadedFile+'"  style="height:50px;width:50px;"/>').addClass("show");
			},3500);
		}
	});
	$(".file_remove").on("click", function(e){
		$("#uploaded_view").removeClass("show");
		$("#uploaded_view").find("img").remove();
		btnOuter.removeClass("file_uploading");
		btnOuter.removeClass("file_uploaded");
	});




</script>

<script>
$(document).ready(function() {
    $(".savebtnn").on("click", function() {
	debugger;
        var uploadedFile = $("#upload_file")[0].files[0]; // Get the uploaded file object

        if (!uploadedFile) {
            alert("Please upload an image");
            return;
        }
        
        var formData = new FormData(); // Create a FormData object
        formData.append("upload_file", uploadedFile); // Append the file to FormData
        formData.append("caption", $("#captionid").val()); // Append other form data
        formData.append("location", $("#loactionid").val());
        formData.append("poster_type", $("#contentSelect").val());

        // Send data to PHP script using AJAX
        $.ajax({
            type: "POST",
            url: "save_posters.php",
            data: formData,
            processData: false, // Prevent jQuery from processing the data
            contentType: false, // Prevent jQuery from setting contentType
            success: function(response) {
				if(response!=0)
				{
                alert("Poster saved successfully");
				window.location.href='homee.php';
				}
				else
				{
					alert("Poster Not Saved ");
					window.location.href='homee.php';
				}
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                alert("An error occurred while saving data");
            }
        });
    });
});


</script>


<script>
var btnUploadVideo = $("#upload_video"),
    btnOuterVideo = $(".button_outer");

btnUploadVideo.on("change", function(e){
	debugger;
    var ext = btnUploadVideo.val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['mp4', 'avi', 'mov', 'mkv']) == -1) {
        $(".error_msg").text("Not a Video...");
    } else {
        $(".error_msg").text("");
        btnOuterVideo.addClass("file_uploading");
        setTimeout(function(){
            btnOuterVideo.addClass("file_uploaded");
        },3000);
        var uploadedVideo = URL.createObjectURL(e.target.files[0]);
        setTimeout(function(){
            $("#uploaded_video_view").append('<video controls style="height:200px;width:200px;"><source src="'+uploadedVideo+'" type="video/mp4">Your browser does not support the video tag.</video>').addClass("show");
        },3500);
    }
});

$(".file_remove").on("click", function(e){
    $("#uploaded_video_view").removeClass("show");
    $("#uploaded_video_view").find("video").remove();
    btnOuterVideo.removeClass("file_uploading");
    btnOuterVideo.removeClass("file_uploaded");
});


</script>
<script>
function videoupoade() {
    debugger;

    var videoInput = document.getElementById("upload_video");
    var videoFile = videoInput.files[0]; // Get the first file selected in the input field

    if (!videoFile) {
        alert("Please select a video file");
        return;
    }

    var videoName = videoFile.name; // Extract only the filename from the file object

    var data = {
        video_name: videoName,
        caption: $("#captionid_video").val(),
        location: $("#locationid_video").val(),
        poster_type: $("#contentSelect").val()
    };

    // Send data to PHP script using AJAX
    $.ajax({
        type: "POST",
        url: "save_video.php",
        data: data,
        success: function(response) {
            if (response != 0) {
                alert("Poster saved successfully");
                //window.location.href = 'homee.php';
            } else {
                alert("Poster Not Saved ");
                //window.location.href = 'homee.php';
            }
        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
            alert("An error occurred while saving data");
        }
    });
}



</script>