@extends('content.layout')

@section('content_title')
    Website Content
@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>
        @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;
        }

        .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: 6.2%;

        }

        .up_arrow {
            float: right;
        }

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


        .down_arrow {
            float: right;
        }

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


        .date_floats {
            float: right;
        }

        .date_floats p {
            position: absolute;
            left: 79.42%;
            top: 35.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: 250px;
        }

        .back_size {
            font-size: 1.1rem;
        }

        .campaign_speech {
            font-size: 1.4rem;
        }

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

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

        .dropend button:focus,
        .dropdown button:focus {
            color: #29ABE2 !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: 15px;
            text-align: right;
            margin: 0 !important;
            padding-bottom: 15px;
            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;

            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%;
        }

        textarea.form-control.content_messages.text_change,
        textarea.form-control {
            border: 3px solid #0CABE0;
            background: #fff;
        }

        a.text-start.back_size {
            color: #000;
            text-decoration: none;
        }

        a.text-start.back_size i {
            background: #fff;
            color: #000;
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
            margin-right: 5px;
        }

        @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;
            }
        }

        .page {
            background-color: white !important;
            width: 90%;
            text-align: center;
            margin: 0 auto;
        }

        /* campaign */
    </style>
@endsection

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

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

                <div class="row">

                    {{-- <div class="col-lg-2 mt-4 pt-3">
                        <a href="{{ url()->previous() }}" class="text-start back_size"> <i class="fas fa-arrow-left"></i>
                            Back</a>
                    </div>
                    <div class="col-lg-6 mt-4">
                        <h4 class="rounded-3 text-center mb-4 campaign_speech" style="font-weight: 600;"
                            id="campaign_speech">Campaign website content</h4>
                    </div> --}}

                    <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">Campaign website content</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">
                                        </div>
                                        <span><img class="copy copy_content" 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 : 01:22 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="10"
                                            placeholder="Write here"></textarea>
                                        <span id="count">0/5000</span>
                                        <span><img class="copy mx-3 upload_doc" src="{{ asset('content/upload.png') }}"  alt=""></span>

                                    </div>
                                    <input type="file" class="uploads" name="file[]" id="attach-docs"
                                        style="display:none" />

                                    <button class="btn btn-info px-5 rounded-5 button_save"
                                        style="float:right">Save</button>
                                    <div class="col-lg-9 text-start">
                                        <div id="uploadFilesDivs">
                                        </div>
                                    </div> --}}

                                    <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-3 upload_doc" src="{{ asset('content/upload.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 class="col-lg-5" id="chat">
                            <div class="card">
                                <div class="card-body">
                                    <div class="  cardHeader">
                                        <div class="row">
                                            <div class="col-10">
                                                <div class="d-flex">
                                                    <a href="#" id="arrow" style="display: none;"><i
                                                            class="fas fa-arrow-left" style="margin-top:10px;"></i></a>

                                                    <img src="{{ asset('assets/img/faces/6.jpg') }}"
                                                        class="rounded-circle topImg" style="width: 48px;height:48px">
                                                    <img src="{{ asset('assets/chat/online.png') }}" class="messageOnline"
                                                        style="">

                                                    <div class="" style="margin-left:10px;marign-top:10px">
                                                            @if ($login_user->roles[0]->name == 'Web Developer')
                                                                @if ($service->assign_developer == $login_user->id)
                                                                    <p class="p-0 m-1 topName">{{ ucwords($service->first_name) }}
                                                                    {{ $service->last_name }}</p>
                                                                @else
                                                                    <p class="p-0 m-1 topName">{{ ucwords($login_user->first_name) }}
                                                                    {{ $login_user->last_name }}</p>
                                                                @endif
                                                            @elseif($login_user->roles[0]->name == 'Client')
                                                                                                                        @endif


                                                             @if ($service->assign_developer == null)
                                                                <p class="text-muted p-0 m-1 topSeen">(Not Assigned)</p>
                                                            @else
                                                            @endif

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-2 text-end">
                                                <img src="{{ asset('/content/dot.png') }}" class="dot">
                                            </div>
                                        </div>
                                        <hr>
                                    </div>


                                    <div id="chat-section" class="hideFlow"
                                        style="max-height: 295px; overflow-y: scroll;scrollbar-width: none;">

                                        <div class="row">

                                        </div>
                                    </div>

                                    <form id="submitteachermessage">

                                        @if ($service->assign_developer == $login_user->id)
                                            <input type="hidden" name="receiver_id" value="{{ $service->id }}" id="userId">
                                        @elseif($service->assign_user != $login_user->id)
                                            <input type="hidden" name="receiver_id" value="{{ $service->assign_developer }}"
                                                                                    id="userId">
                                        @endif
                                        <div class="form-group mt-3">
                                            <input type="hidden" value="{{ $id }}" id="service_id">
                                            <input type="file" class="upload" name="upload[]" id="attach-doc"
                                                style="display:none" />
                                            <textarea name="" class="form-control content_messages" id="messageVal" cols="30" rows="8"
                                                placeholder="Type Your messaage "></textarea>

                                            <span><img class="copy_chat mx-3 " id="upload_file"
                                                    src="{{ asset('content/upload.png') }}" alt=""></span>

                                        </div>

                                        <div class="col-lg-12">
                                            @if ($service->assign_developer == null)
                                                <button class="btn btn-info w-100 rounded-5" disabled>Send</button>
                                            @else
                                                <button class="btn btn-info w-100 rounded-5">Send</button>
                                            @endif
                                        </div>

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

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

            </div>
        </div>

        {{-- @include('components.open-ai') --}}
        <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) {

            var data = "0/5000";
            $('#count').html(data)
            // $(document).on('click', '#upload_file', function(e) {
            //     $("#attach-doc").click();
            // });
            $(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);
            }

            $('.upload').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"]);
                        uploadFileHTML(filesize, filename);
                        messageMsg(data["msg"])
                        $(".btnSubmit").attr('disabled', false);
                        $(".upload").val('');
                    },
                    error: function(error) {
                        console.log(error)
                        $(".btnSubmit").attr('disabled', false);
                    }
                });
                $('.upload').append('<input type="file" name="upload[]"/>')

            });

            //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
                });

            }));

            //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 = 'website_content';
                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 = []
                            $("#submit_content")[0].reset();
                            $("#uploadFilesDiv").html('');
                            $(".upload").val('')
                            $("#upload").val('')
                            $('.error').css('display', 'none');
                            content()

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


            function content() {
                // $(".append_here").css('display','none');

                var content_type = 'website_content';
                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) {
                        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 = 'website_content'
                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 = 'website_content'
                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 = 'website_content';
                    var unique_code = "{{ $id }}";

                    if ($('#drop').is(':checked')) {
                        var campaign_type = "Brochure";

                    } else {
                        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 = "finalize-website";
    </script>
    @include('chat.chat-script')
@endsection