@extends('layouts.adminLayout')

@section('title')
Statuses Managment
@stop

@section('scripts')
{{ HTML::script('js/fabric.js') }}
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
{{ HTML::script('administrator/js/app.js') }}
{{ HTML::script('administrator/js/app.statuses.js') }}
@stop

@section('content')
<!-- Modals -->
<div id="createNewColumnDialog" class="modal" tabindex="-1" role="dialog" aria-labelledby="new Column" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title" id="myModalLabel">New column</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="selectSocialNetwork" class="col-lg-2 control-label">Social network</label>
						<div class="col-lg-10">
							<select id="selectSocialNetwork" class="form-control">
								<option value="1">Twitter</option>
								<option value="2">Instagram</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="inputHashtag" class="col-lg-2 control-label">Hashtags</label>
						<div class="col-lg-10">
							<input id="inputHashtag" class="form-control" autocomplete="off" placeholder="#hash1,#hash2..." type="text">
						</div>
					</div>
					<div class="form-group has-error modal-error">
						<label class="col-lg-12 control-label"></label>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button id="createNewColumnBtn" type="button" class="btn btn-primary add-column">Add column</button>
			</div>
		</div>
	</div>
</div>

<!-- Aprove Status Modal -->
<div id="approveStatusModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="approveStatusModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<form>
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="approveStatusModalLabel">Approve Status</h4>
				</div>
				<div class="modal-body">
					<fieldset class="canvasOuterWrapper" data-canvas="4x3" data-background="{{ url('administrator/images/bg4x3.png') }}">
						<legend>4 x 3</legend>
						<div class="clearfix">
							<div class="canvasWrapper">
								<canvas id="status4x3Canvas" width="392" height="280"></canvas>
							</div>
						</div>

						<div class="clearfix">
							<button class="btn btn-default decreaseFont" type="button">A-</button>
							<button class="btn btn-default increaseFont" type="button">A+</button>
						</div>
					</fieldset>
					<fieldset class="canvasOuterWrapper" data-canvas="16x9" data-background="{{ url('administrator/images/bg16x9.png') }}">
						<legend>16 x 9</legend>
						<div class="clearfix">
							<div class="canvasWrapper">
								<canvas id="status16x9Canvas" width="588" height="280"></canvas>
							</div>
						</div>

						<div class="clearfix">
							<button class="btn btn-default decreaseFont" type="button">A-</button>
							<button class="btn btn-default increaseFont" type="button">A+</button>
						</div>
					</fieldset>
				</div>
				<div class="modal-footer">
					<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
					<button id="approveStatus" type="button" class="btn btn-primary">Approve</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- #END Modals -->

<div class="row">

	<!-- Unapproved Statuses -->
	<div class="col-sm-4 column">
		<div id="approvedStatuses" class="panel panel-success">
			<div class="panel-heading">
				<span>Approved Statuses</span>
			</div>

			<div class="panel-body">
				<form id="approvedStatusesForm" name="approvedStatuses" action="" method="POST" data-max-statuses="8">
					<div id="approvedStatusesList" class="nano">
						<div class="nano-content"></div>
						<div class="nano-pane"><div class="nano-slider"></div></div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- Unapproved Statuses -->
	<div class="col-sm-8 column">
		<div id="unapprovedStatuses" class="panel panel-success">
			<div class="panel-heading clearfix"><div class="col-sm-9">Unapproved Statuses</div>
				<div class="col-sm-3">
					<button id="crawler" class="btn btn-default pull-right" type="button">Get new <span class="loading"></span></button>
				</div>
				<?php /*<div class="col-sm-3{{ (Auth::user() && Auth::user()->isSuperAdmin()) ? '' : ' hidden' }}">
					<label>
						<input id="autoPilot" type="checkbox" {{--checked="checked"--}}> Crawl Media
					</label>
				</div> */ ?>
			</div>

			<div class="panel-body">
				<div class="" role="tabpanel">
					<ul id="unapprovedStatusesTabs" class="nav nav-tabs" role="tablist">
						<li id="unpinnedTabs" role="presentation" class="dropdown noAfter">
							<a href="#" id="showAllHashtags" class="dropdown-toggle" data-toggle="dropdown" aria-controls="showRestHashtagsContents" aria-expanded="false">Rest <span class="caret"></span></a>
							<ul id="unpinnedTabsList" class="dropdown-menu" role="menu" aria-labelledby="showAllHashtagsList">
							</ul>
						<li class="addColumn noAfter">
							<a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
						</li>
					</ul>

					<div id="hashtagTabContent" class="tab-content"></div>
				</div>
			</div>
		</div>
	</div>

</div>
@stop