@include('header')
{!! csrf_field() !!}

<!-- content area -->
 <link rel="stylesheet" type="text/css" href="themes/css/spectrum.css">
<style>
	#preview1 {
    width:300px; height:250px;
    overflow-x:hidden; overflow-y:hidden;
}

#preview1 img {
    max-width:300px; max-height:250px;    
}
	
#preview2c .panel {
    min-width:300px !important;
     min-height:50px !important ;    
}  
#preview3c .panel {
     clear: both;
    float: left;
     min-width:250px !important;
     min-height:300px !important ;    
}

    #preview2 {
    width:300px; height:50px;
    overflow-x:hidden; overflow-y:hidden;
    }
    
    #preview2 img {
    max-width:300px; max-height:50px;    
}
    
     #preview3 {
    width:250px; height:300px !important;
    overflow-x:hidden; overflow-y:hidden;
    }
    #preview3 img {
    max-width:252px; max-height:302px;    
}
    #preview4 {
    width:320px; height:50px;
    overflow-x:hidden; overflow-y:hidden;
    }
    #preview4 img {
    max-width:320px; max-height:50px;    
}

#resizeDiv{color:#ccc;font-weight: 700;}
//#theImg{border:2px dashed #ccc;}

.draggable
{
    position: relative; 
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;   

    cursor: hand; 
    cursor: pointer;       
}

.resizable
{
    width: 100px;   
    border: 1px solid #bb0000;   
}
.resizable img
{
    width: 100%;   
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;
    
    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
    
    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
}
/*
.ui-resizable-s{
    background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
      height: 15px !important;
    
    width: 10px !important;
}*/
.ui-resizable-e{
   height: 11px !important;    
    width: 10px !important;
}
.ui-resizable-n{
    height: 11px !important;    
    width: 10px !important;
    left:43px !important;
    top:0px !important;
}
.ui-resizable-w{
    height: 11px !important;    
    width: 10px !important;
}

.ui-resizable-nw{
   height: 11px !important;    
    width: 10px !important;
    left: 0 !important;
    top:0 !important;
}
.ui-resizable-ne{
    height: 11px !important;    
    width: 10px !important;
    right: 0 !important;
    top:0 !important;
}
.ui-resizable-se{
   background: #f5dc58 none repeat scroll 0 0 !important;
     height: 11px !important;    
    width: 10px !important;
}
.ui-resizable-sw{
    height: 11px !important;    
    width: 10px !important;
    bottom:0 !important;
    left: 0 !important;
}
.ui-resizable-s {
    bottom: 1px !important;
    cursor: s-resize;
    height: 9px !important;
    left: 43px !important;
   
    width: 10px!important;
}
.ui-resizable-w {
    cursor: w-resize;
    height: 10px !important;
    left: -5px !important;
    top: 20px !important;
    width: 7px !important;
}
.ui-resizable-e {
    cursor: e-resize;
    height: 100%;
    right: 0 !important;
    top: 20px !important;
    width: 7px !important;
}

.ui-icon{background: none;}


#preview4c .panel {

     min-height:50px !important ; 
}
 
  
  .brds{border:1px solid #ccc;padding: 3px; border-radius: 4px;}
  .mtop100{margin-top:10px;}
  .crp{width:39%;}
  .crps{width: 85%;}
  
    #preview5 {
    width:320px; height:480px !important;
    overflow-x:hidden; overflow-y:hidden;
    }
    #preview5 img {
    max-width:322px; max-height:482px;    
}	

#preview5c .panel {
     min-width:320px !important;
     min-height:480px !important ;    
}
  
  #preview6 { 

    width:728px; height:90px !important;
    overflow-x:hidden; overflow-y:hidden;
    }
    #preview6 img {
    max-width:728px; max-height:90px;    
}	

#preview6c .panel {
     min-width:728px !important;
     min-height:90px !important ;    
}
.btn{border-radius: 0px;}
  .active{box-shadow:1px 1px 5px rgba(0, 0, 0, 0.7);}
 .sweet-alert{width:auto !important;}
 b .mv{word-break: break-all;}
  b .mv{word-wrap: break-word;}
  
  div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
  margin-top: 20px;
  margin-left: 50px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  background-color: #5A55A3;
  background-image: #5A55A3;
  color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #5A55A3;
}

div.bhoechie-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 10px;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}
  
  
	</style>
    <div class="container">
    	<h3>Now let's create a Picture for your Advertisement</h3>
    	<div class="bordered-panel select-pic_ad">
            <form class="form-inline mtopbot20">
                <input type="hidden" name="_token" value="{!!  csrf_token()  !!}" />
                <select class="form-control" id="pic">
                    
                      <option value="My Computer" >My Computer</option>
                      <option value="Picture Gallery"  >Picture Gallery</option>
                      <option value="No Image" >No Image</option>
                </select>
            </form>
            
                <div class="row panel hidden" id="select-pic">
                	<h4 class="mtopbot30 text-center">You can select a picture relevant to your Advertisement from the gallery</h4>
                    <!-- gallery pic -->
                                        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_03.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <!-- gallery pic -->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_05.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <!-- gallery pic -->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_07.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <!-- gallery pic -->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_10.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <!-- gallery pic -->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_17.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <!-- gallery pic -->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                        <label class="vtg">
                            <input type="radio" name="gallery" />
                            <img src="themes/images/gallery/Picture-Gallery_20.jpg" alt="" class="img-responsive img-thumbnail" />
                        </label>
                    </div>
                    <!-- gallery pic end -->
                    <div class="form-group col-sm-12 text-center">
                    <a href="banner-gallery?catbind=" class="btn btn-orange btn-sm">More</a>
                    </div>
                                    </div>
                <div class="clearfix panel " id="browse-pic">
                    <div class="col-sm-8 pull-left">
                    	<div class="panel">
                    		<img src="themes/images/noimage.jpg" class="img-centered img-responsive" alt="" id="blah" />
                        </div>
                    </div>
                	<div class="col-sm-4 mtop100">
                    	Upload a Picture from your Computer 
                                <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_brw_pic_detail')}}"><i class="fa fa-question-circle"></i></a>
                           
						<div class="input-group input-group">
							
                                                        <div id="browse" class="btn btn-grey"> Upload
                                                        <input type="file" id="imgInpk" class="" />
							</div>
							
						</div>
                                <span style="font-size:13px;">Please upload .jpg or .png format image only</span>
                    	
                    </div>
                    
                </div>
                
                <hr/>
                <div class="ptopbot30 row">
                	<div class="col-sm-12 col-xs-12">
                    	<p class="large-font pull-left">Background Color  <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_show_bg_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                    	
                        <b id="bg1" style="float: left;margin-top:16px;margin-left:10px;">
                	<input id="langdemo" />
                        </b>        
                   
                  
                     
                    </div>
                    <br>
                    <div class="col-sm-12 col-xs-12" id="sample">
                    	<p class="large-font">Add Your Text <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_pic_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                    	
                            <textarea rows="1" id="area5" class="form-control" style="width:400px;clear:both;"   ></textarea>
                        <small>Text not be more than 5 words</small>
                        <small class="pull-left">*This text will appear on picture</small>	
                    </div>
                    
                   <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 bhoechie-tab-container">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
              <div class="list-group">
                <a href="#" class="list-group-item active text-center">
                  <h4 class="fa fa-image"></h4><br/>300X50
                </a>
                <a href="#" class="list-group-item text-center">
                  <h4 class="fa fa-image"></h4><br/>320X50
                </a>
                <a href="#" class="list-group-item text-center">
                  <h4 class="fa fa-image"></h4><br/>300X250
                </a>
                <a href="#" class="list-group-item text-center">
                  <h4 class="fa fa-image"></h4><br/>250X300
                </a>
                <a href="#" class="list-group-item text-center">
                  <h4 class="fa fa-image"></h4><br/>320X480
                </a>
                  <a href="#" class="list-group-item text-center">
                  <h4 class="fa fa-image"></h4><br/>728X90
                </a>
              </div>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
                <!-- flight section -->
                <div class="bhoechie-tab-content active">
                    <div class="col-sm-8" id= "preview2c">
                                    <br/>
                                     <b id="prv2" style="float:left;">
                       <input id="langdemo12" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv2txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div  id= "preview2" class="panel" style="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;"  id="save2"  class="btn btn-sm  btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                        <a href="#" title='' style="display:none;" id="dw2" class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        
                                        
                                        <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
                <!-- train section -->
                <div class="bhoechie-tab-content">
                    	<div class="col-sm-8" id= "preview4c">
                                    <br/>
                                     <b id="prv4" style="float:left;">
                       <input id="langdemo14" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv4txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div  id="preview4"  class="panel" style="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;" id="save4"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                         <a href="#" title='' style="display:none;" id="dw4"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        <a href="javascript:void(0);"  style="display:none;" id="crop4"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
    
                <!-- hotel search -->
                <div class="bhoechie-tab-content">
                    <div class="col-sm-8">
                                    <br/>
                                     <b id="prv1" style="float:left;">
                       <input id="langdemo11" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv1txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div id= "preview1" class="panel " style="display:block" >
					
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;" id="save1" class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                        <a href="#" title='' style="display:none;" id="dw1"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
                <div class="bhoechie-tab-content">
                    <div class="col-sm-8" id= "preview3c">
                                    <br/>
                                     <b id="prv3" style="float:left;">
                       <input id="langdemo13" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv3txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div  id= "preview3" class="panel" style="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;"  id="save3"  class="btn btn-sm  btn-orange"><i class="fa fa-image"></i> Create Banner</a>
                                        <a href="#" title='' style="display:none;" id="dw3" class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
                <div class="bhoechie-tab-content">
                    <div class="col-sm-8" id= "preview5c">
                                    <br/>
                                     <b id="prv5" style="float:left;">
                       <input id="langdemo15" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv5txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div  id= "preview5" class="panel" style="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;"  id="save5"  class="btn btn-sm  btn-orange"><i class="fa fa-image"></i> Create Banner</a>
                                        <a href="#" title='' style="display:none;" id="dw5"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        <a href="javascript:void(0);"  style="display:none;" id="crop5"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
                <div class="bhoechie-tab-content">
                    <div class="col-sm-8" id= "preview6c">
                                    <br/>
                                     <b id="prv6" style="float:left;">
                       <input id="langdemo16" />
                        </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="prv6txtC" style="font-size: 12px; width: 100px;float:left;">
                              <option value="16">Small</option> 
                              <option value="20">Medium</option>
                              <option value="24">Large</option>
                            </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        
                                    <div  id="preview6"  class="panel" style="">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                	<a href="javascript:;" id="save6"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                         <a href="#" title='' style="display:none;" id="dw6"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                        <a href="javascript:void(0);"  style="display:none;" id="crop6"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                                </div>
                </div>
            </div>
        </div>
  </div>
                      
                    
                    <div class="clearfix">  
                    
                        
                         
                   
                        
                    
                        <form class="gallery-form" action="cropimage_post" method="post"  name="crop_tools" id="crop_tools">
                <input type="hidden" name="select_values"  id="select_values" />
                <input type="hidden" name="_token" value="{!!  csrf_token()  !!}" />
                <input type="hidden" name="back_ground_color"  id="back_ground_color" />
           
                <input type="hidden" name="text_color"  id="text_color" />
                  
                  <input type="hidden" name="input_text"  id="input_text" />
                  
                  <input type="hidden" name="selected_image" id="selected_image" />
                  
                  <input type="hidden" name="text_top_postion"  id="text_top_postion" />
                  
                  <input type="hidden" name="text_left_postion"  id="text_left_postion" />
                  
                  <input type="hidden" name="image_left_postion"  id="image_left_postion" />
                  
                  <input type="hidden" name="image_top_postion"  id="image_top_postion" />
                  
                  <input type="hidden" name="text_size"  id="text_size" />
                  
                  <input type="hidden" name="text_style"  id="text_style" />
                  
                  <input type="hidden" name="banner_x" id="banner_x" />
                  
                  <input type="hidden" name="banner_y" id="banner_y" />
                  
                  <input type="hidden" name="cropimage_data" id="cropimage_data" />
                  <input type="hidden" name="image_height" id="image_height" />
                  <input type="hidden" name="image_width" id="image_width" />
                  <input type="hidden" name="imagefrom" id="imagefrom" />
                </form>
                        <form class="gallery-form" action="creatad-crop/upload-banner-add" method="post"  name="bnr_creation" id="bnr_creation" onsubmit="return bnr_creation();">       
                <div class="text-center mtopbot15">
<input type="hidden" name="_token" value="{!!  'csrf_token()'  !!}" />
                <input type="hidden" name="imgcrp1" id="imgcrps1" class="hcrp" value=""/>
                <input type="hidden" name="imgcrp2" id="imgcrps2" class="hcrp" value=""/>
                <input type="hidden" name="imgcrp3" id="imgcrps3" class="hcrp" value=""/>
                <input type="hidden" name="imgcrp4" id="imgcrps4" class="hcrp" value=""/>
                <input type="hidden" name="imgcrp5" id="imgcrps5" class="hcrp" value=""/>
                <input type="hidden" name="imgcrp6" id="imgcrps6" class="hcrp" value=""/>
                <input type="hidden" name="cook_key" id="cook_key" value=""/>
                    <input type="hidden" name="catbind" id="catbind" value=""/>	  
                     <input type="submit" class="btn btn-orange" value="Upload" />
                </div>
                     </form>
                
            
         </div>
    </div>
        </div>
    </div>
</body>
<!-- content area end -->  
@include('footer_inside')
<!--=========================================================code end================================================-->

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

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

<script>
    //$.noConflict();
    $(document).ready(function () {
     $('[data-toggle="popover"]').popover();
     //$("#select-pic").addClass('hidden');
            //$("#browse-pic").removeClass('hidden');
 });
 
 $('.vtg').click(function(){
     
     $('.vtg').removeClass('active');
     $(this).addClass('active');
     mypreview('active');
 })
 function bnr_creation()
 {
     alert('bnr_creation');
     return false;
 }
 
 
/*popupResult({
					src: resp
				});
    */
function popupResult(result) {
		var html;
		if (result.html) {
			html = result.html;
		}
		if (result.src) {
			html = '<img src="' + result.src + '" />';
		}
		swal({
			title: '',
			html: true,
			text: html,
			allowOutsideClick: true
		});
		setTimeout(function(){
			$('.sweet-alert').css('margin', function() {
				var top = -1 * ($(this).height() / 2),
					left = -1 * ($(this).width() / 2);

				return top + 'px 0 0 ' + left + 'px';
			});
		}, 1);
	}

 </script>

 
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<link rel="Stylesheet" type="text/css" href="themes/crp/bower_components/sweetalert/dist/sweetalert.css" />
<!-- Custom Theme JavaScript -->

<script src="themes/crp/bower_components/sweetalert/dist/sweetalert.min.js"></script>

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

{!! Html::script("themes/js/nicEdit.js"); !!}
<!-- this page js -->

   
	<script type="text/javascript">
    bkLib.onDomLoaded(function() {
      //  new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('area5');
    });
    </script>
<script type="text/javascript">
    
    
    <!-- Custom Theme JavaScript -->
    $(document).ready(function() {
    $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
        e.preventDefault();
        $(this).siblings('a.active').removeClass("active");
        $(this).addClass("active");
        var index = $(this).index();
        $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
        $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
    });
});
if($('body').find('#langdemo1').length !=0) {
	$(function() {
		$("#langdemo1").spectrum({
		  flat: false,
		  showInput: true,
		});
	});
}

$(function() {
		$("#langdemo11").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});

$(function() {
		$("#langdemo12").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});
        
        $(function() {
		$("#langdemo13").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});
        
        $(function() {
		$("#langdemo14").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});
        
        $(function() {
		$("#langdemo15").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});
        
        $(function() {
		$("#langdemo16").spectrum({
		  flat: false,
		  showInput: true,
                  clearText:'bgg2',
		});
	});
        
        $("#prv1txtC").change(function(){
            mypreview('str');
        });
        $("#prv2txtC").change(function(){
            mypreview('str');
        });
        $("#prv3txtC").change(function(){
            mypreview('str');
        });
        $("#prv4txtC").change(function(){
            mypreview('str');
        });
        $("#prv5txtC").change(function(){
            mypreview('str');
        });
        $("#prv6txtC").change(function(){
            mypreview('str');
        });
        
        
        

      $('#preview').on('click', function() { // code
          
          //for preview1
          var txtsize1=$("#prv1txtC").val();
          //for preview2
          var txtsize2=$("#prv2txtC").val();
          //for preview3
          var txtsize3=$("#prv3txtC").val();
          //for preview4
          var txtsize4=$("#prv4txtC").val();
          //for preview5
          var txtsize4=$("#prv5txtC").val();
          //for preview6
          var txtsize4=$("#prv6txtC").val();
          
           $("#preview1,#preview2,#preview3,#preview4,#preview5,#preview6").html("");
          
          //var txtsize=$("#bg3").val();
          
         // var txtstyle=$("#bg8").val();
      
      $('#crop1,#crop2,#crop3,#crop4','#crop5','#crop6').css('display','block');
      //$("#preview1,#preview2,#preview3,#preview4,#preview5,#preview6").html("");
      var color= $("#bg1 .sp-preview-inner").attr('style');
      
      $("#preview1").attr('style',color);
      
      $("#preview2").attr('style',color);
      
      $("#preview3").attr('style',color);
      
      $("#preview4").attr('style',color);
      
      $("#preview5").attr('style',color);
      
       $("#preview6").attr('style',color);
      //$('#preview1 b').css('font-size',txtsize+'px');
      var text = $("#area5").val();
      
      var bd1='';
      var bd2='';
      var bd3='';
      var bd4='';
      var bd5='';
      var bd6='';
      
      var x1=$("#prv1 .sp-preview-inner").attr('style');
      var x2=$("#prv2 .sp-preview-inner").attr('style');
      var x3=$("#prv3 .sp-preview-inner").attr('style');
      var x4=$("#prv4 .sp-preview-inner").attr('style');
      var x5=$("#prv5 .sp-preview-inner").attr('style');
      var x6=$("#prv6 .sp-preview-inner").attr('style');
      
	//var x='background-color:#fff;';
      var tcl1=x1.split('background-color:');
      var tcl2=x2.split('background-color:');
      var tcl3=x3.split('background-color:');
      var tcl4=x4.split('background-color:');
      var tcl5=x5.split('background-color:');
      var tcl6=x6.split('background-color:');
      
      if($("#pic").val()=='Picture Gallery')
      {
         var values_images = $('.gallery-pic label.active > img').attr('src');  
         bd1='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style="" /></div>' ;
         bd2='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
         bd3='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
         bd4='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
         bd5='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
         bd6='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
           $("#imagefrom").val('Picture Gallery');
      }
      else if($("#pic").val()=='My Computer')
      {
           var values_images = $('.panel >img').attr('src');
            bd1='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
            bd2='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
            bd3='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
            bd4='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
            bd5='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
            bd6='<div class="draggable "><img id="theImg" class="resizable" src="'+values_images+'" style=""/></div>' ;
          
            
            
            
            
               $("#imagefrom").val('My Computer');
      }
      else if($("#pic").val()=='No Image')
      {
           var values_images = "";
             $("#imagefrom").val('No Image');
      }
      
    
      
  

        var data1=  bd1+'<div class="mv m1" id="myDIV" style="margin-top:0,0,0,0; color:'+tcl1[1]+'; font-size:'+txtsize1+'px;">'+text+'</div>';
         var data2=  bd2+'<div class="mv m2" id="myDIV2" style="margin-top:0,0,0,0; color:'+tcl2[1]+'; font-size:'+txtsize1+'px;float:right;">'+text+'</div>';
          var data3=  bd3+'<div class="mv m3" id="myDIV3" style="margin-top:0,0,0,0; color:'+tcl3[1]+'; font-size:'+txtsize1+'px;">'+text+'</div>';
           var data4=  bd4+'<div class="mv m4" id="myDIV4" style="margin-top:0,0,0,0; color:'+tcl4[1]+'; font-size:'+txtsize1+'px;float:right;">'+text+'</div>';
            var data5=  bd5+'<div class="mv m5" id="myDIV5" style="margin-top:0,0,0,0; color:'+tcl5[1]+'; font-size:'+txtsize1+'px;">'+text+'</div>';
             var data6=  bd6+'<div class="mv m6" id="myDIV6" style="margin-top:0,0,0,0; color:'+tcl6[1]+'; font-size:'+txtsize1+'px;float:right;">'+text+'</div>';
      $("#preview1").append(data1);
        $("#preview2").append(data2);
          $("#preview3").append(data3);
            $("#preview4").append(data4);
              $("#preview5").append(data5);
                $("#preview6").append(data6);
                

     
      $("#select_values").val(color+';text='+text+';imagevalue='+values_images);
       $("#cropimage_data").val(values_images);


 //$( "#theImg .mv" ).resizable();
 
      /*  $('#preview1 #resizeDiv').draggable(
                {
        appendTo: 'body',
        scroll: false,
       
	drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	//console.log('Top:'+top+'  Left:'+left);
        
    	}
    });
        $('#preview1 #theImg').resizable({
       handles: 'n, e, s, w'
    } );
       */
    
    /*$('#preview1 #theImg').resizable().draggable({
        appendTo: 'body',
        scroll: false,
       
	drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	//console.log('Top:'+top+'  Left:'+left);
        
    	}
    });*/

$('#preview1 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        
        var left = $(this).position().left;
  

var cntrLeft = left;

    
       $('#preview1 .draggable').css('left',(cntrLeft)+ "px");
        
        
        
    	}
});

$('#preview1 .resizable').resizable({
    containment:'#preview1',
    aspectRatio: true,
    handles: 'se',
    
    stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview1 .draggable').css('height',height-2);
        $('#preview1 .draggable').css('width',width-2);
    }
    
});

$('#preview2 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	var cntrLeft = left;

    
       $('#preview2 .draggable').css('left',(cntrLeft)+ "px");
        
    	}
});

$('#preview2 .resizable').resizable({
    containment:'#preview2',
    aspectRatio: true,
    handles: 'se',
    stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview2 .draggable').css('height',height-2);
        $('#preview2 .draggable').css('width',width-2);
    }
});
$('#preview3 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	var cntrLeft = left;
        $('#preview3 .draggable').css('left',(cntrLeft)+ "px");
        
    	}
});

$('#preview3 .resizable').resizable({
     containment:'#preview3',
    aspectRatio: true,
    handles: 'se',
     stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview3 .draggable').css('height',height-2);
        $('#preview3 .draggable').css('width',width-2);
    }
});
$('#preview4 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	var cntrLeft = left;
        $('#preview4 .draggable').css('left',(cntrLeft)+ "px");
        
    	}
});

$('#preview4 .resizable').resizable({
     containment:'#preview4',
    aspectRatio: true,
    handles: 'se',
     stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview4 .draggable').css('height',height-2);
        $('#preview4 .draggable').css('width',width-2);
    }
});
$('#preview5 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	var cntrLeft = left;
        $('#preview5 .draggable').css('left',(cntrLeft)+ "px");
        
    	}
});

$('#preview5 .resizable').resizable({
    containment:'#preview5',
    aspectRatio: true,
   handles: 'se',
   stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview5 .draggable').css('height',height-2);
        $('#preview5 .draggable').css('width',width-2);
    }
});
$('#preview6 .draggable').draggable({
    containment: "parent",
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	var cntrLeft = left;
        $('#preview6 .draggable').css('left',(cntrLeft)+ "px");
        
    	}
});

$('#preview6 .resizable').resizable({
    containment:'#preview6',
    aspectRatio: true,
    handles: 'se',
    stop: function( event, ui ) {

        height = $(this).height(); 

        width = $(this).width(); 
        $('#preview6 .draggable').css('height',height-2);
        $('#preview6 .draggable').css('width',width-2);
    }
});

 //dislplay:inline-block
    
//image move Top and left data

    
     $('.mv').draggable({
        
        
	drag: function(event) {
            
        var top = $(this).position().top;
        var left = $(this).position().left;
    	}
    });
    
        });
        
        $("#save1").on("click",function(){
         var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview1 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
      var image_Tops = $("#preview1 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
         var text_lefts=$("#preview1 .m1").css("left");
        var text_lefts2=text_lefts.replace('px', '');
        
         var text_vtops=$("#preview1 .m1").css("top");
        var text_vtops2=text_vtops.replace('px', '');
        var elmnt = document.getElementById("myDIV");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
        
        
        if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview1 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
         }
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview1 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
            var text_left=  $("#text_left_postion").val();
         
         var text_tops=$("#preview1 .m1").css("top");
         $("#text_top_postion").val(text_tops);
    var text_top= $("#text_top_postion").val();
    
         var background_colorw=$("#preview1").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview1 .m1").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview1 .m1").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview1").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview1").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview1 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview1 .m1").css("font-size");

         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
         
          //$('#crop1').css('display','block');
          
          
          var image_hieght_px = $("#preview1 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_heights = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview1 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
         
         
          
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                  data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_heights+"&image_width="+image_width,
                 success: function( data ){
                     $('#dw1').css('display','block');
                     $('#dw1').attr('title',data);
                     
                     $('#dw2').css('display','none');
                     $('#dw2').attr('title',data);
                     
                     $('#dw3').css('display','none');
                     $('#dw3').attr('title',data);
                     
                     $('#dw4').css('display','none');
                     $('#dw4').attr('title',data);
                      $('#dw5').css('display','none');
                     $('#dw5').attr('title',data);
                      $('#dw6').css('display','none');
                     $('#dw6').attr('title',data);
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    $("#save2").on("click",function(){
        var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview2 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview2 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
     
      var text_lefts=$("#preview2 .m2").css("left");
        var text_lefts2=text_lefts.replace('px', '');
         if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview2 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
    }
        
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview2 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
     var text_left=  $("#text_left_postion").val();
     
         /*var text_lefts=$("#preview2 b").css("left");
          $("#text_left_postion").val(text_lefts);
   var text_left=  $("#text_left_postion").val();*/
         
         var text_tops=$("#preview2 .m2").css("top");
         $("#text_top_postion").val(text_tops);
    var text_top= $("#text_top_postion").val();
    
         var background_colorw=$("#preview2").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview2 .m2").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview2 .m2").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview2").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview2").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview2 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview2 .m2").css("font-size");
         
         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
         var image_hieght_px = $("#preview2 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_hieghts = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview2 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
         
         var elmnt = document.getElementById("myDIV2");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
         
          //$('#crop2').css('display','block');
          
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                 data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_hieghts+"&image_width="+image_width,
                 success: function( data ){
                     $('#dw1').css('display','none');
                     $('#dw2').css('display','block');
                     $('#dw2').attr('title',data);
                     
                    
                     
                     $('#dw3').css('display','none');
                     $('#dw3').attr('title',data);
                     
                     $('#dw4').css('display','none');
                     $('#dw4').attr('title',data);
                     
                     $('#dw5').css('display','none');
                     $('#dw5').attr('title',data);
                     
                     $('#dw6').css('display','none');
                     $('#dw6').attr('title',data);
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    
    $("#save3").on("click",function(){
         var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview3 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview3 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
         /*var text_lefts=$("#preview3 b").css("left");
          $("#text_left_postion").val(text_lefts);
   var text_left=  $("#text_left_postion").val();*/
        
         var text_lefts=$("#preview3 .m3").css("left");
        var text_lefts2=text_lefts.replace('px', '');
         if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview3 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
    }
        
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview3 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
     var text_left=  $("#text_left_postion").val();
         
         var text_tops=$("#preview3 .m3").css("top");
         $("#text_top_postion").val(text_tops);
    var text_top= $("#text_top_postion").val();
    
         var background_colorw=$("#preview3").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview3 .m3").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview3 .m3").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview3").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview3").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview3 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview3 .m3").css("font-size");

         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
         var image_hieght_px = $("#preview3 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_hieghts = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview3 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
         var elmnt = document.getElementById("myDIV3");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
         // $('#crop3').css('display','block');
          
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                    data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_hieghts+"&image_width="+image_width,
               success: function( data ){
                     $('#dw1').css('display','none');
                     $('#dw2').css('display','none');
                     
                     $('#dw3').css('display','block');
                     $('#dw3').attr('title',data);
                     
                     $('#dw4').css('display','none');
                     $('#dw4').attr('title',data);
                     
                      $('#dw5').css('display','none');
                     $('#dw5').attr('title',data);
                     
                     $('#dw6').css('display','none');
                     $('#dw6').attr('title',data);
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    
    $("#save4").on("click",function(){
         var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview4 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview4 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
        /* var text_lefts=$("#preview4 b").css("left");
          $("#text_left_postion").val(text_lefts);
   var text_left=  $("#text_left_postion").val();*/
        
        var text_lefts=$("#preview4 .m4").css("left");
        var text_lefts2=text_lefts.replace('px', '');
         if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview4 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
    }
        
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview4 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
     var text_left=  $("#text_left_postion").val();
         
         var text_tops=$("#preview4 .m4").css("top");
         $("#text_top_postion").val(text_tops);
    var text_top= $("#text_top_postion").val();
    
         var background_colorw=$("#preview4").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview4 .m4").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview4 .m4").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview4").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview4").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview4 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview4 .m4").css("font-size");

         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
           var image_hieght_px = $("#preview4 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_hieghts = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview4 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
          var elmnt = document.getElementById("myDIV4");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
         
         // $('#crop4').css('display','block');
          
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                     data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_hieghts+"&image_width="+image_width,
                   success: function( data ){
                     $('#dw1').css('display','none');
                     $('#dw2').css('display','none');
                   
                     $('#dw2').css('display','none');
                   
                     
                     $('#dw3').css('display','none');
                     
                     $('#dw4').css('display','block');
                     $('#dw4').attr('title',data);
                     
                      $('#dw5').css('display','none');
                     $('#dw5').attr('title',data);
                     
                     $('#dw6').css('display','none');
                     $('#dw6').attr('title',data);
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    
     $("#save5").on("click",function(){
        var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview5 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview5 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
        /*var text_lefts=$("#preview5 b");
          var position = text_lefts.position();
          $("#text_left_postion").val(position.left+'px');*/
        
        var text_lefts=$("#preview5 .m5").css("left");
        var text_lefts2=text_lefts.replace('px', '');
         if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview5 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
    }
        
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview5 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
     var text_left=  $("#text_left_postion").val();
          
         
      
          var text_tops=$("#preview5 .m5").css("top");
         $("#text_top_postion").val(text_tops);
    var text_top= $("#text_top_postion").val();
    
         var background_colorw=$("#preview5").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview5 .m5").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview5 .m5").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview5").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview5").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview5 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview5 .m5").css("font-size");

         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
         var image_hieght_px = $("#preview5 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_hieghts = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview5 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
         
         // $('#crop5').css('display','block');
           var elmnt = document.getElementById("myDIV5");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                    data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_hieghts+"&image_width="+image_width,
               success: function( data ){
                     $('#dw1').css('display','none');
                     $('#dw2').css('display','none');
                     
   			$('#dw3').css('display','none');
                     $('#dw3').attr('title',data);

                     $('#dw5').css('display','block');
                     $('#dw5').attr('title',data);
                     
                     $('#dw4').css('display','none');
                     $('#dw4').attr('title',data);
                     
                    
                     
                     $('#dw6').css('display','none');
                     $('#dw6').attr('title',data);
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    
    $("#save6").on("click",function(){
        var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview6 .draggable").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview6 .draggable").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
        var text_lefts=$("#preview6 .m6").css("left");
        var text_lefts2=text_lefts.replace('px', '');
         if($("#pic").val()=='No Image'){
            var img_wth = '0';
        }else{
         var img_wth=$("#preview6 .draggable").css("width");
        var img_wth = img_wth.replace('px', '');
    }
        
        text_lefts2 =$.trim(text_lefts2);
        
        var image_leftsk = $("#preview6 .draggable").css("left");
      
         
         text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);
         
         text_lefts =text_lefts+'px';
         
          $("#text_left_postion").val(text_lefts);
     var text_left=  $("#text_left_postion").val();
          var text_top=$("#preview6 .m6").css("top");
          
      
         $("#text_top_postion").val(text_top);
    
    
         var background_colorw=$("#preview6").css('background-color');
        $("#back_ground_color").val(background_colorw);
       var back_ground_color= $("#back_ground_color").val();
        
         var input_text=$("#preview6 .m6").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview6 .m6").css('color');
            $("#text_color").val(input_text_color);
          var text_color = $("#text_color").val();
  
         var banner_xs=$("#preview6").css('width');
             $("#banner_x").val(banner_xs);
        var banner_x= $("#banner_x").val();
   
         var banner_ys=$("#preview6").css('height');
         $("#banner_y").val(banner_ys);
         var banner_y= $("#banner_y").val();
                          
            var selected_image= $("#preview6 img").attr('src');
          $("#selected_image").val(selected_image);
          
          var selected_image=  $("#selected_image").val();
          
          var text_size=$("#preview6 .m6").css("font-size");

         $("#text_size").val(text_size);
         var text_size= $("#text_size").val();
         
         var image_hieght_px = $("#preview6 #theImg").css("height");
        
         
         $("#image_height").val(image_hieght_px);
         
         var image_hieghts = $("#image_height").val();
         
      
         
         var image_width_px = $("#preview6 #theImg").css("width");
   
         $("#image_width").val(image_width_px);
         
          var image_width = $("#image_width").val();
         
         // $('#crop6').css('display','block');
           var elmnt = document.getElementById("myDIV6");
       
        var x = elmnt.offsetLeft;
	var y = elmnt.offsetTop;
        
        x= x+'px';
        y=y+'px';
            var data="";
           $.ajax({
                 url:'banner-creation',
                 type:'POST',
                 datatype:'json',
                    data:"imagefrom="+ imagefrom +"&selected_image="+selected_image+"&banner_x="+banner_x+"&banner_y="+banner_y+"&text_color="+text_color+"&input_text="+input_texts+"&back_ground_color="+back_ground_color+"&text_left="+x+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+y+"&text_size="+text_size+"&image_hieghts="+image_hieghts+"&image_width="+image_width,
               success: function( data ){
                     $('#dw1').css('display','none');
                     $('#dw2').css('display','none');
                     
   			$('#dw3').css('display','none');
                     $('#dw3').attr('title',data);

                     $('#dw6').css('display','block');
                     $('#dw6').attr('title',data);
                     
                     $('#dw4').css('display','none');
                     $('#dw4').attr('title',data);
                     
                      $('#dw5').css('display','none');
                     $('#dw5').attr('title',data);
                     
                    
                    
                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown+"---"+ textStatus);
        }
    
           });
    
    });
    
    
    
      $("#dw1").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw2").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw3").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw4").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw5").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw6").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
    function cnfrm(strflg){
      if(strflg==true){
       var pv= $('.sweet-alert img').attr('src');
        $( ".hcrp" ).each(function() {
            if($.trim($( this ).val())==''){
                $( this ).val(pv);
                var thisids=$(this).attr('id');
               
                if($.trim(thisids)=='imgcrps1'){
                     $('#save1').css('display','none');
                     $('#dw1').css('display','none'); 
                }
                if($.trim(thisids)=='imgcrps2'){
                    $('#save2').css('display','none');
                     $('#dw2').css('display','none'); 
                }
                if($.trim(thisids)=='imgcrps3'){
                    $('#save3').css('display','none');
                     $('#dw3').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps4'){
                     $('#save4').css('display','none');
                     $('#dw4').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps5'){
                     $('#save5').css('display','none');
                     $('#dw5').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps6'){
                      $('#save6').css('display','none');
                     $('#dw6').css('display','none'); 
                }
                 $('#dw1').css('display','none');
                 $('#dw2').css('display','none');
                 $('#dw3').css('display','none');
                 $('#dw4').css('display','none');
                 $('#dw5').css('display','none');
                 $('#dw6').css('display','none');
                 breakOut = true;
               
                 return false;
            }
          });
        
        }
    }
    
    $("#crop1").on("click",function(){
       
          
        $("#crop_tools").submit()

    });
    
    
     $("#crop2").on("click",function(){
       
          
        $("#crop_tools").submit()

    });
    
        
     $("#crop3").on("click",function(){
       
          
        $("#crop_tools").submit()

    });
    
    
       $("#crop4").on("click",function(){
       
          
        $("#crop_tools").submit()

    });
    
    
    $("#crop5").on("click",function(){
       $("#crop_tools").submit() 
    });
    
    
       $("#crop6").on("click",function(){
       $("#crop_tools").submit() 
    });
    
    
       $(".rfs").on("click",function(){
       window.location.href='banner-page-creation';
    });
    
   function mypreview(str)
   {
       //alert(str);
       $('#preview').trigger('click');
       
    }
    
    
    
    function readURLK(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
                mypreview('mycomputer');
            }
            
            reader.readAsDataURL(input.files[0]);
            
        }
    }

    $("#imgInpk").change(function(){
        readURLK(this);
    });
    
    $("#area5").on('keyup',function postinput(){
        var v = wordCount( this.value );
        if(v.words<=5){
        mypreview('text');
        }else{alert('Sorry, you cannot enter text more than 5 words.');}
    });
    
  
  function wordCount( val ){
    var wom = val.match(/\S+/g);
    return {
        charactersNoSpaces : val.replace(/\s+/g, '').length,
        characters         : val.length,
        words              : wom ? wom.length : 0,
        lines              : val.split(/\r*\n/).length
    };
}
  
        
    
</script>

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

<script>
    /* $(document).ready(function () {
     $('[data-toggle="popover"]').popover();
 });*/
 </script>   

</body>

</html>