@extends('backend.header')
@section('index-content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
     .w100{
          width: 100px;
       }
    .table-responsive {
        width: 100%;
        height: 75vh;
    }
    .table>tbody>tr>td{
        vertical-align: middle;
    }
    /*th,
    td {
        white-space: nowrap;
    }*/
    table tr td:first-child {
        position: sticky;
        width: 50px;
        left: 0;
        background: #fff;
        color: #000;
        z-index: 9;
    }
    table tr td:nth-child(2) {
        position: sticky;
        left: 65px;
        background: #fff;
        color: #000;
        z-index: 9;
    }
    table tr th:first-child {
        position: sticky;
        width: 50px;
        left: 0;
        /*   background: #fff;*/
        color: #000;
        z-index: 10;
    }
    table tr th:nth-child(2) {
        position: sticky;
        left: 65px;
/*        background: #fff !important;*/
        color: #000;
        z-index: 10;
    }
    tr.table-success {
        position: sticky;
        left: 0;
        z-index: 10;
/*        background: #fff !important;*/
    }
    tr.table-success {
        top: 0px !important;
        position: sticky !important;
    }
    tr.table-warning {
         top: 36px !important;
         position: sticky !important;
    }
    tr.table-warning,
    tr.table-success{
         position: sticky;
         left: 0;
         z-index: 10;
         background: #fff !important;
    }
    .table-success,
    .table-success > td,
    .table-success > th {
        background-color: #c3e6cb !important;
    }
    .table-warning, .table-warning>td, .table-warning>th {
        background-color: #ffeeba !important;
    }
  </style>
<div class="row px-3">
 <section role="main" class="content-body">
    <header class="page-header">
    <div class="row">
      <div class="col-lg-5">
        <h2>Preliminary Survey Approve</h2>  
      </div>
    
      <div class="col-lg-5">
        <ol class="breadcrumbs">
        <li>
         <a href="{{url('index')}}">
          <i class="fa fa-home"></i>
       </a>
    </li>
    <li> <a href="{{url('ps_distict_view')}}">
      <span>{{$district->super_details->area_name}}</span></a></li>
      <li> <a href="{{url('mandal_ps_list')}}?id={{$district->super_details->id}}">
       <span>{{$district->parent_details->area_name}}</span></a></li>
       <li> <a href="{{url('gram_ps_list')}}?id={{$district->parent_details->id}}">
        <span>{{$district->area_name}}</span> </a></li>

     </ol>
      </div>
      <div class="col-lg-2">
        <div>
            <button class="btn btn-primary back-btn" style="margin-right: 25px;" onclick="window.history.back()">Back</button>
          </div>
      </div>
    </div>
  </header>
  <!-- <header class="page-header">
   <h2>Preliminary Survey Approve</h2>
</header>
<div class="row">
   <div class="col-xs-12">
     <div class="right-wrapper">
       <ol class="breadcrumbs">
        <li>
         <a href="{{url('index')}}">
          <i class="fa fa-home"></i>
       </a>
    </li>
    <li> <a href="{{url('ps_distict_view')}}">
      <span>{{$district->super_details->area_name}}</span></a></li>
      <li> <a href="{{url('mandal_ps_list')}}?id={{$district->super_details->id}}">
       <span>{{$district->parent_details->area_name}}</span></a></li>
       <li> <a href="{{url('gram_ps_list')}}?id={{$district->parent_details->id}}">
        <span>{{$district->area_name}}</span> </a></li>

     </ol>
  </div>
</div>
</div> -->

<!-- start: page -->
<section class="panel pt-4">
   <!-- <header class="panel-heading mb-5">
     <h4 class="my-0">Preliminary Survey Approve List</h4> 
  </header> -->

  @if(session('error'))
  <div class="alert alert-danger">{{session('error')}}</div>
  @endif
  @if(session('success'))
  <div class="alert alert-success">{{session('success')}}</div>
  @endif
  <div class="col-12 px-4">
      <table class="table table-bordered table-striped mb-none mt-0" id="datatable-default">
           <!-- <thead>
            
              <tr> 
                 <th  rowspan="2">S.NO</th>
                     <th rowspan="2">Gram Name</th>
                     <th rowspan="2">No of Poles</th>
                      <th colspan="4">Pole Type</th>
                    
                     <th rowspan="2">Present Lights Available in GP </th>
                      <th colspan="4">Required type of LED lights</th>
                       <th rowspan="2">Action</th> 
              </tr>
                 <tr> 
                     
                     <th>8.1mts</th>
                     <th>9.1mts</th>
                     <th>12mts</th>
                     <th>Poles without 3rd Wire</th>
                     
                     <th>18 W </th>
                     <th>35 W </th>
                     <th>70 W </th>
                     <th>Others </th>
                     
                 </tr>
           </thead> -->
           <thead>
              <tr class="table-success"> 
                 <th></th>
                 <th></th>
                 <th></th>
                  <th colspan="4">Pole Type</th>
                  <th></th>
                  <th colspan="4">Required type of LED lights</th>
                  <th></th>
              </tr>
                 <tr class="table-warning"> 
                     <th>S.NO</th>
                     <th>Gram Name</th>
                     <th>No of Poles</th>
                     <th>8.1mts</th>
                     <th>9.1mts</th>
                     <th>12mts</th>
                     <th>Poles without 3rd Wire</th>
                     <th>Present Lights Available in GP </th>
                     <th>18 W </th>
                     <th>35 W </th>
                     <th>70 W </th>
                     <th>Others </th>
                     <th>Action</th>
                 </tr>
             </thead>
           <tbody>
            
             <?php $i=0;?>
              @foreach($gram_ps_list as $list)
               <?php $i++;?>
              <tr>
                   <td>{{$i}}</td>
                <td>{{$list['area_gram']['area_name']}}</td>
                 

                   <td>{{$list['pole8mts']+$list['pole9mts']+$list['pole12mts']+$list['pole_withoutwire']}}</td>
                  <td>{{$list['pole8mts']}}</td>
                  <td>{{$list['pole9mts']}}</td>
                  <td>{{$list['pole12mts']}}</td>
                  <td>{{$list['pole_withoutwire']}}</td>
                 
                  <td>{{$list['light_18w']+$list['light_35w']+$list['light_70w']+$list['light_110w']+$list['light_190w']}}</td>
                  <td>{{$list['light_18w']}}</td>
                  <td>{{$list['light_35w']}}</td>
                  <td>{{$list['light_70w']}}</td>
                  <td>{{$list['light_110w']+$list['light_190w']}}</td>
                   <td>
                    @if($list['document'])

                    <a target="_blank" href="{{asset('storage/app/'.$list['document'])}}" class="btn btn-primary">View&nbsp;Document</a>
                     </br>
                    <a href="{{url('add_preliminary_survey')}}?id={{$list['id']}}" class="btn btn-primary mt-2">Edit</a>

                    @else
                    <a href="{{url('gram_ps_report')}}?id={{$list['id']}}" class="btn btn-primary">Report</a> 
                    @endif
                 </td>
              </tr>
              @endforeach
               

          </tbody>
        </table>
<br>
</div>
</section>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
			
<script>
function change_active(ele,id){
	var status;var st;
	if(ele== "inactive"){
		status = 1;
		st = "'active'";
	}else{
		status = 0;
		st = "'inactive'";
	}
	$.ajax({
	        type: "POST",
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
	        url: './pr_status',
	        dataType : 'json',
	        data: {id:id,status:status},
	        success: function(response) {
	            if(response == 1){
					$('#statu'+id).css('display','none');
					$('#statu1'+id).css('display','none');
					if(st=="'active'"){
						var view = '<a onclick="change_active('+st.trim()+','+id+')" class="btn btn-success" id="statuschk'+id+'" value='+id+'>active</a>';
						var view1 = 'Active';
					}else{
						var view = '<a onclick="change_active('+st.trim()+','+id+')" class="btn btn-warning" id="statuschk'+id+'" value='+id+'>inactive</a>';
						var view1 = 'In-Active';
					}
					$('#view'+id).html(view);
					$('#view1'+id).html(view1);
	            }
	        }
	});
}
</script>

@stop
