@extends('layouts.app2')



@section('badcome')
@endsection

@section('dynamic_css')
<style>
	@media (max-width: 768px)
	{
		.col {
			-ms-flex-preferred-size: 0;
			flex-basis:auto;
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			max-width: 100%;
		}
	}
    
    .card_hover .card {
       border: 0px solid white;
    }
    .card_hover .card {
       border-top: 3px solid white;
    }
</style>
@endsection

@section('content')
<div class="container">
  {{-- @can('view_employee_list') --}}
    <div class="row mb5 container_layout card_hover">
		

        
<!--    <div class="col-md-12 mobile_view">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active"><a href="{{route('employees')}}">Employees</a></li>
                </ol>
            </nav>
    </div>-->
		
    <div class="col-md-12 text-right" id="programs_div">
		@foreach($program_data AS $li)
			@php
				if($li['program_id']==1){
					$progam_style="orange";
				}elseif ($li['program_id']==2){
					$progam_style="blue";
				}elseif($li['program_id']==3){
					$progam_style="red";
				}elseif ($li['program_id']==4){
					$progam_style="green";
				}elseif ($li['program_id']==5){
					$progam_style="brown";
				}
			@endphp
				<span style="font-size: 12px" class="mr5"><i class="fa fa-circle" style="color: {{$progam_style}};"></i> {{$li['program_name']}}</span>
		@endforeach
	</div>
  @php
	 $i=1;
  @endphp
  @foreach($program_data as $programe)
				@php
				if($programe['program_id']==1){
					$progam_style="orange";
				}elseif($programe['program_id']==2){
					$progam_style="blue";
				}elseif($programe['program_id']==3){
					$progam_style="red";
				}elseif ($programe['program_id']==4){
					$progam_style="green";
				}elseif ($programe['program_id']==5){
					$progam_style="brown";
				}
			@endphp
	
        <div class=" @if($i>4) {{'col-sm-3'}} @else {{'col-sm-3'}} @endif card_row">
			<a href="#" data-toggle="modal" data-target="#myModal" data-program="{{$programe['program_id']}}"  data-program_name="{{$programe['program_name']}}" class="scheme">
            <div class="card animated zoomIn" style="border-color:{{$progam_style}};">
                <div class="card-body" style="padding:5px 5px 15px 5px;"> 
					
                        <div class="text-center" style="padding: 25px 20px 0px 20px;">
                             <img src="{{ asset('media/icons/people.svg') }}" style="width: 35%;display: block;margin: auto;" class="img img-responsive">
                        </div>
					
                        <div class="text-center" style="width: 100%;padding: 5px;margin-top: 5px;font-size: 14px;font-variant: petite-caps;">
                            {{$programe['program_name']}}
                        </div>
					    <div class="text-center" style="width: 100%;padding: 5px;margin-top:0px;font-size: 12px;font-variant: petite-caps;">
                            <span style="width: 100%;">Total: {{$programe['total_employee']}}</span><br>
							
							<span style="width: 100%;">In Service : {{$programe['active_employee']}}</span>
                        </div>
                </div>
            </div>
			</a>
        </div>

   @php
    $i++;
  @endphp
   @endforeach  
    </div>
  {{-- @endcan --}}
</div>



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
		<div class="row">
			<div class="col-md-12">
				<nav>
  <div class="nav nav-tabs md-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
      aria-controls="nav-home" aria-selected="true">Designation Distribution</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
      aria-controls="nav-profile" aria-selected="false">District Distribution</a>
    
  </div>
</nav>
<div class="tab-content pt-5" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
	<table class="table table-responsive">
			<thead>
				<tr>
					<th>Designation</th><th>Employee No.s</th>
				</tr>
			</thead>
			<tbody id="designation-body">
			
			</tbody>
		</table>
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <table class="table table-responsive">
			<thead>
				<tr>
					<th>District</th><th>Employee No.s</th>
				</tr>
			</thead>
			<tbody id="district-body">
			
			</tbody>
		</table>
  </div>
  
</div>
			</div>
		</div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<script>

	$(document).on('click','.scheme',function(){
		$('.modal-title').text($(this).data('program_name'))
		var program_id=$(this).data('program');
		$.get("{{route('scheme_distribution')}}",{
			
			scheme:$(this).data('program')

		
		},function(j){
			console.log(j);
			var tr_designation = "";
			var tr_district = "";
			for(var i = 1; i < j[0].length; i++){
				
				tr_designation += "<tr><td>"+j[0][i].designation+"</td><td>"+j[0][i].employee_count+"</td></tr>";
				
			}
			$('#designation-body').html(tr_designation);
			
			for(var i = 1; i < j[1].length; i++){
				
				tr_district += "<tr><td>"+j[1][i].district+"</td><td><a href='districtemployeeList/"+j[1][i].district_code+"/"+program_id+"' class='text-danger' target='_blank'>"+j[1][i].employee_count+"</a></td></tr>";
				
			}
			$('#district-body').html(tr_district);
		});
	
	});

</script>
@endsection