{% extends "firebase/firebase_layout.html" %}
<title>{% block title %}Notification Form{% endblock %}Edit Data</title>
{% block style %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" />
<link href="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/webcam-demo.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<style type="text/css">
    .loader {
        position: absolute;
        z-index: 10000;
        background: #fff;
        width: 100%;
        height: 100vh;
        top: 0;
    }

    .loader-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
{% endblock %} {% block content %}
<div class="loader" style="display: none;"><h4 class="text-center text-danger loader-text">Please wait..</h4></div>
<form  id="edit_data" enctype="multipart/form-data">
    {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 
    <div class="row mt-3"> 
        <div class="col-sm-3"></div>
          <div class="col-sm-6">
      <div class=" text-center" id="successMsg" >
        <h6 class="alert alert-success  alert-dismissible">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg |safe }}</h6>
      </div>
       <div class="col-sm-3"></div>
        </div>
      </div>
    {% endfor %} 
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
       <div class="row mt-3"> 
        <div class="col-sm-3"></div>
          <div class="col-sm-6">
            <div class="text-center" id="successMsg" >
            <h6 class="alert alert-danger  alert-dismissible">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg |safe }}</h6>
            </div>
            <div class="col-sm-3"></div>
        </div>
      </div>
    {% endfor %}
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <br />
            <div class="alert alert-success text-center alert-dismissible successMessage" id="addMsg" style="display: none;">
                <p class="close close_id" aria-label="close">&times;</p>
                <img src="/static/images/right.png" width="21px" height="21px" />
                <span id="addmsg"></span>
            </div>

            <div class="alert alert-danger text-center alert-dismissible successMessage" id="ErrorMsg" style="display: none;">
                <p class="close close_id" aria-label="close">&times;</p>
                <img src="/static/images/wrong_img.png" width="21px" height="21px" />
                <span id="errormsg"></span>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>

    <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" >
    <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" >
    <input type="hidden" name="html_data" id="html_data" value="{{html_data}}" >
    <input type="hidden" name="notification_id" id="notification_id" >
    <input type="hidden" name="is_update" id="is_update">
    <div class="row">
        <div class="col-lg-1"></div>
        <div class="col-lg-6">
            <h4 style="text-align: center;">{{get_conf.conf_name}} - Notification</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-3 col-md-12 col-sm-12">
                            <label>Title</label>
                        </div>
                        <div class="col-lg-9 col-md-12 col-sm-12">
                            <input type="text" name="notification_title" id="notification_title" class="form-control" placeholder="Enter Title"/>
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <div class="col-lg-3 col-md-12 col-sm-12">
                            <label>Content</label>
                        </div>
                        <div class="col-lg-9 col-md-12 col-sm-12">
                            <textarea name="notification_content" id="notification_content" rows="3" cols="68" class="form-control" style="white-space: pre-wrap;"  placeholder="Enter Content"></textarea>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-lg-3 col-md-12 col-sm-12">
                            <label>Upload Image</label>
                        </div>
                        <div class="col-lg-9 col-md-12 col-sm-12">
    						<input type="hidden" name="image_name" id="image_name"  />

                            <div id="Imageupload">
                                <input type="hidden" name="file_exists" id="file_exists" value="" />
                                <input type="hidden" name="image_deleted" id="image_deleted" value="" />
                                <div class="row d-flex">
                                    <label for="files" class="btn btn-info"> <i class="fa fa-cloud-upload"></i> Custom Upload </label>
                                    <input type="file" class="form-control" autocomplete="off" accept="image/*" id="files" name="files" data-toggle="modal" data-target="#myModal" target="_blank" onchange="image_upload()" style="display: none;"
                                    />
                                </div>
                            </div>
                            <img id="image_container" class="img-thumbnail" />
                            <div id="ImageRemove" class="mt-3">
                                <img id="image_aws" class="img-thumbnail" src="" />
                                <button type="button" class="btn btn-danger" onclick="removeImage()">Change or Remove</button>
                            </div>
                        </div>
                    </div>
                    <br />

                    <div class="row">
                        <div class="col-lg-3 col-md-12 col-sm-12">
                            <label>Select User</label>
                        </div>
                        <div class="col-lg-9 col-md-12 col-sm-12">
                            <select class="form-control w-100" id="send_user" name="send_user">
                                <option value="" id="select"> Select User</option>
                                <option value="For all">For all</option>
                                <option value="Logged User">Loggedin User</option>
                                <option value="Commitment User">Commitment User</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <br />
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                            <button type="button" class="btn btn-md btn-warning preview_btn" name="preview_btn" id="preview_btn" title="Preview" value="Preview">Preview</button>


                            <button type="button" class="btn btn-md btn-success save_btn" name="save_btn" id="save_btn" title="Save" value="Save">Save</button>
                            <button type="button" class="btn btn-md btn-secondary save_btn" name="save_and_send_btn" id="save_and_send_btn" title="Save and Send Now" value="Save and Send Now">Save and Send Now</button>
                            <button style="display:None;" type="button" class="btn btn-md btn-primary" name="update_btn" id="update_btn" title="Update" value="Update">Update</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 preview_area" >
            <h4 style="text-align: center;">Preview</h4>
            <div class="bg-white" id="preview_area" style="border-style: ridge;">
                <div style=" margin-left: 10px;margin-right: 10px;">
                    <div class="row">
                        <div class="col-lg-9">
                            <p id="title"></p>
                        </div>
                        <div class="col-lg-3">
                            <img id="image"  alt="" style="max-width: 50px;margin-left:18px ;">
                        </div>
                    </div><hr>
                    <div class="row">
                        <div class="col-lg-12">
                            
                            <p   id="content"></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-1"></div>
    </div>
<div id="notification_index"></div>
</form>


<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <!--Sample Mail  content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Crop Image To Upload</h4>
                <button type="button" class="btn-close" data-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div class="row">
                    <!-- changed -->
                    <h5 style="text-align: center;">Preview Image to crop:</h5>
                    <!-- changed -->

                    <div class="col-md-12" id="croppie-container">
                        <img id="show_image" class="my-image result" style="margin: 10px; height: 200px; width: 200px; display: none;" />
                    </div>
                    <div id="croppie_div" class="demo"></div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <button type="button" class="btn btn-md btn-warning" name="uptade_btn" id="uptade_btn" title="Update" onclick="croppie_rotate(-90)">Rotate Left</button>
                        <button type="button" class="btn btn-md btn-warning" name="uptade_btn" id="uptade_btn" title="Update" onclick="croppie_rotate(90)">Rotate Right</button>
                    </div>

                    <div class="col-md-2">
                        <button class="btn btn-success float-right" id="upload-button" onclick="apply_btn()">Apply</button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="discard_btn" class="btn btn-danger float-right" data-dismiss="modal">Discard</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




    <main id="webcam-app" style="display: none;">
        <div class="form-control webcam-start" id="webcam-control">
                <label class="form-switch">
                <input type="checkbox" id="webcam-switch">
                <i></i> 
                <span id="webcam-caption">Click to Start Camera</span>
                </label>      
                <button id="cameraFlip" class="btn d-none"><i class="material-icons flip_btn">cameraswitch</i></button>   
        </div>
        <div class="row">
            <div class="col-4 col-md-4" ></div>
            <div id="successMsg" class="col-4 col-md-4 alert-success text-center d-none">
                  <h2  class="text-center">Selfie Capture Success</h2>
                <button id="closeSuccess" class="btn btn-primary ml-3">OK</button>
            </div>

            <div class="col-4 col-md-4" ></div>
        </div> 
        <div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
            Fail to start camera, please allow permision to access camera. <br/>
            If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
            <button id="closeError" class="btn btn-primary ml-3">OK</button>
        </div>
        <div class="md-modal md-effect-12">
            <div id="app-panel" class="app-panel md-content row p-0 m-0">     
                <div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
                    <video id="webcam" autoplay playsinline width="640" height="480"></video>
                    <canvas id="canvas" class="d-none"></canvas>
                    <!--<img src="" id="canvas">-->
                    <canvas id="canvas2" class="d-none"></canvas>
                    <div class="flash"></div>
                    <audio id="snapSound" src="/static/audio/snap.wav" preload = "auto"></audio>
                </div>
                <div id="cameraControls" class="cameraControls">
                    <a href="#" id="exit-app" title="Exit App" class="d-none"><i class="material-icons">exit_to_app</i></a>
                    <a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
                    <a href="#" id="download-photo" download="selfie.png" target="_blank" title="Download Photo" class="d-none"><i class="material-icons">file_download</i></a>  


                    <!-- <a href="#" id="save-photo"  title="Save Photo" class="d-none"><i class="material-icons">download_done</i></a>  -->
                    

                    <a href="#" id="resume-camera"  title="Resume Camera" class="d-none"><i class="material-icons">camera_front</i></a>
                     
                </div>
            </div>        
        </div>
        <div class="md-overlay"></div>
    </main>

{% endblock %} {% block bottomscript %}
<script src="/static/js/webcam-easy.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-jcrop@0.9.15/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src='/static/js/app_del.js'></script>
<script type="text/javascript">
	var croppie;
    var BaseUrl = document.location.origin;
    var oneMB = 1048576;

    $(document).ready(function () {

    	$("#ImageRemove").hide();
        $(".preview_area").hide();

    	var html_data  = $("#html_data").val();
    	$("#notification_index").html(html_data);


        // for title
        var titleinputElement = $('#notification_title');

        titleinputElement.keyup(function() {
            var titleinputValue = titleinputElement.val();
            var titlecontentDiv = $('#title');
            titlecontentDiv.html(titleinputValue);
        }); 

        // for content
        var contentinputElement = $('#notification_content');

        contentinputElement.keyup(function() {
            
            let content = e.target.value.replace(/\r\n|\r|\n/g, "<br />")
            $('#content').html("<pre>"+content+"</pre>");

            // var contentinputValue = contentinputElement.val();
            // var contentDiv = $('#content');
            // contentDiv.html(contentinputValue);
        }); 

    });


    $(document).on("click", ".close_id", function (e) {
        $("#addMsg").hide();
        $("#addmsg").html('');

        $("#ErrorMsg").hide();
        $("#errormsg").html('');
    });


    $(document).on("click", ".preview_btn", function (e) {
        var notification_title   = $("#notification_title").val();
        var notification_content = $("#notification_content").val();
        var send_user            = $("#send_user").val();
        var image                = $("#image_name").val();
        if(notification_title.length > 0 || notification_content.length > 0 || image.length > 0)
        {
            $(".preview_area").show();
            $("#title").html(notification_title);
            // $("#content").html(notification_content);
            
            
            var notification_content = notification_content.replace(/\r\n|\r|\n/g, "<br />")
            $('#content').html("<pre>"+notification_content+"</pre>");
            
            $("#image").attr("src",image);

        }
        else{
            alert("Please fill the form");
            return false;
        }
    });


    $(document).on("click", ".send_notification", function (e) {
        var notification_id = $(this).val();
        var conf_id         = $("#conf_id").val();
        var conf_key        = $("#conf_key").val();

        if(confirm("Confirm to send notification.")) { 
            $.ajax({ 
                type     :  'GET',
                data     :  {
                                "notification_id"   : notification_id
                            },
                url      : BaseUrl+"/"+conf_id+"/"+conf_key+"/send_fb_notification",             
                dataType : "html",    
                success: function(data){
                   var data_1 = JSON.parse(data);
                   var msg    = data_1.msg;
                   var data   = data_1.edit_data;
                   if(data_1.status == 1)
                   {   
                        $("#addMsg").show();
                        $("#addmsg").html(msg);
                        topFunction();
                   }
                   else{
                    alert(msg);
                    return false;
                   }
                }
            });         
            

        }
        else{
            return false;
        }


    });

    
    $(document).on("click", ".save_btn", function (e) {
        var is_send = $(this).val();
        if(is_send== "Save"){
            var is_send          = 0 ;
        }
        else{
            var is_send          = 1 ;
        }
        var conf_id              = $("#conf_id").val();
        var conf_key             = $("#conf_key").val();
		var notification_title   = $("#notification_title").val();
		var notification_content = $("#notification_content").val();
		var send_user            = $("#send_user").val();
		var image                = $("#image_name").val();
        if(notification_title){
            $.ajax({ 
                type     :  'POST',
                data     :  {
                                "notification_title"   : notification_title,
                                "notification_content" : notification_content,
                                "send_user"   : send_user,
                                "image_data"  : image,
                                "is_send"     : is_send
                            },
                url      : BaseUrl+"/"+conf_id+"/"+conf_key+"/post_fb_notification",             
                dataType : "html",    
                success: function(data){
                   var data_1 = JSON.parse(data);
                   var msg    = data_1.msg;
                   if(data_1.status == 1)
                   {   
                        $("#addMsg").show();
                        $("#addmsg").html(msg);
                        $("#notification_index").empty();
                        $("#notification_index").html(data_1.html_data); 
                        clear();
                        topFunction();
                   }
                   else{
                        alert(msg);
                        return false;
                   }
               }
           });
        }
        else{
            alert("Please enter Title");
            return false;
        }
    });

   	$(document).on("click", "#edit_btn", function (e) {
   		var notification_id = $(this).val();
        var conf_id         = $("#conf_id").val();
        var conf_key        = $("#conf_key").val();
   		$.ajax({ 
            type     :  'GET',
            data     :  {
            				"notification_id"   : notification_id
						},
            url      : BaseUrl+"/"+conf_id+"/"+conf_key+"/edit_fb_notification",             
            dataType : "html",    
            success: function(data){
               var data_1 = JSON.parse(data);
               var msg    = data_1.msg;
               var data   = data_1.edit_data;
               if(data_1.status == 1)
               {   
                	$("#notification_id").val(data.notification_id);
                	$("#send_user").val(data.send_user);
                	$("#notification_title").val(data.notification_title);
                	$("#notification_content").val(data.notification_content);
                    if(data.image){
                    	$("#image_name").val(data.image);
                    	$("#image_container").attr("src",'');
                    	$("#image_container").attr("src",data.image);
                    	$("#image_container").show();
                        $("#files").attr("src",data.image);
                        $("#Imageupload").hide();
                        $("#ImageRemove").show();
                    }
                    else{
                        $("#Imageupload").show();
                        $("#ImageRemove").hide();
                    }
                    $("#update_btn").show();
                    $("#save_btn").hide();
                    $("#save_and_send_btn").hide();
                    $("#is_update").val(1);
                    topFunction();
               }
               else{
               		alert(msg);
               		return false;

               }
           }
       });
   	});

     $(document).on("click", "#update_btn", function (e) {
        var conf_id              = $("#conf_id").val();
        var conf_key             = $("#conf_key").val();
        var notification_id      = $("#notification_id").val();
        var is_update            = $("#is_update").val();
        var notification_title   = $("#notification_title").val();
        var notification_content = $("#notification_content").val();
        var send_user            = $("#send_user").val();
        var image                = $("#image_name").val();
        var is_send              = 0 ;
        $.ajax({ 
            type     :  'POST',
            data     :  {
                            "notification_id"      : notification_id,
                            "notification_title"   : notification_title,
                            "notification_content" : notification_content,
                            "send_user"   : send_user,
                            "image_data"  : image,
                            "is_update"   : is_update
                        },
            url      : BaseUrl+"/"+conf_id+"/"+conf_key+"/post_fb_notification",             
            dataType : "html",    
            success: function(data){
               var data_1 = JSON.parse(data);
               var msg    = data_1.msg;
               if(data_1.status == 1)
               {   
                    $("#addMsg").show();
                    $("#addmsg").html(msg);
                    $("#notification_index").empty();
                    $("#notification_index").html(data_1.html_data); 
                    clear();
                    topFunction();
               }
               else{
                    alert(msg);
                    return false;
               }
           }
       });
    });
    
    function apply_btn() {
        var file_name            = $("#files").val().split("\\").pop();
        var conf_id              = $("#conf_id").val();
        var conf_key             = $("#conf_key").val();
        $("#upload-button").html("Please Wait..");
        $("#upload-button").attr("disabled",true);
        if (file_name){
            if (file_name.length == 0) {
              	file_name   = "camera.png";
            }
             
	        croppie.result("base64").then(function (data) {
	        $.ajax({
	            url      : BaseUrl+"/"+conf_id+"/"+conf_key+"/apply_file_upload",
	            method   : "POST",
	            data     : {'image_data':data,'file_name':file_name},
	            dataType :"html",
	            success  : function (response) {

					$("#upload-button").html("Apply")
					$("#upload-button").attr("disabled",false)
	                var responseObject = JSON.parse(response);

	                $("#myModal").modal('hide');
	                $("#Imageupload").hide();
	                $("#Imageupload").removeClass('d-none');
	                $("#ImageRemove").show();
	                $("#ImageRemove").removeClass('d-none');

	                var image_data = responseObject.image_path+ responseObject.image_name;

	                $("#image_name").val(image_data);
	                $("#image_container").attr("src",'');
	                $("#image_container").attr("src",image_data);
	                $("#image_container").show();
	            },
	            error: function (xhr, status, error) {
	                console.log(xhr);
	                alert("Error saving image: " + error);
	            },
	        });
	      });
		}  
    } 

    function clear() {
        $("#is_update").val('');
        $("#notification_id").val('');
        $("#notification_title").val('');
        $("#notification_content").val('');
        $("#send_user").val('');
        $("#image_name").val('');
        $("#show_image").attr("src", "");
        $("#show_image").hide();
        $("#cropped-image").hide();
        $("#image_container").attr("src", "");
        $("#file_exists").val("");
        $("#files").val("");
        $("#image_data").val("");
        $("#image_container").hide();
        $("#ImageRemove").hide();
        $("#ImageRemove").removeClass("d-none");
        $("#Imageupload").show();
        $("#Imageupload").removeClass("d-none");
        $(".save_btn").show();
        $("#update_btn").hide();

        $("#preview_area").empty();
        $(".preview_area").hide();
    }



    function removeImage() {
        $("#file_exists").val("");
        $("#files").val("");
        $("#image_name").val('');
        $("#image_container").hide();
        $("#Imageupload").show();
        $("#Imageupload").removeClass("d-none");
        $("#ImageRemove").addClass("d-none");
        $("#image_deleted").val(1);
        $("#addMsg").hide();
        $("#addmsg").text("");
        $("#del_update_btn").hide();
        
        $("#cropped-image-container").empty();
        $("#show_image").attr("src", "");
        $("#show_image").hide();
    }

    function croppie_rotate(degree) {
        croppie.rotate(degree);
    }

    $("#discard_btn").on("click", function () {
        $("#show_image").attr("src", "");
        $("#show_image").hide();
        $("#cropped-image").hide();
        $("#image_container").attr("src", "");
        $("#file_exists").val("");
        $("#files").val("");
        $("#image_data").val("");
        $("#image_container").hide();
        $("#ImageRemove").hide();
        $("#ImageRemove").removeClass("d-none");
    });


    function image_upload() {
        var user_profile = $("#files")[0].files[0];
        if ($("#files")[0].files[0].size > oneMB * 3) {
            alert("File Must less than 3MB");
            clear();
            return false;
        }
        var reader = new FileReader();
        reader.onload = function () {
            // $("#show_image").show();
            
            $("#show_image").hide();
            $("#show_image").attr("src", reader.result);
            if (croppie) {
                croppie.destroy();
            }
            // Initialize Croppie
            croppie = new Croppie(document.getElementById("show_image"), {
                viewport: { width: 138, height: 158 },
                boundary: { width: 210, height: 240 },
                enableOrientation: true,
                
                // To Zoom start
                enableZoom:true,
                showZoomer: false,
                enableResize: true,
                mouseWheelZoom: 'ctrl'
                // To Zoom end
            });
            // Bind Croppie to existing image
            croppie
                .bind({
                    url: $("#show_image").attr("src"),
                    orientation: 1,
                })
                // .then(function () {
                croppie.result('blob').then(function(blob) {
                    croppie.element.addEventListener("update", function () {
                        croppie.result("base64").then(function (data) {
                            // Create new image element and update the existing one
                            var croppedImage = document.getElementById("cropped-image");
                            if (!croppedImage) {
                                croppedImage = new Image();
                                croppedImage.id = "cropped-image";
                                $("#cropped-image-container").append(croppedImage);
                                $("#show_image").attr("src", "");
                                $("#show_image").hide();
                            }
                            croppedImage.src = data;
                        });
                    });
                });
        };
        reader.readAsDataURL(user_profile);
    }

     function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      }



</script>
{% endblock %}