@extends('Layouts.adminLayout')
@section('title')
        {{__('List Category')}}
@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('Admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}">
	    <link rel="stylesheet" type="text/css" href="{{ asset('Admin/app-assets/vendors/css/extensions/dragula.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('Admin/assets/css-rtl/plugins/extensions/drag-and-drop.css') }}">
	    <link rel="stylesheet" type="text/css" href="{{ asset('Admin/assets/css/nestable.css') }}">
@endsection
@section('breadcrumb')
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">{{__('Panel')}}</a></li>
                                    <li class="breadcrumb-item"><a href="#">{{__('Category')}}</a> </li>
                                    <li class="breadcrumb-item active"><a href="#">{{__('List Category')}}</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
@endsection
@section('content')
 <section id="nav-justified">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card overflow-hidden">
                                <div class="card-header">
                                    <h4 class="card-title">{{__('List Category')}}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                         
                                        <ul class="nav nav-tabs nav-justified" id="myTab2" role="tablist">
										 @php $a=0; @endphp
                                        @foreach($data['Category'] as $key => $Category)
                                            <li class="nav-item faClick" data-lang="{{$key}}">
                                       <a class="nav-link @if($a == 0) active @endif" id="#tab_justified_{{$key}}" data-toggle="tab" href="#tab_justified_{{$key}}" role="tab" aria-controls="#tab-justified_{{$key}}" aria-selected="true"  >{{get_language_by_slug($key)}}</a>
                                            </li>
									     @php $a++; @endphp
                                        @endforeach
                                        </ul>

                                        <div class="tab-content pt-1">
									@php $b=0; @endphp
                                      @foreach($data['Category'] as $key => $Category)
             <div class="tab-pane @if($b == 0)  active @endif " id="tab_justified_{{$key}}" role="tabpanel" aria-labelledby="tab_justified_{{$key}}" >                  
			<div class="col-md-12">
				<div class="card">
				<input class="hiddenLng" value="{{$key}}" type="hidden" >
					<div class="card-body">

						
						<div class="dd nestable1" id="nestable{{$key}}">
							<ol class="dd-list ">
							      @php $i=1; @endphp
                               @foreach($Category as $value)
							   @if($value->type==1)
								<li class=" dd-item dd3-item" data-id="{{$value->id}}" data-order="{{$value->order}}">
									<div class="dd-handle dd3-handle"></div>
									<div class="dd3-content">{{$value->title}} 
									 <div class='pull-right'>
									  | <a  href="{{route('Admin.categorys.edit',$value->id)}}" >{{__('Edit')}}</a> 
                                      | <a  onclick="deleteRecord('{{route('Admin.categorys.delete',$value->id)}}')" href="#" >{{__('Delete')}}</a> 
									</div>
									</div>
								
								
								<ol class="dd-list">
								@foreach($value->Category as $category_1)
								  	<li class="dd-item dd3-item" data-id="{{$category_1->id}}" data-order="{{$category_1->order}}">
									<div class="dd-handle dd3-handle"></div>
									 <div class="dd3-content">{{$category_1->title}} 
									  <div class='pull-right'>
									  | <a  href="{{route('Admin.categorys.edit',$category_1->id)}}" >{{__('Edit')}}</a> 
                                      | <a  onclick="deleteRecord('{{route('Admin.categorys.delete',$category_1->id)}}')" href="#" >{{__('Delete')}}</a> 
									</div>
									</div>
									
									<ol class="dd-list">
									@foreach($category_1->Category as $category_2)
										<li class="dd-item dd3-item" data-id="{{$category_2->id}}" data-order="{{$category_2->order}}">
											<div class="dd-handle dd3-handle"></div>
											
									      <div class="dd3-content">{{$category_2->title}} 
										   <div class='pull-right'>
									       | <a  href="{{route('Admin.categorys.edit',$category_2->id)}}" >{{__('Edit')}}</a> 
                                           | <a  onclick="deleteRecord('{{route('Admin.categorys.delete',$category_2->id)}}')" href="#" >{{__('Delete')}}</a> 
									       </div>
									     </div>
										</li>
										 @endforeach
									</ol>
								
								</li>
								@endforeach
								</ol>
								  @php $i++; @endphp
								
								</li>
								@endif
                               @endforeach

							</ol>
						</div>
					</div>
				</div>
				 
					<input id="nestable-output{{$key}}" class="form-control nestable-output" type="hidden">
				 
			</div> 
			      <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                                                    <button onclick="saveChanges('{{$key}}')"  class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">{{__('Save')}}</button>
                                                </div>
			
                                            </div>
                                      @php $b++; @endphp
                                      @endforeach

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
				
@endsection
 @section('script')
    <script src="{{ asset('Admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
	    <script src="{{ asset('Admin/assets/js/jquery.nestable.js')}}"></script>
		<script>
		$(function () {
			var langs=$('.tab-pane.active input.hiddenLng').val();
			
			let updateOutput = function (e) {
				let list = e.length ? e : $(e.target),
					output = list.data('output');
				if (window.JSON) {
					output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
				} else {
					output.val('JSON browser support required for this demo.');
				}
			};
			$('#nestable'+langs).nestable().on('change', updateOutput);
			updateOutput($('#nestable'+langs).data('output', $('#nestable-output'+langs)));
		});
        $(document).on("click", ".faClick", function () {
			 let updateOutput = function (e) {
				let list = e.length ? e : $(e.target),
					output = list.data('output');
				if (window.JSON) {
					output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
				} else {
					output.val('JSON browser support required for this demo.');
				}
			};
        var lang = $(this).data('lang');
		 
			$('#nestable'+lang).nestable().on('change', updateOutput);
			updateOutput($('#nestable'+lang).data('output', $('#nestable-output'+lang)));
        });
		
		function saveChanges(langu) {
         let items=$('#nestable-output'+langu).val();
		    $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
				 url: "{{route('Admin.categorys.updateOrderCategory')}}",
                 type: "POST",
                  data: {
					    _token : "{{csrf_token()}}",
                        lang : langu,
                        category_id : 0,
                        items : items
                },
                    success:function (data) {
                         toastr.success('{!! __('The Operation Was Performed') !!}');
                    }
            });
}
	</script>
@endsection