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

@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="row"> --}}
		<div class="col-12">
			@include('common.alert_msg')
			{{-- @extends('common.alert_msg') --}}
			
			<div class="card">
				<div class="card-content collapse show">
					<div class="col-12">
						<div class="table-responsive-lg">
							<table class="table table-bordered table-striped dataTable" >
								<thead>
									<tr>
										<th>#</th>
										<th>Controller Path & Name</th>
										<th>Route Name</th>
										<th>Route Type</th>
										<th>Description</th>
										<th>Save Status</th>
										<th>Action</th>
										
									</tr>
								</thead>
								<tbody>
									@php
										$row_count=1;
										$list = json_decode($list);
									@endphp

									@foreach ($routList as $rl)
										@php
											$route_controller = $rl['route_controller'];
											$route_name = $rl['route_name'];

											$r_id = 0;
											$route_type = 0;
											$description= '';
											$saved_route_arr = array_values(array_filter($list, function($sr) use ($route_name){
												return $sr->route_name == $route_name;
											}));
											if($saved_route_arr) {
												$r_id = $saved_route_arr[0]->id;
												$route_type = $saved_route_arr[0]->route_type;
												$description= $saved_route_arr[0]->description;
											}
										@endphp
										<tr>
											<th scope="row" class="text-center">
												{{$row_count++}} 
												<input type="hidden" class="r_id"  value="{{$r_id}}">
											</th>
											<td>
												{{$route_controller}}
												<input type="hidden" value="{{$route_controller}}" class="route_controller">
											</td>
											<td>
												{{$route_name}}
												<input type="hidden" value="{{$route_name}}" class="route_name">
											</td>
											<td>
												<div class="form-group">
													<select style="width:120px" name="route_type" class="route_type form-control">

														<option value="2" {{($route_type!='' and $route_type==2) ? 'selected' : ''}}>Private</option>
														<option value="1" {{($route_type!='' and $route_type==1) ? 'selected' : ''}}>Developer</option>
														<option value="3" {{($route_type!='' and $route_type==3) ? 'selected' : ''}}>Public</option>
													</select>
												</div>
											</td>
											<td>
												<div class="form-group">
											    	<textarea class="form-control description" >{{$description}}</textarea>
											  	</div>
											</td>
											<td class="save_status text-center" >{{$r_id!='' ? 'Yes' : 'No'}}</td>
											<td class="text-center">
												<button type="submit" class="btn btn-primary btn_save" >{{$r_id!='' ? 'Update' : 'Save'}}</button>
											</td>
										</tr>
									@endforeach
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>
		{{-- </div> --}}
		{{-- Modal Start id="menu_modal" --}}
		
		{{-- 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">
	
    $(document).on('click', '.btn_save', function(e) {

    	var thisElement = $(this);
		var  parent_tr = $(this).parents('tr');

		var route_name =parent_tr.find('.route_name').val();
		var route_controller=parent_tr.find('.route_controller').val();
		var route_type=parent_tr.find('.route_type').val();
		var description=parent_tr.find('.description').val();
		var r_id=parent_tr.find('.r_id').val();




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

        $.ajax({
            type    : "post",
            url     : "{{ url('routeList') }}",
            data    :{
            	route_name : route_name,
				route_controller : route_controller,
				route_type : route_type,
				description : description,
				r_id : r_id,
            },
            dataType: "json",
            success : function(responce){

				parent_tr.find('.id').val(responce.id);
				parent_tr.find('.save_status').text('Yes');

        		thisElement.text('Update');


    //     		$('#route_controller').val(r_val.parent_id);
				// $('#route_type').val(r_val.menu_name);
				// $('#description').val(r_val.menu_title);
				console.log(responce);
            },
            error   : function(responce){
                alert("Error")
            }
        });

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