@extends('cms.layouts.app')

@section('pre-styles')
	<link rel="stylesheet" href="../oneui/js/plugins/select2/css/select2.min.css">
	<link rel="stylesheet" href="../oneui/js/plugins/datatables/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="../oneui/js/plugins/datatables/buttons-bs4/buttons.bootstrap4.min.css">
@endsection

@section('contents')

	<!-- Hero -->
	<div class="bg-body-light">
	    <div class="content content-full">
	        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
	            <h1 class="flex-sm-fill h3 my-2">
	                Menu Position {{-- <small class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted">It’s never been easier to validate form values.</small> --}}
	            </h1>
	            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
	                <ol class="breadcrumb breadcrumb-alt">
	                    <li class="breadcrumb-item">Cms</li>
	                    <li class="breadcrumb-item" aria-current="page">
	                        <a class="link-fx" href="">Menu</a>
	                    </li>
	                </ol>
	            </nav>
	        </div>
	    </div>
	</div>
	<!-- END Hero -->


	<!-- Page Content -->
	<div class="content">


		<div class="row">
			<div class="col-sm-8">
				<div class="block">
				    {{-- <div class="block-header">
				        <h3 class="block-title">Dynamic Table <small>Export Buttons</small></h3>
				    </div> --}}
				    
				</div>
			</div>

			<div class="col-sm-4">
		        <div class="block">
		            {{-- <div class="block-header">
		                <h3 class="block-title">Validation Form</h3>
		            </div> --}}
		            <div class="block-content block-content-full">
		                <div class="items-push">
		                    <form class="js-validation">
    	                        <div class="form-group">
    	                            <label for="name">Name <span class="text-danger">*</span></label>
    	                            <input type="text" class="form-control" id="name" name="name" placeholder="Name...">
    	                        </div>

    	                        <div class="form-group">
    	                            <label for="display_name">Display Name</label>
    	                            <input type="text" class="form-control" id="display_name" name="display_name" placeholder="Name...">
    	                        </div>

    	                        <div class="form-group">
    	                            <label for="code">Code</label>
    	                            <input type="text" class="form-control" id="code" name="code" placeholder="Choose a safe one..">
    	                        </div>

    	                        <div class="form-group">
                                    <label for="diescription">Description</label>
                                    <textarea class="form-control" id="diescription" name="diescription" rows="3"></textarea>
                                </div>

                                <div class="text-right">
                                	<button type="submit" class="btn btn-primary">Submit</button>
                                </div>
		                    </form>

		                    
		                </div>
		            </div>
		        </div>
			</div>
		</div>
	</div>
	<!-- END Page Content -->

@endsection
@section('contentss')
<!-- Page Content -->
<div class="content" id="menuPositionVueApp">

	<div id="page-loader"></div>

	<div class="row">
		<div class="col-md-8">
			<!-- Breadcrumb -->
		 	<ol class="breadcrumb push-15">
			    <li><a class="link-effect" data-toggle="tooltip" title="Back to Dashboard" href="{{ route('cms-dashboard') }}">Dashboard</a>
			    </li>
	    		<li><a class="link-effect" data-toggle="tooltip" title="Back to Index" href="{{ route('menu-positions.index') }}">Create Menu Position</a></li>
			</ol>
			<!-- END Breadcrumb -->
		</div>
		<div class="col-md-4 text-right">


		</div>
	</div>
	<!-- Full Table -->
	<div class="block">
		<div class="block-header bg-primary">
			{{-- <h3 class="block-title">Current Categories</h3> --}}
			<ul class="block-title block-options block-options-left">
				<li style="color: #fff;">
					Current Menu Position
				</li>
			</ul>

			<ul class="block-options">
				<li>
					<a href="{{ route('cms-dashboard') }}" class="btn btn-md" title="Back to Dashboard"><i class="si si-arrow-left" style="color: #fff;"></i></a>
				</li>

				<li>
				      <button type="button" data-toggle="block-option" data-action="fullscreen_toggle" title="Full Screen" style="color: #fff;"></button>
				</li>

				<li>
					<button type="button" data-toggle="block-option" data-action="content_toggle" title="Hide & Show" style="color: #fff;"></button>
				</li>
			</ul>

		</div>
		<div class="row">
			<div class="col-sm-4">
				<div class="block-content" style="background: linear-gradient(to bottom,  #F8F8FF 0%, #af69d5 300%);">
					<div class="block-header bg-primary">
						<h3 class="block-title"><i class="fa fa-plus push-5-r"></i>Menu Position</h3>
					</div>
						@if(isset($menuPosition))
							<form action="{{ route('menu-positions.update', ['menu_position' => $viewHelper->getEditValue($menuPosition, 'id')]) }}" enctype="multipart/form-data" class="form-horizontal push-10-t push-10" method="post" id="recordForm">
							{{ method_field('PATCH') }}
						@else
							<form action="#" enctype="multipart/form-data" class="form-horizontal push-10-t push-10" method="post" id="recordForm">
						@endif
						{{ csrf_field() }}
						<div class="form-group row">
							<div class="col-xs-12">
								<div class="form-material-primary">
									<input class="form-control" type="text" id="name" name="name" required v-model="menuPosition.name">
									<label for="name">Name<span class="text-danger">*</span></label>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-xs-12">
								<div class="form-material-primary">
									<input class="form-control" type="text" id="alias" name="alias" v-model="menuPosition.alias">
									<label for="alias">Display Name</label>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-xs-12">
								<div class="form-material-primary">
									<input class="form-control" type="text" id="code" name="code" v-model="menuPosition.code">
									<label for="code">Code</label>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-xs-12">
								<div class="form-material-primary">
									<label for="description"></label>
									<textarea class="form-control" id="js-ckeditor" name="description" placeholder="Description" v-model="menuPosition.description"></textarea>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-xs-12">
								<label class="css-input switch switch-sm switch-primary">
									<input type="checkbox" id="is_active" name="is_active" value="1" v-model="menuPosition.is_active">
									<span></span> Is Active?
								</label>
							</div>
						</div>
						<div class="form-group row">
							<div class="col-xs-12">
								<div v-if="saveButtonGroup">
									<button class="btn btn-sm btn-primary" type="button" id="saveRecordBtn"><i class="fa fa-plus push-5-r"></i> Save</button>
								</div>
								<div v-if="updateButtonGroup">
									<button class="btn btn-sm btn-primary" type="button" id="updateRecordBtn" @click="updateRecord"><i class="fa fa-plus push-5-r"></i> Update</button>
									<button type="button" @click="reset" class="btn btn-sm btn-danger"><i class="fa fa-times push-5-r"></i> Cancel</a>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="col-sm-8">
				<div class="block-content">
					<div class="table-responsive">
						<table class="table table-striped table-borderless table-header-bg">
							<thead>
								<tr>
									<th>Name</th>
									<th>Display Name</th>
									<th>Description</th>
									<th>Status</th>
									<th class="text-center" style="width: 100px;">Actions</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="record in records">
									<td class="font-w600">@{{ record.name }}</td>
									<td>@{{ record.alias }}</td>
									<td>@{{ record.description }}</td>
									<td class="text-center">
										<span class="label label-success" v-if="record.is_active">Active</span>
										<span class="label label-danger" v-if="!record.is_active">Inactive</span>
									</td>
									<td class="text-center">
										<div class="btn-group">
											<button type="button" class="btn btn-xs btn-default" data-toggle="tooltip" title="Edit"  @click="fetchUpdateRecord(record.id)"><i class="fa fa-pencil push-5-r text-success"></i></button>


											<button class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Remove" @click="deleteRecord(record.id)"><i class="fa fa-trash push-5-r text-danger"></i></button>

										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- <i class="fa fa-2x fa-sun-o fa-spin"></i> -->
</div>
<!-- END Full Table -->
@endsection

@section('scripts')
	 <script src="{{ asset('js/plugins/bootstrap-notify/bootstrap-notify.min.js') }}"></script>
	 <script src="../oneui/js/plugins/select2/js/select2.full.min.js"></script>

	 <script src="../oneui/js/plugins/jquery-validation/jquery.validate.min.js"></script>
	 <script src="../oneui/js/plugins/jquery-validation/additional-methods.js"></script>
	 <script src="../oneui/js/pages/be_forms_validation.min.js"></script>

	 <script src="../oneui/js/plugins/datatables/jquery.dataTables.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/dataTables.bootstrap4.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/buttons/dataTables.buttons.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/buttons/buttons.print.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/buttons/buttons.html5.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/buttons/buttons.flash.min.js"></script>
	 <script src="../oneui/js/plugins/datatables/buttons/buttons.colVis.min.js"></script>

	 <!-- Page JS Code -->
	 <script src="../oneui/js/pages/be_tables_datatables.min.js"></script>
	 <script>
	 	// jQuery(function () {
	 	    // Init page helpers (BS Notify Plugin)
	 	    // App.initHelpers('notify');
	 	// });

	 	jQuery(function(){ One.helpers('select2'); });
	 </script>


	<script src="{{ asset('/js/vue.min.js') }}"></script>
	<script>
		var menuPositionVue = new Vue({
			el: '#menuPositionVueApp',
			data: {
				menuPosition: {
					name: '',
					alias: '',
					code: '',
					description: '',
					is_active: 1,
					_token: '{{ csrf_token() }}',
				},
				records: [],
				fetchUrl: '{{ route('menu-positions.ajax.fetch') }}',
				saveUrl: '{{ route('menu-positions.store') }}',
				updatableDataFetchUrl: '{{ route('menu-positions.show', ['menu_position' => ':menuPositionId']) }}',
				updateUrl: '{{ route('menu-positions.update', ['menu_position' => ':menuPositionId']) }}',
				deleteUrl: '{{ route('menu-positions.destroy', ['menu_position' => ':menuPositionId']) }}',
				saveButtonGroup: 1,
				updateButtonGroup: 0,
				updatableRecordId: 0

			},
			methods: {
				saveRecord: function() {
					var self = this;

					$.ajax({
						url: self.saveUrl,
						data: self.menuPosition,
						method: 'POST',
						success: function(response) {
							self.reset();
							self.fetchRecords();
							self.messageNotify(response);

						},
						error: function(errors) {

						}
					});
				},
				fetchUpdateRecord: function(updatableMenuPositionId) {
					App.loader('show');
					var self = this;

					var updatableDataFetchUrl = self.updatableDataFetchUrl.replace(':menuPositionId', updatableMenuPositionId);

					$.ajax({
						url: updatableDataFetchUrl,
						method: 'GET',
						success: function(response) {
							self.menuPosition = response.menuPosition;
							self.updatableRecordId = response.menuPosition.id;
							self.saveButtonGroup = 0;
							self.updateButtonGroup = 1;
							App.loader('hide');
						},
						error: function(errors) {

						}
					});
				},
				updateRecord: function() {
					var self = this;
					var updatableMenuPositionId = self.updatableRecordId
					var updatableDataFetchUrl = self.updateUrl.replace(':menuPositionId', updatableMenuPositionId);

					var updatableData = self.menuPosition;
					updatableData._method = 'PATCH';
					updatableData._token = '{{ csrf_token() }}';
					updatableData.is_active = (updatableData.is_active) ? 1 : 0;

					$.ajax({
						url: updatableDataFetchUrl,
						data: updatableData,
						method: 'POST',
						success: function(response) {
							self.reset();
							self.fetchRecords();
							self.messageNotify(response);
						},
						error: function(errors) {

						}
					});
				},
				deleteRecord: function(deletableRecordId) {
					var self = this;
					var recordDeleteUrl = self.deleteUrl.replace(':menuPositionId', deletableRecordId);

					var deletableData = {};
					deletableData._method = 'DELETE';
					deletableData._token = '{{ csrf_token() }}';

					$.ajax({
						url: recordDeleteUrl,
						data: deletableData,
						method: 'POST',
						success: function(response) {
							self.fetchRecords();
							self.messageNotify(response);
						},
						error: function(errors) {

						}
					});
				},
				fetchRecords: function() {
					var self = this;
					$.ajax({
						url: self.fetchUrl,
						method: 'GET',
						success: function(response) {
							self.records = response;
						},
						error: function(errors) {

						}
					});
				},
				reset: function() {
					var self = this;
					self.menuPosition = {
						name: '',
						alias: '',
						code: '',
						description: '',
						is_active: 1,
						_token: '{{ csrf_token() }}'
					}
					self.saveButtonGroup = 1;
					self.updateButtonGroup = 0;
				},
				messageNotify: function(response) {
					$.notify({
						title: '<strong>Great!</strong>',
						message: response.message
					},{
						type: response.type,
						animate: {
							enter: 'animated fadeInTop',
							exit: 'animated fadeOutTop'
						},
						placement: {
							from: "top",
							align: "center"
						}
					});
				}
			},
			mounted: function() {
				var self = this;
				this.fetchRecords();
				$('#saveRecordBtn').on('click', self.saveRecord);
			}
		});
	</script>
@endsection