@extends('layouts.app')
@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Add RichMedia Templates @endsection
<style type="text/css">
    .field_wrapper div{
	    margin-bottom:10px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
    .col-form-label:after{
    content:'*';
    color:red;
    padding-left:5px;
    }
.hide{
  display:none;
    }
.pull-right{
    margin-left : 10px;
}

#richmedia_image,#richmedia_thumbnail{
    height: 40px;
}
#add_urls{
    border: 0;
    padding: 0;
    font-size: 20px;
    background: transparent;
    outline:none ! important;
    margin-top: 20px;
}
.remove_urls{
    border: 0;
    padding: 0;
    font-size: 20px;
    margin-top: 20px;
    background: transparent;
    outline:none ! important
}
.add_rcs_title{
    border: 0;
    padding: 0;
    font-size: 20px;
    background: transparent;
    outline:none ! important  
}
.remove_rcs_title{
    border: 0;
    padding: 0;
    font-size: 20px;
    background: transparent;
    outline:none ! important
}
#add_variable_content_btn{
    margin-top: -10px;
    margin-left: 62%;
}
.template-name-count,.title-name-count,.content-count{
    position: absolute;
    color: gray;
    left: 69.7%;
    z-index: 1;
    font-size: 0.7rem;
    margin-top: 3px;
}
.content-count{
    left: 68%;
}
.add_rcs_title_dynamic_url{
    border: 0;
    font-size: 15px;
    background: rgb(172, 168, 168);
    margin-left: -32px;
    height: 35px;
    /* outline:none ! important ; */
    padding: 0px 10px;
    border-radius: 6px;
    border-top-left-radius:0;
    border-bottom-left-radius: 0; 
    color: rgb(10, 10, 10) !important; 
}
.body-content{
    margin-top: 15px !important;
    background-color: rgba(218, 216, 216, 0.308);
    color: grey;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}
#heading-body-content{
    color: black;
    margin-left: 3px;
    font-weight: 600;
}
#header_dynamic{
    margin-left: 8px;
}
.counter_campaign{
    margin-left: 1%;
    font-size: 0.8rem;
}
#rcs_sub_title_div input,#rcs_main_title_div input{
    margin-right: 12px;
}
#rcs_sub_title_div button,#remove_rcs_subtitle{
    background: transparent;
    border: none;
    margin-left: 20px;
    font-size: 1.3rem;
}
.count_for_rcs_sub_title{
    position: absolute;
    left: 70%;
    margin-top: 17px;
    z-index: 1;
    color: gray;
    font-size: 0.7rem;
}

#count_for_rcs_main_title,.core_entity_name_count,.core_entity_url_count{
    position: absolute;
    left: 70%;
    z-index: 1;
    color: gray;
    font-size: 0.7rem;
}

.url_count_core{
    left: 69%;
}

#header_count{
    position: absolute;
    left: 90%;
    z-index: 1;
    color: gray;
    font-size: 0.7rem;
}
#dupicate_template_name{
    color: red;
    margin-left: 27%;
}
.error_message{
    color: red;
    margin-left: 27%;   
}
#error_header_name_y{
    margin-left: 0%; 
}
#rcs_title {
    width: 95%; 
}
#add_rcs_title_dynamic_url {
    margin-left: -58px;
    color: white;
}
.title-name-count {
    margin-left: -30px;
}

input#richmedia_image,#richmedia_thumbnail {
    border-radius: 8px;
    padding: 5px;
    height: max-content;
    width: 105%;
    background: transparent;
    border: 0.5px solid rgb(202, 198, 198) !important;
}

#submit_rcs_template_btn {
    width: 18%;
    margin-left: 40%;
    padding: 8px;
    background: black;
    color: white;
    border-radius: 14px;
    transition: 0.4s ease-in-out;
    cursor: pointer;
    margin-top: 6px;
}

#submit_rcs_template_btn:hover{
    background: rgb(46, 46, 46);
}
#comments_thumbnail{
    /* padding: 4px; */
    padding-left: 0px;
    height: 200px;
    width: 120px;
    border: none;
    position: absolute;
    left: -11%;
    overflow-y: scroll;
    background: rgba(128, 128, 128, 0.301);
}

#comments_thumbnail h3{
    font-size: 0.8rem;
    font-weight: 900;
    /* padding-left: 12px; */
    padding-top: 4px;
}
#comments_thumbnail ol{
    border: 1px solid black;
    padding-left: 0;
}
#comments_thumbnail_s{
    color: red;
    margin-left: 21%;
    widows: 120% !important;
}
#rcs_y_title_desc {
    color: #b3aaaa;
    padding: -1px;
}
#rcs_y_title_desc:hover{
    color: #3b3b3b;
}
p#error_rcs_suggested_content {
    margin-top: -33px;
    margin-bottom: 34px;
}
#rcs_image_desc{
    color: #b3aaaa;
}
#rcs_image_desc:hover{
    color: #3b3b3b;
}

#card_section_carousel{
    margin-left: 1px;
    margin-top: 34px;
}
#card_heading_card_buttons{
    height: 40px;
    width: 100%;
    border: 1px solid black;
}
.carousel_card_button {
    padding: 3px;
    margin-left: 4px;
    width: 64px;
    color: gray;
    border: none;
    background: #edeaeac7;
    transition: 0.4s ease-in-out;
}
.selected_rcs_card_button{
    background:  #ffffffee;
    color: rgb(8, 8, 8);
    box-shadow: 0 -8px 10px -10px rgba(0, 0, 0, 0.5);
    border-left: 1px solid #edeaeac7;
    border-right: 1px solid #edeaeac7;
}
.carousel_card_button:hover{
    /* color: rgb(109, 109, 235);
    background: #acaaaac7; */
    background:  #b9b9b9ee;
    color: rgb(109, 109, 235);
    box-shadow: 0 -8px 10px -10px rgba(0, 0, 0, 0.5);
}


#add_card_button {
    position: absolute;
    left: 768px;
    margin-top: -28px;
    font-size: 26px;
    background: transparent;
    border: navajowhite;
    transition: 0.2s ease-in-out;
}

#add_card_button:hover{
    scale: 1.2;
}

.remove_card_carousel_button{
    position: relative;
    margin-left: -4px;
    margin-top: -10px;
    color: gray;
    cursor: pointer;
}
.add_variable_content_btn_carausel {
    margin-left: 62%;
}

.carousel_thumbnail_desc{
    color: grey;
}

.carousel_thumbnail_desc:hover{
    color: black;
}
.carausel_div_image_error {
    margin-left: 26%;
}
.carausel_title_header_error{
    margin-top: 10px;
    margin-left: 5%;
    color: red;
}
.add_urls {
    font-size: 20px;
    margin-top: 19px;
}
.add_rcs_title_dynamic_url{
    margin-left: -101%;
}
.button_values_non_carausel .form-group{
    margin-left: -8px;
}

/* .hide_message_for_carausel_image_video {
    height: 25px;
    min-width: 200px;
    max-width: max-content;
    position: absolute;
    left: 35%;
    background: white;
} */

#carousel_div{
    transition: 1s ease-in-out;
}

#carausel_images {
    margin-top: 40px;
    width: 1089px;
    position: relative;
    top: 46%;
}

.rcs_image_carausel{
    border: 1px solid #d9c1c1;
    padding: 6px;
    border-radius: 9px;
    margin-left: -2% !important;
}

.carausel_image_description{
    color: #a19696;
    padding: 2px;
}
.rcs_image_carausel{
    /* margin-left: 25px; */
}

.carausel_image_description:hover{
    color: #353434;
}

/* .error_div_carausel_image,.error_div_carausel_thumbnail{
    margin-left: 41px;
} */

.carausel_error_div{
    margin-left: 27%;
    margin-top: -30px;
    margin-bottom: 30px;
    /* opacity: 0; */
    display: none;
}


.body_samples_error_div{
    margin-left: 25px;
}
#carausel_error_alert {
    color: red;
    font-weight: 500;
    font-size: 1rem;
}

.error_message_button_value{
    color: red;
    margin-left: 3px;
}

.error_sugg_content{
    margin-left: 26%;
    position: relative;
    top: -45px;
}

.error_sugg_content_var_data{
    margin-left: 47px;
    position: relative;
    top: -21px;
    color: red;
}

.carausel_error{
    margin-left: 26%;
    color: red;
    position: relative;
    top: -12px;
}
.redIcon{
    color: red;
    /* position: absolute; */
    /* left: 97% !important; */
    z-index: 4;
    /* margin-top: 40px !important; */
}
.carausel_thumbnail_validation_error{
    position: relative;
    top: -8px;
}
.btn_group_carousel{
    margin-left: 26%;
}

.greenIcon_add_buttton{
    position: relative;
    left: 2px !important;
    color: green;
}



.redIcon_remove_button{
    position: relative;
    left: 2px !important;
    /* margin-top: -0.2px !important; */
}

.label_input{
    margin-left: 260px !important;
}

.description_icon{
    color: grey;
}

.description_icon:hover{
    color: rgb(53, 53, 53)
}
.carausel_button_actionType{
    position: absolute;
    left:80%;
    margin-top: 45px !important;
}

.removeUrl_carausel{
    position: absolute;
    left: 98% !important;
    margin-top: 24px !important;
}
#emoji_button_non_carausel,.emoji_button_carausel{
    font-size: 1.3rem;
    cursor:pointer;
    position: relative;
    left: 40vw;
}

.emoji_div{
    height: 35vh;
    width: 25vw;
    border: 1px solid rgba(75, 75, 75, 0.398);
    position: absolute;
    left: 55vw;
    top: 30vh;
    overflow-y: scroll; /* Vertical scrollbar */
    overflow-x: hidden;
    background: white;
    padding: 16px;
}
.emoji_div_carausel{
    height: 35vh;
    width: 25vw;
    border: 1px solid rgba(75, 75, 75, 0.398);
    position: absolute;
    left: 55vw;
    top: 70vh;
    overflow-y: scroll; /* Vertical scrollbar */
    overflow-x: hidden;
    background: white;
    padding: 16px;
}

.emoji_element{
    font-size: 1.7rem;
    margin: 5px;
    cursor: pointer;
}

form .form-group {
    margin-bottom: 1rem;
    margin-left: -10px;
}

</style>
@include('sms_templates.rcs_header')
<div class="container">
<div class="card-header">
            <h3><b> Add RichMedia  Templates </b>
        </h3>
        </div>
    <div class="card">
        <div class="card-body">
            <form id=rcs_form method="post" action="{{ url('save_rcs_template') }}" enctype="multipart/form-data" autocomplete="off">
                {{ csrf_field() }}
                <div class="form-group row">
                    <label for="organization" class="col-sm-3 col-form-label">Organization</label>
                    <div class="col-sm-6">
                    <select class="form-control" name="organization" id="organization" data-live-search="true">
                        <option id="select_org" value="">Select Organization</option>
                        @foreach($account_names as $account_name)
                            <option value={{$account_name->id}} > {{$account_name->account_name}} ({{$account_name->email}}) </option>
                        @endforeach
                    </select>
                    </div>
                    <p id="error_organization_name" class="error_message hide">
                        This is a required field
                    </p>
                </div>
                <div class="form-group row">
                    <label for="rcs_type_id" class="col-sm-3 col-form-label">RichMedia Type</label>
                    <div class="col-sm-6">
                        <select name="rcs_type_id" id="rcs_type_id" class="form-control">
                            <option value="1" selected>RichMedia-G</option>
                            <option value="4">RichMedia-J</option>
                            <option value="2">RichMedia-Y</option>
                            <option value="3">RichMedia-YS</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row" id="headers_column">
                   
                </div>
                
                <div class="form-group row">
                    <label for="message_type" class="col-sm-3 col-form-label">Message type</label>
                    <div class="col-sm-6">
                        <select name="message_type" id="message_type" class="form-control">
                            <option value="1">Promotional</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Template Name</label>
                    <span class="template-name-count">0/20</span>
                    <div class="col-sm-6">
                        <input id='rcs_template_name' type="text" name="rcs_template_name" class="form-control" placeholder = "Enter Template Name"  />
                    </div>
                    <p id="dupicate_template_name" class="hide">Template name is already present</p>
                    <p id="error_template_name" class="hide error_message">This is a required field</p>
                </div>
                <div class="form-group row" id="template_type_div">
                    <label for="file" class="col-sm-3 col-form-label">Template Type</label>
                    <div class="col-sm-6">
                        <select name="template_type" id="template_type_id" class="form-control">
                            <option value="">Select Template Type</option>
                            <option value="image_template_type">Rich Card Stand Alone</option>
                            <option value="rcs_carousal">Rich Card Carousal</option>
                            <option value="text_template_type">Rich Card Text</option>
                        </select>
                    </div>
                    <p id="error_template_type" class="error_message hide">
                        This is a required field
                    </p>
                </div>
                <div class="form-group row rcs_card_orientation hide">
                    <label for="rcs_card_orientation_id" class="col-sm-3 col-form-label">Card Orientation</label>
                    <div class="col-sm-6">
                        <select name="rcs_card_orientation" id="rcs_card_orientation_id" class="form-control">
                            <option value="">Select Card Orientation</option>
                            <option value="horizontal">Horizantal</option>
                            <option value="vertical">Vertical</option>
                        </select>
                    </div>
                    <p id="error_card_orientation" class="error_message hide">
                        This is a required field
                    </p>
                </div>
                <div class="form-group row rcs_media_height hide">
                    <label for="rcs_media_height_id" class="col-sm-3 col-form-label">Media Height</label>
                    <div class="col-sm-6">
                        <select name="rcs_media_height" id="rcs_media_height_id" class="form-control">
                            <option value="">Select Medium Height</option>
                            <option value="medium">Medium</option>
                            <option value="short">Short</option>
                        </select>
                    </div>
                    <p id="error_media_height" class="error_message hide">
                        This is a required field
                    </p>
                </div>
                <div class="form-group row rcs_media_card_alignment" id="card_alignment">
                    {{-- card alignment height --}}
                </div>
                <div class="rcs_title_div">
                    <div class="form-group row" id="rcs_div">
                        <label for="file" class="col-sm-3 col-form-label">Title
                            <i title="Only one variable can be choosen." id="rcs_y_title_desc" class="fa fa-info-circle richmedia_image" aria-hidden="true"></i>
                        </label>
                        <span class="title-name-count">0/200</span>
                        <div class="col-sm-6">
                            <input id='rcs_title' type="text" name="rcs_title[]" class="form-control" placeholder = "Enter Title"/>
                        </div>
                        <div class="col-sm-1 flex hide" id = "add_rcs_title">
                            <button type='button' id='add_rcs_title' class='add_rcs_title fa fa-plus-square greenIcon'> </button>
                        </div>
                        <div class="col-sm-1 flex" id = "add_rcs_dynamic_url">
                            <button type='button' id='add_rcs_title_dynamic_url' class='add_rcs_title_dynamic_url fa fa-plus greenIcon'> </button>
                        </div>
                        <p id="error_rcs_title" class="error_message hide">This is a required field</p>
                    </div>
                </div>
                <div class="form-group row hide_for_carousel">
                    <label for="file" class="col-sm-3 col-form-label">Content</label>
                    <span class="content-count">0/2000</span>
                    <div class="col-sm-6">
                        <textarea id='suggested_content' type="text" name="suggested_content" class="form-control" rows="6" placeholder = "Content" ></textarea>
                    </div>
                </div>
                
                {{-- Emoji Container Div for non carausel --}}
                <div class="form-group row emoji_div hide">

                </div>

                <div class="form-group hide_for_carousel">
                    <i onclick="handleNonCarauselEmojiButton()" id='emoji_button_non_carausel' class="fa fa-smile-o" aria-hidden="true"></i>
                    <button id="add_variable_content_btn" type="button" class="btn btn-light"><i class="fa fa-plus" aria-hidden="true" style="margin-right: 8px"></i>Add Variable</button>
                </div>
                <p id="error_rcs_suggested_content" class="error_message hide_for_carousel hide">This is a required field</p>
                <div class="core_entity_div">
                    <div class="form-group row hide" id="core_entity">
                        <label for="file" class="col-sm-3 col-form-label">Core Entity Name</label>
                        <span class="core_entity_name_count">0/10</span>
                        <div class="col-sm-6">
                            <input id='core_entity_input' type="text" name="core_entity" class="form-control" placeholder = "Core Entity Name"  />
                        </div>
                        <p id="error_core_entiry" class="error_message hide">core entity is a required field</p>
                    </div>
                    <div class="form-group row hide" id="core_url">
                        <label for="file" class="col-sm-3 col-form-label">Core Entity URL</label>
                        <span class="core_entity_url_count url_count_core">0/1000</span>
                        <div class="col-sm-6">
                            <input  id='core_url_input' type="url" name="core_url" class="form-control" placeholder = "Core Entity URL" />
                        </div>
                        <p id="error_core_entiry_url" class="error_message hide">core entity url is a required field</p>
                    </div>

                    <div class="titles_rcs_y">
                      
                    </div>
                </div>
                <div class="form-group row hide" id="rcs_image_div">
                    <label for="file" id="image_label" class="col-sm-3 col-form-label">
                        <span id="image_label_name">Creative/Image/Video</span>
                        <i id="rcs_image_desc" class="fa fa-info-circle richmedia_image" aria-hidden="true"></i>
                    </label>
                    <div class="col-sm-3">
                        {{-- updated the video/ user can also be able to upload video --}}
                        <input id='richmedia_image' class="richmedia_image" type="file" name="attachment" class="form-control" placeholder = "Creative/Image" accept="image/gif,image/png,image/jpg,image/jpeg,video/*" />
                        <span class="error-image redIcon"></span>
                    </div>
                </div>
                <p id="error_image" class="error_message hide">This is a required field</p>
                 {{-- Body content for displaying data based on dynamic url and links --}}

                 <div class="form-group row hide" id="rcs_thumbnail_div">
                    <label for="thumbnail" class="col-sm-3 col-form-label">
                        Thumbnail 
                    </label>
                    <div class="col-sm-3">
                        {{-- updated the video/ user can also be able to upload video --}}
                        <input id='richmedia_thumbnail' class="richmedia_image" type="file" name="thumbnail" class="form-control" placeholder = "Creative/Image" accept="image/png,image/jpg,image/jpeg" />
                        <span class="error-image-thumbnail redIcon"></span>
                    </div>
                </div>
                <div class="" id="comments_thumbnail_s">
                </div>
                <p id="error_thumbnail" class="error_message hide">This is a required field</p>
    <div class="body-content hide_for_carousel">
        <p id="heading-body-content">Sample For Body Content</p>
        <div class="col-sm-12">
            <p>
                To Help US Review Your Message Template, Please add an example for each variable in your body text.Do not use real customer information.Cloud API hosted by Meta reviews templates
                 and variable parameters to protect the security and integrity of our services.
            </p>
        </div>
        <div class="body_content_title_div"></div>
        {{-- Body section for content variabvle --}}
        <p id="heading-body-content" class="variable-content hide_for_carousel">Body</p>
        <div class="row-sm-12 flex font-weight-bold text-black heading_body_rcs_content hide_for_carousel">
            <p class="col-sm-6">Variable name</p>
            <p class="col-sm-6">Sample Value</p>
        </div>
        <div id="dynamicDivs" class="hide_for_carousel">

        </div>
    </div>
         <button id="submit_rcs_template" type="submit" class="btn btn-primary hide">Submit</button>
         <div class="campaign_urls_div hide_for_carousel button_values_non_carausel">
            <div class="row">

                <div class="form-group col-md-3">
                    <label for="campaign_url_type" class="col-form-label">Type Of Action</label>
                    <select name="campaign_url_type[]" id="campaign_url_type" data-row-id='0'  class="form-control action_type_0">
                        <option value="">Select Option</option>
                        <option value="1">URL Action</option>
                        <option value="2">Dailer Action</option>
                        <option value="3">View Location (Lat/Long)</option>
                        <option value="4">View Location (Query)</option>
                        <option value="5">Share Location</option>
                    </select>
                    <p class='error_message_button_value hide' id='error_action_type_0'>All are required field.</p>
                </div>
                <div class="form-group col-md-3" id="campaign_url_non_carausel_0">
                    <label for="file" id="campaign_url" class="campaign_url col-form-label" data-row-id='0'>Campaign URL</label>
                    <label for="file" id="mobile_number" class="hide mobile_number col-form-label" data-row-id='0'>Mobile Number</label>
                    <span id="counter_campaign_url" class="counter_campaign">0/1000</span>
                    <input id='campaing_urls' oninput="updateCounter_campaign()" type="text" name="campaing_urls[]" class="form-control" placeholder ="Campaign URL"/>
                </div>
                <div class="form-group col-md-3" id='action_tag_non_carausel_0'>
                    <label for="file" class="col-form-label"> Action Tag</label>
                    <span id="counter_action_tag" class="counter_campaign">0/20</span>
                    <input oninput="updateCounter_campaign()" id='rcs_tag' type="text" name="rcs_tag[]" class="form-control" placeholder = "Action Tag"/>            
                </div>



                {{-- Inputs for Latitude and Longitude --}}
                {{-- 
                    On change in Action Type:
                     if action type is Latitude / Longitude (View Location) then display these    
                --}}

                <div class="form-group col-md-3 hide" id="suggestion_text_non_carausel_0">
                    <label for="suggestion_text_non_carausel_input_0" id="campaign_url" class="campaign_url col-form-label" data-row-id='0'>Suggestion Text</label>
                    <span id="suggestion_text_non_carausel_counter_0" class="counter_campaign">0/25</span>
                    <input id='suggestion_text_non_carausel_input_0' oninput="updateCounterSuggestionText(this)" type="text" name="suggestionText[]" class="form-control" placeholder ="Suggestion Text"/>
                    <p class='error_message_button_value hide' id='error_suggestion_text_0'>This is a required Field.</p>
                </div>

                <div class="form-group col-md-3 hide" id="latitude_non_carausel_0">
                    <label for="file" class="col-form-label"> Latitude </label>
                    <i title='Please mention the latitude in degrees. It must be in the range [-90.0,+90.0]. Positive latitudes are north of the equator, negative latitudes are south of the equator.' id="non_caraausel_latitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                    <input oninput="inputLatitude(this)" id='latitude_input_non_carausel_0' type="number" name="latitude[]" class="form-control" placeholder = "Latitude" step="0.0000001"/>            
                    <p class='error_message_button_value hide' id='error_latitude_0'>Please Enter a valid Number</p>
                </div>

                <div class="form-group col-md-3 hide" id="longitude_non_carausel_0">
                    <label for="file" class="col-form-label"> Longitude </label>
                    <i title='Please mention the longitude in degrees.It must be in the range [-180.0,+180.0]. Positive longitudes are east of the Prime Meridian; negative longitudes are west of the Prime Meridian.' id="non_caraausel_longitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                    <input oninput="inputLongitude(this)" id='longitude_input_non_carausel_0' type="number" name="longitude[]" class="form-control" placeholder = "Longitude" step="0.0000001"/>            
                    <p class='error_message_button_value hide' id='error_longitude_0'>Please Enter a valid Number</p>
                </div>

                <div class="form-group col-md-3 query_input hide" id="query_non_carausel_0">
                    <label for="query_input_non_carausel_0" class="col-form-label"> Query</label>
                    <i title= 'Enter the Query that you would like to search for here.For instance,setting the query string to "Growing Tree Bank" will show all Growing Tree Bank, Bank locality in the users vicinity. Setting the query string to 1600 Amphitheater Parkway, Mountain View, CA 94043 will select that specific address, regardless of the users location.' id="non_caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                    <span id="query_non_carausel_counter_0" class="counter_campaign">0/1024</span>
                    <input oninput="inputChangeQuery(this)" id='query_input_non_carausel_0' type="text" name="query[]" class="form-control" placeholder = "Enter Query"/>            
                    <p class='error_message_button_value hide' id='error_query_0'>This is a required Field.</p>
                </div>

                <button type='button' id='add_urls' class='add_urls fa fa-plus-square greenIcon greenIcon_add_buttton'></button>   
                
                <div class="form-group col-md-3 hide label_input" id="label_non_carausel_0">
                    <label for="label_input_non_carausel_0" class="col-form-label"> Label</label>
                    <i title='Please mention the label of the pin dropped at latLong.' id="non_caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                    <span id="label_non_carausel_counter_0" class="counter_campaign">0/25</span>
                    <input oninput="inputLabelChange(this)" id='label_input_non_carausel_0' type="text" name="label[]" class="form-control" placeholder = "Enter Label"/>            
                    <p class='error_message_button_value hide' id='error_label_0'>This is a required Field.</p>
                </div>

            </div>
            <p id="error_rcs_mobile_number" class="error_message hide mobile_err">Mobile number can only start from 6-9 </p>

        </div>

        {{-- carousel functionality --}}
        <div id="carousel_div">
            {{-- <div id="carausel_orientations">

            </div>

            <div id="carausel_cards">

            </div>

            <div id="carausel_content">

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

        @can('hasAddPermission')
        <div class="form-group text-center">
            {{-- <button id="submit_rcs_template_btn" type="menu" class="btn btn-primary">Submit</button> --}}
            <p id="submit_rcs_template_btn">submit</p>
        </div>
        @endcan
            </form>
        </div>
    </div>
</div>
<script>

let emojis = []; // Array to store fetched emojis

// once the document loads emojis would be fetched and would be stored in emoji Array
async function fetchEmojis() {
    try {
        let response = await fetch('https://emojihub.yurace.pro/api/all');
        if (!response.ok) throw new Error('Network response was not ok');
        emojis = await response.json(); // Store the emojis in the array
    } catch (error) {
        console.error('Error fetching emojis:', error);
    }
}

// Fetch emojis when the document loads
document.addEventListener('DOMContentLoaded', fetchEmojis);

// on change in organisation name add the header names in this array
let bot_accounts = [];

// carousel cards
/*
    - Instead of creating the whole card 6 times , create Array of objects
    - when clicked on a particular card display the content of that card from the Object
    - only Image and Bottom Suggested values card to be different for each card

*/
let cards = [
            {
                key:'card1',
                status:true,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],   // by defauklt key-value pair should be kept as empty o
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false], // )th index is kept as null for simplicity since we can have contents ranging from 1-4 and 1st content should always be there
                button_value_data:[null,{},{},{},{}],
                orientation:{
                    mediaHeight:'',
                    mediaWidth:''
                },
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0   // to display label in URL counter in Frontend
            },
            {
                key:'card2',
                status:true,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false],
                button_value_data:[null,{},{},{},{}],
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0
            },
            {
                key:'card3',
                status:false,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false],
                button_value_data:[null,{},{},{},{}],
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0
            },
            {
                key:'card4',
                status:false,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false],
                button_value_data:[null,{},{},{},{}],
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0
            },
            {
                key:'card5',
                status:false,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false],
                button_value_data:[null,{},{},{},{}],
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0
            },
            {
                key:'card6',
                status:false,
                title:'',
                suggested_content:'',
                titleDynamicURL :'',
                titleKeyData:'',
                suggested_content_variable_array : [false,false,false,false,false,false,false,false,false,false],
                suggested_content_Key_Value : [{},{},{},{},{},{},{},{},{},{}],
                image_video_file:'',
                thumbnail:false,
                button_values : [null,true,false,false,false],
                button_value_data:[null,{},{},{},{}],
                latitude:[null,null,null,null],
                longitude:[null,null,null,null],
                query:[null,null,null,null],
                label:[null,null,null,null],
                suggestedText:[null,null,null,null],
                campaignUrlCounter:0
            },
        ];

        let carausel_validation_data = {
            carausel_media_height:'',
            carausel_card_width:'',
            carausel_aspect_ratio_height:'',
            carausel_aspect_ratio_width:'',
            expected_width:'',
            expected_height:'',
            thumbnail_expexted_height:'',
            thumbnail_expected_width:'',
            thumbnail_expexted_aspect_ratio_height:'',
            thumbnail_expexted_aspect_ratio_width:''
        }

        let buttons_non_carausel = [true,false,false,false];


        /*
            - suggested content key_value store like : 
            {
                key: "rcs-suggested-content-key",
                value:"rcs-suggested-content-value"
            }
        
        */

    function inputChangeSuggestedTextCarausel(input_element,div_number,card_number){
        card_number = $(card_number).prop('id');
        let counter_element = $(`#suggestion_text_carausel_counter_${div_number}${card_number}`);
        if(counter_element){
            $(input_element).val($(input_element).val().substring(0,25));
            $(counter_element).text($(input_element).val().length+"/25");

        }
    }

    function inputLatitudeCarausel(input_element,card_number,div_number){
        card_number = $(card_number).prop('id');
        let latitude_value = parseFloat($(input_element).val());
        if(latitude_value<-90 || latitude_value>90){
            $(`#error_latitude_carausel${div_number}${card_number}`).removeClass('hide');
        }
        else{
            // check for 7 digit decimal format
            let latitude_string = latitude_value.toString();
            if (latitude_string.includes('.')) {
                let decimal_part = latitude_string.split('.')[1];
                if (decimal_part.length > 7) {
                    latitude_value = latitude_value.toFixed(7);
                    decimal_part = decimal_part.toString();
                    decimal_part = decimal_part.substring(0,7);
                    latitude_value = Number(latitude_string.split('.')[0]+"."+decimal_part);
                    $(input_element).val(latitude_value);
                }
            }
            $(`#error_latitude_carausel${div_number}`).addClass('hide');
        }
    }

    function inputLongitudeCarausel(input_element,div_number,card_number){
        card_number = $(card_number).prop('id');
        let longitude_value = parseFloat($(input_element).val());
        if(longitude_value<-180 || longitude_value>180){

            $(`#error_longitude_carausel_${div_number}${card_number}`).removeClass('hide');
        }
        else{
            // check for 7 digit decimal format
            let longitude_string = longitude_value.toString();
            if (longitude_string.includes('.')) {
                let decimal_part = longitude_string.split('.')[1];
                if (decimal_part.length > 7) {
                    longitude_value = longitude_value.toFixed(7);
                    decimal_part = decimal_part.toString();
                    decimal_part = decimal_part.substring(0,7);
                    longitude_value = Number(longitude_string.split('.')[0]+"."+decimal_part);
                    $(input_element).val(longitude_value);
                }
            }
            $(`#error_longitude_carausel_${div_number}`).addClass('hide');
        }
    }

    function inputLabelCarausel(input_element,div_number,card_number){
        card_number = $(card_number).prop('id');
        console.log($(input_element).val());
        let counter_element = $(`#label_carausel_counter_${div_number}${card_number}`);
        if(counter_element){
            $(input_element).val($(input_element).val().substring(0,25));
            $(counter_element).text($(input_element).val().length+"/25");

        }
    }

    function updateCounterSuggestionText(input_element){
        input_element = $(input_element).prop('id');
        let div_number = input_element.charAt(input_element.length-1);
        let counter = $(`#suggestion_text_non_carausel_counter_${div_number}`);
        $(`#suggestion_text_non_carausel_input_${div_number}`).val(
            $(`#suggestion_text_non_carausel_input_${div_number}`).val().substring(0,25)
        )
        $(counter).text($(`#suggestion_text_non_carausel_input_${div_number}`).val().length+"/25");
    }


   
    /*
        => latitde can have max of 7 decimal digits
        => it can be in betweenn -90 to + 90
        => if it exceeds the range then an error message should display to add a valid number
    */
    function inputLatitude(input_element) {
        input_element = $(input_element).prop('id');
        let div_number = input_element.charAt(input_element.length - 1);

        let latitude_value = parseFloat($(`#latitude_input_non_carausel_${div_number}`).val());

        if (latitude_value < -90 || latitude_value > 90) {
            $(`#error_latitude_${div_number}`).removeClass('hide');
        } 
        else {
            let latitude_string = latitude_value.toString();
            if (latitude_string.includes('.')) {
                let decimal_part = latitude_string.split('.')[1];
                if (decimal_part.length > 7) {
                    latitude_value = latitude_value.toFixed(7);
                    decimal_part = decimal_part.toString();
                    decimal_part = decimal_part.substring(0,7);
                    latitude_value = Number(latitude_string.split('.')[0]+"."+decimal_part);
                    $(`#latitude_input_non_carausel_${div_number}`).val(latitude_value);
                }
            }
            $(`#error_latitude_${div_number}`).addClass('hide');
        }
    }
    

    function inputLabelChange(input_element){
        input_element = $(input_element).prop('id');
        let div_number = input_element.charAt(input_element.length - 1);
        $(`#label_input_non_carausel_${div_number}`).val($(`#label_input_non_carausel_${div_number}`).val().substring(0,25));
        $(`#label_non_carausel_counter_${div_number}`).text($(`#label_input_non_carausel_${div_number}`).val().length+"/25");
    }

    function inputChangeQuery(input_element){
        input_element = $(input_element).prop('id');
        let div_number = input_element.charAt(input_element.length - 1);
        $(`#query_input_non_carausel_${div_number}`).val($(`#query_input_non_carausel_${div_number}`).val().substring(0,1024));
        $(`#query_non_carausel_counter_${div_number}`).text($(`#query_input_non_carausel_${div_number}`).val().length+"/1024");
    }

    function inputLongitude(input_element) {
        input_element = $(input_element).prop('id');
        let div_number = input_element.charAt(input_element.length - 1);

        let longitude_value = parseFloat($(`#longitude_input_non_carausel_${div_number}`).val());

        if (longitude_value < -180 || longitude_value > 180) {
            $(`#error_longitude_${div_number}`).removeClass('hide');
        } 
        else {
            let longitude_string = longitude_value.toString();
            if (longitude_string.includes('.')) {
                let decimal_part = longitude_string.split('.')[1];
                if (decimal_part.length > 7) {
                    longitude_value = longitude_value.toFixed(7);
                    decimal_part = decimal_part.toString();
                    decimal_part = decimal_part.substring(0,7);
                    longitude_value = Number(longitude_string.split('.')[0]+"."+decimal_part);
                    $(`#longitude_input_non_carausel_${div_number}`).val(longitude_value);
                }
            }
            $(`#error_longitude_${div_number}`).addClass('hide');
        }
    }

    // whenever we type anything in the input for that carausel : update the JSON array
    function changeInputCarauselTitle(card_number,cardInput){
        console.log(cards);
        let card_id = $(card_number).prop('id');
        let inputValue = $(cardInput).val();

        // Input length for title cannot be exceeded to 200
        if(inputValue.length>200){
            $(cardInput).val(inputValue.substring(0, 200));
        }

        let counter_id = $('#title_counter_'+card_id);
        $(counter_id).text((Math.min(inputValue.length,200))+'/200');

        let cardData = cards.find((curr)=>{
            return curr.key == card_id;
        });

        if(!$(cardInput).val().includes("@{{1}}")){
            cardData.titleDynamicURL = '';
            $('#header_caraosel_title_key_'+card_id).html('');
            cardData.titleKeyData = '';
        }
        else{
            let header_title_data = `<p id="heading-body-content">Header</p>
                    <div class="form-group row" id="body_content_title_div">
                        <div class="col-sm-12 flex">
                            <label for="header_dynamic_caraosel_title_${cardData.key}" class="col-form-label">&#123;&#123;1&#125;&#125;</label>
                            <input value = "${cardData.titleKeyData}" titleKeyCaraosel(${cardData.key},this) id='header_dynamic_caraosel_title_${cardData.key}' type="text" name="rcs_caraosel_header" class="form-control" placeholder = "Enter Content"/>
                        </div>
                        <span one id='title_header_error_${cardData.key}' class='carausel_title_header_error hide'>This is a required field</span>
                    </div>
                    `;
            $('#header_caraosel_title_key_'+card_id).html(header_title_data);
        }

        cardData.title = inputValue;
    }

    function titleKeyCaraosel(card,cardInput){
        let card_number = $(card).prop('id');
        let input = $(cardInput);
        let input_val = $(cardInput).val();
        
        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        currCard.titleKeyData = input_val;
    }

    function changeInCarauselInputSuggestedContent(card_number,cardInput){
        let card_id = $(card_number).prop('id');
        let inputValue = $(cardInput).val();

        if(inputValue.length>2000){
            $(cardInput).val(inputValue.substring(0, 2000));
        }

        let counter_id = $('#content_counter_'+card_id);
        $(counter_id).text((Math.min(inputValue.length,2000))+'/2000');

        let cardData = cards.find((curr)=>{
            return curr.key == card_id;
        });
        cardData.suggested_content = inputValue;

        for(let i=1;i<=10;i++){
            let text_check = "@{{"+i+"}}";
            if(!cardData.suggested_content.includes(text_check)){
                cardData.suggested_content_variable_array[i-1] = false;
            }
        }

        let suggested_content_array = cardData.suggested_content_variable_array;
        // $('#dynamicDivs_carousel').html('');

        /*
            - On change in input data if @{{x}} not found then remove that from the bottom text field
        */
        let dynamic_data = '';
        for(let i=0;i<suggested_content_array.length;i++){
            if(suggested_content_array[i]==true){
                dynamic_data+=`
                             <div class="row-sm-12 flex mb-4 @{{${i+1}}}" id="dynamic_div_carousel_${i+1}" >
                                <label>@{{${i+1}}}</label>
                                <div class="col-sm-5">
                                    <input value='${suggested_content_array[i].key ? suggested_content_array[i].key : ''}' oninput='changeinKeyValueSuggestedContent(${card_number},this)' id='rcs_body_content_carousel_url_key_${i+1}' type="text" name="rcs_body_content_carousel_url_key[]" class="form-control" placeholder="Please Enter name, url, mobile or loan"/>
                                </div>
                                <div class="col-sm-5">
                                    <input value='${suggested_content_array[i].value ? suggested_content_array[i].value : ''}' oninput='changeinKeyValueSuggestedContent_value(${card_number},this)' id='rcs_body_content_carousel_url_value_${i+1}' type="text" name="rcs_body_content_carousel_url_value[]" class="form-control" placeholder="Sample Value"/>
                                </div>
                            </div>
                            <span class="error-image error_sugg_content_var_data redIcon hide" id='error_message_carausel_suggested_content_body_samples${card_id}_${i}'>This is a Required Field</span>
                `;
            }
        }
        $('#dynamicDivs_carousel').html(dynamic_data);
        
    }

    /*
    
        - On adding Dynamic URL its effectable areas:
            i. On removal from input box '{{1}}' manually the title data and header input should be removed automatically
                a. Add header input on click of add_url button
                b. Add header input on click on card if it has that url dynamically added.
            SAME for removal and addition

            WORKING of Add Dynamic URL for Title [carousel]:
                - Each card in the array have a titleDynamicURL field.
                - By default it is set as empty String
                - when user clicks on add url button it checks if this card have url being dynamically added.
                - If already added then it does nothing
                - If not added then it updates the title data with 'title + {{1}}' and titledynamicURL field in card is filled with {{1}}  
    
    */

    function carouselDynaminURLtitleButton(card_number,cardInput){
        let card_id = $(card_number).prop('id');
        let cardData = cards.find((curr)=>{
            return curr.key == card_id;
        });
        let card_index = card_id.charAt(card_id.length-1);
        let title_input = $('#rcs_carousel_title_id_'+card_index);
        let title_input_value = $(title_input).val();


        let dynaminUrlTitle = cardData.titleDynamicURL;
        // if no url being added then we can add the @{{URL}}
        // append that @{{url}} inside the title also
        if(dynaminUrlTitle.length==0){
            cardData.titleDynamicURL = "@{{1}}";
            let cursorPos = title_input.prop('selectionStart');

            let newValue = title_input_value.substring(0, cursorPos) + "@{{1}}" + title_input_value.substring(cursorPos);
            cardData.title = newValue;
            $('#rcs_carousel_title_id_'+card_index).val(cardData.title);

            // Move the cursor after the inserted text
            $('#rcs_carousel_title_id_'+card_index).prop('selectionStart', cursorPos + 6); // Move cursor 6 positions after insertion
            $('#rcs_carousel_title_id_'+card_index).prop('selectionEnd', cursorPos + 6);

            let header_title_data = `<p id="heading-body-content">Header</p>
                    <div class="form-group row" id="body_content_title_div">
                        <div class="col-sm-12 flex">
                            <label for="header_dynamic_caraosel_title_${cardData.key}" class="col-form-label">&#123;&#123;1&#125;&#125;</label>
                            <input value= "${cardData.titleKeyData}" oninput='titleKeyCaraosel(${cardData.key},this)' id='header_dynamic_caraosel_title_${card_id.key}' type="text" name="rcs_caraosel_header" class="form-control" placeholder = "Enter Content"/>
                        </div>
                        <span two id='title_header_error_${cardData.key}' class='carausel_title_header_error hide'>This is a required field</span>
                    </div>`;
            $('#header_caraosel_title_key_'+cardData.key).html(header_title_data);
        }
        else{
            $('#header_caraosel_title_key_'+cardData.key).html();
        }
    }

    // when user chooses Mobile contact
    // input_mobile_number_carausel_id_1card1
    function inputInMobileNumber_carausel(card_element,cardInput){
        // phoneNumber
        let card_number = $(card_element).prop('id');
        let input_id = $(cardInput).prop('id');
        let input = $(cardInput).val();

        // Bottom div number : 1,2,3,4
        let botton_div_number =  input_id.charAt(input_id.length-6);

        let counter_mobile_number_id = $(`#counter_mobile_number_carausel_${botton_div_number}${card_number}`);
        $(counter_mobile_number_id).text((Math.min(input.length,10)+"/10"));

        //  card data to be in range of 0-10
        let char = input.charAt(input.length-1);
        if((char<'0' || char>'9') || input.charAt(0)<6 || input.length>10){
            var temp = input.substring(0,input.length-1);
            $(cardInput).val(temp);
            $('#submit_rcs_template_btn').attr('disabled',true);
            $(counter_mobile_number_id).text((Math.min(temp.length,10)+"/10"));
        }
        // got current key
        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        currCard.button_value_data[botton_div_number].phoneNumber = $(cardInput).val();
    }

    // function for Key input change for RCS-SUGGESTED-CONTENT
    function changeinKeyValueSuggestedContent(card_number,cardInput){
        let curr_card_id = $(card_number).prop('id');       // get the current card id
        let curr_input_id = $(cardInput).prop('id');
        let curr_key_value_index = parseInt(curr_input_id.charAt(curr_input_id.length-1))-1; // array index should be pos-1
        let key=$(cardInput).val();

        // find the details of the current card
        let currCardData = cards.find((curr)=>{
            return curr.key == curr_card_id;
        })
        if(curr_key_value_index==-1){
            curr_key_value_index = 9;
        }
        currCardData.suggested_content_Key_Value[curr_key_value_index].key = key;
    }

    // function for Value input change for RCS-SUGGESTED-CONTENT
    function changeinKeyValueSuggestedContent_value(card_number,cardInput){
        let curr_card_id = $(card_number).prop('id');       // get the current card id
        let curr_input_id = $(cardInput).prop('id');
        let curr_key_value_index = parseInt(curr_input_id.charAt(curr_input_id.length-1))-1; // array index should be pos-1
        let value=$(cardInput).val();

        // find the details of the current card
        let currCardData = cards.find((curr)=>{
            return curr.key == curr_card_id;
        })
        if(curr_key_value_index==-1){
            curr_key_value_index = 9;
        }
        // data updation in the KEY-VALUE pair in cards Object Array
        currCardData.suggested_content_Key_Value[curr_key_value_index].value = value;
        console.log(currCardData);
    }

    

    function clickAddVariableSuggestedContentCarousel(card_number,cardButton){
        let currCardId = $(card_number).prop('id');
        // find the current card
        let currCardData = cards.find((curr)=>{
            return curr.key == currCardId;
        });
        let currCardSuggestedContent = currCardData.suggested_content;
        let currCardSuggestedContent__array = currCardData.suggested_content_variable_array;

        // textarea div
        let suggested_content_input = $('#suggested_content_carausel_'+currCardId);

        // textarea value
        let suggested_content_input_value = $(suggested_content_input).val();
        let cursorPos = suggested_content_input[0].selectionStart; // Accessing DOM element directly

        /*   
            From the suggested content array find the place where false is there
            if false found then append that index data in suggested content input
            also add body sample and value in the body-section
            MAX-10 ALLOWED
        */
        for(let i = 0; i < currCardSuggestedContent__array.length; i++) {
            // if current index is false then add that data
            if(currCardSuggestedContent__array[i] === false) {
                currCardSuggestedContent__array[i] = true;
                let text_to_append = "@{{" + (i+1) + "}}";
                let newValue = suggested_content_input_value.substring(0, cursorPos) + text_to_append + suggested_content_input_value.substring(cursorPos);
                $(suggested_content_input).val(newValue); // update text box
                currCardData.suggested_content = newValue;
                break;
            }
        }
        $(suggested_content_input)[0].focus(); // Accessing DOM element directly

        let suggested_content_array = currCardData.suggested_content_variable_array;
        $('#dynamicDivs_carousel').html('');

        let dynamic_data = '';
        for(let i=0;i<suggested_content_array.length;i++){
            if(suggested_content_array[i]==true){
                dynamic_data+=`
                            <div class="row-sm-12 flex mb-4 @{{${i+1}}}" id="dynamic_div_carousel_${i+1}" >
                                <label>@{{${i+1}}}</label>
                                <div class="col-sm-5">
                                    <input oninput='changeinKeyValueSuggestedContent(${currCardId},this)' id='rcs_body_content_carousel_url_key_${i+1}' type="text" name="rcs_body_content_carousel_url_key[]" class="form-control" placeholder="Please Enter name, url, mobile or loan"/>
                                </div>
                                <div class="col-sm-5">
                                    <input oninput='changeinKeyValueSuggestedContent_value(${currCardId},this)' id='rcs_body_content_carousel_url_value_${i+1}' type="text" name="rcs_body_content_carousel_url_value[]" class="form-control" placeholder="Sample Value"/>
                                </div>
                            </div>
                                <span class="error-image error_sugg_content_var_data redIcon hide" id='error_message_carausel_suggested_content_body_samples${currCardId}_${i}'>This is a Required Field</span>
                `;
            }
        }
        $('#dynamicDivs_carousel').html(dynamic_data);
    }

    // when Image File in carausel is changed
    function clickedOnImageFile_carausel(card_element,imageInput){
        let card_number = $(card_element).prop('id');

        /*
            - if CARD WIDTH and MEDIA HEIGHT is not chosen then image cannot be chosen
        */
        if(carausel_validation_data.carausel_card_width=='' || carausel_validation_data.carausel_media_height==''){
            alert('Please Select Card Width and Media Height.');
            $('#rcs_carousel_file_input_id_'+card_number).val('');
            return;
        }

        /*
            - card width and media height is chosen, now add validation
        */

        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        var fileInput = $(imageInput)[0];

        if (fileInput && fileInput.files.length > 0) { 
            var file = fileInput.files[0];
            var sizeInKb = file.size;
            var fileType = file.type;
            
            // if video is chosen then show Thumbnail Option else don't show 
            if(fileType=='video/mp4'){
                if(sizeInKb>  5242880 ){
                    $('#error_message_carausel_image_validation_error_'+card_number).html('Video can have size of max 5MB');
                    setTimeout(function() {
                        $('#error_message_carausel_image_validation_error_'+card_number).html('');
                    }, 2000);
                    $('#rcs_carousel_file_input_id_'+card_number).val('');
                    $('#rcs_carausel_video_thumbnail_container_'+card_number).addClass('hide');
                    currCard.thumbnail = false;
                }
                else{
                    $('#rcs_carausel_video_thumbnail_container_'+card_number).removeClass('hide');
                    currCard.thumbnail = true;
                }
            }
            // if Image file
            else{
                /*
                    if carausel image size exceeded the max size limit of 1MB
                    then display the error message for 2sec
                */
                if(sizeInKb>1048576){
                    $('#error_message_carausel_image_validation_error_'+card_number).html('Image can have size of max 1MB');
                    setTimeout(function() {
                        $('#error_message_carausel_image_validation_error_'+card_number).html('');
                    }, 2000);
                    $('#rcs_carousel_file_input_id_'+card_number).val('');
                }

                // check for aspect ratio
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = new Image();
                    
                    img.onload = function() {
                        var width = this.width;
                        var height = this.height;

                        // No need for image validation using Pixels

                        let expectedAspectRatioHeight = carausel_validation_data.carausel_aspect_ratio_height;
                        let expectedAspectRatioWidth = carausel_validation_data.carausel_aspect_ratio_width;
                        
                        var actualAspectRatio = width/height;
                        var expectedAspectRatio = expectedAspectRatioWidth/expectedAspectRatioHeight;
                        console.log("Actual: "+actualAspectRatio);
                        console.log("Expected: "+expectedAspectRatio);
                        console.log(`Actual width ${width}`);
                        console.log(`Actual Height ${height}`);
                        console.log(`Expected Height ${carausel_validation_data.expected_height}`);
                        console.log(`Expexted Width ${carausel_validation_data.expected_width}`);
                        var tolerance = 0.05;
                        var difference = Math.abs(actualAspectRatio-expectedAspectRatio);
                        console.log(difference);

                        // If height or width or aspect ratio exceeds the validation then throw error
                        if(difference>tolerance){
                            $('#error_message_carausel_image_validation_error_'+card_number).html('Image does not meet the required aspect ratio and resolution.');
                            setTimeout(function() {
                                $('#error_message_carausel_image_validation_error_'+card_number).html('');
                            }, 2000);
                            $('#rcs_carousel_file_input_id_'+card_number).val('');
                        }
                    };

                    // Set the source of the Image object to the data URL of the loaded image
                    img.src = e.target.result;
                };

                // Read the image file as a data URL
                reader.readAsDataURL(file);

                // if all the validations for image are fine
                $('#rcs_carausel_video_thumbnail_container_'+card_number).addClass('hide');
                currCard.thumbnail = false;
            }
            $('#carousel_thumbnail_'+card_number).val('');
            $(`#error_message_carausel_image${card_number.charAt(card_number.length-1)}`).addClass('hide');
        }
    }

    function thumbnailChangeCarausel(card_element,imageInput){
        let card_number = $(card_element).prop('id');
        var fileInput = $(imageInput)[0];

        if (fileInput && fileInput.files.length > 0) { 
            var file = fileInput.files[0];
            var sizeInKb = file.size;
            var fileType = file.type;

            // If thumbnail size exceeds by 100KB then show the error
                if(sizeInKb>102400){
                    $('#carousel_thumbnail_'+card_number).val('');
                    $('#error_message_carausel_thumbnail_validation_error_' + card_number).html('File cannot exceed 100KB');

                    setTimeout(function() {
                        $('#error_message_carausel_thumbnail_validation_error_' + card_number).html('');
                    }, 2000);
                }
                // check for aspect ratio
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = new Image();
                    
                    img.onload = function() {
                        var width = this.width;
                        var height = this.height;

                        let expectedAspectRatioHeight = carausel_validation_data.carausel_aspect_ratio_height;
                        let expectedAspectRatioWidth = carausel_validation_data.carausel_aspect_ratio_width;
                        
                        var actualAspectRatio = width/height;
                        var expectedAspectRatio = expectedAspectRatioWidth/expectedAspectRatioHeight;
                        var tolerance = 0.05;
                        var difference = Math.abs(actualAspectRatio-expectedAspectRatio);

                        console.log(`Actual Aspect Ratio: ${actualAspectRatio}`);
                        console.log(`Expected Aspect Ratio: ${expectedAspectRatio}`);

                        // check the validation on the basis of Aspect ratio
                        if(difference>tolerance){
                            $('#carousel_thumbnail_'+card_number).val('');
                            $('#error_message_carausel_thumbnail_validation_error_' + card_number).html('Thumbnail aspect ratio or orientation doesnot match');
    
                            setTimeout(function() {
                                    $('#error_message_carausel_thumbnail_validation_error_' + card_number).html('');
                                }, 2000);
                        }
                    };

                    // Set the source of the Image object to the data URL of the loaded image
                    img.src = e.target.result;
                };

                // Read the image file as a data URL
                reader.readAsDataURL(file);

        
            }
        }


    // function checkCarauselImageValidation(expected_width,expected_height,actual_height,actual_width){
    //     var actual_aspect_ratio = actual_width/actual_height;
    //     var expected_aspect_ratio = expected_width/expected_height;
    //     console.log('actual height: '+actual_height);
    //     console.log('Actual Width: '+actual_width);
    //     console.log(expected_aspect_ratio);
    //     var tolerance = 0.05;
    //     var difference = Math.abs(actual_aspect_ratio-expected_aspect_ratio);
        
    //     // ratio did not meet
    //     if(difference>tolerance){
    //         return false;
    //     }
    //     // aspect ratio requiurements meet
    //     return true;
    // }

 

    function inputInCampaignURL_carausel(card_element,campaign_url_input){
        let card_number = $(card_element).prop('id');
        let campaignInput = $(campaign_url_input).val();
        let campaign_url_input_id = $(campaign_url_input).prop('id');

        $(campaign_url_input).val(campaignInput.substring(0, 1000));

        // index of JSON data for addition of data
        let campaign_url_div_number = campaign_url_input_id.charAt(campaign_url_input_id.length-6);

        let campaign_url_counter = $(`#counter_campaign_url_carausel_${campaign_url_div_number}${card_number}`);
        $(campaign_url_counter).text((Math.min(1000,campaignInput.length))+'/1000');
       
        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        currCard.button_value_data[campaign_url_div_number].url = campaignInput;
    }

    function inputInActionTag_carausel(card_element,action_tag_input){
        let card_number = $(card_element).prop('id');
        let action_tag_value = $(action_tag_input).val();
        let action_tag_id = $(action_tag_input).prop('id');

        let campaign_url_div_number = action_tag_id.charAt(action_tag_id.length-6);

        let action_tag_counter_id = $(`#counter_action_tag_carausel_${campaign_url_div_number}${card_number}`);
        
        action_tag_value = action_tag_value.substring(0, 20);
        $(action_tag_input).val(action_tag_value);

        // Update the counter with the length of the input value
        $(action_tag_counter_id).text(action_tag_value.length+"/20");

        let currCard = cards.find((curr)=>{
                return curr.key == card_number;
        });
        currCard.button_value_data[campaign_url_div_number].displayText = action_tag_value;
    }

    function inputChangeQueryCarausel(input_element,div_number,card_number){
        card_number = $(card_number).prop('id');
        $(input_element).val($(input_element).val().substring(0,1024));
        $(`#query_carausel_counter_${div_number}${card_number}`).text($(input_element).val().length+"/1024");
    }

    // suggestion type content
    function changeInSuggestionType_caraosel(card_element,suggestionType){
        let card_number = $(card_element).prop('id');
        let suggestionTypeData = $(suggestionType).val();
        let suggestion_type_id = $(suggestionType).prop('id');
        let campaign_url_div_number = suggestion_type_id.charAt(suggestion_type_id.length-6);
        let x = campaign_url_div_number;
        let card_last_digit = parseInt(card_number.charAt(card_number.length-1));
        let currCard = cards.find((curr)=>{
                return curr.key == card_number;
        });


        $(`#suggestion_text_carausel_${x}${card_number}`).addClass('hide');
        $(`#latitude_carausel_${x}${card_number}`).addClass('hide');
        $(`#longitude_carausel_${x}${card_number}`).addClass('hide');
        $(`#query_carausel_${x}${card_number}`).addClass('hide');
        $(`#label_carausel_${x}${card_number}`).addClass('hide');
        $(`#carausel_url_div${x}${card_number}`).removeClass('hide');
        $(`#carausel_action_tag_div_${x}${card_number}`).removeClass('hide');

        if(suggestionTypeData=='url_action'){
            currCard.campaignUrlCounter+=1;
            $('#carausel_url_div'+x+card_number).html(`
            <label for="file" id="campaign_url_carausel_${x}${card_number}" class="campaign_url_carausel col-form-label" data-row-id='0'>Campaign URL</label>
            <span id="counter_campaign_url_carausel_${x}${card_number}" class="counter_campaign">0/1000</span>
            <input value='@{{url}}' id='input_campaing_urls_carausel_id_${x}${card_number}' onchange="inputInCampaignURL_carausel(${card_number},this)"  oninput="inputInCampaignURL_carausel(${card_number},this)" type="text" name="campaing_urls_carausel[${card_last_digit}][${x}]" class="form-control" placeholder ="Campaign URL"/>
            `);
        }
        else if(suggestionTypeData=='dialer_action'){
            if(currCard.campaignUrlCounter>0){
                currCard.campaignUrlCounter-=1;
            }
            $('#carausel_url_div'+x+card_number).html(`
            <label for="file" id="mobile_number_carausel_${x}${card_number}" class="mobile_number_carausel col-form-label" data-row-id='0'>Mobile Number</label>
            <span id="counter_mobile_number_carausel_${x}${card_number}" class="counter_campaign">0/10</span>
            <input id='input_mobile_number_carausel_id_${x}${card_number}' onchange="inputInMobileNumber_carausel(${card_number},this)"  oninput="inputInMobileNumber_carausel(${card_number},this)" type="text" name="campaing_urls_carausel[${card_last_digit}][${x}]" class="form-control" placeholder ="Mobile Number"/>
            `);
        }

        // suggestion type for View Location (lat long0)
        else if(suggestionTypeData=='viewlocation'){
            // for view location lat and long display the Suggested content / latitude / longitude and Label
            $(`#suggestion_text_carausel_${x}${card_number}`).removeClass('hide');
            $(`#latitude_carausel_${x}${card_number}`).removeClass('hide');
            $(`#longitude_carausel_${x}${card_number}`).removeClass('hide');
            $(`#label_carausel_${x}${card_number}`).removeClass('hide');

            // hide the carausel div and action tag
            $(`#carausel_url_div${x}${card_number}`).addClass('hide');
            $(`#carausel_action_tag_div_${x}${card_number}`).addClass('hide');
        }

        else if(suggestionTypeData=='view_location_query'){
            // keep the Suggested content and Query
            $(`#suggestion_text_carausel_${x}${card_number}`).removeClass('hide');
            $(`#query_carausel_${x}${card_number}`).removeClass('hide');
            $(`#carausel_url_div${x}${card_number}`).addClass('hide');
            $(`#carausel_action_tag_div_${x}${card_number}`).addClass('hide');
        }
        else if(suggestionTypeData=='share_location'){
            $(`#carausel_url_div${x}${card_number}`).addClass('hide');
            $(`#carausel_action_tag_div_${x}${card_number}`).addClass('hide');
            $(`#suggestion_text_carausel_${x}${card_number}`).removeClass('hide');
        }

        // update the data in JSON
        if(suggestionTypeData){
            // index of JSON data for addition of data

            // store only one: either url action ormobile number
            // other is made as empty string
            if(suggestionTypeData=='url_action'){
                currCard.button_value_data[x].phoneNumber = '';
                currCard.button_value_data[campaign_url_div_number].url = '@{{url}}';
            }
            else{
                currCard.button_value_data[campaign_url_div_number].url ='';
                currCard.button_value_data[campaign_url_div_number].phoneNumber = $(suggestionType).val();
            }

            currCard.button_value_data[campaign_url_div_number].suggestionType = suggestionTypeData;
        }
    }

    // In the bottom add the suggested actions and data
    function addCarouselCard(card,buttonInput){
        let card_number = $(card).prop('id');
        console.log("Card No."+card_number);
        let card_last_digit = parseInt(card_number.charAt(card_number.length-1));

        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        let currCardBottomValues = currCard.button_values;
        
        let url_counter=1;
        for(let i=2;i<=4;i++){
            if(currCardBottomValues[i]==false){
                let nextBottomValue = `
                            <div class="campaign_urls_div carausel_campaign_url_div" id='div_bottom_value_${i}${card_number}'>
                                     <div class="row">
                                        
                                        <div class="form-group col-md-3">
                                                <label for="campaign_url_type" class="col-form-label">Type Of Action</label>
                                                <select name="campaign_url_type_carausel[${card_last_digit}][${i}]" onchange='changeInSuggestionType_caraosel(${card_number},this)' id="campaign_url_type_carousel_${i}${card_number}" data-row-id='0' class="form-control">
                                                    <option value="">Select Option</option>
                                                    <option value="url_action">URL Action</option>
                                                    <option value="dialer_action">Dailer Action</option>
                                                    <option value="viewlocation">View Location(lat/long)</option>
                                                    <option value="view_location_query">View Location(Query)</option>
                                                    <option value="share_location">Share Location</option>
                                                    </select>
                                            </div>

                                            <div class="form-group col-md-3 " id="carausel_url_div${i}${card_number}">
                                                <label for="input_campaing_urls_carausel_id_${i}${card_number}" id="campaign_url_carausel_${i}${card_number}" class="campaign_url_carausel col-form-label" data-row-id='0'>Campaign URL</label>
                                                <label for="input_campaing_urls_carausel_id_${i}${card_number}" id="mobile_number_carausel_${i}${card_number}" class="hide mobile_number_carausel col-form-label" data-row-id='0'>Mobile Number</label>
                                                <span id="counter_campaign_url_carausel_${i}${card_number}" class="counter_campaign">0/1000</span>
                                                <input id='input_campaing_urls_carausel_id_${i}${card_number}' onchange="inputInCampaignURL_carausel(${card_number},this)" oninput="inputInCampaignURL_carausel(${card_number},this)" type="text" name="campaing_urls_carausel[${card_last_digit}][${i}]" class="form-control" placeholder ="Campaign URL"/>
                                                </div>
                                                
                                                <div class="form-group col-md-3" id="carausel_action_tag_div_${i}${card_number}">
                                                <label for="rcs_action_tag_carausel_${i}${card_number}" class="col-form-label"> Action Tag</label>
                                                <span id="counter_action_tag_carausel_${i}${card_number}" class="counter_campaign">0/20</span>
                                                <input oninput="inputInActionTag_carausel(${card_number},this)"  onchange="inputInActionTag_carausel(${card_number},this)"  id='rcs_action_tag_carausel_${i}${card_number}' type="text" name="rcs_tag_carausel[${card_last_digit}][${i}]" class="form-control" placeholder = "Action Tag"/>            
                                                </div>
                                                
                                            <div class="form-group col-md-3 hide" id="suggestion_text_carausel_${i}${card_number}">
                                                <label for="file" id="campaign_url" class="campaign_url col-form-label" data-row-id='0'>Suggestion Text</label>
                                                <span id="suggestion_text_carausel_counter_${i}${card_number}" class="counter_campaign">0/25</span>
                                                <input id='suggestion_text_carausel_input_${i}${card_number}' oninput="inputChangeSuggestedTextCarausel(this,${i},${card_number})" type="text" name="suggestionTextCarausel[${card_last_digit}][${i}]" class="form-control" placeholder ="Suggestion Text"/>
                                                </div>
                                                
                                                <div class="form-group col-md-3 hide" id="latitude_carausel_${i}${card_number}">
                                                    <label for="file" class="col-form-label"> Latitude </label>
                                                    <i title='Please mention the latitude in degrees. It must be in the range [-90.0,+90.0]. Positive latitudes are north of the equator, negative latitudes are south of the equator.' id="caraausel_latitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                    <input oninput="inputLatitudeCarausel(this,${card_number},${i})" id='latitude_input_carausel_${i}${card_number}' type="number" name="latitudeCarausel[${card_last_digit}][${i}]" class="form-control" placeholder = "Latitude" step="0.0000001"/>            
                                                    <p class='error_message_button_value hide' id='error_latitude_carausel${i}${card_number}'>Please Enter a valid Number</p>
                                                    </div>
                                                    
                                                    <div class="form-group col-md-3 hide" id="longitude_carausel_${i}${card_number}">
                                                        <label for="file" class="col-form-label"> Longitude </label>
                                                        <i title='Please mention the longitude in degrees.It must be in the range [-180.0,+180.0]. Positive longitudes are east of the Prime Meridian; negative longitudes are west of the Prime Meridian.' id="caraausel_longitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                        <input oninput="inputLongitudeCarausel(this,${i},${card_number})" id='longitude_input_carausel_${i}${card_number}' type="number" name="longitudeCarausel[${card_last_digit}][${i}]" class="form-control" placeholder = "Longitude" step="0.0000001"/>            
                                                <p class='error_message_button_value hide' id='error_longitude_carausel_${i}${card_number}'>Please Enter a valid Number</p>    
                                                </div>
                                                
                                        <div class="form-group col-md-3 query_input_div_carausel hide" id="query_carausel_${i}${card_number}">
                                            <label for="query_input_carausel_${i}${card_number}" class="col-form-label"> Query</label>
                                            <i title= 'Enter the Query that you would like to search for here.For instance,setting the query string to "Growing Tree Bank" will show all Growing Tree Bank, Bank locality in the users vicinity. Setting the query string to 1600 Amphitheater Parkway, Mountain View, CA 94043 will select that specific address, regardless of the users location.' id="caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <span id="query_carausel_counter_${i}${card_number}" class="counter_campaign">0/1024</span>
                                            <input oninput="inputChangeQueryCarausel(this,${i},${card_number})" id='query_input_carausel_${i}${card_number}' type="text" name="queryCarausel[${card_last_digit}][${i}]" class="form-control" placeholder = "Enter Query"/>            
                                        </div>

                                        <button type='button' onclick='removeCardButtomValue__caraosel(${card_number},this,${i})' id='removeCardButtomValue__caraosel${i}' class='add_urls fa fa-minus-square redIcon'></button>   
                                        
                                        <div class="form-group col-md-3 label_input hide" id="label_carausel_${i}${card_number}">
                                            <label for="file" class="col-form-label"> Label</label>
                                            <i title='Please mention the label of the pin dropped at latLong.' id="caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <span id="label_carausel_counter_${i}${card_number}" class="counter_campaign">0/25</span>
                                            <input oninput="inputLabelCarausel(this,${i},${card_number})" id='label_input_non_carausel_${i}${card_number}' type="text" name="labelCarausel[${card_last_digit}][${i}]" class="form-control" placeholder = "Enter Label"/>            
                                        </div>
                                    </div>
                                    

                                    <p class='hide error_message_button_value' id='error_message_button_value_${card_number}_${i}'>This is a required field</p>
                            </div>
                        `;
                        $('#carausel_button_value_container_'+card_number).append(nextBottomValue);
                        currCard.button_values[i] = true;
                        break;
            }
        }

        // updateURL_Label_Counter(card_number);

    }


    function updateURL_Label_Counter(card_number){
        // update the label
        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        let curr_card_button_values_data = currCard.button_value_data;
        let counter = 0;
        let non_carousal_counter = 0;
        // get the count of suggestion content
        for(let i=1;i<curr_card_button_values_data.length;i++){
            let currButtonValueData = curr_card_button_values_data[i];
            if(currButtonValueData.suggestionType && currButtonValueData.suggestionType=='url_action'){
                if(currButtonValueData.url=="@{{url}}"){
                    counter+=1;
                    $(`#campaign_url_carausel_${i}${currCard.key}`).text(`Campaign URL ${counter}`);
                }
                else{
                    $(`#campaign_url_carausel_${i}${currCard.key}`).text(`Campaign URL`);
                }

            }

            // non carousal
            var suggestionType = $(`select[data-row-id="${i-1}"]`).val();
            var campaign_url_id = "#campaing_urls";
            var campaign_label = "#campaign_url";
            if(i>1){
                campaign_url_id= `#campaing_urls${i-1}`;
                campaign_label = `#campaign_url${i-1}`;
            }
            var campaign_data = $(campaign_url_id).val();
            campaign_label = $(campaign_label);

            if(campaign_data){
                if(suggestionType==1){
                    if(campaign_data=="@{{url}}"){
                        non_carousal_counter+=1;
                        campaign_label.text(`Campaign Url ${non_carousal_counter}`);
                    }
                    else{
                        campaign_label.text("Campaign Url");   
                    }
                }
            }
        }

        // update for Non Carausal

    }

    /* removal of card bottom value when clicked on red icon
       index to remove is the index of the Action Data where it should be deleted
       [card_1][2]: means for card 1 2nd action data should get removed
    */
    function removeCardButtomValue__caraosel(card,buttonInput,index_to_remove){
        let card_number = $(card).prop('id');

        let currCard = cards.find((curr)=>{
            return curr.key == card_number;
        });

        let currCardBottomValues = currCard.button_values;
        currCard.button_value_data[index_to_remove] = {};
        currCard.button_values[index_to_remove] = false;


        $('#div_bottom_value_'+index_to_remove+card_number).remove();
    }

    // for every 200 ms an event would asynchronously run to check
    // the button values suggestion type to check URL counter
    setInterval(() => {
            for(let i=0;i<6;i++){
                let currCard = cards[i];
                updateURL_Label_Counter(currCard.key);
            }
    }, 200);

    function changeInCarauselCardWidth(card_width_input){
        let cardWidth = $(card_width_input).val();

        var cardWidth_card = '';
        if(cardWidth=='CARD_WIDTH_SMALL'){
            cardWidth_card = 'SMALL_WIDTH'
        }
        else if(cardWidth=='CARD_WIDTH_MEDIUM'){
            cardWidth_card = 'MEDIUM_WIDTH'
        }
        cards[0].orientation.mediaWidth = cardWidth_card;

        carausel_validation_data.carausel_card_width=cardWidth;
        
        $('.rcs_image_carausel').val('');
        $('.rcs_carausel_thumbnail').val('');
        $('.rcs_carausel_thumbnail').addClass('hide');
        cards.forEach((curr)=>{
            curr.thumbnail = false;
        });
        set_carausel_image_validation();
        console.log(
                    carausel_validation_data.carausel_card_width,
                    carausel_validation_data.carausel_media_height,
                    carausel_validation_data.carausel_aspect_ratio_height,
                    carausel_validation_data.carausel_aspect_ratio_width
        );
        
    }

    function changeInCarauselMediaHeight(media_height_input){
        let mediaHeight = $(media_height_input).val();

        var mediaHeight_card = '';
        if(mediaHeight=='MEDIA_HEIGHT_SHORT'){
            mediaHeight_card = 'SHORT_HEIGHT';
        }
        else if(mediaHeight=='MEDIA_HEIGHT_MEDIUM'){
            mediaHeight_card = 'MEDIUM_HEIGHT'
        }
        cards[0].orientation.mediaHeight  = mediaHeight_card;
        
        carausel_validation_data.carausel_media_height=mediaHeight;   
        $('.rcs_image_carausel').val('');
        $('.rcs_carausel_thumbnail').val('');
        $('.rcs_carausel_thumbnail').addClass('hide');
        $('.rcs_carausel_thumbnail').val('');
        cards.forEach((curr)=>{
            curr.thumbnail = false;
        });
        set_carausel_image_validation();
    }

    // Thumbnail validation is same as image validation
    function set_carausel_image_validation(){
        $video_validation = 'Video: MP4 format with Max size of 5MB';
        if(carausel_validation_data.carausel_media_height=='MEDIA_HEIGHT_SHORT' && carausel_validation_data.carausel_card_width=='CARD_WIDTH_SMALL'){
            carausel_validation_data.carausel_aspect_ratio_width = 5;
            carausel_validation_data.carausel_aspect_ratio_height = 4;
            carausel_validation_data.expected_width=960;
            carausel_validation_data.expected_height=720;
            $('.carausel_image_description').attr('title',`Image: JPEG, JPG, PNG,GIF  (960Px * 720Px), max-size 1MB and aspect ratio of 5:4,${$video_validation} `);
            $('.carousel_thumbnail_desc').attr('title',`Image: JPEG, JPG, PNG,GIF  (565Px * 452Px), max-size 100Kb and aspect ratio 5:4`);
        }
        else if(carausel_validation_data.carausel_media_height=='MEDIA_HEIGHT_SHORT' && carausel_validation_data.carausel_card_width=='CARD_WIDTH_MEDIUM'){
            carausel_validation_data.carausel_aspect_ratio_width = 2;
            carausel_validation_data.carausel_aspect_ratio_height = 1;
            carausel_validation_data.expected_width=1440;
            carausel_validation_data.expected_height=720;
            $('.carausel_image_description').attr('title',`Image: JPEG, JPG, PNG,GIF  (1440Px * 720Px), max-size 1MB and aspect ratio of 2:1,${$video_validation} `);
            $('.carousel_thumbnail_desc').attr('title',`Image: JPEG, JPG, PNG,GIF  (904Px * 452Px), max-size 100Kb and aspect ratio 2:1`);
        }
        else if(carausel_validation_data.carausel_media_height=='MEDIA_HEIGHT_MEDIUM' && carausel_validation_data.carausel_card_width=='CARD_WIDTH_SMALL'){
            carausel_validation_data.carausel_aspect_ratio_width = 4;
            carausel_validation_data.carausel_aspect_ratio_height = 5;
            carausel_validation_data.expected_width=576;
            carausel_validation_data.expected_height=720;
            $('.carausel_image_description').attr('title',`Image: JPEG, JPG, PNG,GIF  (576Px * 720Px), max-size 1MB and aspect ratio of 4:5,${$video_validation} `);
            $('.carousel_thumbnail_desc').attr('title',`Image: JPEG, JPG, PNG,GIF   (362Px * 452Px) and aspect ratio 4:5, max-size 100Kb`);
        }
        else if(carausel_validation_data.carausel_media_height=='MEDIA_HEIGHT_MEDIUM' && carausel_validation_data.carausel_card_width=='CARD_WIDTH_MEDIUM'){
            carausel_validation_data.carausel_aspect_ratio_width = 4;
            carausel_validation_data.carausel_aspect_ratio_height = 3;
            carausel_validation_data.expected_width=1440;
            carausel_validation_data.expected_height=1080;
            $('.carausel_image_description').attr('title',`Image: JPEG, JPG, PNG,GIF  (1440Px * 1080Px), max-size 1MB and aspect ratio of 4:3,${$video_validation} `);
            $('.carousel_thumbnail_desc').attr('title',`Image: JPEG, JPG, PNG,GIF  (605Px * 452Px) and aspect ratio 4:3, max-size 100Kb`);
        }
    }

    function carousel_Implementation(){
        let current_clicked_card = 'card1'
        // when carausel gets implemented clear the data from the JSON 
        // for card 1 andd card 2 make status as true so that next time card 1 and 2 doesnot gets created 
        cards.forEach((curr)=>{
            curr.title='';
            curr.status = false;
            curr.suggested_content = '';
            curr.titleDynamicURL = '';
            curr.thumbnail = false;
            curr.image_video_file = '';
            curr.thumbnail = false;
            curr.suggested_content_variable_array.forEach((currEle, index) => {
                curr.suggested_content_variable_array[index] = false;
            });
            curr.button_values.forEach((currEle, index) => {
                if(index>1){
                    curr.button_values[index] = false;
                }
            });
            curr.suggested_content_Key_Value.forEach((currEle, index) => {
                curr.suggested_content_Key_Value[index] = {};
            });
            curr.button_value_data=[null,{},{},{},{}]
            });
        cards[0].status = true;
        cards[1].status = true;

        $('#carousel_div').append(`
                    <div id="carausel_orientations"> </div>
                    
                    <div id="carausel_cards"></div>

                    <p id="carausel_error_alert"></p>

                    <div id='carausel_images'></div>

                    <div id="carausel_content"></div>

                    <div id='carausel_button_values'> 
                    </div>
                    
                    `);


        let imageData = '';
        let bottom_action_values = '';
        for(let i=1;i<=6;i++){
            let card_number = 'card'+i;
            imageData+=`
            <div id='carausel_image_card${i}' class='carausel_images_first_container'>
                            <div class="form-group row" id="rcs_carousel_image_card${i}">
                                <label id="image_label_carousel_card${i}" class="col-sm-3 col-form-label">
                                    <span id="carousel_image_desc_name_1">Creative/Image/Video</span>
                                    <i title='Choose Media Height and Card Width' id="carousel_image_description_card${i}" class="fa fa-info-circle richmedia_image carausel_image_description" aria-hidden="true"></i>
                                </label>
                                <div class="col-sm-3">
                                    <input onchange='clickedOnImageFile_carausel(card${i},this)' id='rcs_carousel_file_input_id_card${i}' class="richmedia_image rcs_image_carausel" type="file" name="rcs_carausel_image_file_input[${i}][]" class="form-control" placeholder = "Creative/Image" accept="image/gif,image/png,image/jpg,image/jpeg,video/*" />
                                    <span class="error-image redIcon"></span>
                                </div>
                            </div>
                                    <span class="carausel_image_validation_error error-image redIcon" id='error_message_carausel_image_validation_error_card${i}'></span>
                                    <span class="hide error-image redIcon carausel_div_image_error" id='error_message_carausel_image${i}'>This is a Required Field</span>
                    
                            <div id='rcs_carausel_video_thumbnail_container_card${i}' class='rcs_carausel_thumbnail hide'>
                                <div class="form-group row" id="rcs_thumbnail_div_card${i}">
                                    <label  class="col-sm-3 col-form-label">
                                        Thumbnail 
                                        <i id="carousel_thumbnail_description_card${i}" class="fa fa-info-circle richmedia_image carousel_thumbnail_desc" aria-hidden="true"></i>
                                    </label>
                                    <div class="col-sm-3">
                                        <input onchange='thumbnailChangeCarausel(card${i},this)' id='carousel_thumbnail_card${i}' class="richmedia_image rcs_image_carausel" type="file" name="carausel_thumbnail[${i}][]" class="form-control" placeholder = "Creative/Image" accept="image/gif,image/png,image/jpg,image/jpeg" />
                                        <span class="error-image-thumbnail redIcon"></span>
                                    </div>
                                </div>
                                <span class="carausel_thumbnail_validation_error error_message_carausel error_sugg_content error-image redIcon" id='error_message_carausel_thumbnail_validation_error_card${i}'></span>
                                <span class="carausel_image_validation_error error-image redIcon hide" id='error_message_carausel_thumbnail${i}'>This is a Required Field</span>
                            </div>
                        </div>`;

        let x = 1;
        bottom_action_values+= `
        <div id='carausel_button_value_container_card${i}' class='carausel_bottom_action_container'>
            <div class="campaign_urls_div carausel_campaign_url_div" id='div_bottom_value_${x}${card_number}'>
                                        <div class="row">
                                            <div class="form-group col-md-3">
                                                <label for="campaign_url_type" class="col-form-label">Type Of Action</label>
                                                <select name="campaign_url_type_carausel[${i}][${x}]" onchange='changeInSuggestionType_caraosel(${card_number},this)' id="campaign_url_type_carousel_${x}${card_number}" data-row-id='0' class="form-control">
                                                    <option value="">Select Option</option>
                                                    <option value="url_action">URL Action</option>
                                                    <option value="dialer_action">Dailer Action</option>
                                                    <option value="viewlocation">View Location(lat/long)</option>
                                                    <option value="view_location_query">View Location(Query)</option>
                                                    <option value="share_location">Share Location</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-3 " id="carausel_url_div${x}${card_number}">
                                                <label for="file" id="campaign_url_carausel_${x}${card_number}" class="campaign_url_carausel col-form-label" data-row-id='0'>Campaign URL</label>
                                                <span id="counter_campaign_url_carausel_${x}${card_number}" class="counter_campaign">0/1000</span>
                                                <input id='input_campaing_urls_carausel_id_${x}${card_number}' onchange="inputInCampaignURL_carausel(${card_number},this)"  oninput="inputInCampaignURL_carausel(${card_number},this)" type="text" name="campaing_urls_carausel[${i}][${x}]" class="form-control" placeholder ="Campaign URL"/>
                                            </div>
                                            <div class="form-group col-md-3" id='carausel_action_tag_div_${x}${card_number}'>
                                                    <label for="rcs_action_tag_carausel_${x}${card_number}" class="col-form-label"> Action Tag</label>
                                                    <span id="counter_action_tag_carausel_${x}${card_number}" class="counter_campaign">0/20</span>
                                                    <input oninput="inputInActionTag_carausel(${card_number},this)"  onchange="inputInActionTag_carausel(${card_number},this)"  id='rcs_action_tag_carausel_${x}${card_number}' type="text" name="rcs_tag_carausel[${i}][${x}]" class="form-control" placeholder = "Action Tag"/>           
                                            </div>

                                            <div class="form-group col-md-3 hide" id="suggestion_text_carausel_${x}${card_number}">
                                                    <label for="file" id="campaign_url" class="campaign_url col-form-label" data-row-id='0'>Suggestion Text</label>
                                                    <span id="suggestion_text_carausel_counter_${x}${card_number}" class="counter_campaign">0/25</span>
                                                    <input id='suggestion_text_carausel_input_${x}${card_number}' oninput="inputChangeSuggestedTextCarausel(this,${x},${card_number})" type="text" name="suggestionTextCarausel[${i}][${x}]" class="form-control" placeholder ="Suggestion Text"/>
                                                </div>

                                                <div class="form-group col-md-3 hide" id="latitude_carausel_${x}${card_number}">
                                                    <label for="file" class="col-form-label"> Latitude </label>
                                                    <i title='Please mention the latitude in degrees. It must be in the range [-90.0,+90.0]. Positive latitudes are north of the equator, negative latitudes are south of the equator.' id="caraausel_latitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                    <input oninput="inputLatitudeCarausel(this,${card_number},${x})" id='latitude_input_carausel_${x}${card_number}' type="number" name="latitudeCarausel[${i}][${x}]" class="form-control" placeholder = "Latitude" step="0.0000001"/>            
                                                    <p class='error_message_button_value hide' id='error_latitude_carausel${x}${card_number}'>Please Enter a valid Number</p>
                                                </div>

                                                <div class="form-group col-md-3 hide" id="longitude_carausel_${x}${card_number}">
                                                    <label for="file" class="col-form-label"> Longitude </label>
                                                    <i title='Please mention the longitude in degrees.It must be in the range [-180.0,+180.0]. Positive longitudes are east of the Prime Meridian; negative longitudes are west of the Prime Meridian.' id="caraausel_longitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                    <input oninput="inputLongitudeCarausel(this,${x},${card_number})" id='longitude_input_carausel_${x}${card_number}' type="number" name="longitudeCarausel[${i}][${x}]" class="form-control" placeholder = "Longitude" step="0.0000001"/>            
                                                    <p class='error_message_button_value hide' id='error_longitude_carausel_${x}${card_number}'>Please Enter a valid Number</p>    
                                                </div>

                                            <div class="form-group col-md-3 query_input_div_carausel hide" id="query_carausel_${x}${card_number}">
                                                <label for="query_input_carausel_${x}${card_number}" class="col-form-label"> Query</label>
                                                <i title= 'Enter the Query that you would like to search for here.For instance,setting the query string to "Growing Tree Bank" will show all Growing Tree Bank, Bank locality in the users vicinity. Setting the query string to 1600 Amphitheater Parkway, Mountain View, CA 94043 will select that specific address, regardless of the users location.' id="caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                <span id="query_carausel_counter_${x}${card_number}" class="counter_campaign">0/1024</span>
                                                <input oninput="inputChangeQueryCarausel(this,${x},${card_number})" id='query_input_carausel_${x}${card_number}' type="text" name="queryCarausel[${i}][${x}]" class="form-control" placeholder = "Enter Query"/>            
                                            </div>

                                            <button type='button' onclick='addCarouselCard(card${i},this)' id='add_urls_carousel_card${x}' class='add_urls fa fa-plus-square greenIcon_add_buttton'></button>   

                                            <div class="form-group col-md-3 label_input hide" id="label_carausel_${x}${card_number}">
                                                <label for="file" class="col-form-label"> Label</label>
                                                <i title='Please mention the label of the pin dropped at latLong.' id="caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                                <span id="label_carausel_counter_${x}${card_number}" class="counter_campaign">0/25</span>
                                                <input oninput="inputLabelCarausel(this,${x},${card_number})" id='label_input_non_carausel_${x}${card_number}' type="text" name="labelCarausel[${i}][${x}]" class="form-control" placeholder = "Enter Label"/>            
                                            </div>
                                        </div>
                                        <p class='hide error_message_button_value' id='error_message_button_value_${card_number}_${x}'>This is a required field</p>

                                        </div>

                                    </div>
                                </div>
                                
        `;
        }
        

        // carausel Images and Button values
        $('#carausel_images').html(imageData);
        $('#carausel_button_values').html(bottom_action_values);


        let carousel_card_width = `
                <div class="form-group row">
                            <label for="rcs_carousel_card_width" class="col-sm-3 col-form-label">Card Width</label>
                            <div class="col-sm-6">
                                <select onchange='changeInCarauselCardWidth(this)' name="rcs_carousel_card_width" id="rcs_carousel_card_width_id" class="form-control" required>
                                    <option value="">Select Card Width</option>
                                    <option value="CARD_WIDTH_SMALL">Small</option>
                                    <option value="CARD_WIDTH_MEDIUM">Medium</option>
                                </select>
                            </div>
                        </div>
                            <span class="carausel_error_div error-image redIcon" id='error_message_carausel_card_width'>This is a Required Field</span>
                        `;

        let carousel_media_height = `
                <div class="form-group row">
                            <label for="carousel_media_height" class="col-sm-3 col-form-label">Media Height</label>
                            <div class="col-sm-6">
                                <select name="rcs_carousel_media_height" id="rcs_carousel_media_height_id" class="form-control" onchange='changeInCarauselMediaHeight(this)' required>
                                    <option value="">Select Media Height</option>
                                    <option value="MEDIA_HEIGHT_SHORT">Short</option>
                                    <option value="MEDIA_HEIGHT_MEDIUM">Medium</option>
                                </select>
                            </div>
                        </div>
                            <span class="carausel_error_div error-image redIcon" id='error_message_carausel_media_height'>This is a Required Field</span>
                        `;
            
        let carousel_card_section = `
                    <div class="form-group row" id="card_section_carousel">
                        <div class="btn-group btn-group-sm btn_group_carousel" role="group" aria-label="Default button group">
                            <button type="button" class="carousel_card_button selected_rcs_card_button" id='card1'>Card 1</button>
                            <button type="button" class="carousel_card_button" id='card2'>Card 2</button>
                        </div>
                        <div class="col-sm-1 flex" id="">
                            <button type='button' id='add_card_button' class='acc_card_btn fa fa-plus-square greenIcon' title='Add Card'></button>
                        </div>
                    </div>
                    `;


                    $('#carausel_orientations').append(carousel_card_width);
                    $('#carausel_orientations').append(carousel_media_height);


        $('#carausel_cards').append(carousel_card_section);
        

        displayCardForIndex('card2');
        displayCardForIndex('card1');

        // append upto 6 cards
        // from 2-6 which-ever is the 1st card available, simply append that card
        $('#add_card_button').click(function(){
            for(let i=0;i<cards.length;i++){
                if(cards[i].status==false){
                    cards[i].status = true;
                    let card = `
                    <button type="button" class="carousel_card_button" id='card${i+1}'>Card ${i+1}</button>
                    <span class='remove_card_carousel_button' id='remove_card_${i+1}'>x</span>
                    `;
                    $('.btn_group_carousel').append(card);

                    // on click on the delete button remove the card
                    $('#remove_card_' + (i + 1)).click(function(){
                        $('#card'+(i+1)).remove();
                        $('#remove_card_'+(i+1)).remove();
                        cards[i].status = false;
                        cards[i].title = '';
                        cards[i].suggested_content = '';
                        cards[i].titleDynamicURL = '';
                        cards[i].titleKeyData = '';
                        cards[i].thumbnail = false;
                        cards[i].button_value_data=[null,{},{},{},{}]
                        // make all the element as false for the suggested content
                        cards[i].suggested_content_variable_array.forEach((curr, index) => {
                            cards[i].suggested_content_variable_array[index] = false;
                        });

                        // when card gets removed all the key-value pairs for suggested content gets removed
                        cards[i].suggested_content_Key_Value.forEach((curr, index) => {
                            cards[i].suggested_content_Key_Value[index] = {};
                        });
                        $('#rcs_carousel_file_input_id_card'+(i+1)).val('');
                        //remove the value from the image when card is closed
                        $('#rcs_carousel_file_input_id_card'+(i+1)).val('');
                        $('#carousel_thumbnail_card'+(i+1)).remove();
                        $('#carousel_thumbnail_card'+(i+1)).remove();


                        $('#card1').click();
                        current_clicked_card = 'card1';
                    });


                    // change the colour of card when clicked
                    $('.carousel_card_button').click(function(){
                        $('.carousel_card_button').removeClass('selected_rcs_card_button'); 
                        $(this).addClass('selected_rcs_card_button');

                        let current_card_id = $(this).attr('id');
                        current_clicked_card = current_card_id;
                        $('.carausel_images_first_container').addClass('hide');
                        $('#carausel_image_'+current_clicked_card).removeClass('hide');

                        $('.carausel_bottom_action_container').addClass('hide');
                        $('#carausel_button_value_container_'+current_clicked_card).removeClass('hide');

                        console.log(current_clicked_card);
                        console.log(cards);

                        let currCard = cards.find((curr)=>{
                            return curr.key == current_clicked_card;
                        });
                        if(currCard.thumbnail==false){
                            $('#rcs_carausel_video_thumbnail_container_'+current_clicked_card).addClass('hide');
                        }
                        else{
                            $('#rcs_carausel_video_thumbnail_container_'+current_clicked_card).removeClass('hide');
                        }
                        


                        if(current_clicked_card=='card1'){
                            $('#rcs_carousel_media_height_id').prop('disabled',false);
                            $('#rcs_carousel_card_width_id').prop('disabled',false);
                        }
                        else{
                            $('#rcs_carousel_media_height_id').prop('disabled',true);
                            $('#rcs_carousel_card_width_id').prop('disabled',true);
                        }
                        displayCardForIndex(current_card_id);
                    });

                    break;
                }
            }
        })

        // change the colour of card when clicked
        $('.carousel_card_button').click(function(){
            $('.carousel_card_button').removeClass('selected_rcs_card_button'); 
            $(this).addClass('selected_rcs_card_button');
            let current_card_id = $(this).attr('id');

            current_clicked_card = current_card_id;
            $('.carausel_images_first_container').addClass('hide');
            $('#carausel_image_'+current_clicked_card).removeClass('hide');

            $('.carausel_bottom_action_container').addClass('hide');
            $('#carausel_button_value_container_'+current_clicked_card).removeClass('hide');


            let currCard = cards.find((curr)=>{
                    return curr.key == current_clicked_card;
                });
            if(currCard.thumbnail==false){
                $('#rcs_carausel_video_thumbnail_container_'+current_clicked_card).addClass('hide');
            }
                else{
                    $('#rcs_carausel_video_thumbnail_container_'+current_clicked_card).removeClass('hide');
                }

            if(current_clicked_card=='card1'){
                $('#rcs_carousel_media_height_id').prop('disabled',false);
                $('#rcs_carousel_card_width_id').prop('disabled',false);
            }
            else{
                $('#rcs_carousel_media_height_id').prop('disabled',true);
                $('#rcs_carousel_card_width_id').prop('disabled',true);
            }
            console.log(cards);
            displayCardForIndex(current_card_id);
        });

            $('.carausel_images_first_container').addClass('hide');
            $('#carausel_image_'+current_clicked_card).removeClass('hide');

            $('.carausel_bottom_action_container').addClass('hide');
            $('#carausel_button_value_container_'+current_clicked_card).removeClass('hide');

    }


    // display the current card 

    function displayCardForIndex(card_number){
        // console.log(carausel_validation_data);
        var lastChar = card_number.charAt(card_number.length - 1);
        var lastDigit = parseInt(lastChar);
        let card_id = $(card_number).prop('id')


        let cardData = cards.find((curr)=>{
            return curr.key == card_number;
        });

        let title_from_card = cardData.title;
        let suggested_content_from_card = cardData.suggested_content;
            // display the current card
            let carousel_card_body = `
            <div class="rcs_carousel_title_div">
                        <div class="form-group row" id="rcs_div">
                            <label for="file" class="col-sm-3 col-form-label">Title
                                <i title="Only one variable can be choosen." id="rcs_y_title_desc" class="fa fa-info-circle richmedia_image" aria-hidden="true"></i>
                            </label>
                            <span class="title-name-count" id='title_counter_${card_number}'>0/200</span>
                            <div class="col-sm-6">
                                <input value = '${title_from_card}'' oninput='changeInputCarauselTitle(${card_number},this)' id='rcs_carousel_title_id_${lastDigit}' type="text" name="rcs_carousel_title[]" class="form-control" placeholder = "Enter Title" value = ${title_from_card}/>
                            </div>
                            <div class="col-sm-1 flex" id = "add_rcs_dynamic_url" class='add_dynamic_url_title_carousel'>
                                <button type='button' onclick='carouselDynaminURLtitleButton(${card_number},this)' id='add_carausel_dynamic_url_${card_number}' class='add_rcs_title_dynamic_url fa fa-plus greenIcon'> </button>
                            </div>
                        </div>
                        <span class="error-image redIcon hide  carausel_error" id='error_message_carausel_title_${card_number}'>This is a Required Field</span>
                </div>


               

            <div id='rcs_carousel_suggested_content_div'>
                    <div class="form-group row">
                        <label for="file" class="col-sm-3 col-form-label">Content</label>
                        <span class="content-count" id='content_counter_${card_number}'>0/2000</span>
                        <div class="col-sm-6">
                            <textarea oninput='changeInCarauselInputSuggestedContent(${card_number},this)' id='suggested_content_carausel_${card_number}' type="text" name="suggested_content_carausel[]" class="form-control" rows="6" placeholder = "Content">${suggested_content_from_card}</textarea>
                        </div>
                    </div>
                    {{-- Emoji Container Div for non carausel --}}
                    <div class="form-group row emoji_div_carausel hide">

                    </div>
                    <div class="form-group">
                        <i onclick="handleCarauselEmojiButton(${card_number},this)" id="emoji_button_carausel" class="fa fa-smile-o emoji_button_carausel" aria-hidden="true"></i>
                        <button type="button" onclick='clickAddVariableSuggestedContentCarousel(${card_number},this)' id='add_variable_suggested_content_carousel_${card_number}' class="btn btn-light add_variable_content_btn_carausel"><i class="fa fa-plus" aria-hidden="true" style="margin-right: 8px"></i>Add Variable</button>
                    </div>
                    <span class="error_message_carausel error_sugg_content redIcon hide" id='error_message_carausel_suggested_content_${card_number}'>This is a Required Field</span>
            </div>

            <div class='rcs_carausel_body_content'>
                <div class="body-content">
                    <p id="heading-body-content">Sample For Body Content</p>
                    <div class="col-sm-12">
                        <p>
                            To Help US Review Your Message Template, Please add an example for each variable in your body text.Do not use real customer information.Cloud API hosted by Meta reviews templates
                            and variable parameters to protect the security and integrity of our services.
                        </p>
                    </div>
                    <div class="body_content_title_div"></div>
                        <p id="heading-body-content" class="variable-content hide_for_carousel">Body</p>

                        <div id="header_caraosel_title_key_${card_number}" class="">
                            
                        </div>
                        <div class="row-sm-12 flex font-weight-bold text-black heading_body_rcs_content">
                            <p class="col-sm-6">Variable name</p>
                            <p class="col-sm-6">Sample Value</p>
                    </div>
                    <div id="dynamicDivs_carousel" class="">

                    </div>
                </div>
            </div>
        `;

        $('#carausel_content').html(' ');
        $('#carausel_content').append(carousel_card_body);
                
        if(cardData.image_video_file.length>0){
            $('#hide_message_for_carausel_image_video_'+card_number).text(cardData.image_video_file);
        }
        else{
            $('#hide_message_for_carausel_image_video_'+card_number).text('No File Chosen');
        }
        console.log(cards);

        if(cardData.titleDynamicURL.length>0){
            $('#header_caraosel_title_key_'+card_number).html(`
            <p id='heading-body-content'>Header</p>
            <div class="form-group row" id="body_content_title_div">
                <div class="col-sm-12 flex">
                    <label for="header_dynamic_caraosel_title_${cardData.key }" class="col-form-label">&#123;&#123;1&#125;&#125;</label>
                    <input value = '${cardData.titleKeyData}' onchange='titleKeyCaraosel(${cardData.key},this)' id='header_dynamic_caraosel_title_${cardData.key }' type="text" name="rcs_caraosel_header[]" class="form-control" placeholder="Enter Content"/>
                </div>
                <span 3 id='title_header_error_${cardData.key}' class='carausel_title_header_error hide'>This is a required field</span>
            </div>
            `);
        }
        else{
            $('#header_caraosel_title_key_'+card_number).html('');
        }

        // display the KEY-VALUE samples for Suggested Content
        let suggested_content_array = cardData.suggested_content_variable_array;
        // $('#dynamicDivs_carousel').html('');
        
        /*
            - Dynamic data for the Key - Value of RCS Suggested Content
            - When Dynamic Variable is set the key - value data automatically set up in the bottom 
        */
        
        let dynamic_data = '';
        var suggestedContent = cardData.suggested_content_Key_Value;

        for(let i=0;i<suggested_content_array.length;i++){
            if(suggested_content_array[i]==true){
                dynamic_data+=`
                            <div class="row-sm-12 flex mb-4 @{{${i+1}}}" id="dynamic_div_carousel_${i+1}" >
                                <label>@{{${i+1}}}</label>
                                <div class="col-sm-5">
                                    <input value='${suggestedContent[i].key ? suggestedContent[i].key : ''}' oninput='changeinKeyValueSuggestedContent(${card_number},this)' id='rcs_body_content_carousel_url_key_${i+1}' type="text" name="rcs_body_content_carousel_url_key[]" class="form-control" placeholder="Please Enter name, url, mobile or loan"/>
                                </div>
                                <div class="col-sm-5">
                                    <input value='${suggestedContent[i].value ? suggestedContent[i].value : ''}' oninput='changeinKeyValueSuggestedContent_value(${card_number},this)' id='rcs_body_content_carousel_url_value_${i+1}' type="text" name="rcs_body_content_carousel_url_value[]" class="form-control" placeholder="Sample Value"/>
                                </div>
                            </div>
                                <span class="error-image redIcon error_sugg_content_var_data hide" id='error_message_carausel_suggested_content_body_samples${cardData.key}_${i}'>This is a Required Field</span>
                `;
            }
        }
        $('#dynamicDivs_carousel').html(dynamic_data);


        // If FIle for that card is chosen then show that file else donot 


    }




    
    submissionValidation();
    $('#rcs_div').hide();
    // remove the value from the bottom panel
    $('#suggested_content').on('input',function(e){
        if($(this).val().length>0){
            $('#error_rcs_suggested_content').addClass('hide');
        }
        for(let i=1;i<=10;i++){
            if($(this).val().includes('@{{'+i+'}}')==false){
                $('#dynamic_div_'+i).remove();
            }
        }
    });

    $('#add_variable_content_btn').on('click',function(e){
        
        // check input data, i.e. which number is present in b/w 1-10
        // the number that is not present is being added in box
        var suggested_content_input = $('#suggested_content').val();
        var input = $('#suggested_content');
        
        for(let i=1;i<=10;i++){
            if(!input.val().includes("@{{"+i+"}}")){
            var cursorPosition = input.prop('selectionStart');
            var inputValue = input.val();
            var newValue = inputValue.slice(0, cursorPosition) + "@{{"+i+"}}" + inputValue.slice(cursorPosition);
            input.val(newValue);
            input[0].setSelectionRange(cursorPosition + 5, cursorPosition + 5); 
            // $('#suggested_content').val(newValue);

                let dynamin_div =  `
                            <div class="row-sm-12 flex mb-4 @{{${i}}}" id="dynamic_div_${i}" >
                                <label>@{{${i}}}</label>
                                <div class="col-sm-5">
                                    <input id='rcs_body_content_url_key_${i}' type="text" name="rcs_body_content_url_key[]" class="form-control" placeholder="Please Enter name, url, mobile or loan"/>
                                </div>
                                <div class="col-sm-5">
                                    <input id='rcs_body_content_url_value_${i}' type="text" name="rcs_body_content_url_value[]" class="form-control" placeholder="Sample Value"/>
                                </div>
                            </div>
                `;

                $('#dynamicDivs').append(dynamin_div);
                $('#error_rcs_suggested_content').addClass('hide');
                break;
            }
        }
        // focus on the text-box, variable content data to be updated successfully
        $('#suggested_content').focus();
    });



    

    function reloadCampaignUrls(){
        $('.additional_url').html('');
        $('#campaign_url_type').val('');
        $('#campaing_urls').val('');
        $('#counter_campaign_url').text('0/1000');
        $('#rcs_tag').val('');
        $('#counter_action_tag').text('0/20');
        $('#error_rcs_mobile_number').hide();
        let rcs_type = $('#rcs_type_id').val();

        // for rcs type as G display Sharelocation, ViewLocation and ViewLocation (Lat/Long) 
        let action_types = ` <select name="campaign_url_type[]" id="campaign_url_type" data-row-id='0' class="form-control">
                                <option value="">Select Option</option>
                                <option value="1">URL Action</option>
                                <option value="2">Dailer Action</option>
                                <option value="3">View Location (Lat/Long)</option>
                                <option value="4">View Location (Query)</option>
                                <option value="5">Share Location</option>
                            </select>`;
        if(rcs_type!=1){
            action_types = ` <select name="campaign_url_type[]" id="campaign_url_type" data-row-id='0' class="form-control">
                                <option value="">Select Option</option>
                                <option value="1">URL Action</option>
                                <option value="2">Dailer Action</option>
                            </select>`;   
        }

        for(let current_button_div=0;current_button_div<4;current_button_div++){
            $(`#suggestion_text_non_carausel_${current_button_div}`).addClass('hide');
            $(`#latitude_non_carausel_${current_button_div}`).addClass('hide');
            $(`#longitude_non_carausel_${current_button_div}`).addClass('hide');
            $(`#label_non_carausel_${current_button_div}`).addClass('hide');
            $(`#query_non_carausel_${current_button_div}`).addClass('hide');
            $(`#campaign_url_non_carausel_${current_button_div}`).removeClass('hide');
            $(`#action_tag_non_carausel_${current_button_div}`).removeClass('hide');
        }

        for(let i=1;i<buttons_non_carausel.length;i++){
            buttons_non_carausel[i] = false;
        }
        buttons_non_carausel[0] = true;
        
       $('#campaign_url_type').html(action_types);
    }

    function countLettersMainSubtitle(){
        let input = $('#rcs_sub_title').val().length;
        let counterSpan = $('#count_for_rcs_subtitle');
        if(input>0){
            $('#error_rcs_sub_title').addClass('hide');
        }
        if(input<=15){
            counterSpan.text(input+"/15");
        }
        else{
            $('#rcs_sub_title').val($('#rcs_sub_title').val().substring(0, 15));
        }
    }

    function rcsCounterHeader(){
        let input = $('.rcs_header_name_rc').val();
        if(input.length>0){
            $('#error_header_name_y').addClass('hide');
        }
        let counter = $('#header_count');
        if(input.length>20){
            $('.rcs_header_name_rc').val(input.substring(0,20));
        }
        else{
            counter.text(input.length+'/20');
        }
    }
    /*
        - counter and validation for RCS -YS [main,core-entity,core-entity-url]
    */
    function counterRcsY(){
        // update for main title
        let rcs_main_input = $('#main_title');
        let rcs_main_counter = $('#count_for_rcs_main_title');

        if(rcs_main_input.length>0){
            $('#error_main_title').addClass('hide');
        }

        if(rcs_main_input.val().length>15){
            $('#main_title').val($('#main_title').val().substring(0, 15));
        }
        else{
            rcs_main_counter.text(rcs_main_input.val().length+'/15');
        }
    }

    // counter for dialer actions and campaign url
    function updateCounter_campaign(row_num){
        // action tag limiter
            let input = document.getElementById('rcs_tag');  
            let counter = $('#counter_action_tag');
            
            
            // campaign url limiter
            let campaign_input = document.getElementById('campaing_urls');
            let campaignCounter = $('#counter_campaign_url');

            let mobile_number = $('#mobile_number');
            let mobile_error = $('#error_rcs_mobile_number');

            if(row_num){
                input = document.getElementById('rcs_tag' + row_num);  
                counter = $('#counter_action_tag'+row_num);
                mobile_number = $('#mobile_number'+row_num);
                campaign_input = document.getElementById('campaing_urls'+ row_num);
                campaignCounter = $('#counter_campaign_url'+ row_num);
                mobile_error = $('#error_rcs_mobile_number'+row_num);
            }
            let updatedValue = input.value.length+"/20";
            if(input.value.length>20){
                $(input).val($(input).val().substring(0, 20));
            }
            else{
                $(counter).text(updatedValue);
            }

            // for campaign tag
            let updatedValueCampaign = campaign_input.value.length+"/1000";
            if(campaign_input.value.length>1000){
                $(campaign_input).val($(campaign_input).val().substring(0, 1000));
            }
            else{
                $(campaignCounter).text(updatedValueCampaign);
            }

            // validation for mobile number
            if (!$(mobile_number).hasClass('hide')) {

                if(campaign_input.value.length>10){
                    campaign_input.value = campaign_input.value.substring(0,10);
                }

                if(campaign_input.value.length>0){
                    let char = campaign_input.value.charAt(campaign_input.value.length-1);
                    if((char<'0' || char>'9') || campaign_input.value.charAt(0)<6){
                        campaign_input.value = campaign_input.value.substring(0,campaign_input.value.length-1);
                        $('#submit_rcs_template_btn').attr('disabled',true);
                    }
                    else{
                        mobile_error.hide();
                        $('#submit_rcs_template_btn').attr('disabled',false);
                    }
                }

            } else {
                mobile_error.hide();
            }

            
        }
        let templates_names = [];
$(document).ready(function(){
    var rcs_y_header = `
                                    <label for="rcs_header_name" class="col-sm-3 col-form-label">Headers</label>
                                    <div class="col-sm-6 header_y_s">
                                    <span id="header_count">0/20</span>
                                    <input oninput="rcsCounterHeader()" id='rcs_header_name' type="text" name="rcs_header_name" class="form-control rcs_header_name_rc rcs_header_y" placeholder = "Enter Header Name"/>
                                    <p id="error_header_name_y" class="error_message">This is a required field</p>
                                    </div>
                                `;
            var rcs_g_header = `
                            <label for="rcs_header_name" class="col-sm-3 col-form-label">Headers</label>
                            <div class="col-sm-6 header_g">
                                        <select class="form-control rcs_header_g" name="rcs_header_name" id="rcs_header_name" data-live-search="true">
                                            <option value="">Select Headers</option>
                                        </select>
                                    </div>
                                    <p id="error_header_name" class="error_message hide">This is a required field</p>
                            `;
            var header_container = $('#headers_column');
        // $('#headers_column').hide();  // initially hide the headers column, once organization is selected then only display the header
        $('.heading_body_rcs_content').hide();
        $('#organization').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            includeFilterClearBtn:true,
            buttonWidth:'515px',
            enableHTML: true,
            templates: {
                filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-close"></i></button></span>'
            }
        });
        // Adding Campaign Urls 
        var max_fields      = 3; //maximum input boxes allowed
        var wrapper         = $(".campaign_urls_div"); //Fields wrapper
        var add_button      = $(".add_urls"); //Add button ID
        var x = 0; //initlal text box count
        
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            var rcs_type = $('#rcs_type_id').val();
            // x = (e.isTrigger && (wrapper.html()=='')) ? 0 : x;
            // if(x < max_fields){ //max input box allowed
                // x++; //text box increment
            let isFilled = false;
            for(let x=1;x<buttons_non_carausel.length;x+=1){
                if(buttons_non_carausel[x]==false){
                    isFilled = true;
                    $(wrapper).append(` <div class="row additional_url" id="tag_div${x}">
                                        <div class="form-group col-md-3">
                                            <label for="campaign_url_type" class='col-form-label'>Type Of Action</label>
                                            <select name="campaign_url_type[]" data-row-id='${x}'  id="campaign_url_type" class="form-control action_type_${x}">
                                                <option value=""selected>Select Option</option>
                                                <option value="1">URL Action</option>
                                                <option value="2">Dailer Action</option>
                                                ${rcs_type == 1 ? `
                                                    <option value="3">View Location (Lat/Long)</option>
                                                    <option value="4">View Location (Query)</option>
                                                    <option value="5">Share Location</option>
                                                ` : ``}
                                            </select>
                                            <p class='error_message_button_value hide' id='error_action_type_${x}'>All are required Field.</p>
                                        </div>
                                        <div class="form-group col-md-3 "id="campaign_url_non_carausel_${x}" >
                                            <label id="campaign_url${x}" for="file" class="campaign_url col-form-label">Campaign URL</label>
                                            <label id="mobile_number${x}" for="file" class="hide mobile_number col-form-label">Mobile Number</label>
                                            <span id="counter_campaign_url${x}" class="counter_campaign">0/1000</span>
                                            <input id='campaing_urls${x}' oninput="updateCounter_campaign(${x})" type="text" name="campaing_urls[]" class="form-control" placeholder ="Campaign URL"/>
                                        </div>
                                        <div class="form-group col-md-3" id='action_tag_non_carausel_${x}'>
                                            <label for="file" class='col-form-label'>Action Tag</label>
                                            <span id="counter_action_tag${x}"  class="counter_campaign">0/20</span>
                                            <input id='rcs_tag${x}' oninput="updateCounter_campaign(${x})" type="text" name="rcs_tag[]" class="form-control" placeholder="Action URL"/>            
                                        </div>
                                        

                                        <div class="form-group col-md-3 hide" id="suggestion_text_non_carausel_${x}">
                                            <label for="file" id="campaign_url" class="campaign_url col-form-label" data-row-id='0'>Suggestion Text</label>
                                            <span id="suggestion_text_non_carausel_counter_${x}" class="counter_campaign">0/25</span>
                                            <input id='suggestion_text_non_carausel_input_${x}' oninput="updateCounterSuggestionText(this)" type="text" name="suggestionText[]" class="form-control" placeholder ="Suggestion Text"/>
                                        </div>

                                        <div class="form-group col-md-3 hide" id="latitude_non_carausel_${x}">
                                            <label for="file" class="col-form-label"> Latitude </label>
                                            <i title='Please mention the latitude in degrees. It must be in the range [-90.0,+90.0]. Positive latitudes are north of the equator, negative latitudes are south of the equator.' id="non_caraausel_latitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <input oninput="inputLatitude(this)" id='latitude_input_non_carausel_${x}' type="number" name="latitude[]" class="form-control" placeholder = "Latitude" step="0.0000001"/>            
                                            <p class='error_message_button_value hide' id='error_latitude_${x}'>Please Enter a valid Number</p>
                                        </div>

                                        <div class="form-group col-md-3 hide" id="longitude_non_carausel_${x}">
                                            <label for="file" class="col-form-label"> Longitude </label>
                                            <i title='Please mention the longitude in degrees.It must be in the range [-180.0,+180.0]. Positive longitudes are east of the Prime Meridian; negative longitudes are west of the Prime Meridian.' id="non_caraausel_longitude_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <input oninput="inputLongitude(this)" id='longitude_input_non_carausel_${x}' type="number" name="longitude[]" class="form-control" placeholder = "Longitude" step="0.0000001"/>            
                                            <p class='error_message_button_value hide' id='error_longitude_${x}'>Please Enter a valid Number</p>    
                                        </div>

                                        <div class="form-group col-md-3 query_input hide" id="query_non_carausel_${x}">
                                            <label for="query_input_non_carausel_${x}" class="col-form-label"> Query</label>
                                            <i title= 'Enter the Query that you would like to search for here.For instance,setting the query string to "Growing Tree Bank" will show all Growing Tree Bank, Bank locality in the users vicinity. Setting the query string to 1600 Amphitheater Parkway, Mountain View, CA 94043 will select that specific address, regardless of the users location.' id="non_caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <span id="query_non_carausel_counter_${x}" class="counter_campaign">0/1024</span>
                                            <input oninput="inputChangeQuery(this)" id='query_input_non_carausel_${x}' type="text" name="query[]" class="form-control" placeholder = "Enter Query"/>            
                                        </div>

                                        <button class="remove_urls fa fa-minus-square redIcon redIcon_remove_button" id='${x}'  data-tag="tag_div${x}"> </button>


                                        <div class="form-group col-md-3 hide label_input" id="label_non_carausel_${x}">
                                            <label for="file" class="col-form-label"> Label</label>
                                            <i title='Please mention the label of the pin dropped at latLong.' id="non_caraausel_label_description" class="fa fa-info-circle description_icon" aria-hidden="true"></i>
                                            <span id="label_non_carausel_counter_${x}" class="counter_campaign">0/25</span>
                                            <input oninput="inputLabelChange(this)" id='label_input_non_carausel_${x}' type="text" name="label[]" class="form-control" placeholder = "Enter Label"/>            
                                        </div>

                                    </div>
                                    <p id="error_rcs_mobile_number${x}" class="error_message mobile_err hide">Mobile number can only start from 6-9</p>
                                    
                                    `);
                buttons_non_carausel[x] = true;
                break;
                }
            }   
        });


        $(wrapper).on("change load", '#campaign_url_type', function(e) {
            e.preventDefault();
            var current_button_div = $(this).data('row-id');

            // Initially hide all the elements , only the required are not hidden
            // on change in action tyoe previously written data are hidden



            $(`#suggestion_text_non_carausel_${current_button_div}`).addClass('hide');
            $(`#latitude_non_carausel_${current_button_div}`).addClass('hide');
            $(`#longitude_non_carausel_${current_button_div}`).addClass('hide');
            $(`#label_non_carausel_${current_button_div}`).addClass('hide');
            $(`#query_non_carausel_${current_button_div}`).addClass('hide');

            $(`#campaign_url_non_carausel_${current_button_div}`).removeClass('hide');
            $(`#action_tag_non_carausel_${current_button_div}`).removeClass('hide');




            // remove data
            $(`#latitude_input_non_carausel_${current_button_div}`).val('');
            $(`#longitude_input_non_carausel_${current_button_div}`).val('');
            $(`#query_input_non_carausel_${current_button_div}`).val('');
            $(`#label_input_non_carausel_${current_button_div}`).val('');
            $(`#suggestion_text_non_carausel_input_${current_button_div}`).val('');

            // reset the counter
            $(`#suggestion_text_non_carausel_counter_${current_button_div}`).text('0/25');
            $(`#label_non_carausel_counter_${current_button_div}`).text('0/25');

            var campaign_url_type = $(this).val();
            var row_num = $(this).data('row-id') == '0' ? '' : $(this).data('row-id');

            var rcs_type = $('#rcs_type_id').val();

            if(campaign_url_type == 1){
                if(rcs_type==1){
                    let url_placeholder = `@{{url${$(this).data('row-id')+1}}}`;
                     document.getElementById('campaing_urls' + row_num).value = "@{{url}}";
                }
                document.getElementById('campaing_urls' + row_num).placeholder = 'Campaign URL';
                $('#mobile_number'+ row_num).addClass('hide');
                $('#campaign_url'+ row_num).removeClass('hide');
                $('#counter_campaign_url'+row_num).removeClass('hide');
            }
            else if(campaign_url_type==2){
                document.getElementById('campaing_urls' + row_num).placeholder = 'Mobile Number';
                document.getElementById('campaing_urls' + row_num).value = '';
                $('#mobile_number'+ row_num).removeClass('hide');
                $('#campaign_url'+ row_num).addClass('hide');
                $('#counter_campaign_url'+row_num).addClass('hide');
            }

            // View Location (Lat/Long)
            else if(campaign_url_type==3 && rcs_type==1){

                $(`#suggestion_text_non_carausel_${current_button_div}`).removeClass('hide');
                $(`#latitude_non_carausel_${current_button_div}`).removeClass('hide');
                $(`#longitude_non_carausel_${current_button_div}`).removeClass('hide');
                $(`#label_non_carausel_${current_button_div}`).removeClass('hide');

                $(`#campaign_url_non_carausel_${current_button_div}`).addClass('hide');
                $(`#action_tag_non_carausel_${current_button_div}`).addClass('hide');
            }
            else if(campaign_url_type==4 && rcs_type==1){
                $(`#suggestion_text_non_carausel_${current_button_div}`).removeClass('hide');
                $(`#query_non_carausel_${current_button_div}`).removeClass('hide');
                $(`#campaign_url_non_carausel_${current_button_div}`).addClass('hide');
                $(`#action_tag_non_carausel_${current_button_div}`).addClass('hide');
            }
            else if(campaign_url_type==5 && rcs_type==1){
                $(`#campaign_url_non_carausel_${current_button_div}`).addClass('hide');
                $(`#action_tag_non_carausel_${current_button_div}`).addClass('hide');
                $(`#suggestion_text_non_carausel_${current_button_div}`).removeClass('hide');
            }
            // updateCounter_campaign(row_num);
        })


        $(wrapper).on("click",".remove_urls", function(e){

            var url_section_id = $(this).attr('id');
            buttons_non_carausel[url_section_id] = false;
            $('#error_rcs_mobile_number'+url_section_id).hide();
            var tag_div = $(this).attr("data-tag");;
            e.preventDefault();
            $('#'+url_section_id).remove(); x--;
            $('#'+tag_div).remove();
            add_button.removeAttr("disabled",false);
        })
        // Adding Campaign Ends Urls here 
        // Adding RCS  Title 
        var max_fields_title      = 3; //maximum input boxes allowed
        var wrapper_title         = $(".rcs_title_div"); //Fields wrapper
        var add_button_title    = $(".add_rcs_title"); //Add button ID
        var t = 0; //initlal text box count
        $(add_button_title).click(function(e){ //on add input button click
            e.preventDefault();
            t = (e.isTrigger && (wrapper_title.html()=='')) ? 0 : t;
            if($('.rcs_title_div').children().length < 4){ //max input box allowed
                t++; //text box increment
                $(wrapper_title).append('<div class="form-group row" id ="rcs_div'+t+'"> <label for="file" class="col-sm-3 col-form-label">Title</label> <div class="col-sm-6"> <input id="rcs_title'+t+'" type="text" name="rcs_title[]" class="form-control" /> </div> <div class="col-sm-3 flex"> <button class="remove_rcs_title fa fa-minus-square redIcon" id="rcs_div'+t+'"></button> </div> </div></div>');
            }
            if($('.rcs_title_div').children().length == 4){
                add_button_title.attr("disabled",true);
            }else{
                add_button_title.blur();
                add_button_title.removeAttr("disabled",false);
            }
        });
        $(wrapper_title).on("click",".remove_rcs_title", function(e){
            var url_section_id = $(this).attr('id');
            e.preventDefault();
            $('#'+url_section_id).remove(); t--;
            add_button_title.removeAttr("disabled",false);
        });

        $("#rcs_type_id").on("change", function() {
            x = 0;
            add_button.removeAttr("disabled",false); // on change of rcs type make the number of button values as 0 and enable the click of RCS- Add Buttons
            // on change of rcs_type hide all the carausel implementations
            $('#carousel_div').html('');
            $('.hide_for_carousel').each((index, element) => {
                    $(element).removeClass('hide');
                });
            var rcs_type = $(this).val();
            var rcs_y_titles = `
           
            <div class="form-group row rcs_main_title_div" id="rcs_main_title_div">
                                    <label for="file" class="col-sm-3 col-form-label">Main Title</label>
                                    <span id='count_for_rcs_main_title'>0/15</span>
                                    <div class="col-sm-6">
                                        <input oninput='counterRcsY()' id='main_title' type="text" name="main_title" class="form-control" placeholder="Main Title" />
                                    </div>
                                    <p id="error_main_title" class="error_message hide">This is a required field</p>
                                </div>
                            <div id='test_append'>
                                <div class="form-group row rcs_sub_title_div" id="rcs_sub_title_div">
                                    <label for="file" class="col-sm-3 col-form-label">Sub Title</label>
                                    <span class="title-name-count" id='count_for_rcs_subtitle'>0/15</span>
                                    <div class="col-sm-6">
                                        <input oninput='countLettersMainSubtitle()' id='rcs_sub_title' type="text" name="rcs_sub_title[]" class="form-control" placeholder="Enter Sub Title" />
                                    </div>
                                    <div class="col-sm-1 flex" id="add_rcs_title_sub">
                                        <button type='button' id='add_rcs_subtitle' onclick='addSubTitle()' class='add_rcs_subtitle fa fa-plus-square greenIcon'></button>
                                    </div>
                                    <p id="error_rcs_sub_title" class="error_message hide">This is a required field</p>
                                </div>
                            </div>
                            `;

            var rcs_image = $('#richmedia_image');
            var thumbnail = $('#rcs_thumbnail_div');
            var image_label = $('#image_label_name');
            $('#richmedia_image').val('');
                        
            let carousel_div = $('#carousel_div');

            if(rcs_type == '1' || rcs_type=='4' ){
                $(image_label).html('Creative/image/Video');
                rcs_image.attr('accept', 'image/png,image/jpg,image/jpeg,video/mp4');
                $(header_container).html('');
                $(header_container).append(rcs_g_header);
                $('#core_entity').addClass("hide");
                $('#core_url').addClass("hide");
                $('#add_rcs_title').addClass("hide");
                $('#add_rcs_title').prop('required',false);
                $('#core_entity').prop('required',false);
                $('#core_url').prop('required',false);
                $('#rcs_image_div').removeClass("hide");
                $('#rcs_image_div').prop('required',true);
                $('#rcs_image_div').addClass('hide');
                $('#card_alignment').hide();
                $('.rcs_title_div').children().not(':first-child').remove();
                $('#add_rcs_dynamic_url').show();
                $('#add_variable_content_btn').show();
                $('#rcs_main_title_div').hide();
                $('.titles_rcs_y').html('');
                $('#template_type_div').show();
                $('#rcs_template_name').val('');
                $('.template-name-count').text('0/20');
                $('#suggested_content').val('');
                $('.content-count').text('0/2000');
                $('#rcs_title').val('');
                $('.title-name-count').text('0/200');
                $('.header_g').removeClass('hide');
                $('.header_y_s').addClass('hide');
                $('.rcs_header_name_rc').val('');
                $('#rcs_y_title_desc').removeClass('hide');

                //if rcs type is 1 and template type choosen is standalone then 
                // allow rcs_card_orientation
                if($('#template_type_id').val()=='image_template_type'){
                    $('#rcs_card_orientation_id').attr('required',true);
                    $('#rcs_media_height_id').attr('required',true);
                    $('#rcs_div').show();
                }
                else{
                    $('#rcs_title').attr('required',false);
                    $('#rcs_thumbnail_div').addClass('hide');
                    $('#rcs_div').hide();
                }
                $('.body-content').removeClass('hide');
                populateBotAccountName();

                /*
                    - when rcs-Jio enabled then display Vertical and Medium only
                */
                if(rcs_type=='4'){
                // for rcs jio Enable standalone only
                let dropdown = `
                        <select name="template_type" id="template_type_id" class="form-control">
                            <option value="">Select RCS Type</option>
                            <option value="image_template_type">Rich Card Stand Alone</option>
                        </select>`;
                $('#template_type_id').html(dropdown);
                $('#template_type_id').show();

                let rcs_card_orientation_options = `<option value="vertical">Vertical</option>`;
                $('#rcs_card_orientation_id').html(rcs_card_orientation_options);

                let media_height_dropdown = `<option value="medium">Medium</option>`;  
                $('#rcs_media_height_id').html(media_height_dropdown);
            }

            else{
             let dropdown = `
                        <select name="template_type" id="template_type_id" class="form-control">
                            <option value="">Select RCS Type</option>
                            <option value="image_template_type">Rich Card Stand Alone</option>
                            <option value="rcs_carousal">Rich Card Carousal</option>
                            <option value="text_template_type">Rich Card Text</option>
                        </select>`;
                $('#template_type_id').html(dropdown);
                $('#template_type_id').show();

                let rcs_card_orientation_options = 
                       `<option value="">Select Card Orientation</option>
                        <option value="horizontal">Horizantal</option>
                        <option value="vertical">Vertical</option>`;
                $('#rcs_card_orientation_id').html(rcs_card_orientation_options);


                let media_height_dropdown = `
                            <option value="">Select Medium Height</option>
                            <option value="medium">Medium</option>
                            <option value="short">Short</option>
                `;  

              $('#rcs_media_height_id').html(media_height_dropdown);

            }


            }else if(rcs_type == '2') {
                $(image_label).text('Creative/image');
                rcs_image.attr('accept', 'image/png,image/jpg,image/jpeg');
                $('#rcs_y_title_desc').addClass('hide');
                $(header_container).html('');
                $(header_container).append(rcs_y_header);
                $('#core_entity').addClass("hide");
                $('#core_url').addClass("hide");
                $('#add_rcs_title').addClass("hide");
                $('#add_rcs_title').prop('required',false);
                $('#core_entity_input').prop('required',false);
                $('#core_url').prop('required',false);
                $('#core_url').prop('required',false);
                $('#rcs_image_div').removeClass("hide");
                $('#rcs_image_div').prop('required',true);
                $('.rcs_title_div').children().not(':first-child').remove();
                $('#add_rcs_dynamic_url').hide();
                $('#body_content_title_div').html(' ');
                $('#add_variable_content_btn').hide();
                $('.titles_rcs_y').html('');
                $('#rcs_div').show();
                $('#template_type_div').hide();
                $('.rcs_card_orientation').addClass('hide');
                $('.rcs_media_height').addClass('hide');
                $('#card_alignment').addClass('hide');
                $('#rcs_template_name').val('');
                $('.template-name-count').text('0/20');
                $('#suggested_content').val('');
                $('.content-count').text('0/2000');
                $('#rcs_title').val('');
                $('.title-name-count').text('0/200');
                $('.header_g').addClass('hide');
                $('.header_y_s').removeClass('hide');
                $('.rcs_header_name_rc').val('');
                $('#header_count').text('0/20');
                $('.rcs_header_g').attr('required', false);
                $('.rcs_header_y').attr('required', true);
                $('#rcs_card_orientation_id').attr('required',false);
                $('#rcs_media_height_id').attr('required',false);
                $('.body-content').addClass('hide');
                $(thumbnail).addClass('hide');
            }else if (rcs_type == '3'){
                //core-entity
                $('#rcs_y_title_desc').addClass('hide');
                $('#core_entity').removeClass("hide");
                $('#core_url').removeClass("hide");
                $('#add_rcs_title').removeClass("hide");
                $('#add_rcs_title').prop('required',true);
                $('#core_entity_input').prop('required',true);
                $('#core_url').prop('required',true);
                $('#rcs_image_div').addClass("hide");
                $('#rcs_image_div').prop('required',false);
                $(".add_rcs_title").removeAttr("disabled",false);
                $('#add_rcs_dynamic_url').hide();
                $('#body_content_title_div').html(' ');
                $('#add_variable_content_btn').hide();
                $('#rcs_main_title_div').show();
                $('#rcs_sub_title_div').show();
                $('.titles_rcs_y').append(rcs_y_titles);
                $('#rcs_div').hide();
                $('#template_type_div').hide();
                $('.rcs_card_orientation').addClass('hide');
                $('.rcs_media_height').addClass('hide');
                $('#card_alignment').addClass('hide');
                $('#rcs_template_name').val('');
                $('.template-name-count').text('0/20');
                $('#suggested_content').val('');
                $('.content-count').text('0/2000');
                $('#rcs_title').val('');
                $('.title-name-count').text('0/200');
                $('.header_g').addClass('hide');
                $('.header_y_s').removeClass('hide');
                $('.rcs_header_name_rc').val('');
                $('#header_count').text('0/20');
                $('#rcs_card_orientation_id').attr('required',false);
                $('#rcs_media_height_id').attr('required',false);
                $(header_container).html('');
                $(header_container).append(rcs_y_header);
                $('.body-content').addClass('hide');
                $(thumbnail).addClass('hide');
            }

            $('.error_message').each(function() {
                $(this).addClass('hide');
            });
            reloadCampaignUrls();
            $('#template_type_id').val('');
            $('#dynamicDivs').html('');
            $('.heading_body_rcs_content').html('');
            $('#body_content_title_div').html('');
            $('#heading-body-content').html('');
        });

        // if rcs type is 1 and card orientation is horizontal then media height should
        // be visible and thumbnail should be invisible 

        $('#rcs_card_orientation_id').on('change',function(e){
            var rcs_orientation =  $(this).val();
            var rcs_type = $('#rcs_type_id');
            $('#richmedia_image').val('');
            $('#rcs_media_height').addClass('hide');
            $('#richmedia_thumbnail').val('');
            if(rcs_type==1 && rcs_orientation=='horizontal'){
                $('#rcs_media_height_id').removeClass('hide');
            }
            else if(rcs_type==1 && rcs_orientation=='vertical'){
                $('#rcs_media_height_id').addClass('hide');
            }
        })

        $('#rcs_media_height_id').on('change',function(e){
            $('#richmedia_image').val('');
            $('#richmedia_thumbnail').val('');
            $('#rcs_thumbnail_div').addClass('hide');
        });

        $('#rcs_media_card_alignment_id').on('change',function(e){
            $('#richmedia_image').val('');
            $('#richmedia_thumbnail').val('');
            $('#rcs_thumbnail_div').addClass('hide');
        });

        $('#card_alignment').on('change',function(e){
            $('#richmedia_image').val('');
            $('#richmedia_thumbnail').val('');
            $('#rcs_thumbnail_div').addClass('hide');
        });

        $('#richmedia_image').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInKb = file.size;
            var fileType = file.type;
            $('#error_image').hide(); // remove the error message on chosing image
            // validations for video
            if(fileType=='video/mp4'){
                // Video should have a max size of 10 MB
                $('#rcs_thumbnail_div').removeClass('hide');

                // validation of thumbnail image
                var card_orientation = $('#rcs_card_orientation_id').val();
                var media_height = $('#rcs_media_height_id').val();
                
                if(card_orientation=='horizontal'){
                    $('#rcs_thumbnail_desc').attr('title', `Image: JPEG, JPG, PNG,GIF  (250px * 330px), max-size 100KB`);
                    $('#comments_thumbnail_s').html('JPEG,JPG,PNG,GIF (250 * 330)pixel,in between 40-100 KB');
                }
                else if(card_orientation == 'vertical' && media_height=='medium'){
                    $('#rcs_thumbnail_desc').attr('title', `Image: JPEG, JPG, PNG,GIF with 7:3 aspect ratio  (770px * 335px), max-size 100KB`);
                    $('#comments_thumbnail_s').html('Image:JPEG,JPG,PNG,GIF with 7:3 aspect ratio  (770 * 335)pixel,in between 40-100 KB');
                }   
                else if(card_orientation == 'vertical' && media_height=='short'){
                    $('#rcs_thumbnail_desc').attr('title', `Image: JPEG, JPG, PNG,GIF with 3:1 aspect ratio  (770px * 257px), max-size 100KB`);
                    $('#comments_thumbnail_s').html('Image: JPEG,JPG,PNG,GIF with 3:1 aspect ratio  (770 * 257)pixel,in between 40-100 KB');
                }   
                else{
                    $('#rcs_thumbnail_desc').attr('title', `Image: JPEG, JPG, PNG,GIF with 3:1 aspect ratio  (720px * 257px), max-size 100KB`);
                    $('#comments_thumbnail_s').html('Image: JPEG,JPG,PNG,GIF with 3:1 aspect ratio  (70 * 257)px,in between 40-100 KB');
                }

                setTimeout(function(){
                    $('#comments_thumbnail_s').html(' ')
                },10000)

                if(sizeInKb > 10000000) {
                        $('.error-image').html('Video Should be less than 10 MB');
                        $('#richmedia_image').val('');
                    }
                }
            // validations for image
            else{
                $('#rcs_thumbnail_div').addClass('hide');
                // Check conditions
                if(sizeInKb > 2000000){
                    $('.error-image').html('Image should be less than 2 MB');
                    $('#richmedia_image').val('');
                }else if (!(fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/jpg' || fileType == 'image/gif')){
                    $('.error-image').html('Image should be JPG,JPEG,PNG or Video');
                    $('#richmedia_image').val('');
                }

                renderImageResolutions();

                setTimeout(function () {
                $('.error-image').html('');
                }, 3000);
            }
        });
        // on change in organization name show the header name options
        $('#organization').on('change',function(){
            // get the organization value whenever it changes
            $('.error_message').each(function() {
                $(this).addClass('hide');
            });

            // remove header
            $('#headers_column').hide();

            // $('#error_template_name').addClass('hide');

            var organization_value = $(this).val();
            if(organization_value){
                $('#error_organization_name').hide();
            }
            var rcs_type = $('#rcs_type_id').val();

            if(rcs_type==1 || rcs_type==4){
                $(header_container).html('');
                $(header_container).append(rcs_g_header);
            }
            else if(rcs_type==2){
                $(header_container).html('');
                $(header_container).append(rcs_y_header);
            }
            else if(rcs_type==3){
                $(header_container).html('');
                $(header_container).append(rcs_y_header);
            }
            $('#rcs_type_id').html(' ');

            let rcsAccessTypes = @json($internal_team_ids);
            if(rcsAccessTypes.includes(Number(organization_value))){
                let rcs_type_dropdown = 
                
                            `<option value="1">RichMedia-G</option>
                            <option value="4">RichMedia-J</option>
                            <option value="2">RichMedia-Y</option>
                            <option value="3">RichMedia-YS</option>
                            `;
                $('#rcs_type_id').append(rcs_type_dropdown);
            }
            else if(organization_value==''){
                let rcs_type_dropdown = `<option value=" ">Select RCS Type</option>`;
                $('#rcs_type_id').append(rcs_type_dropdown);
            }
            else{
                let rcs_type_dropdown = `<option value="1">RichMedia-G</option><option value="4">RichMedia-J</option>`;
                $('#rcs_type_id').append(rcs_type_dropdown);
            }
            reloadCampaignUrls();
            // once get the value post it with the organization name as data
            $.ajax({
                type: "POST",
                url: "{{ url('/addrcstemplate') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "organization_value" : organization_value,
                },
                success: function(response) {
                    templates_names = JSON.parse(response.rcs_templates_name);
                    // if organization value is not selected then donot display the header dropdown
                    if (organization_value !== '') {
                        $('#headers_column').show();
                        bot_accounts = JSON.parse(response.rcs_data);
                        populateBotAccountName();
                    } else {
                        $('#headers_column').hide();
                    }
                }
            });


        });

    // populate bor account name for rcs-J
    function populateBotAccountName(){
        var selectDropdown = $('#rcs_header_name');
        let rcs_type = $(`#rcs_type_id`).val();

        // header name for RCS-Google
        if(rcs_type=='1'){
            selectDropdown.empty();
            
            // Add default option
            selectDropdown.append('<option value="">Select Header</option>');
            var rcsData = bot_accounts;
            $.each(rcsData, function(index, item) {
                if(item.rcs_type==1){
                    selectDropdown.append('<option value="' + item.header_name + '">' + item.header_name + '</option>');
                }
            });
        }

        // show header name for RCS-Jio
        if(rcs_type=='4'){
            selectDropdown.empty();
            selectDropdown.append('<option value="">Select Header</option>');
            var rcsData = bot_accounts;
            $.each(rcsData, function(index, item) {
                if(item.rcs_type==4){
                    selectDropdown.append('<option value="' + item.header_name + '">' + item.header_name + '</option>');
                }
            });
        }
    }

    function updateTemplateCount() {
        var templateInput = $('#rcs_template_name'); // Assuming this is your input element
        var template_count_element = $('.template-name-count');

        templateInput.on('input', function() {
            var inputLength = $(this).val().length;
            // if data is in between 0-20 then simply increase the count
            if (inputLength <= 20) {
                var template_count_element_data = inputLength + '/20';
                template_count_element.text(template_count_element_data);
            } else {
                // If data limit exceeds to 20 then simply trim down the data to 20
                $(this).val($(this).val().substring(0, 20));
            }
        });
    }

    function updateTitleCount() {
        var templateInput = $('#rcs_title'); // Assuming this is your input element
        var template_count_element = $('.title-name-count');

        templateInput.on('input', function() {
            var inputLength = $(this).val().length;

            if (!templateInput.val().includes('{{1}}')) {
                isHeaderTitleAdded = false;
                $('.body_content_title_div').html('');
            }

            // if data is in between 0-200 then simply increase the count
            if (inputLength <= 200) {
                var template_count_element_data = inputLength + '/200';
                template_count_element.text(template_count_element_data);
            } else {
                // If data limit exceeds to 200 then simply trim down the data to 200
                $(this).val($(this).val().substring(0, 200));
            }
        });
    }

    let isHeaderTitleAdded = false;
    function dynamic_url_rcs_title(){
        let addButton = $('#add_rcs_dynamic_url');
        var titleInput = $('#rcs_title');
        let dynamic_header_title_data = 
                `<p id="heading-body-content">Header</p>
                    <div class="form-group row" id="body_content_title_div">
                        <div class="col-sm-12 flex">
                            <label for="header_dynamic" class="col-form-label">&#123;&#123;1&#125;&#125;</label>
                            <input id='header_dynamic' type="text" name="rcs_title_header" class="form-control" placeholder = "Enter Content" required/>
                        </div>
                    </div>`;

        addButton.on('click',function(){
            if(!isHeaderTitleAdded){
                $('.body_content_title_div').append(dynamic_header_title_data);
                var input = $('#rcs_title');
                var cursorPosition = input.prop('selectionStart');
                var inputValue = input.val();
                var newValue = inputValue.slice(0, cursorPosition) + "@{{1}}" + inputValue.slice(cursorPosition);
                input.val(newValue);
                input[0].setSelectionRange(cursorPosition + 5, cursorPosition + 5); 
                isHeaderTitleAdded = true;
            }
        })
    }

    /*
        - If template type is image then display []
        - else the other type is text, there the un-required columns are removed from the form
    */

    function toggleTemplateType(){

        let templateType = $('#template_type_id');
        $('.error_message').addClass('hide');
        $('.error_message hide_for_carousel').addClass('hide');
        templateType.on('change',function(){
            $('#rcs_thumbnail_div').addClass('hide');
            $('#rcs_thumbnail_div').val('');
            $('#richmedia_image').val('');
            $('#rcs_title').val('');
            $('#suggested_content').val('');
            $('#dynamicDivs').html('');
            reloadCampaignUrls();
            $('#error_rcs_suggested_content').addClass('hide');
            $('#error_thumbnail').addClass('hide');
            $('#body_content_title_div').html('');

            if($(this).val()){
                $('#error_template_type').addClass('hide');
            }

            // Stand Alone 
            if('image_template_type' == $(this).val()){
                $('.hide_for_carousel').each((index, element) => {
                    $(element).removeClass('hide');
                });
                $('#rcs_image_div').removeClass('hide');
                $('.rcs_card_orientation').removeClass('hide');
                $('.rcs_media_height').removeClass('hide');
                $('#rcs_div').show();
                $('#carousel_div').html('');
            }
            else if($(this).val()=='rcs_carousal'){
                // remove all the parts which carousal doesnot need and implement the carousal
                $('#card_alignment').html(' ');
                $('#rcs_image_div').addClass('hide');
                $('.rcs_card_orientation').addClass('hide');
                $('.rcs_media_height').addClass('hide');
                $('#rcs_div').hide();
                $('#error_rcs_suggested_content').addClass('hide');
                $('.hide_for_carousel').each((index, element) => {
                    $(element).addClass('hide');
                });
                $('#error_image').addClass('hide');
                carousel_Implementation();

            }
            else{
                $('#error_rcs_suggested_content').addClass('hide');
                $('.hide_for_carousel').each((index, element) => {
                    $(element).removeClass('hide');
                });
                $('#rcs_image_div').addClass('hide');
                $('.rcs_card_orientation').addClass('hide');
                $('.rcs_media_height').addClass('hide');
                $('#rcs_div').hide();
                $('#carousel_div').html('');
            }
        })
    };


    // update the counter in the content variable textbox
    // if the content exceeds 2000 then no more data should be added
    // else increase the counter
   function updateCounter_contentVariable(){
        var counterInput = $('#suggested_content');
        counterInput.on('input',function(e){
            if($(this).val().length==0){
                // if there is change in inout and the input value becomes empty then
                // empty the footers and the content
                $('#dynamicDivs').html('');
                $('.heading_body_rcs_content').html('');
                counter=1;
            }
            if($(this).val().length<2000){
                let counter = $(this).val().length+"/2000";
                $('.content-count').text(counter);
            }
            else{
                $(this).val($(this).val().substring(0, 2000));
            }
        })
   }

    // Add Dynamic content variable 
    let counter = 1;
    function contentVariable() {
        // var add_variable_button = $('#add_variable_content_btn');
        var add_variable_button = $('#add_variable_content_btns');
        let maxCount = 11;

        add_variable_button.on('click', function(e) {
            if (counter < maxCount) {
                var input = $('#suggested_content');
                var cursorPosition = input.prop('selectionStart');
                var inputValue = input.val();
                var newValue = inputValue.slice(0, cursorPosition) + "@{{"+counter+"}}" + inputValue.slice(cursorPosition);
                input.val(newValue);
                input[0].setSelectionRange(cursorPosition + 5, cursorPosition + 5); 
                counter++;
                // update();
            }
        });

        $('#suggested_content').on('input', function(e) {
            let text = $(this).val();
            let regex = /@{{\d+}}/g;
            let matches = text.match(regex);
            if (matches !== null) {
                let lastMatch = matches[matches.length - 1];
                let number = parseInt(lastMatch.match(/\d+/)[0]) + 1;
                counter = number > maxCount ? maxCount + 1 : number;
            } else if (text !== '') {
                // Check if the last character deleted was a number
                let lastChar = text[text.length - 1];
                let secondLastChar = text[text.length - 2];
                if (!isNaN(parseInt(lastChar)) && isNaN(parseInt(secondLastChar))) {
                    counter = parseInt(lastChar) + 1;
                }
            }
        });
        // update();
    }



    // when hovered over the file the validions are set and showed
    $('.richmedia_image').hover(
        function() {
            renderImageResolutions();
        }
    );    

    $('#rcs_card_orientation_id').on('change',function(e){
        // vanish thumbnail on RCS change
        $('#rcs_thumbnail_div').addClass('hide');
        $('#richmedia_image').val('');
        var orientation =  $('#rcs_card_orientation_id').val();
        $('#error_card_orientation').addClass('hide');
        if(orientation=='horizontal'){
            $('#card_alignment').append(`
             <label for="rcs_media_card_alignment" class="col-sm-3">Card Alignment</label>
                    <div class="col-sm-6">
                        <select name="rcs_media_card_alignment" id="rcs_media_card_alignment_id" class="form-control">
                            <option value="">Select Card Alighment</option>
                            <option value="left">Left</option>
                            <option value="right">Right</option>
                        </select>
                        
                    </div>
                    <p id='error_message_card_alignment' class='hide error_message'>This is a required field</p>
                    `);
        }
        else{
            $('#card_alignment').html(' ');
        }
    })

      // for some of the fields the required error message should vanish once it gets clicked or types
      var header = $('#rcs_header_name');
      $('#rcs_header_name').on('change',function(){
            console.log("here"+$(this).val());
            if(header.val().length>0){
                $('#error_header_name').addClass('hide');
                $('#error_header_name_y').addClass('hide');
            }
        })

        var title = $('#rcs_title');
        title.on('input',function(){
            if($(this).val().length>0){
                // remove error message
                $('#error_rcs_title').addClass('hide');
            }
        })

    // before submitting the form, do proper validations

    // call the functions updateddeclareImageResolutions 
    updateTemplateCount();
    updateTitleCount();
    dynamic_url_rcs_title();
    toggleTemplateType();
    contentVariable();
    updateCounter_contentVariable();
    // update();
    });
    


    $('#core_entity_input').on('input',function(e){
            let core_entity_counter = $('.core_entity_name_count');
            let input = $('#core_entity_input').val();
            if(input.length>0){
                $('#error_core_entiry').addClass('hide');
            }
            if(input.length>10){
                $('#core_entity_input').val( $('#core_entity_input').val().substring(0,10));
            }
            else{
                core_entity_counter.text(`${input.length}/10`);
            }
        }) 

        // max of 1000 characters allowed
        $('#core_url_input').on('input',function(e){
            let core_entity_counter = $('.core_entity_url_count');
            let input = $('#core_url_input').val();
            if(input.length>0){
                $('#error_core_entiry_url').addClass('hide');
            }

            if(input.length>1000){
                $('#core_url_input').val( $('#core_url_input').val().substring(0,1000));
            }
            else{
                core_entity_counter.text(`${input.length}/1000`);
            }

        }) 

        

    /*
        - MAX number of subtitles allowed is 3
        - on clicking on the add button the subtitle count increases and the if it reaches 3 then cannot be further added
        - on clicking on the remove button the current item gets removed and as a result the count is achieved through the children length
    */



    let maxSubtitles = 3;
    let sub_title_count = 0;
    function removeSubTitle(subTitleCount){
        let remove = $('.remove_fors_'+subTitleCount);
        remove.remove();
        sub_title_count--;
    }
    function addSubTitle(){
        var sub_title_div = $('#test_append');
        
        if(sub_title_count<maxSubtitles){
            let subTitle = `     <div class="form-group row remove_fors_${sub_title_count}" id='rcs_sub_title_div_tst'>
                                    <span class='count_for_rcs_sub_title' id='count_for_rcs_subtitle_${sub_title_count}'>0/15</span>
                                    <label for="file" class="col-sm-3 mt-3 remove_for_${sub_title_count}">Sub Title ${sub_title_count+1} </label>
                                    <div class="col-sm-6 mt-3 remove_for_${sub_title_div.children().length}">
                                                            <input oninput='countLettersSubtitle(${sub_title_count})' id='rcs_sub_title' type="text" name="rcs_sub_title[]" class="form-control remove_for_${sub_title_count} subtitleinput_${sub_title_count}" placeholder="Enter Sub Title" />
                                                        </div>
                                                        <div class="col-sm-1 flex mt-3" id="add_rcs_title_sub remove_for_${sub_title_count}">
                                                            <button type='button' id='remove_rcs_subtitle' onclick='removeSubTitle(${sub_title_count})' class='remove_for_${sub_title_count} fa fa-minus-square redIcon'></button>
                                                        </div>
                                </div>
                                `;
        
            sub_title_div.append(subTitle);
            sub_title_count++;
        }
    }

    function countLettersSubtitle(child_count){
        let input = $('.subtitleinput_'+child_count).val().length;
        let counterSpan = $('#count_for_rcs_subtitle_'+child_count);

        if(input<=15){
            counterSpan.text(input+"/15");
        }
        else{
            $('.subtitleinput_'+child_count).val($('.subtitleinput_'+child_count).val().substring(0, 20));
        }
    }

     // validation on image size and the 
    // attribution on the aspect of choosing
    function renderImageResolutions(){
            var rcs_type  = $('#rcs_type_id').val(); 
            var image = $('#richmedia_image'); 
            var icon = $('#rcs_image_desc');
            var card_orientation = $('#rcs_card_orientation_id').val();
            var media_height =  $('#rcs_media_height_id').val();

            if(rcs_type==2){
                declareImageResolutions(image,2,1,1440,720,icon);
            }
            else{
                 // horizontal
                if(card_orientation=='horizontal'){
                    declareImageResolutions(image,3,4,768,1024,icon);
                }
                // vertical
                else if(card_orientation=='vertical'){
                    // declareImageResolutions(image,3,1,1440,480,icon)
                    if(media_height=='medium'){
                        declareImageResolutions(image,2,1,1440,720,icon);
                    }
                    else if(media_height=='short'){
                        declareImageResolutions(image,3,1,1440,480,icon);
                    }
                }
            }
        }

    /*
            - Declare all the validation rules
            - in the function itself declared the rules
            - depending on the type of image chosen the validations are applied
        */

function declareImageResolutions(image, length, breadth, len_px, bre_px, icon) {
    icon.attr('title', `Formats: Video max-size 10 MB/ Image: JPEG, JPG, PNG,GIF with ${length}:${breadth} aspect ratio  (${len_px}px * ${bre_px}px), max-size 2MB`);

    if (image[0].files.length > 0) {
        var file = image[0].files[0];

        // Create a new image element to read the file
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function() {
                let actualAspectRatio = img.width / img.height;
                let expectedAspectRatio = len_px / bre_px;
                let tolerance = 0.05;  // image aspect ratio may vary by 0.05

                var difference = Math.abs(expectedAspectRatio - actualAspectRatio);
                if (difference > tolerance) {
                    $('.error-image').html('Image does not meet the required aspect ratio and resolution.');
                    $('#richmedia_image').val('');
                }
            };
        };
        reader.readAsDataURL(file);
    }
}

       // template name should be unique
       $('#rcs_template_name').on('input', function(e) {
        var input = $(this).val();
        if(input.length>0){
            $('#error_template_name').addClass('hide');
        }
        if(templates_names.length>0){
            var templates_names_data = Object.values(templates_names);
            let check = templates_names_data.find((curr)=>{
                return curr.trim() == input.trim();
            });

            // show error message for duplicate
            if(check){
                $('#dupicate_template_name').show();
            }
            else{
                $('#dupicate_template_name').hide();
            }
        }
    });


    // hide the error message if thumbnail is selected
    $('#richmedia_thumbnail').on('change',function(e){
        var fileInput = $('#richmedia_thumbnail')[0]; // Select the actual DOM element, not the jQuery object
        if (fileInput && fileInput.files.length > 0) { // Check if files exist before accessing
            var file = fileInput.files[0];
            var fileType = file.type;
            var fileSize = file.size;
            if(fileSize>100000 || fileSize<40000){
                $('#richmedia_thumbnail').val('');
                $('.error-image-thumbnail').html('Image should be less than 100 KB and more than 40 KB');
            }
            
            var reader = new FileReader();
        reader.onload = function (e) {
            var img = new Image();
            img.onload = function () {
                // Extract width and height of the image
                var image_width = this.width;
                var image_height = this.height;
                var aspect_ratio = Math.abs(image_width/image_height);

                // show image validations on the basis of the orientations
                var card_orientation = $('#rcs_card_orientation_id').val();
                var media_height = $('#rcs_media_height_id').val();
                
                // change on orientation basis
                if(card_orientation=='horizontal'){
                    if(image_width>250 || image_height>330){
                        $('.error-image-thumbnail').html('Image should be in between (250px * 330px), and should be in between 40-100KB');
                        $('#richmedia_thumbnail').val('');
                    }
                }
                //Math.abs(aspectRatio - (5 / 4)
                else if(card_orientation == 'vertical' && media_height=='medium'){
                    if(Math.abs(aspect_ratio-(7/3))>=0.05){
                        $('.error-image-thumbnail').html('Image should be with 7:3 aspect ratio  (770px * 335px), max-size 100KB');
                        $('#richmedia_thumbnail').val('');
                    }
                }   
                else if(card_orientation == 'vertical' && media_height=='short'){
                    if(Math.abs(aspect_ratio-(3/1))>=0.5){
                        $('.error-image-thumbnail').html('Image should be with 3:1 aspect ratio  (770px * 257px), max-size 100KB');
                        $('#richmedia_thumbnail').val('');
                    }
                }   
                else{
                    console.log('No Issues');
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
          

        setTimeout(function () 
        {
                $('.error-image-thumbnail').html('');
                }, 3000);
        $('#error_thumbnail').addClass('hide');
        } 

    })


// add emoji on selecting for carausel
function handleClickEmoji__carausel(emoji_unicode, emoji_htcode, currCardId) {
    // Retrieve the button element by ID if needed
    let currCardData = cards.find(card => card.key === currCardId);
    let currCardSuggestedContent = currCardData.suggested_content;
    let currCardSuggestedContentArray = currCardData.suggested_content_variable_array;

    let suggestedContentInput = $('#suggested_content_carausel_' + currCardId);
    let cursorPos = suggestedContentInput[0].selectionStart; // Get cursor position

    let textToAppend = emoji_htcode; // Use emoji HTML code instead of '***'
    let newValue = suggestedContentInput.val().substring(0, cursorPos) + textToAppend + suggestedContentInput.val().substring(cursorPos);
    suggestedContentInput.val(newValue);
    currCardData.suggested_content = newValue; // Update the card data

    suggestedContentInput[0].focus();
    suggestedContentInput[0].selectionStart = suggestedContentInput[0].selectionEnd = cursorPos + textToAppend.length;
}

// add emoji on selecting for carausel
function handleCarauselEmojiButton(card_number,button_element){
    const emojiDiv = document.querySelector('.emoji_div_carausel');
    if (emojiDiv.classList.contains('hide')) {
        emojiDiv.classList.remove('hide');
        populateEmojiPicker_carausel(card_number,button_element);
    }
    else {
        emojiDiv.classList.add('hide');
    }
}


function populateEmojiPicker_carausel(card_number, button_element) {
    let cardNumber = $(card_number).prop('id')
    const emojiDiv = document.querySelector('.emoji_div_carausel');
    emojiDiv.innerHTML = ''; 

    // Use data attributes to pass DOM element references safely
    emojiDiv.innerHTML = emojis.map(emoji => `
        <div class="emoji_element" title="${emoji.name}" 
             onclick="handleClickEmoji__carausel('${emoji.unicode[0]}', '${emoji.htmlCode[0]}', '${cardNumber}')">
            ${emoji.htmlCode[0]}
        </div>
    `).join('');
}


// Function to populate the emoji picker using the stored emojis
function populateEmojiPicker_NonCarausel() {
    const emojiDiv = document.querySelector('.emoji_div');
    emojiDiv.innerHTML = ''; 

    emojiDiv.innerHTML = emojis.map(emoji => `
        <div class="emoji_element" title="${emoji.name}" onclick="handleEmojiClick('${emoji.unicode[0]}', '${emoji.htmlCode[0]}')">
            ${emoji.htmlCode[0]}
        </div>
    `).join('');
}

// Function to handle emoji click and insert emoji at cursor position
function handleEmojiClick(emoji_unicode, emoji_html_code) {
    const input = document.getElementById('suggested_content');
    
    if (input.selectionStart !== null) {
        const cursorPos = input.selectionStart;
        const textBefore = input.value.substring(0, cursorPos);
        const textAfter = input.value.substring(cursorPos);
        input.value = textBefore + emoji_html_code + textAfter;
        input.selectionStart = input.selectionEnd = cursorPos + emoji_html_code.length;            
        input.focus();
    }
}

// Function to toggle the emoji picker visibility
function handleNonCarauselEmojiButton() {
    const emojiDiv = document.querySelector('.emoji_div');
    if (emojiDiv.classList.contains('hide')) {
        emojiDiv.classList.remove('hide');
        populateEmojiPicker_NonCarausel(); 
    }
    else {
        emojiDiv.classList.add('hide');
    }
}

// Handle clicks outside the emoji div to hide it
document.addEventListener('click', (event) => {
    const emojiDiv = document.querySelector('.emoji_div');
    const emojiButton = document.getElementById('emoji_button_non_carausel');

    if (!emojiDiv.contains(event.target) && event.target !== emojiButton) {
        emojiDiv.classList.remove('show');
        emojiDiv.classList.add('hide');
    }
});

    function submissionValidation(){
        $('#submit_rcs_template_btn').on('click',function(e){
            
            var template_type_val = $('#template_type_id').val();
            $('#error_image').addClass('hide');

            var organization_value = $('#organization').val();
            var rcs_type = $('#rcs_type_id').val();
            var rcs_suggested_content = $('#suggested_content').val();
            let template_name = $('#rcs_template_name').val();

            var error = false;

            // if(template_type_val || template_type_val.length>0){
            //     $('#error_template_type').addClass('hide');
            //     // $('#error_rcs_suggested_content').addClass('hide');
            // }
            // else error = true;
            var templates_names_data = Object.values(templates_names);
            if(template_name.length==0){
                $('#error_template_name').removeClass('hide');
                error = true;
            }
            else{
                $('#error_template_name').addClass('hide');
            }

            let check = templates_names_data.find((curr)=>{
                return curr.trim() == template_name.trim();
            });

            // show error message for duplicate
            if(check){
                $('#dupicate_template_name').show();
                error = true;
            }
            else{
                $('#dupicate_template_name').hide();
            }

            var header_name_dropdown = $('#rcs_header_name').val();
                if(!header_name_dropdown){
                    $('#error_header_name').removeClass('hide');
                    $('#error_header_name_y').removeClass('hide');
                    error = true;
                }
                else{
                    $('#error_header_name').addClass('hide');
                    $('#error_header_name_y').addClass('hide');
                }
            
            // content suggestion text-box should be mandatory and it shoukd show error
            if(rcs_suggested_content.length==0 && template_type_val!='rcs_carousal'){
                error = true;
                $('#error_rcs_suggested_content').removeClass('hide');
            }

            // organization value is a required field and it should show error if not choosen
            if(!organization_value || organization_value.length==0){
                $('#error_organization_name').removeClass('hide');
                error = true;
            }
            else{
                $('#error_organization_name').addClass('hide');
            }

            /*
                - For rcs type as 1 the header should be dropdown
                - If header from dropdown is not selected then show error
            */
            if(rcs_type==1){
                // title name should be saved as the name provided in bottom
                var dynamic_elements_div = $('#dynamicDivs');
                var suggested_content_data = $('#suggested_content').val();
                let mapping = [];

                for(let i=1;i<=10;i++){
                    let replaceable_data = "@{{"+i+"}}";
                    var key = $('#rcs_body_content_url_key_'+i).val();

                    if(suggested_content_data.includes(replaceable_data)){
                        let temp = {
                            "key": replaceable_data,
                            "val": key
                        }
                        mapping.push(temp);
                    }
                }

                var mappingInput = $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'mapping')
                .val(JSON.stringify(mapping));
                
            // Append the hidden input field to the form
            $('#rcs_form').append(mappingInput);

            

            // Set the modified string to the suggested_content element
            $('#suggested_content').val(suggested_content_data);

                // if templates type is not filled then show error
                var template_type = $('#template_type_id').val();
                if(!template_type || template_type.length==0){
                    $('#error_template_type').removeClass('hide');
                    error = true;
                }
                else{

                    // check validation for button values
                    if(template_type!='rcs_carousal' && rcs_type==1){

                        for(let i=0;i<buttons_non_carausel.length;i++){
                            if(buttons_non_carausel[i]==true){

                                let current_action_type = $(`.action_type_${i}`).val();


                                if(!current_action_type || current_action_type==''){
                                    $(`#error_action_type_${i}`).removeClass('hide');
                                    error = true;
                                }

                                else if(current_action_type==1){
                                    // for action type as url action we need : URL, Action Type as required field
                                    let url_action_current_button = $(`#campaing_urls${i}`).val();
                                    let action_tag_current_button = $(`#rcs_tag${i}`).val();
                                    if(i==0){
                                         url_action_current_button = $(`#campaing_urls`).val();
                                        action_tag_current_button = $(`#rcs_tag`).val();
                                    }
                                    if(i==0){
                                        url_action_current_button = $(`#campaing_urls`).val();
                                    }

                                    if(!url_action_current_button || !action_tag_current_button || url_action_current_button.length==0 || action_tag_current_button.length==0){
                                        $(`#error_action_type_${i}`).removeClass('hide');
                                        error = true;
                                    }
                                    else{
                                        $(`#error_action_type_${i}`).addClass('hide');
                                    }

                                }
                                else if(current_action_type==2){
                                    // for dialer we have mobile number and action tag
                                    let curr_mobile = $(`#campaing_urls${i}`).val();
                                    let action_tag_current_button = $(`#rcs_tag${i}`).val();

                                    if(i==0){
                                        curr_mobile = $(`#campaing_urls`).val();
                                        action_tag_current_button = $(`#rcs_tag`).val();
                                    }

                                    if(!curr_mobile || curr_mobile.length==0 || !action_tag_current_button || action_tag_current_button.length==0){
                                        $(`#error_action_type_${i}`).removeClass('hide');
                                        error = true;
                                    }
                                    else{
                                        $(`#error_action_type_${i}`).addClass('hide');
                                    }
                                }


                                else if(current_action_type==3){
                                    // for view location lat and long:
                                    // required field is -> suggested text, latitude, longtude, label
                                    let suggestedText_current_button = $(`#suggestion_text_non_carausel_input_${i}`).val();
                                    let latitude_current_button = $(`#latitude_input_non_carausel_${i}`).val();
                                    let longitude_current_button = $(`#longitude_input_non_carausel_${i}`).val();
                                    let label_current_button = $(`#label_input_non_carausel_${i}`).val();
                                    
                                    if(!suggestedText_current_button || !latitude_current_button || !longitude_current_button || !label_current_button || suggestedText_current_button.length==0 || latitude_current_button.length==0 || label_current_button.length==0){
                                        $(`#error_action_type_${i}`).removeClass('hide');
                                        error = true;
                                    }
                                    else{
                                        $(`#error_action_type_${i}`).addClass('hide');
                                    }
                                }

                                else if(current_action_type==4){
                                    /* For view location Query only : suggested text and Query are required field */
                                    let suggestedText_current_button = $(`#suggestion_text_non_carausel_input_${i}`).val();
                                    let query_current_button = $(`#query_input_non_carausel_${i}`).val();

                                    if(!suggestedText_current_button || !query_current_button || suggestedText_current_button.length==0 || query_current_button.length==0){
                                        $(`#error_action_type_${i}`).removeClass('hide');
                                        error = true;
                                    }
                                    else{
                                        $(`#error_action_type_${i}`).addClass('hide');
                                    }
                                }

                                else if(current_action_type==5){
                                    /* For share location only  sugggested text is required*/
                                    let suggestedText_current_button = $(`#suggestion_text_non_carausel_input_${i}`).val();
                                    if(!suggestedText_current_button || suggestedText_current_button.length==0){
                                        $(`#error_action_type_${i}`).removeClass('hide');
                                        error = true;
                                    }
                                    else{
                                        $(`#error_action_type_${i}`).addClass('hide');
                                    }
                                }
                            }

                        }
                    }
                    // for standalone / image type template
                    // make card orientation and media height as required
                    if(template_type=='image_template_type'){
                        // Image required validation
                        var image = $('#richmedia_image').val();
                            if(!image){
                                error = true;
                                console.log("Image not selected");
                                $('#error_image').removeClass('hide'); 
                            }
                            else{
                                $('#error_image').addClass('hide');
                            }

                        var card_orientation = $('#rcs_card_orientation_id').val();
                        var media_height = $('#rcs_media_height_id').val();
                    
                        if(!card_orientation){
                            error = true;
                            $('#error_card_orientation').removeClass('hide');
                        }
                        else{
                            if(card_orientation=='horizontal'){
                                var rcs_card_alignment = $('#rcs_media_card_alignment_id');
                                if(!rcs_card_alignment || rcs_card_alignment.val().length<1){
                                    $('#error_message_card_alignment').removeClass('hide');
                                    error = true;
                                }
                                else{
                                    $('#error_message_card_alignment').addClass('hide');   
                                }
                            }
                            $('#error_card_orientation').addClass('hide');
                        }

                        if(!media_height){
                            error = true;
                            $('#error_media_height').removeClass('hide');
                        }
                        else{
                            $('#error_media_height').addClass('hide');
                            // media height is working, so check for image reqiored
                            var image = $('#richmedia_image').val();
                            if (!image) {
                                error = true;
                                $('#error_image').removeClass('hide');
                                console.log("Image not selected");
                            } else {
                                $('#error_image').addClass('hide');
                            }
                        }

                                        // Title validation only for RCS-1 and template type as Stand Alone
                        var title = $('#rcs_title').val();
                        if(!title){
                            error = true;
                            $('#error_rcs_title').removeClass('hide');
                        }
                        else{
                            $('#error_rcs_title').addClass('hide');

                            /*
                                store the title name from the bottom body
                            */
                            var title = $('#rcs_title').val();
                            if(!title || title.trim().length==0){
                                console.log('Empty Title');
                            }
                            else{
                                if(title.includes('@{{1}}')){
                                    var pattern = /{{1}}/g;
                                    var title_key = $('#header_dynamic').val();
                                    if(title_key){
                                        var newTextContent = title.replace(pattern, title_key);
                                        $('#rcs_title').val(newTextContent);
                                    }
                                    
                                }
                        }
                        }
                    }
                    
                // if RCS-Type is carausel then get the input cards and send these in backend
                else if (template_type=='rcs_carousal')
                {

                    let button_error_id_array = [];

                    // hide all the errors and then repush errors
                    $(`.error_message_button_value`).addClass('hide');

                    for(let i=0;i<6;i++){
                        let error_array_ids = [];
                        // get current card and check validation for each card
                        let currCard = cards[i];
                        if(currCard.status==false) continue;

                        let currCard_id = `#card${i+1}`;

                           // Button Values Error

                        let button_status_array = currCard.button_values;
                        let button_data_array = currCard.button_value_data;

                        for(let btn_div=1;btn_div<=4;btn_div+=1){
                            let current_action_type_div = $(`#campaign_url_type_carousel_${btn_div}card${i+1}`).val();

                            current_button_action_type = current_action_type_div;

                            let error_id = `#error_message_button_value_card${i+1}_${btn_div}`;


                            // for first 2 cards if div 1 is undefined the throw error
                            if((i==0 || i==1) && btn_div==1){
                                if(!current_action_type_div || current_action_type_div==undefined || current_action_type_div.length==0){
                                    error_array_ids.push(error_id);
                                }
                            }

                            if(current_action_type_div && current_action_type_div.length>0){
                                if(current_button_action_type=='url_action'){
                                    let campaign_url = $(`#input_campaing_urls_carausel_id_${btn_div}card${i+1}`).val(); 
                                    let action_tag = $(`#rcs_action_tag_carausel_${btn_div}card${i+1}`).val();

                                    console.log(`For div${btn_div} in card${i+1} checking for campURL: ${campaign_url}, Action Tag ${action_tag}`);
                                    
                                    if(!campaign_url || !action_tag) button_error_id_array.push(error_id);
                                    
                                }

                                else if(current_button_action_type=='dialer_action'){
                                    let mobile_number = $(`#input_mobile_number_carausel_id_${btn_div}card${i+1}`).val(); 
                                    let action_tag = $(`#rcs_action_tag_carausel_${btn_div}card${i+1}`).val();

                                    console.log(`For div${btn_div} in card${i+1} checking for Mobile Num: ${mobile_number}, Action Tag ${action_tag}`);

                                    if(!mobile_number || !action_tag){
                                        error_array_ids.push(error_id);
                                    }
                                }

                                else if(current_button_action_type=='viewlocation'){
                                    /*
                                        for view location latitude, longitude, suggestion text and label is required
                                    */
                                    let latitude = $(`#latitude_input_carausel_${btn_div}card${i+1}`).val();
                                    let longitude = $(`#longitude_input_carausel_${btn_div}card${i+1}`).val();
                                    let suggestedText = $(`#suggestion_text_carausel_input_${btn_div}card${i+1}`).val(); 
                                    let label = $(`#label_input_non_carausel_${btn_div}card${i+1}`).val();

                                    console.log(`For div${btn_div} in card${i+1} checking for Latitude: ${latitude}, Longitude ${longitude}, SuggText ${suggestedText}, Label${label}`);


                                    if(!label || !latitude || !longitude || !suggestedText){
                                        error_array_ids.push(error_id);
                                    }
                                }
                                else if(current_button_action_type=='view_location_query'){
                                    // for view query suggestextext and query required
                                    let suggestedText = $(`#suggestion_text_carausel_input_${btn_div}card${i+1}`).val();
                                    let query = $(`#query_input_carausel_${btn_div}card${i+1}`).val();

                                    console.log(`For div${btn_div} in card${i+1} checking for SuggTExt: ${suggestedText}, Query ${query}`);


                                    if(!suggestedText || !query || suggestedText.length==0 || query.length==0){
                                        error_array_ids.push(error_id);
                                    }
                                }
                                else if(current_button_action_type=="share_location"){
                                    let suggestedText = $(`#suggestion_text_carausel_input_${btn_div}card${i+1}`).val();
                                    console.log(suggestedText+" for carausel share locaion");

                                    if(!suggestedText || suggestedText.length==0){
                                        error_array_ids.push(error_id);
                                    }
                                }
                            }

                        }

                        // Image Validation
                        let currentCardImage = $(`#rcs_carousel_file_input_id_card${i+1}`).val();
                            if (!currentCardImage) {
                                let imageErrorId = `#error_message_carausel_image${i+1}`;
                                console.log(imageErrorId);
                                error_array_ids.push(imageErrorId);
                            }
                            else{
                            // If image is chosen: check for image type: if video then give thumbnail validation
                                if(currentCardImage.includes('mp4')){
                                    let thumbnail = $(`#carousel_thumbnail_card${i+1}`).val();
                                    if(!thumbnail){
                                        console.log("Thumbnail Error identification needed to be added");
                                        let error_id = `#error_message_carausel_thumbnail${i+1}`;
                                        error_array_ids.push(error_id);
                                    }
                                }
                            }


                            // Title Validation
                            let currCardTitle = currCard.title;

                            if((!currCardTitle || currCardTitle.length==0)){
                                let error_id = `#error_message_carausel_title_card${i+1}`;
                                error_array_ids.push(error_id);
                            }
                            else{
                                // if title variable is choosen but not filled
                                $(`#error_message_carausel_title_card${i+1}`).addClass('hide');
                                if(currCard.titleDynamicURL.length>0 && currCard.titleKeyData.length==0){

                                    // To be checked
                                    let error_id = `#title_header_error_card${i+1}`;
                                    error_array_ids.push(error_id);
                                }
                            }


                            // Suggested content and Suggested Content Variable Error
                            // if suggested content length is 0 thenn check for suggested content error
                            if(currCard.suggested_content.length==0){
                                let error_id = `#error_message_carausel_suggested_content_card${i+1}`;
                                error_array_ids.push(error_id);
                            }

                            //if suggested content is there then only check for the Variable data
                            else{
                                $(`#error_message_carausel_suggested_content_card${i+1}`).addClass('hide');
                                let var_array_sugg_content = currCard.suggested_content_variable_array;
                                let var_array_suggContent_data = currCard.suggested_content_Key_Value;

                                // check for error in suggested content currnet card and cardwise it will display error
                                let error_in_suggested_content_var_currCard = false;

                                for(let idx=0;idx<var_array_sugg_content.length;idx++){
                                    if(var_array_sugg_content[idx]==true){
                                        if(!var_array_suggContent_data[idx] || !var_array_suggContent_data[idx].key || !var_array_suggContent_data[idx].value){
                                            let error_id = `#error_message_carausel_suggested_content_body_samplescard${i+1}_${idx}`;
                                            error_array_ids.push(error_id);
                                        }
                                        else{
                                            $(`#error_message_carausel_suggested_content_body_samplescard${i+1}_${idx}`).addClass('hide');
                                        }
                                    }
                                }
                            }
                            console.log(error_array_ids);
                            // If no errors then hide all the error elements for the card
                            if(error_array_ids.length==0){
                                $('#carausel_error_alert').html('');
                                error_array_ids.forEach((curr)=>{
                                    $(curr).addClass('hide');
                                })
                            }
                            // if errors found then show the errors and simply return
                            else{
                                $(currCard_id).click();
                                $('#carausel_error_alert').html(`Please fill all the details in card${i+1}`);
                                error_array_ids.forEach((curr)=>{
                                    $(curr).removeClass('hide');
                                })
                                return;
                            }
                    }   
                        /*
                            - Get file names and thumbnail names in a input request form
                            -  Decode this in controller and store data in DB
                        */

                        let filenames = [];
                        let thumbnail_names = [];

                        // for each card if status is true and files not stored then store mark error and
                        // display the error message

                        for (let i = 1; i <= 6; i++) {
                            if(cards[i-1].status==false){
                                continue;
                            }
                            let currImage = $(`#rcs_carousel_file_input_id_card${i}`)[0];
                            if (currImage && currImage.files.length > 0) {
                                let filename = currImage.files[0].name;
                                filenames[i] = filename;

                                let fileType = currImage.files[0].type;
                                if (fileType.startsWith('video/')) {
                                    let thumbnail = $(`#carousel_thumbnail_card${i}`)[0];
                                    if (thumbnail && thumbnail.files.length > 0) {
                                        thumbnail_names[i] = thumbnail.files[0].name;
                                    }
                                }
                                 else thumbnail_names[i] = "NULL";

                            } 
                        }

                        var filename_input = $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'filename')
                        .val(JSON.stringify(filenames));
                        $('#rcs_form').append(filename_input);

                        var filename_input = $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'thumbnailname')
                        .val(JSON.stringify(thumbnail_names));
                        $('#rcs_form').append(filename_input);




                        // Pass the card data in the backend
                        var cardsData = cards;
                        var mappingInput = $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'mapping_cards')
                        .val(JSON.stringify(cardsData));
                        $('#rcs_form').append(mappingInput);

                        if(error) return;


                        $('#submit_rcs_template').click();
                     }

                    $('#error_template_type').addClass('hide');

                }

                // Filled the rcs template and now I need to check for data of button values
                // hehehehehehe



            }
            else if(rcs_type==3){
                var header_name_dropdown = $('#rcs_header_name').val();
                if(!header_name_dropdown || header_name_dropdown.length==0){
                    $('#error_header_name_y').removeClass('hide');
                    error = true;
                }
                else{
                    $('#error_header_name_y').addClass('hide');
                }

                var core_entiry = $('#core_entity_input').val();
                if(!core_entiry){
                    error =  true;
                    $('#error_core_entiry').removeClass('hide');
                }
                else{
                    $('#error_core_entiry').addClass('hide');   
                }

                var core_url = $('#core_url_input').val();
                if(!core_url){
                    error = true;
                    $('#error_core_entiry_url').removeClass('hide');
                }
                else{
                    $('#error_core_entiry_url').addClass('hide');
                }

                var main_title = $('#main_title').val();
                if(!main_title){
                    error = true;
                    $('#error_main_title').removeClass('hide');
                }
                else{
                    $('#error_main_title').addClass('hide');
                }

                var sub_title = $('#rcs_sub_title').val();
                if(!sub_title){
                    error = true;
                    $('#error_rcs_sub_title').removeClass('hide');
                }
                else{
                    $('#error_rcs_sub_title').addClass('hide');
                }
            }
            else if(rcs_type==2){
                var title = $('#rcs_title').val();
                if(!title){
                    error = true;
                    $('#error_rcs_title').removeClass('hide');
                }

                var image = $('#richmedia_image').val();
                console.log("Image for rcs-2 "+image);
                if (!image) {
                    error = true;
                    $('#error_image').removeClass('hide');
                    console.log("Image not selected");
                } else {
                    $('#error_image').addClass('hide');
                }
            }

            else if(rcs_type==4){
                if(template_type=='image_template_type'){
                        // Image required validation
                        var image = $('#richmedia_image').val();
                            if(!image){
                                error = true;
                                console.log("Image not selected");
                                $('#error_image').removeClass('hide'); 
                            }
                            else{
                                $('#error_image').addClass('hide');
                            }

                        var card_orientation = $('#rcs_card_orientation_id').val();
                        var media_height = $('#rcs_media_height_id').val();
                    
                        if(!card_orientation){
                            error = true;
                            $('#error_card_orientation').removeClass('hide');
                        }
                        else{
                            if(card_orientation=='horizontal'){
                                var rcs_card_alignment = $('#rcs_media_card_alignment_id');
                                if(!rcs_card_alignment || rcs_card_alignment.val().length<1){
                                    $('#error_message_card_alignment').removeClass('hide');
                                    error = true;
                                }
                                else{
                                    $('#error_message_card_alignment').addClass('hide');   
                                }
                            }
                            $('#error_card_orientation').addClass('hide');
                        }

                        if(!media_height){
                            error = true;
                            $('#error_media_height').removeClass('hide');
                        }
                        else{
                            $('#error_media_height').addClass('hide');
                            // media height is working, so check for image reqiored
                            var image = $('#richmedia_image').val();
                            if (!image) {
                                error = true;
                                $('#error_image').removeClass('hide');
                                console.log("Image not selected");
                            } else {
                                $('#error_image').addClass('hide');
                            }
                        }

                                        // Title validation only for RCS-1 and template type as Stand Alone
                        var title = $('#rcs_title').val();
                        if(!title){
                            error = true;
                            $('#error_rcs_title').removeClass('hide');
                        }
                        else{
                            $('#error_rcs_title').addClass('hide');

                            /*
                                store the title name from the bottom body
                            */
                            var title = $('#rcs_title').val();
                            if(!title || title.trim().length==0){
                                console.log('Empty Title');
                            }
                            else{
                                if(title.includes('@{{1}}')){
                                    var pattern = /{{1}}/g;
                                    var title_key = $('#header_dynamic').val();
                                    if(title_key){
                                        var newTextContent = title.replace(pattern, title_key);
                                        $('#rcs_title').val(newTextContent);
                                    }
                                    
                                }
                        }
                        }
                    }
            } 

            if(rcs_type!=3){
                if(rcs_type == 2 || template_type == 'image_template_type') {
                var fileInput = $('#richmedia_image')[0]; // Select the actual DOM element, not the jQuery object
                if (fileInput && fileInput.files.length > 0) { // Check if files exist before accessing
                    var file = fileInput.files[0];
                    var fileType = file.type;
                    // if file is in video/mp4 then make the thumbnail as a valid one else donot make
                    if(fileType.includes('video/mp4')){
                        var rcs_thumbnail = $('#richmedia_thumbnail').val();
                        if(rcs_thumbnail){
                            $('#error_thumbnail').addClass('hide');
                        }
                        else{
                            $('#error_thumbnail').removeClass('hide');
                            error = true;
                        }
                    }
                }
            }
            }
            // validation for header name
            var header_name_dropdown = $('#rcs_header_name').val();
                if(!header_name_dropdown || header_name_dropdown.length==0){
                    $('#error_header_name_y').removeClass('hide');
                    error = true;
                }
                else{
                    $('#error_header_name_y').addClass('hide');
                }

            if(error==true){
                return;
            }
            else{
                $('#submit_rcs_template').click();
            }
        });
    }
  


</script>
@endsection