{% extends 'stela_control/marketing/meta_business/index.html' %}
{% load static %}
{% load hosts %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load humanize %}
{% block bsCall %}
{% endblock  %}
{% block meta_contain %}
<div id="popupVideo" class="popup">
    
</div>
<script>
    var videoPopup = document.getElementById('popupVideo');
</script>
<div class="row main-contentpro fade-in">
    <div class="row">
        <div class="col-lg-5 mb-3">
            <a href="/marketing/business-suite/{{page.asset_id}}" class="btn btn-sm btn-shappire-outline">{% trans "Back" %} <i class="ri-arrow-go-back-line fs-6"></i></a>
        </div>
        <div class="col-lg-7">
            <h1 class="oxanium">ContentPro Menu</h1>
        </div>
    </div>
    <div class="col-lg-7 mb-3">
        <div class="card backdrop-clear">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 mb-2">
                        <div class="d-flex justify-content-end">
                            <h3 class="fs-4 oxanium my-3">{% trans "Last Posts" %}</h3>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="d-flex justify-content-end my-3">
                            <button onclick="postList()" class="btn btn-sm btn-shappire">{% trans "Post List" %}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container vh-60 text-dark">
                {% for post in pageposts %}
                    <div class="card vh-20 my-3 content-cage">
                        <div class="text-compact">
                            {{post.content|safe}}
                        </div>
                        <small>{{post.created|naturaltime}}</small>
                    </div>
                {% empty %}
                    <div class="vh-40 d-flex justify-content-center align-items-center">
                        <p class="text-dark">{% trans "You have no posts made" %}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="col-lg-5 mb-3">
        <div class="card backdrop-clear vh-70">
            <div class="d-flex justify-content-center my-3">
                <button onclick="clearPost()" class="btn btn-shappire" data-bs-toggle="modal" data-bs-target="#postModal">{% trans "Create New Post" %} <i class="ri-newspaper-fill fs-5"></i></button>
            </div>
            <div class="container">
                <div class="row">
                    <div class="card vh-50 rounded-xl">
                        <p class="text-dark oxanium text-uppercase text-center">{% trans "Schedule post list" %}</p>
                        <ul class="px-2">
                            {% for post in schedules %}
                                <li class="my-3 list-circles ml-3">
                                    <div class="row align-items-center">
                                        <div class="col-10">
                                            <a href="">
                                                <p class="mb-0 text-dark">{{post.title}}</p>
                                                <small> {% trans "publication date" %}: {{post.schedule}}</small>
                                            </a>
                                        </div>
                                        <div class="col-2 p-0">
                                            <button class="btn btn-sm btn-shappire"><i class="ri-login-circle-fill fs-5"></i></button>
                                        </div>
                                    </div>
                                </li>
                            {% empty %}
                                <div class="vh-30 d-flex justify-content-center align-items-center">
                                    <p class="text-dark">{% trans "You have no scheduled posts" %}</p>
                                </div>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>    
    </div> 
</div>

<div class="row post-list d-none">
    <div class="row">
        <div class="col-lg-5">
            <button onclick="backPro()" class="btn btn-sm btn-shappire-outline">{% trans "Back" %} <i class="ri-arrow-go-back-line fs-6"></i></button>
        </div>
        <div class="col-lg-7">
            <h1 class="oxanium">{% trans "Post History" %}</h1>
        </div>
    </div>
    <div class="vh-70" id="listview">
        {% for post in pageposts %}
            <div class="col-lg-12 my-3">
                <div class="card overflow-hidden p-0 justify-content-between vh-40 vh-40-mobile rounded-xl wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="row">
                                {% for obj in post.media.all %}          
                                    {% if post.media.all|length == 2 %}
                                        {% if obj.mp4 %}
                                            <div class="col-6 p-0">
                                                <i class="fa fa-play play-btn"></i>
                                                <video class="w-100 image-box" id="videoPlayer{{obj.id}}">
                                                    <source src="{{obj.media.url}}" type="video/mp4">
                                                </video>
                                                <script>
                                                    var videoTrigger = document.getElementById('videoPlayer{{obj.id}}');
                                                    
                                                    videoTrigger.addEventListener('click', function() {
                                                        videoPopup.innerHTML = '<span class="cerrar" onclick="closePopup{{obj.id}}()">&times;</span><video class="w-100" id="videoPlayer{{obj.id}}" controls autoplay><source src="{{obj.media.url}}" type="video/mp4"></video>'
                                                        videoPopup.style.display = 'block';

                                                        });
                                                    function closePopup{{obj.id}}() {
                                                            videoPopup.style.display = 'none';
                                                        }
                                                </script>
                                            </div>
                                        {% else %}
                                            <div class="col-6 p-0">
                                                <img class="w-100 image-box" src="{{obj.media.url}}" alt="">
                                            </div>
                                        {% endif %} 
                                    {% elif post.media.all|length == 3 %}
                                        {% if forloop.counter == 3 %}
                                            {% if obj.mp4 %}
                                                <div class="col-12 p-0">
                                                    <i class="fa fa-play play-btn"></i>
                                                    <video class="w-100 image-box-v2 video-box-v1" id="videoPlayer{{obj.id}}">
                                                        <source src="{{obj.media.url}}" type="video/mp4">
                                                    </video>
                                                    <script>
                                                        var videoTrigger = document.getElementById('videoPlayer{{obj.id}}');
                                                        
                                                        videoTrigger.addEventListener('click', function() {
                                                            videoPopup.innerHTML = '<span class="cerrar" onclick="closePopup{{obj.id}}()">&times;</span><video class="w-100" id="videoPlayer{{obj.id}}" controls autoplay><source src="{{obj.media.url}}" type="video/mp4"></video>'
                                                            videoPopup.style.display = 'block';
    
                                                            });
                                                        function closePopup{{obj.id}}() {
                                                                videoPopup.style.display = 'none';
                                                            }
                                                    </script>
                                                </div>
                                            {% else %}
                                                <div class="col-12 p-0">
                                                    <img class="w-100 image-box-v2" src="{{obj.media.url}}" alt="">
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            {% if obj.mp4 %}
                                                <div class="col-6 p-0">
                                                    <i class="fa fa-play play-btn"></i>
                                                    <video class="w-100 video-box-v1" id="videoPlayer{{obj.id}}">
                                                        <source src="{{obj.media.url}}" type="video/mp4">
                                                    </video>
                                                    <script>
                                                        var videoTrigger = document.getElementById('videoPlayer{{obj.id}}');
                                                        
                                                        videoTrigger.addEventListener('click', function() {
                                                            videoPopup.innerHTML = '<span class="cerrar" onclick="closePopup{{obj.id}}()">&times;</span><video class="w-100" id="videoPlayer{{obj.id}}" controls autoplay><source src="{{obj.media.url}}" type="video/mp4"></video>'
                                                            videoPopup.style.display = 'block';
    
                                                            });
                                                        function closePopup{{obj.id}}() {
                                                                videoPopup.style.display = 'none';
                                                            }
                                                    </script>
                                                </div>
                                            {% else %}
                                                <div class="col-6 p-0">
                                                    <img class="w-100 video-box-v1" src="{{obj.media.url}}" alt="">
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% elif post.media.all|length == 4 %}
                                        {% if obj.mp4 %}
                                            <div class="col-6 p-0">
                                                <i class="fa fa-play play-btn"></i>
                                                <video class="w-100 image-box-v1" id="videoPlayer{{obj.id}}">
                                                    <source src="{{obj.media.url}}" type="video/mp4">
                                                </video>
                                                <script>
                                                    var videoTrigger = document.getElementById('videoPlayer{{obj.id}}');
                                                    
                                                    videoTrigger.addEventListener('click', function() {
                                                        videoPopup.innerHTML = '<span class="cerrar" onclick="closePopup{{obj.id}}()">&times;</span><video class="w-100" id="videoPlayer{{obj.id}}" controls autoplay><source src="{{obj.media.url}}" type="video/mp4"></video>'
                                                        videoPopup.style.display = 'block';

                                                        });
                                                    function closePopup{{obj.id}}() {
                                                            videoPopup.style.display = 'none';
                                                        }
                                                </script>
                                            </div>
                                        {% else %}
                                            <div class="col-6 p-0">
                                                <img class="w-100 image-box-v1" src="{{obj.media.url}}" alt="">
                                            </div>
                                        {% endif %}
                                    {% else %}
                                        {% if obj.mp4 %}
                                            <div class="col-12">
                                                <i class="fa fa-play play-btn"></i>
                                                <video class="w-100 image-box" id="videoPlayer{{obj.id}}">
                                                    <source src="{{obj.media.url}}" type="video/mp4">
                                                </video>
                                                <script>
                                                    var videoTrigger = document.getElementById('videoPlayer{{obj.id}}');
                                                    
                                                    videoTrigger.addEventListener('click', function() {
                                                        videoPopup.innerHTML = '<span class="cerrar" onclick="closePopup{{obj.id}}()">&times;</span><video class="w-100" id="videoPlayer{{obj.id}}" controls autoplay><source src="{{obj.media.url}}" type="video/mp4"></video>'
                                                        videoPopup.style.display = 'block';

                                                        });
                                                    function closePopup{{obj.id}}() {
                                                            videoPopup.style.display = 'none';
                                                        }
                                                </script>
                                            </div>
                                        {% else %}
                                            <div class="col-12">
                                                <img class="w-100 image-box" src="{{obj.media.url}}" alt="">
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                {% empty %}
                                <img class="w-100 image-box" src="https://emmerutcdn.s3.amazonaws.com/static/img/stela/fp_logo.jpg" alt="">
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-lg-9 text-dark d-flex flex-column justify-content-between my-4 content-cage">
                            <div class="row">
                                <div class="text-compact">
                                    {{post.content|safe}}
                                </div>
                                <small>{{post.created|naturaltime}}</small>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="d-flex justify-content-end mr-4">
                                        <button onclick="updatePost('{{post.id}}')" class="btn btn-sm mx-2 btn-shappire-outline" data-bs-toggle="modal" data-bs-target="#postModal">{% trans "Edit Post" %}</button>
                                        <button onclick="removePostRequest('{{post.id}}')" class="btn btn-sm mx-2 btn-danger" data-bs-toggle="modal" data-bs-target="#removePost">{% trans "Remove" %}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% empty %}
        <div class="d-flex flex-column justify-content-center vh-60 fade-in">
            <h3 class="text-center oxanium">{% trans "You have no posts made" %}</h3>
        </div>
        {% endfor %}
    </div>
    <div class="preload-page d-none"></div>
    
</div>

<div class="modal fade" id="postModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="mb-3">
          <div class="container">
            <div class="row">
                <div class="col-12"> 
                    <h5 class="modal-title oxanium text-center" id="staticBackdropLabel">{% trans "Create Post" %}</h5>                   
                    <div class="row my-2 justify-content-evenly align-items-center">
                        <div class="col-lg-5">
                            <p class="text-dark text-center">{% trans "Add to your post" %}</p>
                        </div>
                        <div class="col-lg-7">
                            <div class="post-menu-bar">
                                <ul>
                                    <li class="image_up" id="image_up">
                                        <i class="ri-image-add-fill text-icon-post icon-adjust fs-3"></i>
                                    </li>
                                    <li class="video_up" id="video_up">
                                        <i class="ri-video-upload-fill text-icon-post icon-adjust fs-3"></i>
                                    </li>
                                    <li class="sched_post" id="sched_post">
                                        <i class="ri-time-fill text-icon-post fs-3"></i>
                                    </li>
                                    <li class="proStela" id="proStela">
                                        <i class="fa-solid fa-circle-nodes text-icon-post mt-2 fs-4"></i>
                                    </li>
                                    <li class="stelaSight" id="stelaSight">
                                        <i class="ri-shape-fill text-icon-post fs-3"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <form class="w-100 dropzone d-none" id="imgDropzone" method="post" enctype="multipart/form-data" ondrop="submitTrigger()">
                            {% csrf_token %}
                            <input type="hidden" id="postid" name=post-id>
                            <button type="button" class="btn-close close-option" onclick="closeDropzone()"></button>
                            <div id="updateMedia">

                            </div>
                            <div id="mediaLoader">
                                <div class="preload-page media-event d-none"></div>
                            </div>
                    </form>
                    <form class="w-100 dropzone d-none" id="videoDropzone" method="post" enctype="multipart/form-data" ondrop="submitTrigger()">
                        {% csrf_token %}
                        <input type="hidden" id="postid2" name=post-id>
                        <button type="button" class="btn-close close-option" onclick="closeDropzone2()"></button>
                        <div id="updateMedia">

                        </div>
                        <div id="mediaLoader">
                            <div class="preload-page media-event d-none"></div>
                        </div>
                    </form>
                    <div class="pro-stela d-none">
                            <h5 class="oxanium fs-6 typed"></h5>
                            <h3 class="text-center fs-4 mb-0">PRO-Stela AI</h3>
                            <div class="d-flex justify-content-center mb-2">
                                <small>{% trans "Your personal assistant" %}</small>
                            </div>
                            <input type="hidden" name="messages" value="{{qs}}" id=messages>
                            <div class="chatbox" id="respond"></div>
                            <textarea class="form-control" name="" id="query" cols="30" rows="2" placeholder='{% trans "Stela, create marketing content." %}'></textarea>
                            <div class="stela-alert bottom-alert-modal" id="alert"></div>
                            <script>
                            const titleText = '{% trans "Hello! How I can help? Ask me and I will answer you..." %}';
                            const text = '{% trans "Send Query" %} <i class="fa-solid fa-paper-plane mx-2"></i>';
                            </script>
                            <div class="row justify-content-between p-4">
                                <div class="col-lg-3 my-3">
                                  <a type="button" class="btn btn-shappire btn-block btn-sm center-btn oxanium fw-bold d-flex" onclick="clearBlackstar()">{% trans "New Chat" %}</a>
                                </div>
                                <div class="col-lg-4 my-3">
                                    <a type="button" class="btn btn-shappire btn-block btn-sm center-btn oxanium fw-bold d-flex" onclick="goPost()">{% trans "Continue Post" %}</a>
                                  </div>
                                <div class="col-lg-4 my-3">
                                  <button type="button" class="btn btn-shappire btn-block btn-sm center-btn query-btn oxanium fw-bold d-flex" onclick="blackstar()">{% trans "Send Query" %} <i class="fa-solid fa-paper-plane mx-2 fs-5"></i></button>
                                </div>
                            </div>
                    </div>
                    <div class="stela-sight d-none">
                            <h3 class="text-center fs-4 mb-0">PRO-Stela Sight</h3>
                            <div class="d-flex justify-content-center">
                                <small>{% trans "Smart Imager" %}</small>
                            </div>
                            <div class="row justify-content-evenly">
                                <div class="col-lg-9">
                                    <p class="text-dark">{% trans "number of samples" %}</p>
                                </div>
                                <div class="col-lg-2">
                                    <select name="" id="qtySamples" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                    </select>
                                </div>
                            </div>
                            <textarea class="form-control" name="" id="querySample" cols="30" rows="2" placeholder='{% trans "Stela, create marketing content." %}'></textarea>
                            <div class="d-flex mt-3 justify-content-end">
                                <a type="button" class="btn btn-shappire oxanium fw-bold d-flex" onclick="goPost()">{% trans "Continue Post" %}</a>
                                <button type="text" class="btn btn-shappire oxanium image-btn mx-2" onclick="generateImg()">{% trans "Create" %}</button>
                            </div>
                            <div id="result">
                                
                            </div>
                    </div>
                    <form class="w-100" action="/marketing/business-suite/{{page.asset_id}}/content-pro" id="fbPost" method="post" enctype="multipart/form-data" onchange="submitTrigger()">
                            {% csrf_token %}
                            <div class="row justify-content-evenly schedule-post d-none my-2">
                                <div class="col-lg-7">
                                    <p class="text-dark">{% trans "Date to schedule publication?" %}</p>
                                </div>
                                <div class="col-lg-4 content-schedule">
                                    {{form.schedule|as_crispy_field}}
                                </div>
                                <button type="button" class="btn-close close-option" onclick="closeClock()"></button>
                            </div>
                            <div class="content-place">
                                {{form.content|as_crispy_field}}
                            </div>
                            <div class="content-load mb-5 d-none">
                                <div class="preload-cage-prostela"><h1 class="text-preload-prostela fs-5">{% trans "Sending, please wait" %}...</h1></div>
                            </div>
                            <input type="hidden" id="formID" name="form-id" value="postform">
                            <input type="hidden" id="postID" name="post-id">
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-shappire submit-btn disabled">{% trans "Send" %} <i class="ri-send-plane-2-fill fs-5"></i></button>
                            </div>
                    </form>
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js" integrity="sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B+INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script>
                const dropmessage = '{% trans "Drag your image here" %}'
                const dropmessage2 = '{% trans "Drag your video here" %}'
                const droperror = '{% trans "Invalid file type" %}'
                const maxfilesize = 10
                const filelimit = '{% trans "You have reached the maximum limit of allowed files." %}'
                const pHPost = '{% trans "Write here..." %}'
                const errorfilebig = '{% trans "The file is too big. Maximum size allowed:" %}'+maxfilesize+' MB.'
                const preloaderCage = '<div class="preload-cage-prostela"><h1 class="text-preload-prostela fs-5">{% trans "Proccess data, please wait" %}...</h1></div>';
                const dropzoneURL = "/marketing/business-suite/fbmedia"
                const preloader2 = '<div class="preload-chatbox"></div>'
                const url4 = "/marketing/business-suite/{{page.asset_id}}/content-pro"
                const newTitle = '{% trans "Create Post" %}'
                const titleUpdate = '{% trans "Update Post" %}'
                const removeSuccessTitle = '{% trans "Remove completed successfully" %}'
                const checkmark = "https://emmerutcdn.s3.amazonaws.com/static/js/animateicons/checkmark.json"
                const warning = "https://emmerutcdn.s3.amazonaws.com/static/js/animateicons/warningv1.json"
            </script>
            <script src="https://emmerutcdn.s3.amazonaws.com/static/js/animateicons/warningv1.json" ></script>
          </div>
        </div>                   
      </div>
    </div>
</div>

<div class="modal fade" id="removePost" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="mb-3">
          <div class="container">
            <div class="row">
                <div class="col-12"> 
                    <h3 class="text-center alert-title oxanium">{% trans "Are you sure?" %}</h3>
                    <div class="iconhigh">
                        <div id="anicon">

                        </div> 
                    </div>
                    <div id="contentAlert">
                        <p class="text-center text-dark">{% trans "This option cannot be reversed" %}.</p>   
                        <div class="d-flex justify-content-center">
                            <input type="hidden" id="removeData">
                            <button onclick="removePostComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>                   
      </div>
    </div>
</div>
{% endblock %}
