@extends('layouts.dashboard')

@section('title', 'Catalog Builder')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
@endsection

@section('content')
<div class="padding-top40"></div>
<div class="bs-example">
	<div class="container-fluid">
		<div class="row">
			<div class="builder">
				<br>
				<div class="col-md-3">
					<div class="bg-info p-4 w-100 h-100">
						<div class="border">
							<button onclick="$('.html').text($('.myBuilder').html()); $('.html').toggle();">View HTML</button>
							<div id="html" class="html bg-white" style="display: none;"></div>
							<br>
						</div>
						<div class="border">
							<button class="text-center" data-toggle="collapse" data-target="#page">Page Setup</button>
							<div id="page" class="collapse">
								<form class="">
									<div class="form-group">
									    <label for="exampleInputEmail1">Layout</label>
									    <select name="pageLayout" class="form-control">
									    	<option value="landscape">Landscape</option>
									    	<option value="portrait">Portrait</option>
									    </select>
								  	</div>
								  	<div class="form-group">
						              	<label for="position-bottom-left">Background Color</label>
						              	<input type="text" id="position-bottom-left" class="form-control pagebg" data-position="bottom left" value="#0088cc">
						            </div>
						            <div class="input-group mb-3">
						              	<label for="position-bottom-left">Border (Top)</label>
									  	<input type="number" class="form-control pageBorderTop" value="0">
									  	<label for="position-bottom-left">Border (Left)</label>
									  	<input type="number" class="form-control pageBorderLeft" value="0">
									  	<label for="position-bottom-left">Border (Bottom)</label>
									  	<input type="number" class="form-control pageBorderBottom" value="0">
									  	<label for="position-bottom-left">Border (Right)</label>
									  	<input type="number" class="form-control pageBorderRight" value="0">
									</div>
								  	<div class="form-group">
						              	<label for="position-bottom-left">Border Color</label>
						              	<input type="text" id="position-bottom-left" class="form-control pageBorderColor" data-position="bottom left" value="#0088cc">
						            </div>
								</form>
							</div>
							<br>
						</div>
						<div class="border">
							<button class="text-center" data-toggle="collapse" data-target="#sections">Sections</button>
							<div id="sections" class="collapse">
								<div class="row">
									<div class="col-md-6 border p-4 text-center">
										<i class="far fa-2x fa-square"></i>
										<br>
										<b>Block</b>
										<br>
										<button class="btn btn-sm btn-info addBlock">Add</button>
									</div>
									<div class="col-md-6 border p-4 text-center">
										<i class="far fa-2x fa-heading"></i>
										<br>
										<b>Heading</b>
										<br>
										<button class="btn btn-sm btn-info addHeading">Add</button>
									</div>
									<div class="col-md-6 border p-4 text-center">
										<i class="far fa-2x fa-image"></i>
										<br>
										<b>Image</b>
										<br>
										<button class="btn btn-sm btn-info addImage">Add</button>
									</div>
									<div class="col-md-6 border p-4 text-center">
										<i class="far fa-2x fa-text-size"></i>
										<br>
										<b>Text</b>
										<br>
										<button class="btn btn-sm btn-info addText">Add</button>
									</div>
									<div class="col-md-6 border p-4 text-center">
										<i class="far fa-2x fa-table"></i>
										<br>
										<b>Table</b>
										<br>
										<button class="btn btn-sm btn-info addTable">Add</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-9 myBuilder">
					<!-- <page size="A4">
						<div id="grid-snap drag-1" class="draggable element" data-x="20" data-y="20" style="width: 329.148px; height: 416.534px; transform: translate(20px, 20px);">
						</div>
					</page> -->

					<page size="A4"> <div id="grid-snap drag-1" class="draggable element selected" data-x="20" data-y="20" style="width: 329.148px; height: 416.534px; transform: translate(20px, 20px);"> <div class="draggable element heading">Heading</div><div class="draggable element" style="height: 208.182px; width: 327.145px; transform: translate(0px, 0px);" data-x="0" data-y="0"><div class="draggable element" style="float: right;"><i class="far fa-4x fa-image"></i></div><div class="draggable element" data-x="0" data-y="0" style="width: 323.182px; height: 174.886px; transform: translate(0px, 0px);">Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here...Description goes here... </div></div><div class=" draggable element" style=""><table class="table"><tbody><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody></table></div></div> </page>

				</div>
			</div>
	  	</div>
	</div>
</div>
	  	  
	  
@endsection