<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>1. Basic</title>
      
		  {{ style(mix('css/jquery-ui.css', 'vendor/rvsitebuilder/core')) }}
          {{ style(@mixcdn('css/service-basic.css', 'vendor/rvsitebuilder/wysiwyg')) }}
		  {{ style(@mixcdn('css/spectrum.css', 'vendor/rvsitebuilder/wysiwyg')) }}
		  {{ style(@mixcdn('css/loading-bar.css', 'vendor/rvsitebuilder/wysiwyg')) }}
		  
        
    </head>
    <style>



/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}   
body{
	background:rgba(0,0,0,0.3) !important;
	color:#fff;
	position:relative;
	font-family: Arial, Tahoma;
	margin:0 !important;;
}    
.leftmenu {
	/*width: 15%;*/
	float: left;
	min-height: 500px;
	overflow-y: auto;
}

.centermenu {
	/*width: 70%;*/
	width: 84%;
	float: left;
	background: transparent;
	height:100%;
	position:fixed;
	float:right;
	padding-top: 20px;
	min-width:990px;
}

.rightmenu {
    width: 15%;
    min-width: 280px;
    /* float: right; */
    background: #000;
    position: fixed;
    height: 100%;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
    padding-left: 5px;
}
.body-container {
	width: 100%;
	background:transparent !important;
}

.active {
	border: 1px solid #999999;
	background-color: #cccccc;
	color: #666666;
}

.main-tool {
	color: #fff !important;
	background-color: #464646 !important;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center; 
	width: 100%;
	height: 40px;
}
.overlaypanel {
	background-color: black;
	opacity: 0.5;
	position: absolute;
	left: 0px;
	top: 0px;
    z-index: 9000;
}
#UL{
    left: 50%;
    right: 50%;
    top: 100px;
}
.txt-title-panel {
    font-family: Arial, Tahoma;
    font-weight: normal;
    font-size: 22px;
}
h1 {
    font-family: Arial, Tahoma;
    font-weight: normal;
    font-size: 20px;
    padding: 5px;
    padding-bottom:0px;
}
h3 {
    font-size: 13px;
}
h3.titleoption {
    display:block;
    background: rgba(0,0,0,0.9);
    padding:10px;
    border:rgba(255,255,255,0.15) solid 1px;
    margin-top:-1px !important;
    color:#868686;
    text-decoration:none;
    font-size: 16px;
    border-radius:1px;
}
.rvdesignoption {
    background: rgba(0,0,0,0.6);
    color:#868686;
    cursor: pointer;
    padding: 18px;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    padding:1px;
    font-family: Arial, Tahoma;
}
.rvdesignoption .title {
    color:#868686;
}
.rvdesignoption a.toggle {
    display:block;
    background: rgba(0,0,0,0.9);
    padding:10px;
    border:rgba(255,255,255,0.15) solid 1px;
    margin-top:-1px;
    color:#868686;
    text-decoration:none;
    font-size: 16px;
}
.rvdesignoption a.toggle:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #fff;
    float: right;
    margin-left: 5px;
}
.rvdesignoption .rvinner {
    /*background:transparent;*/
    background:#141417;
    padding:5px;
    color:#868686;
    text-align:left; 
    font-size: 14px;
    border:0;
    border-radius:0;
}
.rvdesignoption button{
    background:#121212; 
    border:rgba(255,255,255,0.15) solid 1px;
    padding:3px 5px;
    border-radius:2px;
    color:#868686;
    margin-bottom:3px;
    font-size: 12px;
    cursor:pointer;
}
.rvdesignoption button:focus{
    outline:0;
    box-shadow:none;
}
.rvdesignoption .active {
    border: inset 1px #424242;
    background-color: #252525;
    color: #000000;
}
.rvdesignoption .menu-item {
    padding: 0px; 
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    width: 100%;
}
.rvdesignoption .menu-item:hover {
    background:transparent; 
}
.rvdesignoption .txtvalue {
    color:#e4d167;
}
.rvdesignoption input[type="range"]{
     width:100%;
}
.rvdesignoption .rvpanel {
     text-align:left;
}
.rvdesignoption .rvpanel .row{
     margin-bottom:5px;
}
.rvdesignoption .rvpanel .rvgroup {
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.09); */
}
.rvdesignoption .textTools {
    text-align:left;
}
.rvdesignoption .right {
    float:right;
}
.rvdesignoption .left {
    float:left;
}
.rvdesignoption .clearit {
    padding:0;
    amrgin:0;
}
.main-tool {
    color: #fff !important;
    background: rgba(0,0,0,0.9) !important;
    border-radius: 0px; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    /*border:rgba(255,255,255,0.15) solid 1px !important;*/
    text-align:left;
}
.main-tool button{
    background: #07d;
    padding: 7px 10px;
    color: #fff;
    border-radius: 1px;
    border: 0;
    min-width:98%;
    font-size: 14px;
    margin-right:2px;
}
button.btn, .btn{
    background: #07d !important;
    padding: 7px 10px !important;
    color: #fff !important;
    border-radius: 1px !important;
    border: 0 !important;
    min-width:50px !important;
    font-size: 14px !important;
    margin-right:2px !important;
} 
.btn-cancel{
    background: #484848 !important;
    padding: 7px 10px !important;
    color: #fff !important;
    border-radius: 1px !important;
    border: 0 !important;
    min-width:50px !important;
    font-size: 14px !important;
    margin-right:2px !important;
}
.btn:hover, .btn-cancel:hover{
    opacity:0.8;
}
.btn-number {
    border:0;
    padding:2px;
}

.ui-widget-header {
    border: 1px solid #000;
    color: #868686;
    font-weight: bold;
    background: #000;
} 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #000;
    background: #000000; 
    font-weight: normal;
    color: #868686;
    border: 1px solid #f5f5f52e;
    border-bottom: 0;
    border-radius: 0;
    margin-left: -1px;
}
.ui-state-default, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
    border: 1px solid #000;
    background: #000000; 
    font-weight: normal;
    color: #868686;
    border: 1px solid #f5f5f52e;
    border-bottom: 0;
    border-radius: 0;
    margin-left: -1px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #f5f5f52e;
    background: #ffffff14;
    font-weight: normal;
    color: #212121;
    outline:0;
    box-shadow:none;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 0 1px 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: 5px 14px;
    text-decoration: none;
    font-size: 14px;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #888;
    text-decoration: none;
     outline:0;
    box-shadow:none;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none; 
    outline:0;
    box-shadow:none;
} 
.loading{
    left: 50%;
    top: 30%;
    position: fixed;
}

/* Overwrite Color Picker */
.sp-container, 
.sp-clear {
     border: 1px solid rgba(255, 255, 255, 0.15);
}
.sp-container {
    background-color:rgba(0,0,0,0.5);
}
.sp-picker-container {
    border-left:0;
}
.sp-container.sp-flat {
    width:100%;
}
.sp-cf {
    width:245px;
}
.sp-color {
    border:solid 1px #2b2b2b;
}
.sp-dragger {
    height:7px;
    width:7px;
}
.sp-clear-enabled .sp-hue {
    height: 82.5%;
}
.sp-input, .sp-input:focus {
    color:#b3b3b3;
    background:#000;
    border: 1px solid #f5f5f52e;
    border-radius:1px;
    width:245px;
    outline:0;
    box-shadow:none;
}
</style>

<body>
    
    
   <div class="container">  
        <div class="body-container">
            <div class="leftmenu"></div>
            <div class="tui-image-editor-controls" style="display:none;">
                <div class="header">
                    <img class="logo">
                    <span class="name"> Default option </span>
                    <ul class="menu">
                        <li class="menu-item border input-wrapper">
                            Load
                            <input type="file" accept="image/*" id="input-image-file">
                        </li>
                        <li class="menu-item border" id="btn-download">Download</li>
                    </ul>
                </div>
                <ul class="menu">
                    <li class="menu-item disabled" id="btn-undo">Undo</li>
                    <li class="menu-item disabled" id="btn-redo">Redo</li>
                    <li class="menu-item" id="btn-clear-objects">ClearObjects</li>
                    <li class="menu-item" id="btn-remove-active-object">RemoveActiveObject</li>
                    <li class="menu-item" id="btn-crop">Crop</li>
                    <li class="menu-item" id="btn-flip">Flip</li>
                    <li class="menu-item" id="btn-rotation">Rotation</li>
                    <li class="menu-item" id="btn-draw-line">DrawLine</li>
                    <li class="menu-item" id="btn-draw-shape">Shape</li>
                    <li class="menu-item" id="btn-add-icon">Icon</li>
                    <li class="menu-item" id="btn-text">Text</li>
                    <li class="menu-item" id="btn-mask-filter">Mask</li>
                    <li class="menu-item" id="btn-image-filter">Filter</li>
                </ul>
                <div class="sub-menu-container" id="crop-sub-menu">
                    <ul class="menu">
                        <li class="menu-item" id="btn-apply-crop">Apply</li>
                        <li class="menu-item" id="btn-cancel-crop">Cancel</li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="flip-sub-menu">
                    <ul class="menu">
                        <li class="menu-item" id="btn-flip-x">FlipX</li>
                        <li class="menu-item" id="btn-flip-y">FlipY</li>
                        <li class="menu-item" id="btn-reset-flip">Reset</li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="rotation-sub-menu">
                    <ul class="menu">
                        <li class="menu-item" id="btn-rotate-clockwise">Clockwise(30)</li>
                        <li class="menu-item" id="btn-rotate-counter-clockwise">Counter-Clockwise(-30)</li>
                        <li class="menu-item no-pointer"><label>Range input<input id="input-rotation-range" type="range" min="-360" value="0" max="360"></label></li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
                <div class="sub-menu-container menu" id="draw-line-sub-menu">
                    <ul class="menu">
                        <li class="menu-item">
                            <label><input type="radio" name="select-line-type" value="freeDrawing" checked="checked"> Free drawing</label>
                            <label><input type="radio" name="select-line-type" value="lineDrawing"> Straight line</label>
                        </li>
                        <li class="menu-item">
                            <div id="tui-brush-color-picker">Brush color</div>
                        </li>
                        <li class="menu-item"><label class="menu-item no-pointer">Brush width<input id="input-brush-width-range" type="range" min="5" max="30" value="12"></label></li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="draw-shape-sub-menu">
                    <ul class="menu">
                        <li class="menu-item">
                            <label><input type="radio" name="select-shape-type" value="rect" checked="checked"> rect</label>
                            <label><input type="radio" name="select-shape-type" value="circle"> circle</label>
                            <label><input type="radio" name="select-shape-type" value="triangle"> triangle</label>
                        </li>
                        <li class="menu-item">
                            <select name="select-color-type">
                                <option value="fill">Fill</option>
                                <option value="stroke">Stroke</option>
                            </select>
                            <label><input type="checkbox" id="input-check-transparent">transparent</label>
                            <div id="tui-shape-color-picker"></div>
                        </li>
                        <li class="menu-item"><label class="menu-item no-pointer">Stroke width<input id="input-stroke-width-range" type="range" min="0" max="300" value="12"></label></li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="icon-sub-menu">
                    <ul class="menu">
                        <li class="menu-item">
                            <div id="tui-icon-color-picker">Icon color</div>
                        </li>
                        <li class="menu-item border" id="btn-register-icon">Register custom icon</li>
                        <li class="menu-item icon-text" data-icon-type="arrow">➡</li>
                        <li class="menu-item icon-text" data-icon-type="cancel">✖</li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="text-sub-menu">
                    <ul class="menu">
                        <li class="menu-item">
                            <div>
                                <button class="btn-text-style" data-style-type="b">Bold</button>
                                <button class="btn-text-style" data-style-type="i">Italic</button>
                                <button class="btn-text-style" data-style-type="u">Underline</button>
                            </div>
                            <div>
                                <button class="btn-text-style" data-style-type="l">Left</button>
                                <button class="btn-text-style" data-style-type="c">Center</button>
                                <button class="btn-text-style" data-style-type="r">Right</button>
                            </div>
                        </li>
                        <li class="menu-item"><label class="no-pointer"><input id="input-font-size-range" type="range" min="10" max="100" value="10"></label></li>
                        <li class="menu-item">
                            <div id="tui-text-color-picker">Text color</div>
                        </li>
                       
                    </ul>
                </div>
                <div class="sub-menu-container" id="filter-sub-menu">
                    <ul class="menu">
                        <li class="menu-item border input-wrapper">
                            Load Mask Image
                            <input type="file" accept="image/*" id="input-mask-image-file">
                        </li>
                        <li class="menu-item" id="btn-apply-mask">Apply mask filter</li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
                <div class="sub-menu-container" id="image-filter-sub-menu">
                    <ul class="menu">
                        <li class="menu-item align-left-top">
                            <table>
                                <tbody>
                                    <tr>
                                        <td><label><input type="checkbox" id="input-check-grayscale">Grayscale</label></td>
                                        <td><label><input type="checkbox" id="input-check-invert">Invert</label></td>
                                        <td><label><input type="checkbox" id="input-check-sepia">Sepia</label></td>
                                    </tr>
                                    <tr>
                                        <td><label><input type="checkbox" id="input-check-sepia2">Sepia2</label></td>
                                        <td><label><input type="checkbox" id="input-check-blur">Blur</label></td>
                                        <td><label><input type="checkbox" id="input-check-sharpen">Sharpen</label></td>
                                    </tr>
                                    <tr>
                                        <td><label><input type="checkbox" id="input-check-emboss">Emboss</label></td>
                                    </tr>
                                </tbody>
                            </table>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-remove-white">RemoveWhite</label><br>
                                <label>Threshold<input class="range-narrow" id="input-range-remove-white-threshold" type="range" min="0" value="60" max="255"></label><br>
                                <label>Distance<input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" value="10" max="255"></label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-brightness">Brightness</label><br>
                                <label>Value<input class="range-narrow" id="input-range-brightness-value" type="range" min="-255" value="100" max="255"></label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-noise">Noise</label><br>
                                <label>Value<input class="range-narrow" id="input-range-noise-value" type="range" min="0" value="100" max="1000"></label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-gradient-transparancy">GradientTransparency</label><br>
                                <label>Value<input class="range-narrow" id="input-range-gradient-transparency-value" type="range" min="0" value="100" max="255"></label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-pixelate">Pixelate</label><br>
                                <label>Value<input class="range-narrow" id="input-range-pixelate-value" type="range" min="2" value="4" max="20"></label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-tint">Tint</label><br>
                                <div id="tui-tint-color-picker"></div>
                                <label>Opacity
                                <input class="range-narrow" id="input-range-tint-opacity-value" type="range" min="0" value="1" max="1" step="0.1">
                                <span id="input-range-tint-opacity-values"></span>
                                </label>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-multiply">Multiply</label>
                                <div id="tui-multiply-color-picker"></div>
                            </p>
                        </li>
                        <li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-blend">Blend</label>
                                <div id="tui-blend-color-picker"></div>
                                <select name="select-blend-type">
                                    <option value="add" selected>Add</option>
                                    <option value="diff">Diff</option>
                                    <option value="diff">Subtract</option>
                                    <option value="multiply">Multiply</option>
                                    <option value="screen">Screen</option>
                                    <option value="lighten">Lighten</option>
                                    <option value="darken">Darken</option>
                                </select>
                            </p>
                        </li><li class="menu-item align-left-top">
                            <p>
                                <label><input type="checkbox" id="input-check-color-filter">ColorFilter</label><br>
                                <label>Threshold<input class="range-narrow" id="input-range-color-filter-value" type="range" min="0" value="45" max="255"></label>
                            </p>
                        </li>
                        <li class="menu-item close">Close</li>
                    </ul>
                </div>
            </div>
            </div>
             <img class="loading" src="{{ URL::to('/') }}/vendor/rvsitebuilder/wysiwyg/theme/uikit/images/loading08.gif"width="100" height="100" border="0" align="absmiddle" />
            <div class="centermenu tui-image-editor">
           
            </div>
            
            <div class="rightmenu " >
 

  
<h1><lang>Custom Options</lang></h1>
<div class="main-tool">
    <button class="cfigUndoRedo" cmd="undo" style="display:none;">Undo</button>
    <button class="cfigUndoRedo" cmd="redo"style="display:none;">Redo</button>
    <button class="cfigSave" cmd="save">Save</button>             
</div>
  
  <div id="tabs" class="rvdesignoption" style="display:none;">
                  <ul>
                    <li><a href="#tabs-Crop"><i class="section-icon icon-team"></i><lang>Crop</lang></a></li>
                    <li><a href="#tabs-AddText"><i class="uk-icon uk-icon-font"></i><lang>Text</lang></a></li>
                    <li><a href="#tabs-rotation"><i class="uk-icon uk-icon-rotate-right"></i><lang>Rotation</lang></a></li>
                    <li><a href="#tabs-FilterColor"><i class="uk-icon uk-icon-filter"></i><lang>Filter</lang></a></li>
                  </ul>
                  
    <div class="rvinner" id="tabs-Crop">
      
           <div class="rvpanel">
				<div class="row"><button class="btnCrop" style="display:none;"><lang>Crop</lang></button></div>
				<div style="display: block;width: 100%;background: #141417;height: auto;min-height: 50px;">
				<div class="row sub-menu-container menuCrop left" style="display: none;">
					<ul class="menu">
						<li class="menu-item btn" id="applyCrop" style="width:80px;"><lang>Apply</lang></li>
						<li class="menu-item btn btn-cancel" id="cancelCrop" style="display:none; width:80px;"><lang>Cancel</lang></li>
					</ul>
					<div class="clearit"></div>
				</div>
				<div class="clearit"></div>
				</div>
				<div class="clearit"></div>
		   </div>
     
    </div>
  
   
    <div class="rvinner" id="tabs-AddText" style="display:none;">
      
          <div class="rvpanel">
			    <div class="row"><button class="configText"><lang>Add Text</lang></button></div>
				<div>
					<ul class="menu textTools" style="display: none;">
						<li>
						<div class="rvgroup" >
						    <div class="row"><span class="title"><lang>Style</lang></span></div>
							<div class="row">
								<button class="textStyle" act="fontWeight" cmd="bold">Bold</button>
								<button class="textStyle" act="fontStyle" cmd="italic">Italic</button>
								<button class="textStyle" act="textDecoration" cmd="underline">Underline</button>
							</div>
							<div class="row"><span class="title"><lang>Align</lang></span></div>
							<div class="row">
								<button class="textStyle" act="textAlign" cmd="left">Left</button>
								<button class="textStyle" act="textAlign" cmd="center">Center</button>
								<button class="textStyle" act="textAlign" cmd="right">Right</button>
							</div>
						</div>	
						</li>
						<li>
						  <div class="rvgroup">
						    <div class="row"><span class="title"><lang>Text Size</lang></span></div>
						    <label class="no-pointer"><input id="textSizeRange" type="range" min="10" max="100" value="10"></label>
						    <div><span class="title"><lang>Value</lang></span>: <span id="textSizeRange-value" class="txtvalue">10</span></div>
						  </div>
						</li>
						<li>
						    <div class="" style="text-align: center;">
							   <div id="textColor" class="textColor"><lang>Text color</lang></div>
						    </div>
						</li>

					</ul>
				</div>
			</div>	
      </div>
      
   
    <div class="rvinner" id="tabs-rotation" style="display:none;">
      
        <div class="rvpanel">
			<div class="rvgroup">
			   <div class="row"><span class="title"><lang>Flip</lang></span> <button class="configFlip" cmd="X">X</button> <button class="configFlip" cmd="Y">Y</button></div>
			</div>   
            <div class="rvgroup">
               <div class="row">
                 <span class="title"><lang>Rotation</lang></span>
                 <button class="RotationRange" value="0">reset 0</button>
                 <button class="RotationRange" value="45">45</button>
                 <button class="RotationRange" value="90">90</button>
                 <button class="RotationRange" value="135">135</button>
                 <button class="RotationRange" value="180">180</button>
               </div>
               <div class="row"><input id="configRotationRange" list="tickmarks" type="range" min="-360" value="0" max="360" step="1"></div>
			   <div class="row"><lang>Value</lang>: <input id ="configRotationNumber" style="width:50px;" type="number"
			   min="-360" max="360" step="1" value="0" name="configRotationNumber" class="btn-number"></div>
            </div>
		</div>
      
      
    </div>
    
   
    <div class="rvinner" id="tabs-FilterColor" style="display:none;">
      
      <div class="rvpanel">
			<div class="rvgroup">
              <div class="row"><span class="title"><lang>Brightness</lang></span></div> 
              <div class="row"><input class="configFilter-range" id="btn-Brightness" type="range" value="0" min="0" value="60" max="255" cmd="brightness"></div>
              <div><lang>Value</lang>: <span id="btn-Brightness-value" class="txtvalue">0</span></div>
            </div>
            
            <div class="rvgroup">  
              <div class="row"><span class="title"><lang>Contrast</lang></span></div> 
              <div class="row"><input class="configFilter-range" id="btn-Contrast" type="range" min="0" value="0" max="255"cmd="contrast"></div>
              <div><lang>Value</lang>: <span id="btn-Contrast-value" class="txtvalue">0</span></div>
            </div>  
            
            <div class="rvgroup">   
              <div class="row"><span class="title"><lang>Effect</lang></span></div>
              <div>
				<button class="configFilter" cmd="Invert"><lang>Invert</lang></button>
				<button class="configFilter" id="btn-imageGrayscale" cmd="Grayscale"><lang>Grayscale</lang></button>
				<button class="configFilter" cmd="Sepia2"><lang>Sepia</lang></button>
				<button class="configColor" cmdmain="Sharpen"><lang>Sharpen</lang></button>
				<button class="configColor" cmdmain="Emboss"><lang>Emboss</lang></button>
				<button class="configColor" cmdmain="Blur"><lang>Blur</lang></button>
              
				<button class="configColor" cmd="#545554" cmdmain="blend"
					mode="multiply"><lang>Night</lang></button>
				<!-- <button class="configColor" cmd="#545554" cmdmain="multiply">Night</button> -->
				<button class="configColor" cmd="#ec8a00" cmdmain="tint"
					opacity="0.3"><lang>Warming</lang></button>
				<button class="configColor" cmd="#006dff" cmdmain="tint"
					opacity="0.3"><lang>Cooling</lang></button>

			 </div>
			</div>
      
      </div>
    </div>
  
</div>   
     
     
             
     <!--  Tanawat 
      <div>      
          
            <div class="header">
                    
                    <span class="name"> Custom option </span>
                   
                </div>
                <div class="main-tool">
               
                <button class="cfigUndoRedo" cmd="undo" style="display:none;">Undo</button>
                <button class="cfigUndoRedo" cmd="redo"style="display:none;">Redo</button>
                <button class="cfigSave" cmd="save">Save</button>
                
                </div>
                <div id="tabs" style="display:none;">
                  <ul>
                    <li><a href="#tabs-Crop0"><i class="uk-icon uk-icon-crop"></i>Crop </a></li>
                    <li><a href="#tabs-AddText0"><i class="uk-icon uk-icon-font"></i>Add Text</a></li>
                    <li><a href="#tabs-rotation0"><i class="uk-icon uk-icon-rotate-right"></i>Rotation</a></li>
                    <li><a href="#tabs-FilterColor0"><i class="uk-icon uk-icon-filter"></i>Filter color</a></li>
                  </ul>
				<div id="tabs-Crop0">
					<button class="btnCrop" style="display:none;">Crop</button>
					<div class="sub-menu-container menuCrop" style="display: none;">
						<ul class="menu">
							<li class="menu-item" id="applyCrop">Apply</li>
							<li class="menu-item" id="cancelCrop" style="display:none;">Cancel</li>
						</ul>
					</div>
				</div>
				<div id="tabs-AddText0">
					<button class="configText">Add Text</button>
					<ul class="menu textTools" style="display: none;">
						<li class="menu-item">
							<div>

								<button class="textStyle" act="fontWeight" cmd="bold">Bold</button>
								<button class="textStyle" act="fontStyle" cmd="italic">Italic</button>
								<button class="textStyle" act="textDecoration" cmd="underline">Underline</button>
							</div>
							<div>
								<button class="textStyle" act="textAlign" cmd="left">Left</button>
								<button class="textStyle" act="textAlign" cmd="center">Center</button>
								<button class="textStyle" act="textAlign" cmd="right">Right</button>
							</div>
						</li>
						<li class="menu-item">
						<div class="row"><span class="title">Text Size</span></div>
						<label class="no-pointer"><input
								id="textSizeRange" type="range" min="10" max="100" value="10">
								</label>
								<p>Value: <span id="textSizeRange-value" class="txtvalue">10</span></p>
								</li>
						<li class="menu-item">
							<div id="textColor" class="textColor">Text color</div>
						</li>

					</ul>
				</div>
				<div id="tabs-rotation0">
				flip <button class="configFlip" cmd="X">X</button> <button class="configFlip" cmd="Y">Y</button>
               <br>
              	Rotation
              <button class="RotationRange" value="0">reset 0</button>
              <button class="RotationRange" value="45">45</button>
              <button class="RotationRange" value="90">90</button>
              <button class="RotationRange" value="135">135</button>
              <button class="RotationRange" value="180">180</button>

              <input id="configRotationRange" list="tickmarks" type="range" min="-360" value="0" max="360" step="1">
			  <p>Value: <input id ="configRotationNumber" style="width:50px;" type="number"
			   min="-360" max="360" step="1" value="0" name="configRotationNumber"></p>

				</div>
				<div id="tabs-FilterColor0">
				
              Brightness <input class="configFilter-range" id="btn-Brightness" type="range" value="0" min="0" value="60" max="255" cmd="brightness">
              <p>Value: <span id="btn-Brightness-value">0</span></p>
              <br>
              Contrast <input class="configFilter-range" id="btn-Contrast" type="range" min="0" value="0" max="255"cmd="contrast">
              <p>Value: <span id="btn-Contrast-value">0</span></p>
              <br>
             
              <div>Effect</div>
				<button class="configFilter" cmd="Invert">Invert</button>
				<button class="configFilter" id="btn-imageGrayscale" cmd="Grayscale">Grayscale</button>
				<button class="configFilter" cmd="Sepia2">Sepia</button>
				<button class="configColor" cmdmain="Sharpen">Sharpen</button>
				<button class="configColor" cmdmain="Emboss">Emboss</button>
				<button class="configColor" cmdmain="Blur">Blur</button>


				<button class="configColor" cmd="#545554" cmdmain="blend"
					mode="multiply">Night</button>
				<button class="configColor" cmd="#545554" cmdmain="multiply">Night</button>
				<button class="configColor" cmd="#ec8a00" cmdmain="tint"
					opacity="0.3">Warming</button>
				<button class="configColor" cmd="#006dff" cmdmain="tint"
					opacity="0.3">Cooling</button>

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

      </div>
 </div>
       {{ script(mix('js/jquery-ui.js', 'vendor/rvsitebuilder/core')) }}
       {{ script(@mixcdn('full-image-editor.js', 'vendor/rvsitebuilder/wysiwyg')) }}

<script>

        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>

       var wexSaveimage = 'http://192.168.100.99/admin/wysiwyg/common/saveimage';
       var wex = JSON.parse("{!! addslashes(json_encode($wex))  !!}");
		console.log('== wex: wysiwyg export variable from UikitController ==');
		console.log(wex);
       </script>


    </body>
</html>