@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<!-- start page title -->
			<div class="row mt-3 mb-3">
				<div class="col-8 col-sm-8 col-md-8 col-lg-8">
					<div class="page-title-box">
						<h4>App Dashboard Sections</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{ route('dashboard') }}">Dashboard</a>
							</li>
							<li class="breadcrumb-item active">
								App Dashboard Sections
							</li>
						</ol>
					</div>
				</div>
				<div class="col-2 col-sm-2 col-md-2 col-lg-2 text-right">
					<a href="{{route('sections.create')}}" class="btn btn-secondary mt-4">
						<i class="fa fa-plus mr-2"></i>
						New Section
					</a>
				</div>
			</div>
			<!-- end page title -->
			@include('flash/flash')
			<div class="row">
				<div class="col-8 offset-2">
					<div class="">
						<span class="mb-2 d-inline-block ajaxStatus"></span>
						<div class="catBody" style="min-height:400px;">
							<div class="list-group movable" data-url="{{route('updateSectionOrderAjax')}}">
								<br />
<b>Warning</b>:  Undefined variable $sections in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/app_dashboard_sections/appDashboardSections.blade.php</b> on line <b>40</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/app_dashboard_sections/appDashboardSections.blade.php</b> on line <b>40</b><br />
							</div>
						</div>
					</div>
					
				</div>
			</div>
			
		</div>
		<!-- container -->

	</div>
	<!-- content -->

	

</div>

<script>
	var updating = `<span class="badge badge-pill badge-info"><i class="fa fa-spin fa-spinner"></i>
					Updating
				</span>`;
	var updated = `<span class="badge badge-pill badge-success"><i class="fa fa-check"></i>
					Success
				</span>`;
	var failed = `<span class="badge badge-pill badge-danger"><i class="fa fa-times"></i>
					Failed
				</span>`;

	$(function(){
		
		var catHeight = $('.catBody').height();
		// console.log(catHeight);
		
		$('.catBody').prop('style','min-height:'+(catHeight+100)+"px;");
		
		sortable('.movable',{
			handle: '.fa-bars',
			placeholder: '<div class="list-group-item text-muted bg-light p-2">Item will be dropped here</div>'
		})[0].addEventListener('sortupdate', function(e) {
			url = $('.movable').data('url');
			data = new Array();
			$('.movable > .list-group-item').each(function(){
				data.push($(this).data('id'));
			});
			
	    	$.ajax({
	           type:'POST',
	           url:url,
	           data:{_token:$('meta[name="csrf-token"]').attr('content'),data:data},
	           beforeSend:function(){
	           	 $('.ajaxStatus').html(updating);
	           },
	           success:function(data) {
	           	
	           	 setTimeout(function(){
	           	 	if(data==1){
		             	$('.ajaxStatus').html(updated);
		             } else {
		             	$('.ajaxStatus').html(failed);
		             }
	             	 setTimeout(function(){
		             	$('.ajaxStatus').html('');
		             },1000);
	             },1000);
	           	
	           }
	        });
	
	   	}); 	
	   	
	   
	    $(document).on('click','.delSecBtn',function(e){
	    	var form = $(this).data('form');
	    	Swal.fire({
				  title: "You won't be able to revert this!",
				  text: "Are you sure?",
				  icon: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#3085d6',
				  cancelButtonColor: '#d33',
				  confirmButtonText: 'Yes, delete it!'
				}).then((result) => {
				  if (result.value) {
				  	$(form).trigger('submit');
				  }
				});
	    });
	   
	   	
	});
</script>
@endsection