@include('header')
{!! csrf_field() !!}
<!-- Bootstrap Core CSS -->
<link href="themes/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<!-- this page css -->
<link rel="stylesheet" type="text/css" href="themes/css/spectrum.css">


<!-- Custom Fonts -->
<link href="themes/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="themes/css/style.css" rel="stylesheet">
<style>
    .bordered-panel{margin-top: -21px;padding-bottom:0;}
    .bg-light-white2{display:none;}
    .btn{border-radius: 0px;}
    .other-page .navbar-default{color: #FFFFFF;}
    .container{
        padding-left: 0px;
        padding-right: 0px;
    }
    .col-md-3{width: 28.5%;}
    .section{padding: 20px 0;}
    #nvc3{background-color:rgb(51, 124, 187);color:#fff;position: inherit !important;}
    .mrg-btm0{margin-bottom: 0px;}
    #browse{width:148px;}
    .btn-orange:hover{color: #000;}
    .mtopbot15 {
        margin-bottom: 15px;
        margin-left: 282px;
        margin-top: 15px;
        text-align: center;
    }

<!-- content area start -->  

            </style>
<!-- content area start -->  

    <div class="container" id="my_account_tabs">
    	@include('main-tab')
        </br>
    <div class="bordered-panel create_webpage">
        
        <h3>Create a Webpage for your Ad</h3>
        </br>
        <div class="row form-group"> 
            <div class="col-sm-8" id="sample">
                @if(Session::has('success_add_data'))
                <div class="form-group alert-box success">
                    {{ Session::get('success_add_data') }}
                </div>
                @endif 
                <form class="webpage-form" name="creatwebpage" action="web-page-creation/add-web-data" method="POST" onsubmit="return submitform();" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{!!  csrf_token()  !!}" />
                    <input type="hidden" name="advertiser_id" value=""/>
                    <input type="hidden" name="page_id" value=""/>

                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Web Page Background Color:</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <span class="padding10 bg-light-white" style="margin-left:6px;">Body Background </span>
                            <b id="bg1">
                                <input id="langdemo" />
                                <input type="hidden" name="backgound_color" id="background_color" value=""/>
                            </b>
                          <!-- <p class="large-font"> Preview  <input type="button" name="preview" class="btn btn-default" id="preview" value="Click Here" /></p> -->
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Web Page Name <b style="color:#ff0000;">*</b>:</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">

                            <input type="text" class="form-control" maxlength="20" name="webpage_name" id="webpage_name" placeholder="Web Page Name" value="" style="margin-left: 16px; width: 93%;" required/>

                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Heading for your web page<b style="color:#ff0000;">*</b><a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_webpage_Adv_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12" >
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-right:0px !important;padding-left: 0px ! important;"><span class="padding10 bg-light-white" style="margin-left:-9px;">Background </span>
                                    <b id="bg2">
                                        <input id="langdemo1" />
                                        <input type="hidden" name="hbackground_color" id="hbackground_color"/>
                                    </b></div>
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-left:0px !important;">
                                    <span class="padding10 bg-light-white"> Text </span>
                                    <b id="bg3">
                                        <input id="langdemo2" />
                                        <input type="hidden" name="htxt_courl" id="htxt_courl"/>
                                    </b>
                                </div> 
                            </div>
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="padding-top:5px;">
                                <textarea rows="1" id="our_service_main" name ="our_service_main" class="form-control" maxlength="30" placeholder="Heading for your web page" required></textarea>
                                <p> eg: Elis caffe <b style="text-align: right; float: right; font-weight: normal; font-size: 13px;">You have <span id="charsLeft">30</span> chars left.</b></p>
                            </div>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Description of your Advertisement<b style="color:#ff0000;">*</b> <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_webpage_show_txt_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-right:0px !important;padding-left:0px !important;">
                                    <span class="padding10 bg-light-white" style="margin-left:-9px;">Background</span>
                                    <b id="bg4">
                                        <input id="langdemo3" />
                                        <input type="hidden" name="mcbg_courl" id="mcbg_courl"/>
                                    </b>
                                </div>
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-left:0px !important;">
                                    <span class="padding10 bg-light-white">Text</span>
                                    <b id="bg5">
                                        <input id="langdemo4" />
                                        <input type="hidden" name="mctxt_courl" id="mctxt_courl"/>
                                    </b>
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="padding-top: 5px;">
                                <textarea rows="1" id="aboutus_content"  name="aboutus_content" class="form-control" placeholder="Your Text Here" maxlength="50" required></textarea>
                                <p>  <b style="text-align: right; float: right; font-weight: normal; font-size: 13px;">You have <span id="charsLeft2">50</span> chars left.</b></p>
                            </div>
                            <p style="width: 191px; margin-left: 16px; height: 101px;">More Description<a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_webpage_show_txt_detail')}}"><i class="fa fa-question-circle"></i></a>
                                &nbsp;<a href="" id="showhide">Show</a></p>                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            
                                
                        </div>
                        <div id="more_desc_block" class="col-lg-7 col-md-7 col-sm-6 col-xs-12" style="display:none;">
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-right:0px !important;padding-left:0px !important;">
                                    <span class="padding10 bg-light-white" style="margin-left:-9px;">Background</span>
                                    <b id="bg9">
                                        <input id="langdemo7" />
                                        <input type="hidden" name="more_desc_bg_color" id="more_desc_bg_color"/>
                                    </b>
                                </div>
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-left:0px !important;">
                                    <span class="padding10 bg-light-white">Text</span>
                                    <b id="bg10">
                                        <input id="langdemo8" />
                                        <input type="hidden" name="more_desc_bg_txt_color" id="more_desc_txt_bg_color"/>
                                    </b>
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="padding-top: 5px;">
                                <textarea rows="2" id="more_desc"  name="more_desc" class="form-control" placeholder="More Text Here" maxlength="100"></textarea>
                                <p>  <b style="text-align: right; float: right; font-weight: normal; font-size: 13px;">You have <span id="more_desc_char_left">100</span> chars left.</b></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Image/Video URL to show on your mobile web page <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_webpage_show_img_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <div  class="btn btn-orange" style="margin-left:16px;"><a href="#" data-toggle="modal" data-target="#imagevideo">Upload</a>                     
                            </div>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p style="font-size:18px;">Your contact details* <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_webpage_contact_detail')}}"><i class="fa fa-question-circle"></i></a>
                            </p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12">
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-right:0px !important;padding-left:0px !important;">
                                    <span class="padding10 bg-light-white" style="margin-left: -9px;">Background</span>
                                    <b id="bg6">
                                        <input id="langdemo5" />
                                        <input type="hidden" name="footerbg_courl" id="footerbg_courl"/>
                                    </b>
                                </div>
                                <div class="col-sm-6 col-lg-6 col-md-6 col-xs-6" style="padding-left:0px !important;">
                                    <span class="padding10 bg-light-white">Text</span>
                                    <b id="bg7">
                                        <input id="langdemo6" />
                                        <input type="hidden" name="footertxt_courl" id="footertxt_courl"/>
                                    </b>
                                </div>
                            </div>     
                        </div>
                    </div> 


                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p> Your Address<b style="color:#ff0000;">*</b></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <textarea rows="1" id="adv_address" name="adv_address" class="form-control" placeholder="Your Address" required style="margin-left: 16px; width: 92%;"></textarea>
                            <!--<a href="#">Change</a>-->
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p>Phone no.<b style="color:#ff0000;">*</b></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <textarea rows="1" id="adv_phone" name="adv_phone" class="form-control" placeholder="Phone no" required style="margin-left: 16px; width: 92%;"></textarea>
                            <!--<a href="#">Change</a>-->
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <p> Email address<b style="color:#ff0000;">*</b></p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                            <textarea rows="1" id="adv_email" name="adv_email" class="form-control" placeholder="Email address" required style="margin-left: 16px; width: 92%;"></textarea>
                            <!--<a href="#">Change</a>-->
                        </div>
                    </div>

                    <div class="text-rights mtopbot15"> 
                        <input type="hidden" name="bodybg" id="bodybg" value=""/>
                        <input type="hidden" name="hbg" id="hbg" value=""/>
                        <input type="hidden" name="htxtc" id="htxtc" value=""/>
                        <input type="hidden" name="mdbg" id="mdbg" value=""/>
                        <input type="hidden" name="mdtxtc" id="mdtxtc" value=""/>
                        <input type="hidden" name="ftbg" id="ftbg" value=""/>
                        <input type="hidden" name="fttxtc" id="fttxtc" value=""/>
                        <input type="hidden" name="mid_imagename_hidden" id="mid_imagename_hidden" value=""/>
                        <input type="hidden" name="m_desc_bg" id="m_desc_bg" value=""/>
                        <input type="hidden" name="m_desc_txt_color" id="m_desc_txt_color" value=""/>
                        <input type="hidden" name="m_desc_txt" id="m_desc_txt" value=""/>
                        <input type="hidden" name="include_more_desc" id="include_more_desc" value="">

                        <input type="hidden" name="catbind" id="catbind" value=""/>	
                        <input type="hidden" name="campaign_id" id="campaign_id" value=""/>	 
                        <input type="hidden" name="grpid" id="grpid" value=""/>
                        <input type="hidden" name="cook_key" id="cook_key" value=""/>
                        <button type="button" class="btn btn-grey" onclick="window.history.go(-1);">Back</button> &nbsp;&nbsp;   
                        <button class="btn btn-green"  name="submit" id="submit">{{trans('createadtemplate.Preview')}}</button>

                    </div>

                    <!-- Modal -->
                    <div id="imagevideo" class="modal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Upload Image or add Video URL </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-sm-12"><select name="uptype" id="uptype">
                                                <option value="">Select upload type</option>
                                                <option value="1" >Upload Image from Computer</option>
                                                <option value="0"  >Add Video URL</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-12" style="height:14px;">&nbsp;</div>
                                        <div class="col-sm-12" id="upimgcmp" style="display:none;">
                                            <div id="browse" class="btn btn-orange">Browse and Upload
                                                <input type="file" id="logoimage" name="logoimage" > 
                                                <input type="hidden" id="logoimageex" name="logoimageex" value=""> 
                                            </div>
                                        </div>
                                        <div class="col-sm-12" id="addyoutube" style="display:none;">
                                            <span style="color: #ff0000;display:none;">Please use only embed URL</span>
                                            <input type="text" name="youtube_url" id="youtube_url" value="" placeholder="Enter Video URL" class="form-control">
                                            <span>[Ex. https://www.youtube.com/embed/xxxxxxxxx]</span><br/>
                                            <button type="button" name="btnyoutube" style="margin-top:10px;" class="btn btn-sm btn-green" id="btnyoutube">Add</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default clls" data-dismiss="modal">Ok</button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Modal End -->
                </form>
            </div>
            <div class="col-sm-4">

                <div class="text-center mtopbot34">
                    Your web page will look like this to your customers on mobile
                    <br/><br/><input type="hidden" name="preview" class="btn btn-sm btn-green" id="preview" value="View Preview" /><br/><br/>
                        <div class="well" width="300px;" height="500px;"  >
                        <div class="row">
                            <div class="col-sm-12 col-xs-12" id="temps">
<!--                                	 <iframe id ="yourId" src="http://localhost/anui_local/advt_template/index.php" width="300px;" height="500px;" frameborder="0" /></iframe>-->

                            </div>

                        </div> 

                    </div>

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



<!-- content area end -->
<!-- content area end -->  
@include('footer_inside')


<!--=========================================================code end================================================-->

<!-- jQuery -->
</body>
{!! Html::script('themes/js/jquery.js'); !!}
<!-- Bootstrap Core JavaScript -->

{!! Html::script("themes/js/bootstrap.min.js"); !!}
<!-- Custom Theme JavaScript -->
<script>
    //$.noConflict();
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>

{!! Html::script("themes/js/nicEdit.js"); !!} 

{!! Html::script("themes/js/custom.js"); !!}

{!! Html::script("themes/js/jqBootstrapValidation.js"); !!}


{!! Html::script("themes/js/spectrum-banner.js"); !!}


<script type="text/javascript">
    $(".sp-preview-inner").spectrum({
        color: "#fff",
    });

    /*bkLib.onDomLoaded(function() {
     new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('our_service_main');
     new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('adv_phone');
     new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('adv_email');
     new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('adv_address');
     new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('aboutus_content');
     });*/

</script>


<script type="text/javascript">

    $(function () {
        
         
       
        
        $("#langdemo1").spectrum({
            flat: false,
            showInput: true,
                        color: '#4d7688',    
                    });

        $("#langdemo2").spectrum({
            flat: false,
            showInput: true,
                        color: 'rgb(255, 255,255)',    
                    });

        $("#langdemo3").spectrum({
            flat: false,
            showInput: true,
            
                                     color: '#f5f5f5',
            
        });

        $("#langdemo4").spectrum({
            flat: false,
            showInput: true,
                              color: '#000',
                    });

        $("#langdemo5").spectrum({
            flat: false,
            showInput: true,
                              color: '#337CBB',
                    });

        $("#langdemo6").spectrum({
            flat: false,
            showInput: true,
                              color: '#fff',
                    });
        $("#langdemo").spectrum({
            flat: false,
            showInput: true,
                             color: '#fff',
                    });
        $("#langdemo7").spectrum({
            flat: false,
            showInput: true,
            
                                     color: '#f5f5f5',
            
        });
        $("#langdemo8").spectrum({
            flat: false,
            showInput: true,
            
                                     color: '#000',
            
        });
    });
    $('#showhide').click(function(){
        if($('#showhide').html()=='Show'){
            $("#more_desc_block").css('display','block');
            $("#nvc9").css('display','block');
            $('#showhide').html("Hide");
            $('#include_more_desc').val(1);
        }else{
            $("#more_desc_block").css('display','none');
            $("#nvc9").css('display','none');
           $('#showhide').html("Show");
           $('#include_more_desc').val(0);
        }
        return false;
    });

    $('#uptype').change(function () {
        var tval = $(this).val();
        //alert(tval);
        if (tval == '') {
            $('#upimgcmp').css('display', 'none');
            $('#addyoutube').css('display', 'none');

        }
        if (tval == '1') {
            $('#upimgcmp').css('display', 'block');
            $('#addyoutube').css('display', 'none');

        }
        if (tval == '0') {
            $('#upimgcmp').css('display', 'none');
            $('#addyoutube').css('display', 'block');


        }
    })




//display log image preview
    $("#logoimage").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#logodisplay");
            dvPreview.html("");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:120px;width: 120px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                        $('#logoimageex').val('1');
                        $('.clls').html('Ok');
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });

    $('#btnyoutube').on('click', function () {
        var yurl = $('#youtube_url').val();
        if ($.trim(yurl) != '')
        {
            var isEmb = 0;
            var yurls = '';
            // for youtube
            var n = yurl.indexOf("youtube");
            if (n != '-1') {
                var res = yurl.split("watch?v=");
                yurls = 'https://www.youtube.com/embed/' + res[1];
                isEmb = 1;
            }
            // for dailymotion
            var ns = yurl.indexOf("dailymotion");
            if (ns != '-1') {
                var res = yurl.split("video/");
                yurls = 'https://www.dailymotion.com/embed/video/' + res[1];
                isEmb = 1;
            }
            // for other
            if (isEmb == 0)
            {
                yurls = yurl;
            }

            $('#youtube_url').val(yurls);

            var ifrmyou = '<iframe width="122" height="118" src="' + yurls + '" frameborder="0" allowfullscreen></iframe>';

            $("#logodisplay").html(ifrmyou);
            $('#imagevideo').modal('hide');
        } else {
            alert('Please enter Video URL');
        }
    })


    $('#preview').click(function () {
        var color = $("#bg1 .sp-preview-inner").css('backgroundColor');
        var headerbg = $("#bg2 .sp-preview-inner").css('backgroundColor');
        var headertxt = $("#bg3 .sp-preview-inner").css('backgroundColor');
        var mcbg = $("#bg4 .sp-preview-inner").css('backgroundColor');
        var more_desc_bg = $("#bg9 .sp-preview-inner").css('backgroundColor');
        
        var mctxt = $("#bg5 .sp-preview-inner").css('backgroundColor');
        var more_desc_txt = $("#bg10 .sp-preview-inner").css('backgroundColor');
        
        var footerbg = $("#bg6 .sp-preview-inner").css('backgroundColor');
        var footertxt = $("#bg7 .sp-preview-inner").css('backgroundColor');
        var pgcolor = $("#bg8 .sp-preview-inner").css('backgroundColor');
        //nvc1

        if (color == 'rgb(255, 255, 255)')
        {
            $("#background_color").val(color);
            $("#nvc3").removeClass("section-primary");
       
            //$("#nvc2,#nvc3").css('background-color',color);
            // $("#nvc2,#nvc3").css('color','#000');

        }
        else
        {
            $("#background_color").val(color);
            $("#nvc3").removeClass("section-primary");
      
            //$("#nvc2,#nvc3").css('background-color',color);
            //$("#nvc2,#nvc3").css('color','#FFF');
        }

        $('#background_color').val(color);
        $('#hbackground_color').val(headerbg);
        $('#htxt_courl').val(headertxt);

        $('#mcbg_courl').val(mcbg);
        $('#mctxt_courl').val(mctxt);

        $('#more_desc_bg_color').val(more_desc_bg);
        $('#more_desc_bg_txt_color').val(more_desc_txt);


        $('#footerbg_courl').val(footerbg);
        $('#footertxt_courl').val(footertxt);

        $("#nvc1").css('background-color', headerbg);
        if (headerbg == 'rgb(0, 0, 0)')
        {
            $("#nvc1").css('color', '#fff');
            $("#nvc1 a").css('color', '#fff');
        } else
        {
            $("#nvc1").css('color', headertxt);
            $("#nvc1 a").css('color', headertxt);
        }

        $("#nvc2").css('background-color', mcbg);
        if (mcbg == 'rgb(0, 0, 0)')
        {
            $("#nvc2").css('color', '#fff');
            $("#nvc2 a").css('color', '#fff');
        }
        else
        {
            $("#nvc2").css('color', mctxt);
            $("#nvc2 a").css('color', mctxt);

        }

        $("#nvc9").css('background-color', more_desc_bg);
        if (mcbg == 'rgb(0, 0, 0)')
        {
            $("#nvc9").css('color', '#fff');
            $("#nvc9 a").css('color', '#fff');
        }
        else
        {
            $("#nvc9").css('color', more_desc_txt);
            $("#nvc9 a").css('color', more_desc_txt);

        }

        $("#nvc3").css('background-color', footerbg);
     
        if (footerbg == 'rgb(0, 0, 0)')
        {
            $("#nvc3").css('color', '#fff');
            $("#nvc3 a").css('color', '#fff');
       
        } else
        {
            $("#nvc3").css('color', footertxt);
            $("#nvc3 a").css('color', footertxt);
       
        }
        $("#nvc4").css('background-color', color);
        $(".well").css('background-color', color);

    });

    $("#our_service_main").on('keyup', function postinput() {

        //$('#our_service_main').limit('140','#charsLeft');
        var maxLen = 30;
        var Length = $("#our_service_main").val().length;
        var AmountLeft = maxLen - Length;

        if (Length > maxLen) {

            //alert('Sorry, char limit exceeded');

        } else
        {
            $('#charsLeft').html(AmountLeft);
            $("#brand_name").text($(this).val());
        }




    });

    $("#aboutus_content").on('keyup', function postinput() {


        var maxLen = 50;
        var Length = $("#aboutus_content").val().length;
        var AmountLeft = maxLen - Length;

        if (Length > maxLen) {

            //alert('Sorry, char limit exceeded');

        } else
        {
            $('#charsLeft2').html(AmountLeft);
     
            $("#aboutus_content_display").text($(this).val());
        }




    });
    
        $("#more_desc").on('keyup', function postinput() {


        var maxLen = 100;
        var Length = $("#more_desc").val().length;
        var AmountLeft = maxLen - Length;

        if (Length > maxLen) {

            //alert('Sorry, char limit exceeded');

        } else
        {
            $('#more_desc_char_left').html(AmountLeft);
            $("#more_desc_content_display").text($(this).val());
        }




    });
    

    $("#adv_phone").on('keyup', function postinput() {
        $("#adv_phone_number").text($(this).val());
    });

    $("#adv_email").on('keyup', function postinput() {
        $("#adv_email_id").text($(this).val());
    });

    $("#adv_address").on('keyup', function postinput() {
        $("#adv_address_details").text($(this).val());
    });
    

        var data_html = '<html><head>' +
                '<meta charset="utf-8">' +
                '<meta name="viewport" content="width=device-width, initial-scale=1">' +
                '</head>' +
                '<body  id="nvc4"><div id="div_comp"><div class="navbar navbar-default navbar-static-top mrg-btm0" id="nvc1"   width="300px;" height="500px;" >' +
                '<div class="container" style="text-align: center; width: auto; word-wrap: break-word;">' +
                '<div class="navbar-header" style="width:100%;text-align:center;">' + '<p style=" font-size: 18px; word-wrap: break-word;"><center><span id="brand_name" style=" word-wrap: break-word;">Heading for your web page</span></center></p></div>' +
                '</div></div>' +
                '<div class="section" id="nvc2" style="padding:0 0 10px;">' +
                '<div class="container">' +
                '<div class="row col-md-3">' +
                '<h4 class="text-center"></h4>' +
                '<div class="col-md-5" style="border: 1px dashed rgb(204, 204, 204); height:120px;margin-left:20px;">' +
                '<p id="aboutus_content_display">Your Text Here</p></div>' +
                '<div class="col-md-5" style="border: 1px dashed rgb(204, 204, 204); height:120px; margin-left:20px;padding:0;">' +
                '<p id="logodisplay">Your Image Here</p></div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div id="nvc9" class="section" style="display: none;">\n\
                    <div class="container">\n\
                        <div class="row col-md-7"><h4 class="text-center"></h4>\n\
                            <div style="border: 1px dashed rgb(204, 204, 204); height:120px;margin-left:20px;" class="col-md-5">\n\
                                <p id="more_desc_content_display">More Text Here</p>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                </div>'
                + 
                '<footer class="section section-primary" id="nvc3" >' +
                '<div class="container" >' +
                '<div class="row">' +
                '<div class="col-sm-3">' +
                '<h3>Contact Us</h3>' +
                '<p style="text-align:center; margin-left:5%;">Address: <span id="adv_address_details"></span></p>' + '<p style="text-align:center; margin-left:5%;">Phone : <span id="adv_phone_number"></span></p>' + '<p style="text-align:center; margin-left:5%;">Email: <span id="adv_email_id"></span></p>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</footer>' +
                '</div>' +
                '</body>' +
                '</html>';
    
    $("#temps").html(data_html);



    function submitform()
    {
        var webpage_name = $('#webpage_name').val();
        var heading_text = $('#our_service_main').val();
        var aboutus_content = $('#aboutus_content').val();
        var adv_address = $('#adv_address').val();
        var adv_phone = $('#adv_phone').val();
        var adv_email = $('#adv_email').val();
        var uptype = $('#uptype').val();
        var youtube_url = $('#youtube_url').val();
        var logoimageex = $('#logoimageex').val();

        var color = $("#bg1 .sp-preview-inner").css('backgroundColor');
        var headerbg = $("#bg2 .sp-preview-inner").css('backgroundColor');
        var headertxt = $("#bg3 .sp-preview-inner").css('backgroundColor');
        var mcbg = $("#bg4 .sp-preview-inner").css('backgroundColor');
        var mctxt = $("#bg5 .sp-preview-inner").css('backgroundColor');
        var footerbg = $("#bg6 .sp-preview-inner").css('backgroundColor');
        var footertxt = $("#bg7 .sp-preview-inner").css('backgroundColor');

        var more_desc_bg = $("#bg9 .sp-preview-inner").css('backgroundColor');
        
        var mctxt = $("#bg5 .sp-preview-inner").css('backgroundColor');
        var more_desc_txt_color = $("#bg10 .sp-preview-inner").css('backgroundColor');
        
        var more_desc = $('#more_desc').val();




        $('#bodybg').val(color);
        $('#hbg').val(headerbg);
        $('#htxtc').val(headertxt);
        $('#mdbg').val(mcbg);
        $('#mdtxtc').val(mctxt);
        $('#ftbg').val(footerbg);
        $('#fttxtc').val(footertxt);
        $('#m_desc_bg').val(more_desc_bg);
        $('#m_desc_txt_color').val(more_desc_txt_color);
        
        $('#m_desc_txt').val(more_desc);
        $('#m_desc_bg').val(more_desc_bg);
        $('#m_desc_txt_color').val(more_desc_txt_color);
        

        var flgd = 0;
        var err_msgd = '';
        $('#preview').trigger('click');
        if ($.trim(webpage_name) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Webpage Name \r\n';
        }
        if ($.trim(heading_text) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Heading Text \r\n';
        }
        if ($.trim(aboutus_content) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Text you want to show on your web page \r\n';
        }
        if ($.trim(adv_address) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Your Address \r\n';
        }
        if ($.trim(adv_phone) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Your Phone Number \r\n';
        }
        if ($.trim(adv_email) == '')
        {
            flgd = 1;
            err_msgd += 'Please enter Your Email Address \r\n';
        }
        if (uptype == '') {
            flgd = 1;
            err_msgd += 'Please Upload Image or enter Video URL ';
        }

        if (uptype === 0 && $.trim(youtube_url) == '')
        {
            flgd = 1;
            $('#uptype').val('');
            err_msgd += 'Please Upload Image or enter Video URL ';
        }
        if (uptype == 1 && $.trim(logoimageex) == '')
        {
            flgd = 1;
            $('#uptype').val('');
            err_msgd += 'Please Upload Image or enter Video URL ';
        }

        if (flgd == 1)
        {
            alert(err_msgd);
            return false;
        } else
        {
            //return false
            if (confirm("Have you seen the preview of your Ad and want to save this?")) {
                document.forms["webpage-form"].submit();
                return true;
            }
            else {
                return false;
            }
        }


        //document.forms["webpage-form"].submit() ;
    }

    function mypreview(str)
    {
        $('#preview').trigger('click');
    }
</script>



</html>