@extends('layouts.admin')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
@if(session()->has('message'))
<div class="alert alert-success">
	{{ session()->get('message') }}
</div>
@endif
@if(Auth::check())
<div class="col-12 col-sm-12">
<div class="card card-primary card-outline card-tabs">
<div class="card-header p-0 pt-1 border-bottom-0">
<ul class="nav nav-tabs" >
@can('user_access',Auth::user())    
<li class="nav-item">
<a class="nav-link "  href="{{route('users.index')}}"  aria-selected="false"  role="tabpanel">Users</a>
</li>
@endcan
@can('role_access',Auth::user())
<li class="nav-item">
<a class="nav-link "  href="{{route('roles.index')}}"  aria-selected="false"  role="tabpanel">Roles</a>
</li>
@endcan
@can('permission_access',Auth::user())
<li class="nav-item">
<a class="nav-link  "  href="{{route('permissions.index')}}"  aria-selected="false"  role="tabpanel">Permissions</a>
</li>
@endcan
@can('choices_access',Auth::user())
<li class="nav-item">
<a class="nav-link "  href="{{route('choices.index')}}"  aria-selected="false"  role="tabpanel">Lookup</a>
</li>
@endcan
@can('geo_access',Auth::user())
<li class="nav-item">
<a class="nav-link "  href="{{route('geo.index')}}"  aria-selected="false"  role="tabpanel">Administrative Unit</a>
</li>
@endcan
@can('demo_access',Auth::user())
<li class="nav-item">
<a class="nav-link  active"  href="{{route('demo.index')}}"  aria-selected="false"  role="tabpanel">Demographies</a>
</li>
@endcan
</ul>
</div>
</div>
@endif

<form method="POST" action="{{ route('demo.store') }}">
  @csrf	
	<small>
		<div class="card card card-secondary">
			<div class="card-header-new">
				<Span class="card-title">Add Demographics</span>
				<div class="card-tools">
					<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
				</div>
			</div>
        </div>

			<!-- /.card-header -->
			<div class="card-body">
 		<input type="hidden" id='geographies_id' name="geographies_id" value="{{$geo->id}}">
        <div class="row">
     <div class="col-sm-4">
       <label for="type">Source</label>
                <select class="form-control" name="source" id="source" required >
                    <option value="">Source</option>
                    @foreach($source_list as $source)
                    <option value="{{$source->description}}" >{{$source->description}}</option>
                    @endforeach
                    </select>
        </div> 
                
        </div>
         <div class="row">
         
        <div class="col-sm-4">
       <label for="indicator">Administrative Unit Indicators</label>
   </div>
      <div class="col-sm-3">
    </div>
</div>
           
                <div class='row dataview'>
                
                  
</div>

     
       
        <div class="row">
				<div class="col-sm-12">
				<button type="submit" class="btn btn-primary float-right ">Save Demographics</button>
				</div>
			</div>
          <table class="table">
           
                <thead>
                <th>Source</th>
                <th>Indicator</th>
                <th>Value</th></thead>
            </tr>
            <tbody>
                @foreach($demo as $d)
                <tr>
                    <td>{{$d->source}}</td>
                    <td>{{$d->choices->description}}</td>
                    <td>{{$d->value}}</td>
                </tr>
                @endforeach
            </tbody>
            </table>
			</div>	
			</div>
		</div>
	</small>
</form>
			
        </div>
   <script type="text/javascript">
  $(document).ready(function(){

var token=$('meta[name="csrf-token"]').attr('content');
  
    $('#source').change(function(){
        $(".dataview").empty();
         var source = $(this).val();

         var geographies_id=$('#geographies_id').val();

         $.ajax({
          url: '/get_source',
          type: 'POST',
          data:{_token:token,geographies_id:geographies_id,source:source},
          dataType: 'JSON',
        success: function(response){
           console.log(response);
           var len = 0;
             if(response != null){
                len = response.length;
             }

             if(len > 0){
              
               for(var i=0; i<len; i++){

                var id = response[i].id;
                var description =response[i].description;
                var value =response[i].values;
                if(value==null){
                value=0;
                }
               console.log(value);
                var htmldiv="<div class='col-sm-3'><input type='hidden' name='indicator[]' value="+id+"><label>"+description+"</label><input type='number' class='form-control' name='values[]' value="+value+"></div>";
                
                $('.dataview').append(htmldiv);
  }
}
}
 }); 
         });

         });
   </script>
        	
@endsection