@extends('layouts.home_layout')
@section('title','Menu')

@section('style')
	<link rel="stylesheet" href="{{ asset('app-assets/css/jquery.dataTables.min.css') }}" >
	<style>
		.dataTables_length label{
			margin-top: 17px;
		}
	</style>
@endsection
@section('content')
	<div class="app-content content">
		<div class="content-wrapper">
			<div class="content-header row">
				<div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
					<h3 class="content-header-title mb-0 d-inline-block">Menus</h3>
				</div>
				<div class="content-header-right col-md-6 col-12">
					<div class="dropdown float-md-right">
						<button class="btn btn-danger round btn-glow px-2 mb-1" id="" type="button"  data-toggle="modal" data-target=".bd-example-modal-lg">Add New Menu</button>
					</div>
				</div>
			</div>
			{{-- <div class="row"> --}}
			<div class="content-body">
				@include('common.alert_msg')
				{{-- @extends('common.alert_msg') --}}
				
				<div class="card">
					<div class="card-header ">
						{{-- <h4 class="card-title">
							<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target=".bd-example-modal-lg">Add New</button>
						</h4> --}}
						<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
						<div class="heading-elements">
							<ul class="list-inline mb-0">
								<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
								<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
								<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
								<li><a data-action="close"><i class="ft-x"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="card-content collapse show">
						<div class="col-12">
							<div class="table-responsive">
								<table class="table table-bordered table-striped dataTable">
									<thead>
										<tr>
											<th>Id</th>
											<th>Menu Name</th>
											<th>Parent Menu</th>
											<th>Menu Title</th>
											<th>Route Name</th>
											<th>Menu Url</th>
											<th>Type</th>
											<th>Target</th>
											<th>Menu Icon</th>
											<th>Order</th>
											<th>Access Level</th>
											<th>Status</th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										@php
											$row_count=1;
											// $list = json_decode($list);
										@endphp
										{{-- @php
											$row_count=$datashow->firstItem();
										@endphp --}}
										@foreach ($datashow as $ds)
											{{-- @php
											$row_count+=1;
											@endphp --}}
												@php
													$route_name=$ds->route_name;
												@endphp
											<tr>
												<th scope="row" class="text-center">{{$row_count++}}</th>
												<td title="{{$ds->id}}">{{$ds->menu_name}}</td>
												<td title="{{$ds->parent_id}}">{{$ds->parent_menu_name}}</td>
												{{-- <td>
													@if ($route_name=="#")
														{{$ds->menu_name}}
													@endif
												</td> --}}
												<td>{{$ds->menu_title}}</td>
												<td>{{$ds->route_name}}</td>
												<td>{{$ds->menu_url}}</td>
												<td class="text-center">{{$ds->menu_type_show}}</td>
												<td class="text-center">{{$ds->menu_target}}</td>
												<td>{{$ds->menu_icon}}</td>
												<td class="text-center">{{$ds->menu_order}}</td>
												<td class="text-center">{{$ds->acs_lvl_show}}</td>
												<td class="text-center">{{$ds->status_show}}</td>
												<td class="td-actions">
													<a href="javascript:void(0)" class="btn btn-secondary btn-sm"  data-toggle="modal" data-target=".bd-example-modal-lg" data-id="{{$ds->id}}" id="edit_menu" >
														<i class="ft-edit"></i>
													</a>
												</td>
												<td>
													<form method="POST" action="{{route("menu.destroy",$ds->id) }}"  >
														@method('DELETE')
														@csrf
														<button type="submit" class="btn btn-small " style="border: none;color: red;background: transparent;"> <i class="ft-trash-2"></i>	 </button>
													</form>
												</td>
											</tr>
										@endforeach
									</tbody>
								</table>
							</div>
							{{-- <table width="100%">
								<tr>
									<td>Displaying {{$datashow->firstItem()}} to {{sizeof($datashow)}} of {{$datashow->total()}}</td>
									<td class="pull-right">{{ $datashow->render() }}</td>
								</tr>
							</table> --}}
						</div>
					</div>
				</div>
			</div>
			{{-- </div> --}}
		</div>
		{{-- Modal Start id="menu_modal" --}}
		<div class="modal fade bd-example-modal-lg" id="menu_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content" id="myModal">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Creat Menu</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
					</div>
					{{-- @if ($errors->any())
					<div class="alert alert-danger">
						<button type="button" class="close" data-dismiss="alert">×</button>
						<ul>
							@foreach ($errors->all() as $error)
							<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
					@endif --}}
					<form method="post" action="{{ url('menu') }}">
						@csrf
						<input type="hidden" name="row_id" id="row_id">
						<div class="modal-body">
							<div class="form-group">
								<label for="menu_name" class="col-form-label">Menu Name:</label>
								<input type="text" class="form-control" id="menu_name" name="menu_name" required value="{{old('menu_name', empty($errors->menu_name) ? '' : $errors->menu_name)}}">
								@if ($errors->has('menu_name'))
								<span class="text-danger">{{ $errors->first('menu_name') }}</span>
								@endif
							</div>
							<div class="form-group">
								<label for="parent_id" class="col-form-label">Parent Menu:</label>
								<select name="parent_id" id="parent_id" class="form-control">
									
									<option value="">Parent Menu</option>
									@foreach ($parent_menu as $pm)
									{{-- expr --}}
									<option value="{{$pm->id}}">{{$pm->menu_name}}</option>
									@endforeach
								</select>
							</div>
							<div class="form-group">
								<label for="menu_title" class="col-form-label">Menu Title:</label>
								<textarea class="form-control" id="menu_title" name="menu_title"></textarea>
							</div>
							<div class="form-group">
								<label for="route_name" class="col-form-label">Route Name:</label>
								<input type="text" class="form-control" id="route_name" name="route_name" >
							</div>
							<div class="form-group">
								<label for="menu_url" class="col-form-label">Menu Url:</label>
								<input type="text" class="form-control" id="menu_url" name="menu_url" >
							</div>

							<div class="form-group">
								<label for="menu_type" class="col-form-label">Menu Type:</label>
								<select name="menu_type" id="menu_type" class="form-control" required>
									<option value="1" {{old('menu_type')==1 ? 'selected' : ''}}>Route</option>
									<option value="2" {{old('menu_type')==2 ? 'selected' : ''}}>Outside Link</option>
								</select>
							</div>
							<div class="form-group">
								<label for="menu_target" class="col-form-label">Menu Target:</label>
								<select name="menu_target" id="menu_target" class="form-control" required>
									<option value="_self" {{ old('_self') =='_self' ? 'selected' : '' }}>_self</option>
									<option value="blank" {{ old('blank') =='blank' ? 'selected' : '' }}>blank</option>
									<option value="_blank" {{ old('_blank') =='_blank' ? 'selected' : '' }}>_blank</option>
									<option value="_parent" {{ old('_parent') =='_parent' ? 'selected' : '' }}>_parent</option>
									<option value="_top" {{ old('_top') =='_top' ? 'selected' : '' }}>_top</option>
									<option value="framename" {{ old('framename') =='framename' ? 'selected' : '' }}>framename</option>
								</select>
								@if ($errors->has('menu_target'))
								<span class="text-danger">{{ $errors->first('menu_target') }}</span>
								@endif
							</div>
							<div class="form-group">
								<label for="menu_icon" class="col-form-label">Menu Icon:</label>
								<input type="text" class="form-control" id="menu_icon" name="menu_icon">
							</div>
							<div class="form-group">
								<label for="menu_order" class="col-form-label">Menu Order:</label>
								<input type="number" class="form-control" id="menu_order" name="menu_order" required>
								@if ($errors->has('menu_order'))
								<span class="text-danger">{{ $errors->first('menu_order') }}</span>
								@endif
							</div>
							<div class="form-group">
								<label for="access_level" class="col-form-label">Access Level:</label>
								<select name="access_level" id="access_level" class="form-control" required>
									<option value="2" {{old('access_level')==2 ? 'selected' : ''}}>Private</option>
									<option value="1" {{old('access_level')==1 ? 'selected' : ''}}>Developer</option>
									<option value="3" {{old('access_level')==3 ? 'selected' : ''}}>Public</option>
								</select>
								@if ($errors->has('access_level'))
								<span class="text-danger">{{ $errors->first('access_level') }}</span>
								@endif
							</div>
							<div class="form-group">
								<label for="status" class="col-form-label">Status:</label>
								<select name="status" id="status" class="form-control" required>
									<option value="1" {{old('status')==1 ? 'selected' : ''}}>Active</option>
									<option value="2" {{old('status')==2 ? 'selected' : ''}}>Inactive</option>
								</select>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary" id="btn_save">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		{{-- Modal End  --}}
	</div>
@endsection


@section('script')
<script src="{{ asset('app-assets/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
    	$('.dataTable').DataTable();
    } );
</script>

<script type="text/javascript">
	
    @if ($errors->any())

        $('#menu_modal').modal('show');
    @endif 
	$(function () {
	    $(".modal").on("hidden.bs.modal", function (e) {
			$("#exampleModalLabel").html("Creat Menu");
			$('#btn_save').text("Save");
			reset_form_data();
	    });
	});


	
	// $.post('menu/'+menu_id, function (data) {
	// 	$('#exampleModalLabel').html("Edit Menu");
	// 	$('#btn-save').val("Update");
	// 	$('#btn-save').prop('disabled',false);
	// 	// $('#crud-modal').modal('show');
	// 	$('#menu_name').val(data.menu_name);
	// 	// $('#name').val(data.name);
	// 	// $('#email').val(data.email);
	// 	// $('#address').val(data.address);
	// 	})
	// });
	function reset_form_data(){
		$('#row_id').val('');
		$('#parent_id').val('');
		$('#menu_name').val('');
		$('#menu_title').val('');
		$('#route_name').val('');
		$('#menu_url').val('');
		$('#menu_type').val('');
		$('#menu_target').val('_self');
		$('#menu_icon').val('');
		$('#menu_order').val('');
		$('#access_level').val(2);
		$('#status').val(1);

	}

    $(document).on('click', '#edit_menu', function(e) {


		var  menu_id= $(this).data('id');
		$('#exampleModalLabel').html("Edit Menu");
		$('#btn_save').text("Update");
		$('#menu_modal').modal('show');

        $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type    : "get",
            url     : "{{ url('/menu') }}/"+menu_id+'/edit',
            dataType: "json",
            success : function(data){
            	var r_val=data.row_data;

        		$('#row_id').val(r_val.id);
        		$('#parent_id').val(r_val.parent_id);
				$('#menu_name').val(r_val.menu_name);
				$('#menu_title').val(r_val.menu_title);
				$('#route_name').val(r_val.route_name);
				$('#menu_url').val(r_val.menu_url);
				$('#menu_type').val(r_val.menu_type);
				$('#menu_target').val(r_val.menu_target);
				$('#menu_icon').val(r_val.menu_icon);
				$('#menu_order').val(r_val.menu_order);
				$('#access_level').val(r_val.access_level);
				$('#status').val(r_val.status);

                // var op1 = '';
                // $.each(data, function(i, v) { 
                //     var name = (v.code) ? v.name + '_' + v.code : v.name;
                //     op1 += '<option value="'+v.apwl_id_ledger_id+'">' +name+ '</option>';
                // });
                //this_tr.find('.apwl_id').html('<option value="">--Select One--</option>'+op1);
            },
            error   : function(data){
                alert("Error")
            }
        });

        e.preventDefault();
    });
</script>
@endsection