@extends('content.layout')

@section('content_title')
Campaign Speech
@endsection

@section('top_bar_buttons')
<ul class="nav nav-item navbar-nav-right ms-auto">

    <li class="dropdown nav-item main-header-message ">
        <a class="new nav-link  bell" href="javscript:;"> <img src="{{asset('assets/new-figma-data/dashboard/images/notifications.svg')}}" alt=""></a>
    </li>

    <li class="dropdown nav-item main-header-message ">
        <button class="btn finish_web">Finish</button>
    </li>

</ul>
@endsection

@section('content_css')
<style>

    .modal-dialog{
        max-width: 800px;
    }

    @media (min-width: 768px) {
        .main-header {
            z-index: 975 !important;
            width: 100% !important;
            left: 0;
            padding-left: 0px !important;
            position: fixed;
        }
    }

    .form-control:focus {
        color: #4d5875;
        outline: 0;
        box-shadow: none;
        border: 3px solid rgba(41, 171, 226, 1) !important;
        background: none !important;
    }

    .desktop-logo {
        height: 4rem;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
    }

    .content_message {
        border: none;
        background: rgba(237, 241, 243, 1);
        border-radius: 10px;
        width: 81%;
        margin-top: 9px;
    }

    .content_messages {
        border: none;
        background: rgb(254, 254, 254);
        border-radius: 10px;
        border-style: solid;
        border-color: rgba(41, 171, 226, 1);
        ;

    }

    .ul_length {
        display: flex !important;
    }

    .dot {
        height: 24px;
        margin-top: 9px;
    }

    .copy {
        float: right;
        margin-top: -26px;
        margin-right: 14px;
        width: 2.3%;
    }

    .copy_chat {
        float: right;
        margin-top: -30px;
        margin-right: 11px;
        width: 4%;
    }

    textarea {
        resize: none;
    }

    .form-control:focus {
        color: #4d5875;
        background: rgba(237, 241, 243, 1);
        border-color: #b3c6ff;
        outline: 0;
        box-shadow: none;
    }

    .time {
        color: rgba(37, 37, 37, 0.58);
        font-size: .7rem;
    }

    @media (min-width: 0px) and (max-width: 280px) {
        .button_width {
            font-size: .4rem;
            width: 110%;
            margin-top: 10px;
        }

        .button_font {
            font-size: .7rem;
        }

        .nav-link img {
            width: 25px;
        }

        .ul_length {
            display: none !important;
        }

        .content_margin {
            margin-top: 10px;
        }

        .copy {
            width: 10%;
        }

        .user_image img {
            width: 20%;
        }

        .time {
            font-size: .4rem;
        }

        .user_image p {

            font-size: .6rem;

        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .6rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .message-time {
            margin-left: 0px !important
        }

        .copy_chat {
            width: 7% !important;
        }

        .date_float p {
            left: 59.42% !important;
            top: 3.4% !important;
            font-size: .5rem !important;
        }

        .date_floats p {
            font-size: .5rem !important;
            left: 59.42% !important;
            top: 31.8% !important;
        }

        ..content_message {
            width: 66%;
        }

        .up_arrow i {
            left: 80.07% !important;
        }

        .down_arrow i {
            left: 80.07% !important;
        }

        .up_arrows i {
            left: 80.07% !important;
        }

        .down_arrows i {
            left: 80.07% !important;
        }
    }

    @media (min-width: 320px) and (max-width: 374px) {

        .button_width {
            font-size: .7rem;
            width: 110%;
            margin-top: 10px;
        }

        .content_message {
            width: 65%;
        }

        .date_float {
            background:none;
        }

        .date_float p {
            left: 59.42% !important;
            top: 5.4% !important;
            font-size: .8rem !important;
        }

        .date_floats p {
            font-size: .8rem;
            left: 59.42% !important;
            top: 37.3% !important;
        }

        .up_arrow i {
            left: 86.07% !important;
        }

        .down_arrow i {
            left: 86.07% !important;
        }

        .up_arrows i {
            left: 86.07% !important;
        }

        .down_arrows i {
            left: 86.07% !important;
        }


        .button_font {
            font-size: .7rem;
        }

        .ul_length {
            display: none !important;
        }

        .content_margin {
            margin-top: 10px;
        }

        .copy {
            width: 5%;
        }

        .user_image img {
            width: 26%;
        }

        .time {
            font-size: .6rem;
        }

        .user_image p {

            font-size: .6rem;

        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .message-time {
            margin-left: 0px !important
        }

        .copy_chat {
            width: 7% !important;
        }
    }

    @media (min-width: 375px) and (max-width: 424px) {

        .button_width {
            font-size: .7rem;
            width: 110%;
            margin-top: 10px;
        }

        .content_message {
            width: 65%;
        }

        .date_float p {
            left: 59.42% !important;
            top: 5.4% !important;
            font-size: .8rem !important;
        }

        .date_floats p {
            font-size: .8rem;
            left: 59.42% !important;
            top: 37.2% !important;
        }

        .up_arrow i {
            left: 86.07% !important;
        }

        .down_arrow i {
            left: 86.07% !important;
        }

        .up_arrows i {
            left: 86.07% !important;
        }

        .down_arrows i {
            left: 86.07% !important;
        }

        .button_font {
            font-size: .7rem;
        }

        .ul_length {
            display: none !important;
        }

        .copy {
            width: 5%;
        }

        .message-time {
            margin-left: 0px !important
        }

        .content_margin {
            margin-top: 12px;
        }

        .user_image img {
            width: 26%;
        }

        .time {
            font-size: .6rem;
        }

        .user_image p {
            font-size: .6rem;
        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .copy_chat {
            width: 7% !important;
        }

    }

    @media (min-width: 500px) and (max-width: 539px) {

        #chat {
            display: none;
        }

        .ul_length {
            display: none !important;
        }
    }

    @media (min-width: 540px) and (max-width: 767px) {
        #chat {
            display: none;
        }

        .ul_length {
            display: none !important;
        }

        .button_width {
            width: 100%;
            margin-top: 10px;
        }

        .row_width {
            margin-top: 0px !important;
        }

        .user_image img {
            width: 16%;
        }

        .date_float p {
            left: 67.42% !important;
            top: 5.4% !important;
            font-size: 1rem !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 67.42% !important;
            top: 34.8% !important;
        }

        .up_arrow i {
            left: 91.07% !important;
        }

        .down_arrow i {
            left: 91.07% !important;
        }

        .up_arrows i {
            left: 91.07% !important;
        }

        .down_arrows i {
            left: 91.07% !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .content_margin {
            margin-top: 12px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            width: 100%;
            font-size: 1.3rem;
        }

        .messageme {
            background-image: url(/content/background_ligh.png);
            background-size: 100% 100% !important;
            width: 100%;
            font-size: 1.3rem;
        }

        .user_image p {
            font-size: 1rem;
        }

        .time {
            font-size: 1rem;
        }

        .user_image img {
            width: 15%;
        }

        .message-time {
            font-size: 1.3rem !important;
        }

        .copy_chat {
            margin-top: -43px;
        }

        .ul_length {
            display: none !important;
        }

        #chat {
            margin-top: 30px;
            display: block;
        }

        .button_width {
            width: 100%;
        }

        .date_float p {
            left: 78.42% !important;
            top: 5.4% !important;
            font-size: 1rem !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 78.42% !important;
            top: 36.6% !important;
        }

        .up_arrow i {
            left: 94.07% !important;
        }

        .down_arrow i {
            left: 94.07% !important;
        }

        .up_arrows i {
            left: 94.07% !important;
        }

        .down_arrows i {
            left: 94.07% !important;
        }
    }

    @media (min-width: 991px) and (max-width: 1024px) {
        #chat {
            display: block;
        }

        #list {
            display: none;
        }

        .user_image img {
            width: 15%;
        }

        .date_float p {
            position: absolute;
            left: 72.42% !important;
            top: 5.2% !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 69.42% !important;
            top: 34.8% !important;
        }

        .up_arrow i {
            left: 92.07% !important;
        }

        .down_arrow i {
            left: 92.07% !important;
        }

        .up_arrows i {
            left: 92.07% !important;
        }

        .down_arrows i {
            left: 92.07% !important;
        }

        .ul_length li button {
            width: 124%;
        }
    }

    @media (min-width: 1025px) and (max-width: 1399.98px) {}

    body {
        font-family: 'Montserrat', sans-serif;
    }

    .bell img {
        width: 25px;
    }

    .hideFlow::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .Chats {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 22px;
        line-height: 27px;
        /* identical to box height */
        color: #272B2D;
    }

    .cardHeader {
        height: 80px;
    }

    #topText {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
        /* identical to box height */
        color: #29ABE2;
    }

    .topName {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        /* identical to box height */
        color: #272B2D;
    }

    .topSeen {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        /* identical to box height */
        color: #66737A;
    }

    .message {
        background-image: url(/content/background_blue.png);
        background-size: 100% 100%;
    }

    .message-time {
        font-family: 'Montserrat';
        font-style: normal;
        /* font-weight: 400;
        font-size: 10px;
         line-height: 12px;  */
        color: #272B2D;
        /* margin-top: 23px !important; */
        width: 100%;
        text-align: center;
        /* margin-left: 81px; */
    }

    .message-time-recieve {
        font-family: 'Montserrat';
        font-style: normal;
        /* font-weight: 400;
        font-size: 10px;
         line-height: 12px; */
        color: #272B2D;
        /* margin-top: 23px !important;
         margin-right: 81px; */
        width: 100%;
        text-align: center;
    }

    .reciver-messages {
        float: right;
    }

    textarea {
        background-color: #EDF1F3;
        border-color: #EDF1F3;
    }


    .btnSend {
        background: #29ABE2;
        border-radius: 4px;
    }

    .message-timeSec {
        font-size: 12px;
    }

    .footerText {
        font-size: 12px;
        font-weight: 600;
        color: #53707E;
    }

    .footerTime {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 12px;

        color: #272B2D;
    }

    .chatImg {
        width: 72px !important;
        height: 72px !important;
    }

    .chatName {
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        /* identical to box height */
        color: #272B2D;
    }

    .chatMessage {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        /* identical to box height */
        color: #66737A;
    }

    .chatTime {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        color: #000000;
    }

    textarea:focus {
        outline: none !important;
        border-color: #EDF1F3;
        box-shadow: 0 0 5px #EDF1F3;
    }

    .online {

        position: absolute;
        margin-left: -20px;
    }

    .messageOnline {
        width: 12px;
        height: 12px;
        position: absolute;
        margin-left: 35px;
    }

    .leftCard {
        border-bottom: 1px solid #d0d7e8;
    }

    .messageme {
        background-image: url(/content/background_ligh.png);
        background-size: 100% 100%;
    }

    .ul_length {
        display: flex;
    }

    .row_width {
        margin-top: 100px;
    }

    .date_float {
        float: right;
    }

    .date_float p {
        position: absolute;
        left: 79.42%;
        top: 14.2%;
    }

    .up_arrow {
        float: right;
    }

    .up_arrow i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 20.73%;
        color: #898989;
    }

    .down_arrow {
        float: right;
    }

    .down_arrow i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 31.73%;
        color: #898989;
    }

    .date_floats {
        float: right;
    }

    .date_floats p {
        position: absolute;
        left: 79.42%;
        top: 15.2%;
    }

    .up_arrows {
        float: right;
    }

    .up_arrows i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 20.73%;
        ;
        color: #898989;
    }

    .down_arrows {
        float: right;
    }

    .down_arrows i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 31.73%;
        color: #898989;
    }

    .textarea {
        border: none;
        background: rgba(237, 241, 243, 1);
        border-radius: 10px;
    }

    .content_message::-webkit-scrollbar {
        width: 0;
        background-color: #F5F5F5;
        border-radius: 10px;
    }

    #content_append {
        height: 140px;
        overflow-y: scroll;
        overflow-x: hidden;

    }

    #append_here {
        height: 140px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    input[type="radio"]:checked {
        background: #19D56B;

        color: white;
    }

    input[type="radio"] {
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        height: 17px;
        width: 17px;
        color: white;
        background: #8FD9FF;
        border-radius: 3px;
        border: #8FD9FF;
    }

    input[type="radio"]:after {
        content: ' ';
        position: relative;
        left: 40%;
        top: 20%;
        width: 22%;
        height: 48%;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(50deg);
        display: none;
    }

    input[type="radio"]:checked:after {
        display: block;
    }

    .active {
        background: rgba(62, 172, 228, 1) !important;
        border: none !important;
        color: white !important;
    }

    .actives {
        border: none !important;
        background: #3EACE4 !important;
        color: #FFFFFF !important;
    }

    .dropend button:focus,
    .dropdown button:focus {
        color: #29ABE2 !important;
    }

    .fa-question:before {
        content: "\f128";
        color: #3EACE4;
    }

    input.political-topic-title {
        height: 40px;
    }

    input.political-topic-title:active {
        border: 2px solid rgba(62, 172, 228, 1) !important;
    }

    .update-political-btn,
    .save-political-btn {
        background-color: rgba(62, 172, 228, 1);
    }

    .political-topic-title {
        border: 1px solid #e3d5d5;
    }

    .political-topic-detail {
        border-radius: 10px;
        /* border: 2px solid rgba(62, 172, 228, 1); */
    }

    .political-description-area {
        background: #EDF1F3;
        border-radius: 13px;
        padding: 10px;
    }


    textarea.form-control {
        height: auto;
        border: 3px solid rgba(41, 171, 226, 1);
    }

    .political-title-area i {
        color: #bdbdbd;
        margin-left: 4px;
        font-size: 17px;
    }

    .platform-list-holder {
        /* height: 397px; */
        overflow: scroll;
    }
    #confirmationModal .modal-content,  #politicalConfirmationModal .modal-content{
        max-height: 600px;
        overflow-y: scroll;
    }

    .avatar{
        height: 90% !important;
    }


    /* campaign */

    div#button-div button{
        transition: 0.2s;
    }
    /* width */
    html body p.content_message::-webkit-scrollbar {
    width: 5px;
    }

    /* Track */
    html body p.content_message::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    }

    /* Handle */
    html body p.content_message::-webkit-scrollbar-thumb {
    background: #3F71FF;
    border-radius: 10px;
    }

    /* Handle on hover */
    html body p.content_message::-webkit-scrollbar-thumb:hover {
    background: rgb(63 113 255 / 80%);
    }
        div#button-div button:hover {
        background: #EEEEEE !important;
        color: rgba(137, 137, 137, 1) !important;
    }
    .btns-wrap-tabs {
        margin-bottom: 15px;
    }


        .btn.bg-white.rounded-3.toogle {
        background: #EEEEEE !important;
        border-radius: 5px !important;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 20px;
        color: #777777;
        padding: 15px 20px;
        display: inline-block;
    }
    .btn.bg-white.rounded-3.toogle.active, .btn.bg-white.rounded-3.toogle:hover {
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        color: #fff !important;
    }

    header{
            border-bottom: #F7F7F7;
        }
        button.btn.btn-2-width.write-my-bio.ai-popup {
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        border-radius: 5px !important;
        color: #fff !important;
        padding: 15px 20px;
    }
    .cont-wrap{
        padding-top: 50px;
    }
    html body .card {
        border: 2px solid #EEEEEE;
        background: transparent !important;
        border-radius: 5px;
    }
    html body .form-group.textarea {
        background: #F9F9F9;
        padding: 0px 0px 50px;
        position: relative;
    }
    html body .date_float,
    html body .date_floats {
        float: unset;
        /* background: #fff !important; */
        display: block;
        margin-bottom: 15px;
    }
    html body .date_float p.date_postion,
    html body .date_floats p.date_postion {
        position: unset;
        padding-top: 6px;
        text-align: right;
        margin: 0 !important;
        padding-bottom: 6px;
        padding-left: 10px;
        padding-right: 10px;
    }
    html body .up_arrow,
    html body .down_arrow,
    html body .up_arrows,
    html body .down_arrows{
        /* display: none; */
    }
    html body p.content_message.content_website,
    html body p.content_message.content_brocher {
        background: transparent;
        margin: 0 !important;
        border-radius: 5px;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        height: 140px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #append_here,
    #content_append{
        background: #F9F9F9;
        margin: 0 !important;

        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    html body .copy {
        float: unset;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .user_image img{
        width: 35px;
        height: 35px;
        border-radius: 35px;
    }
    .btns-wrap-tabs button.package-btn {
        color: rgba(137, 137, 137, 1) !important;
        border-radius: 5px !important;
        background: #EEEEEE !important;
        margin: 0 5px;
        padding: 5px 15px !important;
        transition: 0.2s;
    }
    .btns-wrap-tabs button.package-btn.actives,
    .btns-wrap-tabs button.package-btn:hover {
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        color: #fff !important;
    }
    html body button.button_save,
    html body button.btn-info {
        transition: 0.2s;
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        color: #fff !important;
        margin-top: 15px;
    }
    html body button.button_save:hover,
    html body button.btn-info:hover{
        color: rgba(137, 137, 137, 1) !important;
        border-radius: 5px !important;
        background: #EEEEEE !important;
        border-color: rgba(137, 137, 137, 1) !important;
    }
    html body .avatar {
        width: 35px !important;
        height: 35px !important;
        border-radius: 35px !important;
    }
    html body img.copy.upload_doc {
        top: auto;
        bottom: auto;
        position: absolute;
    }

    html body .political-description-area {
        border-radius: 5px;
        padding: 15px;
        background: #F9F9F9;
        position: relative;
    }
    h3.political-title-area {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 27px;
        color: #272B2D;
        margin-bottom: 15px;
        text-transform: capitalize;
    }
    header .col-xl-6.col-lg-7.col-md-7.col-8.text-end {
        flex: 0 0 auto;
        width: 50%;
    }
    @media (min-width: 1200px) and (max-width: 1399px) {
    .ul_length li.mx-4 {
        margin-right: 0.5rem!important;
        margin-left: 0.5rem!important;
    }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
    html body .ul_length li button.btn.bg-white.rounded-3.toogle {
        padding: 10px 5px;
        font-size: 14px;
    }
    h3.political-title-area{
        font-size: 16px;
    }
    }
    @media (min-width: 768px) and (max-width: 991px) {
        html body #list button.btn.bg-white.rounded-3.toogle{
            padding: 15px 20px;
        font-size: 14px;
        width: 100%;
        padding: 10px 10px;
        }
    html body #list .btn.bg-white.rounded-3.toogle.active{
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        border-radius: 5px !important;
        color: #fff !important;
    }
        html body #list{
            margin-bottom: 15px;
            margin-top: 0;
        }
    }
    @media (min-width: 1px) and (max-width: 767px) {
        html body .main-content.horizontal-content {
        margin-top: 60px !important;
    }
        html body #list button.btn.bg-white.rounded-3.toogle{
            padding: 15px 20px;
        font-size: 14px;
        width: 100%;
        padding: 10px 10px;
        }
        html body #list{
            margin-bottom: 15px;
            margin-top: 0;
        }
        html body .main_content_color{
            background: transparent !important;
        }
        html body div #list .btn.bg-white.rounded-3.toogle {
        background: #EEEEEE !important;
        border-radius: 5px !important;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #777777;
        padding: 15px 10px;
        display: block;
        width: 100%;
        font-size: 12px;
    }
    html body #list .btn.bg-white.rounded-3.toogle.active{
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        border-radius: 5px !important;
        color: #fff !important;
    }
    .btns-wrap-tabs button.package-btn{
        font-size: 12px;
    }
    button.btn.btn-2-width.write-my-bio.ai-popup{
        padding: 10px 20px;
        font-size: 12px;
    }
    html body .btn-primary{
        font-size: 12px;
    }
    html body p {
        font-size: 13px;
    }
    }
    button.close.pos-absolute.t-15.r-20.tx-26 {
        position: absolute;
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        border: none;
        border-radius: 30px;
        height: 30px;
        width: 30px;
        font-size: 30px;
        padding: 0;
        line-height: 30px;
        text-align: center;
        top: 3px;
        right: 3px;
        color: #fff !important;
    }
    html body .modal-body {
        padding-top: 35px;
    }
    html body button#btnSubmit {
        background: linear-gradient(180deg, #3FABFF 0%, #3F71FF 100%) !important;
        border-radius: 5px !important;
        color: #fff !important;
        margin-top: 15px;
    }
    html body .modal-body .form-group{
        margin-bottom: 15px;
    }
    html body .modal-body .form-group label{
        margin-bottom: 10px;
    }
    html body .modal-body input.form-control {
        border: 1px solid rgba(41, 171, 226, 1);
    }

    .page{
        background-color:white !important;
        width:90%;
        text-align: center;
        margin: 0 auto;
    }
        /* campaign */
</style>
{{-- <style>
    @media (min-width: 768px) {
        .main-header {
            z-index: 975 !important;
            width: 100% !important;
            left: 0;
            padding-left: 0px !important;
            position: fixed;
        }
    }

    .desktop-logo {
        height: 4rem;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
    }
    </style>

    <style>
    .content_message {
        border: none;
        background: rgba(237, 241, 243, 1);
        border-radius: 10px;
        width: 81%;
    }


    .content_messages {
        border: none;
        background: rgba(237, 241, 243, 1);
        border-radius: 10px;

    }

    .ul_length {
        display: flex !important;
    }

    .dot {
        height: 24px;
        margin-top: 9px;
    }

    .copy {
        float: right;
        margin-top: -30px;
        margin-right: 11px;
        width: 3%;
    }

    .copy_chat {

        float: right;
        margin-top: -30px;
        margin-right: 11px;
        width: 4%;


    }

    textarea {
        resize: none;
    }

    .form-control:focus {
        color: #4d5875;
        background: rgba(237, 241, 243, 1);
        border-color: #b3c6ff;
        outline: 0;
        box-shadow: none;
    }

    .user_image img {
        width: 10%;
    }

    .user_image p {
        color: rgba(37, 37, 37, 0.58);
        font-size: .7rem;

    }

    .time {
        color: rgba(37, 37, 37, 0.58);
        font-size: .7rem;
    }




    @media (min-width: 0px) and (max-width: 280px) {
        .button_width {
            font-size: .4rem;
            width: 110%;
            margin-top: 10px;
        }

        .button_font {
            font-size: .7rem;
        }

        .nav-link img {
            width: 25px;
        }

        .ul_length {
            display: none !important;
        }

        .content_margin {
            margin-top: 10px;
        }

        .copy {
            width: 10%;
        }

        .user_image img {
            width: 20%;
        }

        .time {
            font-size: .4rem;
        }

        .user_image p {

            font-size: .6rem;

        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .6rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .message-time {
            margin-left: 0px !important
        }

        .copy_chat {
            width: 7% !important;
        }

        .date_float p {
            left: 59.42% !important;
            top: 3.4% !important;
            font-size: .5rem !important;
        }

        .date_floats p {
            font-size: .5rem !important;
            left: 59.42% !important;
            top: 31.8% !important;
        }

        ..content_message {
            width: 66%;
        }

        .up_arrow i {
            left: 80.07% !important;
        }

        .down_arrow i {
            left: 80.07% !important;
        }

        .up_arrows i {
            left: 80.07% !important;
        }

        .down_arrows i {
            left: 80.07% !important;
        }
    }

    @media (min-width: 320px) and (max-width: 374px) {

        .button_width {
            font-size: .7rem;
            width: 110%;
            margin-top: 10px;
        }

        .content_message {
            width: 65%;
        }

        .date_float p {
            left: 59.42% !important;
            top: 3.4% !important;
            font-size: .8rem !important;
        }

        .date_floats p {
            font-size: .8rem;
            left: 59.42% !important;
            top: 31.8% !important;
        }

        .up_arrow i {
            left: 86.07% !important;
        }

        .down_arrow i {
            left: 86.07% !important;
        }

        .up_arrows i {
            left: 86.07% !important;
        }

        .down_arrows i {
            left: 86.07% !important;
        }


        .button_font {
            font-size: .7rem;
        }

        .ul_length {
            display: none !important;
        }

        .content_margin {
            margin-top: 10px;
        }

        .copy {
            width: 5%;
        }

        .user_image img {
            width: 26%;
        }

        .time {
            font-size: .6rem;
        }

        .user_image p {

            font-size: .6rem;

        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .message-time {
            margin-left: 0px !important
        }

        .copy_chat {
            width: 7% !important;
        }
    }

    @media (min-width: 375px) and (max-width: 424px) {

        .button_width {
            font-size: .7rem;
            width: 110%;
            margin-top: 10px;
        }

        .content_message {
            width: 65%;
        }

        .date_float p {
            left: 59.42% !important;
            top: 3.4% !important;
            font-size: .8rem !important;
        }

        .date_floats p {
            font-size: .8rem;
            left: 59.42% !important;
            top: 31.8% !important;
        }

        .up_arrow i {
            left: 86.07% !important;
        }

        .down_arrow i {
            left: 86.07% !important;
        }

        .up_arrows i {
            left: 86.07% !important;
        }

        .down_arrows i {
            left: 86.07% !important;
        }

        .button_font {
            font-size: .7rem;
        }

        .ul_length {
            display: none !important;
        }



        .copy {
            width: 5%;
        }


        .message-time {
            margin-left: 0px !important
        }

        .content_margin {
            margin-top: 12px;
        }

        .user_image img {
            width: 26%;
        }

        .time {
            font-size: .6rem;
        }

        .user_image p {

            font-size: .6rem;

        }

        #chat {
            display: none;
            margin-top: 34px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .messageme {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            font-size: .8rem !important;
        }

        .copy_chat {
            width: 7% !important;
        }

    }

    @media (min-width: 425px) and (max-width:499px) {}

    @media (min-width: 500px) and (max-width: 539px) {

        #chat {
            display: none;

        }

        .ul_length {
            display: none !important;
        }
    }

    @media (min-width: 540px) and (max-width: 767px) {
        #chat {
            display: none;
        }

        .ul_length {
            display: none !important;
        }

        .button_width {
            width: 100%;
            margin-top: 10px;
        }

        .row_width {
            margin-top: 0px !important;
        }

        .user_image img {
            width: 16%;
        }

        .date_float p {
            left: 67.42% !important;
            top: 3.4% !important;
            font-size: 1rem !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 67.42% !important;
            top: 31.8% !important;
        }

        .up_arrow i {
            left: 91.07% !important;
        }

        .down_arrow i {
            left: 91.07% !important;
        }

        .up_arrows i {
            left: 91.07% !important;
        }

        .down_arrows i {
            left: 91.07% !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .content_margin {
            margin-top: 12px;
        }

        .message {
            background-image: url(/content/background_blue.png);
            background-size: 100% 100% !important;
            width: 100%;
            font-size: 1.3rem;

        }

        .messageme {
            background-image: url(/content/background_ligh.png);
            background-size: 100% 100% !important;
            width: 100%;
            font-size: 1.3rem;

        }

        .user_image p {
            font-size: 1rem;
        }

        .time {
            font-size: 1rem;
        }

        .user_image img {
            width: 15%;
        }

        .message-time {
            font-size: 1.3rem !important;
        }

        .copy_chat {
            margin-top: -43px;
        }

        .ul_length {
            display: none !important;
        }

        #chat {
            margin-top: 30px;
            display: block;
        }

        .button_width {
            width: 100%;
        }

        .date_float p {
            left: 78.42% !important;
            top: 3.4% !important;
            font-size: 1rem !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 78.42% !important;
            top: 31.8% !important
        }

        .up_arrow i {

            left: 94.07% !important;

        }

        .down_arrow i {

            left: 94.07% !important;

        }

        .up_arrows i {
            left: 94.07% !important;
        }

        .down_arrows i {
            left: 94.07% !important;
        }
    }

    @media (min-width: 991px) and (max-width: 1024px) {
        #chat {
            display: block;
        }

        #list {
            display: none;
        }

        .user_image img {
            width: 15%;
        }

        .date_float p {
            position: absolute;
            left: 72.42% !important;
            top: 3.2% !important;
        }

        .date_floats p {
            font-size: 1rem;
            left: 69.42% !important;
            top: 31.8% !important;
        }

        .up_arrow i {
            left: 92.07% !important;
        }

        .down_arrow i {
            left: 92.07% !important;
        }

        .up_arrows i {
            left: 92.07% !important;
        }

        .down_arrows i {
            left: 92.07% !important;
        }



        .ul_length li button {
            width: 120%;
        }
    }

    @media (min-width: 1025px) and (max-width: 1399.98px) {}

    body {
        font-family: 'Montserrat', sans-serif;
    }

    .finish_web {
        color: #29ABE2;
        background: #F3FBFF;
        border-radius: 10px;
        height: 35px;
        width: 112px;
        padding: initial;
        margin-right: 10px;
    }

    .bell img {
        width: 25px;
    }

    .hideFlow::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .Chats {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 22px;
        line-height: 27px;
        /* identical to box height */


        color: #272B2D;
    }

    .cardHeader {
        height: 80px;
    }

    #topText {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
        /* identical to box height */


        color: #29ABE2;
    }

    .topName {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        /* identical to box height */


        color: #272B2D;
    }

    .topSeen {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        /* identical to box height */


        color: #66737A;
    }

    .message {
        background-image: url(/content/background_blue.png);
        background-size: 100% 100%;
    }

    .message-time {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 12px;
        color: #272B2D;
        margin-top: 23px !important;
        /* margin-left: 81px; */
    }

    textarea {
        background-color: #EDF1F3;
        border-color: #EDF1F3;
    }


    .btnSend {
        background: #29ABE2;
        border-radius: 4px;
    }

    .message-timeSec {
        font-size: 12px;
    }

    .footerText {
        font-size: 12px;
        font-weight: 600;
        color: #53707E;
    }

    .footerTime {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 12px;

        color: #272B2D;
    }

    .chatImg {
        width: 72px !important;
        height: 72px !important;
    }

    .chatName {
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        /* identical to box height */
        color: #272B2D;

    }

    .chatMessage {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        /* identical to box height */


        color: #66737A;
    }

    .chatTime {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        /* identical to box height */


        color: #000000;
    }

    textarea:focus {
        outline: none !important;
        border-color: #EDF1F3;
        box-shadow: 0 0 5px #EDF1F3;
    }

    .online {

        position: absolute;
        margin-left: -20px;
        /* position: absolute;
            width: 16px;
            height: 16px;
            left: 240px;
            top: 350px;

            background: #34C2D6; */
    }

    .messageOnline {
        width: 12px;
        height: 12px;
        position: absolute;
        margin-left: 35px;
    }

    .leftCard {
        border-bottom: 1px solid #d0d7e8;
    }

    .messageme {
        background-image: url(/content/background_ligh.png);
        background-size: 100% 100%;
    }

    .ul_length {
        display: flex;
    }

    .row_width {
        margin-top: 100px;
    }

    .date_float {
        float: right;
    }

    .date_float p {
        position: absolute;
        left: 79.42%;
        top: 12.2%;

    }

    .content_message{
        padding-top: 18px;
    }

    .up_arrow {
        float: right;
    }

    .up_arrow i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 20.73%;
        color: #898989;
    }


    .down_arrow {
        float: right;
    }

    .down_arrow i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 32.73%;
        color: #898989;
    }


    .date_floats {
        float: right;
    }

    .date_floats p {
        position: absolute;
        left: 79.42%;
        top: 12.2%;


    }

    .up_arrows {
        float: right;
    }

    .up_arrows i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 40.73%;

        color: #898989;
    }


    .down_arrows {
        float: right;
    }

    .down_arrows i {
        position: absolute;
        left: 93.07%;
        right: 53.6%;
        top: 46.73%;
        color: #898989;
    }

    .textarea {
        border: none;
        background: rgba(237, 241, 243, 1);
        border-radius: 10px;
    }

    .content_message::-webkit-scrollbar {
        width: 0;
        background-color: #F5F5F5;
        border-radius: 10px;
    }

    #content_append{
            height: 250px;
    }

    #append_here{
        height: 180px;
        overflow: scroll;
    }
    .content_message{
        padding-top: 18px;
    }
    .back_size{
        font-size: 1.1rem;
        text-decoration: none;
    }
    .campaign_speech{
        font-size: 1.4rem;
    }
    .active {
        background: rgba(62, 172, 228, 1) !important;
        border: none !important;
        color: white !important;
    }

    .dropend button:focus, .dropdown button:focus {
        color: #29ABE2 !important;
    }
</style> --}}
<link rel="stylesheet" href="{{asset('assets/new-figma-data/dashboard/css/style-dashboard.css')}}">
@endsection

@section('content_content')

<div id="global-loader">
    <img src="{{asset('assets/img/loader.svg')}}" class="loader-img" alt="Loader">
</div>

<div class="page">

    <!-- main-content opened -->
    <div class="main-content horizontal-content mt-5" id="horizontal-content">
        <!-- container opened -->
        <div class="container mt-4 pt-2 container-margin">

            <div class="row">
                <div class="col-lg-2" style="text-align: initial;">
                    <a href="/camapign-content-creator/{{ $id }}"> <i class="fa fa-home"
                        style="font-size: 2rem;" aria-hidden="true"></i> </a>
                </div>
                <div class="col-lg-8 ">
                    <h4 class=" rounded-3 text-center mb-4 campaign_speech" style="font-weight: 600;" id="campaign_speech">Social Media Campaign</h4>
                </div>
                <div class="col-lg-2"></div>
            </div>

            <div class="row  d-xl-none d-xl-none d-xxl-none row_width" id="list">
            </div>

            <div class="row content_margin">
                <div class="col-lg-7" id="content">
                    <div class="card">
                        <div class="card-body h-100">
                            <div class="append_here">

                                <div class="form-group textarea">

                                    <div id="append_here">
                                        <textarea name="" class="form-control content_message" cols="30" rows="5"
                                            placeholder="Write here"></textarea>
                                    </div>
                                    <span><img class="copy" onclick="copyToClipboard('.content_website')" src="{{asset('content/copy.png')}}" alt=""></span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 col-6">
                                    <div class="text-start d-flex user_image ">
                                    @if($login_user->images==NULL)
                                    <img src="{{asset('assets/img/faces/6.jpg')}}" class=" rounded-20">
                                    @else
                                    <img src="{{asset('images/product/'.$login_user->images)}}" class=" rounded-20">
                                    @endif
                                    <p class="px-2 my-2 ">{{ucwords($login_user->first_name)}} {{ucwords($login_user->last_name)}}</p>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-6">
                                    <p class="text-end px-2 my-2  time">Local Time : 02:48 pm</p>
                                </div>
                            </div>
                            <form id="submit_content">

                                <div class="form-group mt-2">
                                    <textarea name="" class="form-control content_messages text_change" cols="30"
                                        rows="5" placeholder="Write here"></textarea>

                                    <span>
                                        <img class="copy mx-5 upload_doc" src="{{asset('content/upload.png')}}" alt="">
                                    </span>
                                    <span><img class="copy upload_doc" src="{{asset('content/emoji.png')}}" alt=""></span>

                                </div>
                                     <div class="row">
                                        <div class="col-lg-6" style="text-align: initial;">
                                            <span id="count">0/5000</span>
                                        </div>
                                        <div class="col-lg-6">
                                            <button class="btn btn-info px-5 rounded-5 button_save"
                                            style="float:right">Save</button>
                                        </div>
                                     </div>
                                <input type="file" class="uploads" name="file[]" id="attach-docs"
                                    style="display:none" />

                                <div class="col-lg-9 text-start">
                                    <div id="uploadFilesDivs">
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                @include('components/chat');

            </div>

        </div>
    </div>

    <input type="hidden" id="content_type">

</div>

@endsection

@section('content_script')

<script src="{{asset('assets/js/custom.js')}}"></script>

<script>

    $(document).on('keyup', '.text_change', function() {

        var text = $(this).val();

        var maximum_content_length = "5000";
        var final_text = text.length + '/' + maximum_content_length;
        $("#count").html(final_text)

        if (text.length > maximum_content_length) {
            $(".button_save").attr('disabled', true);
            $("#count").css('color', 'red');
        } else if (text.length < maximum_content_length) {
            $("#count").css('color', 'black');
            $(".button_save").attr('disabled', false);
        }
    });

    $(document).on("click", '.show_message', function() {


        $("#content").css('display', 'none');
        $("#list").css('display', 'none');

        $("#chat").css('display', 'block');
    });

    $(document).on("click", '.show_content', function() {

        $("#content").css('display', 'block');
        $("#chat").css('display', 'none');
        $("#list").css('display', 'flex');

    });

    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).html()).select();
        document.execCommand("copy");
        $temp.remove();
        toastr.success('Copied')

    }

    $(document).ready(function(e) {

        (function(){
            let chatSection = document.getElementById("chat-section");
            chatSection.scrollTop = chatSection.scrollHeight;
        })()

        var data = "0/5000";
        $('#count').html(data)

        $(document).on('click', '.upload_doc', function(e) {
            $("#attach-docs").click();
        });

        var fileCount = 0;
        var files = [];
        var fileCounts = 0;
        var content_files = [];

        function uploadFileListHTML(filesize, filename) {
            var html = '<div id="row' + fileCount +
                '" class="row text-right" style="float:left"><div class="col-lg-12">';
            html += '<span class="fileName' + fileCount + '">' + filename + '(' + formatBytes(filesize) +
                ')&nbsp;</span>';
            html += '<input id="files' + fileCount + '" name="files[]" type="hidden">';
            //html += '<span><small class="fileMsg'+fileCount+'"> file uploading.. 20%</small></span>';
            html += '<span><small id="' + fileCount + '" class="filedelBtn' + fileCount +
                '"><a href="javascript:;" class="fileDelete" id="' + fileCount +
                '">&nbsp;&nbsp;<i class="fa fa-trash text-danger border-left"></i></a></small></span>';
            html += '</div></div>';
            $("#uploadFilesDiv").append(html);
            fileCount++;
            return html;
        }

        function formatBytes(bytes, decimals = 2) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        function messageMsg(msg) {
            $("#messageMsg").css('opacity', 1);
            $("#messageMsg").html(msg)
            setTimeout(function() {
                $("#messageMsg").css('opacity', 0);
            }, 10000);
        }

        //Delete uploaded file
        $(document).on('click', '.fileDelete', function(e) {
            $(".btnSubmit").attr('disabled', true);
            var id = $(this).attr('id');
            $("#row" + id).remove();
            var file = '';
            $.each(files, (i, v) => {
                if (v.fileCount == id) {
                    file = v.filename;
                }
            });

            //upload file
            $.ajax({
                type: 'GET',
                url: '/api/file-delete',
                data: {
                    file: file
                },
                dataType: "JSON",
                success: function(data) {
                    //Do something on success
                    files = files.filter(function(item) {
                        return item.fileCount !== id
                    })
                    messageMsg(data["msg"])
                    $(".btnSubmit").attr('disabled', false);
                },
                error: function(error) {
                    console.log(error)
                    $(".btnSubmit").attr('disabled', false);
                }
            });
        });


        $("#submitteachermessage").on('submit', (function(e) {
            var myFile = files;
            var conversation = $("#messageVal").val()
            var receiver_id = $("#userId").val()
            var service_id = $("#service_id").val()

            e.preventDefault();

            $.ajax({
                url: '/api/message/send',
                type: "POST",
                data: {
                    myFile: myFile,
                    conversation: conversation,
                    receiver_id: receiver_id,
                    service_id: service_id,
                },
                dataType: "JSON",

                cache: false,
                beforeSend: function() {

                },
                complete: function() {

                },
                success: function(response) {

                    console.log(response);
                    if (response["status"] == "fail") {


                    } else if (response["status"] == "success") {
                        files = []
                        $("#submitteachermessage")[0].reset();
                        $("#uploadFilesDiv").html('');

                        $(".upload").val('')
                        $("#upload").val('')
                        messages()

                    }
                },
                error: function(error) {
                    console.log(error);
                },
                async: false
            });

        }));

        //for receive
        // messages()
        function messages() {
            var receiverid = $("#userId").val()
            var service_id = "{{$id}}";

            $("#chat-section").html('');
            $.ajax({
                url: '/api/message/receive',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },

                type: "get",
                dataType: "JSON",
                data: {
                    receiverid: receiverid,
                    service_id: service_id,
                },
                cache: false,
                beforeSend: function() {

                },
                complete: function() {

                },
                success: function(response) {
                    console.log(response);
                    if (response["status"] == "fail") {
                        $("#divLoader").css('display', 'none')
                        $("#divData").css('display', 'block')
                    } else if (response["status"] == "success") {
                        $("#divLoader").css('display', 'none')
                        // $("#chat-section").css('display', 'flex')
                        $("#chat-section").html('')
                        $("#chat-section").append(response["messages"])
                        $('#chat-section').scrollTop($('#chat-section')[0].scrollHeight);

                    }

                },

                error: function(error) {
                    console.log(error);
                }
            });
        }

        //Content data
        $('.uploads').on('change', function() {
            $(".btnSubmit").attr('disabled', true);
            var filesize = this.files[0].size;
            var filename = $(this).val().replace(/.*(\/|\\)/, '');
            $("#fileName").html(filename + '(' + filesize + ')');
            // output raw value of file input
            $('#filename').html($(this).val().replace(/.*(\/|\\)/, ''));

            // or, manipulate it further with regex etc.
            var filename = $(this).val().replace(/.*(\/|\\)/, '');
            // .. do your magic
            $('#filename').html(filename);
            var formData = new FormData();
            formData.append('file', this.files[0]);
            formData.append('fileCount', fileCount);
            //upload file
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = (evt.loaded / evt.total) *
                                100;
                            //Do something with upload progress here
                            //$("#messageMsg").html('File Upload.. '+parseFloat(percentComplete).toFixed(2))
                            messageMsg('File Upload.. ' + parseFloat(
                                    percentComplete)
                                .toFixed(2) +
                                '%')
                        }
                    }, false);
                    return xhr;
                },
                type: 'POST',
                url: '/api/file-upload',
                data: formData,
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false, // tell jQuery not to process the data
                contentType: false, // tell jQuery not to set contentType
                success: function(data) {
                    console.log(data)
                    //Do something on success
                    files.push(data["file"]);
                    uploadFileHTMLs(filesize, filename);
                    messageMsg(data["msg"])
                    $(".btnSubmit").attr('disabled', false);
                    $(".uploads").val('');
                },
                error: function(error) {
                    console.log(error)
                    $(".btnSubmit").attr('disabled', false);
                }
            });
            $('.upload').append('<input type="file" name="file[]"/>')

        });

        function uploadFileHTMLs(filesize, filename) {
            var html = '<div id="row' + fileCounts +
                '" class="row text-right" style="float:left"><div class="col-lg-12">';
            html += '<span class="fileName' + fileCounts + '">' + filename + '(' + formatBytes(filesize) +
                ')&nbsp;</span>';
            html += '<input id="files' + fileCounts + '" name="content_files[]" type="hidden">';
            //html += '<span><small class="fileMsg'+fileCounts+'"> file uploading.. 20%</small></span>';
            html += '<span><small id="' + fileCounts + '" class="filedelBtn' + fileCounts +
                '"><a href="javascript:;" class="fileDelete" id="' + fileCounts +
                '">&nbsp;&nbsp;<i class="fa fa-trash text-danger border-left"></i></a></small></span>';
            html += '</div></div>';
            $("#uploadFilesDivs").append(html);
            fileCounts++;
            return html;
        }

        //Delete uploaded file
        $(document).on('click', '.fileDeletes', function(e) {
            $(".btnSubmit").attr('disabled', true);
            var id = $(this).attr('id');
            $("#row" + id).remove();
            var file = '';
            $.each(files, (i, v) => {
                if (v.fileCounts == id) {
                    file = v.filename;
                }
            });

            //upload file
            $.ajax({
                type: 'GET',
                url: '/api/file-delete',
                data: {
                    file: file
                },
                dataType: "JSON",
                success: function(data) {
                    //Do something on success
                    files = files.filter(function(item) {
                        return item.fileCounts !== id
                    })
                    messageMsg(data["msg"])
                    $(".btnSubmit").attr('disabled', false);
                },
                error: function(error) {
                    console.log(error)
                    $(".btnSubmit").attr('disabled', false);
                }
            });
        });

        content()

        $("#submit_content").on('submit', (function(e) {

            var content_files = files;
            var comment = $(".content_messages").val()
            var content_type = 'social_media';
            var unique_code = "{{$id}}";
            var campaign_type = "Website";

            e.preventDefault();
                $.ajax({
                    url: '/api/content/submit',
                    type: "POST",
                    data: {
                        content_files: content_files,
                        comment: comment,
                        content_type: content_type,
                        unique_code: unique_code,
                        campaign_type: campaign_type,
                    },
                    dataType: "JSON",

                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        console.log(response);
                        if (response["status"] == "fail") {} else if (response[
                                "status"] == "success") {
                            files = []
                            $("#submitteachermessage")[0].reset();
                            $("#uploadFilesDivs").html('');
                            $(".upload").val('')
                            $("#upload").val('')
                            $('.error').css('display', 'none');
                            content()

                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });


        }));

        function content() {

            var content_type = 'social_media';
            var unique_code = "{{$id}}";

            $.ajax({
                url: '/api/content/receive',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                data: {
                    content_type: content_type,
                    unique_code: unique_code,
                },
                cache: false,
                beforeSend: function() {

                },
                complete: function() {

                },
                success: function(response) {
                    console.log(response);
                    if (response["status"] == "fail") {


                        $("#append_here").html('')
                        $("#append_here").html(response["html"])


                    } else if (response["status"] == "success") {

                        $("#append_here").html('')

                        $("#append_here").html(response["html"])




                    }

                },

                error: function(error) {
                    console.log(error);
                }
            });
        }

        $(document).on('click', '.up_arrow', function(e) {

            var content_type = 'social_media'
            var version = $(this).attr('id');
            var unique_code = "{{$id}}";


            $.ajax({
                url: '/api/content/version',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },

                type: "get",
                dataType: "JSON",
                data: {
                    version: version,
                    unique_code: unique_code,
                    content_type: content_type,
                },
                cache: false,
                beforeSend: function() {

                },
                complete: function() {

                },
                success: function(response) {
                    console.log(response);
                    if (response["status"] == "fail") {

                    } else if (response["status"] == "success") {

                        if(response["html"]!='')
                        {
                        $("#append_here").html('')
                        $("#append_here").html(response["html"])
                        }

                    }

                },

                error: function(error) {
                    console.log(error);
                }
            });

        });

        $(document).on('click', '.down_arrow', function(e) {

            var content_type = 'social_media'
            var version = $(this).attr('id');
            var unique_code = "{{$id}}";

            $.ajax({
                url: '/api/content/version',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },

                type: "get",
                dataType: "JSON",
                data: {
                    version: version,
                    unique_code: unique_code,
                    content_type: content_type,
                },
                cache: false,
                beforeSend: function() {

                },
                complete: function() {

                },
                success: function(response) {
                    console.log(response);
                    if (response["status"] == "fail") {

                    } else if (response["status"] == "success") {
                        if(response["html"]!='')
                        {
                        $("#append_here").html('')
                        $("#append_here").html(response["html"])
                        }
                    }

                },

                error: function(error) {
                    console.log(error);
                }
            });

        });

        $(document).on('click', '.finish_web', function(e) {

            var content = $("#append_here").html()

            if (content != " ") {

                var content_type = 'social_media';
                var unique_code = "{{$id}}";
                var campaign_type = "Website";

                $.ajax({
                    url: '/api/content/final',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },

                    type: "get",
                    dataType: "JSON",
                    data: {
                        unique_code: unique_code,
                        content_type: content_type,
                        campaign_type: campaign_type,
                    },
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {
                        console.log(response);
                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {
                            toastr.success('Success', response["msg"])
                        }
                    },

                    error: function(error) {
                        console.log(error);
                    }
                });

            } else {
                toastr.error(' Content is incomplete or not ready ')
            }
        });

    });

    var chatTopic = "campaign-socialmedia";

</script>

@include('chat.chat-script')

@endsection