@extends('backend.header')
@section('index-content')
<style>
    .table-bordered>tbody>tr>td{
        vertical-align: middle !important;
    }
  .add-btn{
    width: auto !important;
    height: 31px !important;
    border-radius: 3px !important;
    line-height: 16px !important;
  }
  .table-responsive {
      width: 100%;
      height: 75vh !important;
      overflow: auto !important;
  }
  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: #c3e6cb !important;
      color: #000;
      z-index: 10;
  }
  table tr th:nth-child(2) {
      position: sticky;
/*      left: 65px;*/
      background: #c3e6cb !important;
      color: #000;
      z-index: 10 !important;
  }
  tr.table-success {
      position: sticky;
      left: 0;
      z-index: 10;
/*        background: #fff !important;*/
  }
  tr.table-success {
      top: 0px !important;
      position: sticky !important;
  }
  .table-success,
    .table-success > td,
    .table-success > th {
        background-color: #c3e6cb;
    }
    </style>
<?php
function convertToUnicodeNumber($input) {
    
    $standard_numsets = array("0","1","2","3","4","5","6","7","8","9");
    $devanagari_numsets = array("०","१","२","३","४","५","६","७","८","९");
    
    return str_replace($standard_numsets, $devanagari_numsets, $input);
  }
?>
<style type="text/css">
	.dis_names{
		white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
padding-top:7px;
	}

</style>
<head>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>	

				<section role="main" class="content-body">
					<header class="page-header">
              <div class="row px-4">
                  <div class="col-lg-5 pl-0">
                      <h2>Cluster Form</h2> 
                  </div>
              
                  <div class="col-lg-5">
                      <ol class="breadcrumbs">
												<li>
													<a href="{{url('index')}}">
														<i class="fa fa-home"></i>
													</a>
												</li>
												<li><span class="active">Cluster Form</span></li>
											</ol>
                  </div>
              </div>
          </header>
					<!-- <header class="page-header">
						<h2>Cluster Form</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><span class="active">Cluster Form</span></li>
								</ol>
							</div>
						</div>
					</div> -->

					<!-- start: page -->
					<div class="row">
						 @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-md-12">
							<form id="form" action="{{url('cluster/create')}}" class="form-horizontal" method="post">
							@csrf
								<section class="panel mt-2">
									<header class="panel-heading">
										<h4 class="my-0">Cluster Form</h4>
										<div class="panel-actions">
											<a href="#" class="fa fa-caret-down"></a>
											<a href="#" class="fa fa-times"></a>
										</div>

										
										<!--<p class="panel-subtitle">
											Basic validation will display a label with the error after the form control.
										</p>-->
									</header>
									<div class="panel-body">

										<div class="row">
											<div class="col-md-10">

												<div class="form-group">
													<label class="col-sm-4 px-2 control-label">Cluster&nbsp;Name<span class="required">*</span></label>
													<div class="col-sm-8">
														<input type="text" 
														name="cluster_name" id="cluster_name" class="form-control" required>
													</div>
												</div> 

												
												   <div class="form-group">
                                  	
                                <label class="col-sm-4 px-2 control-label">Districts Covered Under This Cluster :</label>
                                <div class="col-sm-8">
                              <div class="row">
                            
                         @foreach( $jilla as $_key => $jilla_list )
                          <div class="col-sm-3">
		<!-- <div class="checkbox-inline " > -->
			<label class="dis_names">
				<input type="checkbox" value="{{ $jilla_list->id }}" id="{{ $jilla_list->id }}" name=" district_id[]"
					@if(is_array($jilla_list) && in_array($_key, $jilla_list))
						checked="checked"
					@endif
				>
				{{ $jilla_list->area_name }}
			</label>
		<!-- </div> -->
		</div>
	@endforeach 
	          
	       </div>
	</div>  
                          </div>


												<div class="row">
													<div class="col-12 px-3">
														<div class="text-right pr-2">
															<button class="btn btn-success" type="submit">Submit</button>
														</div>
													</div>
												</div>
											</div>
										</div>

									</div>
								</section>
							</form>
						</div>
						
					</div>
			<!-- end: page -->
					<!-- start: page -->
					<section class="panel">
							<header class="panel-heading">
								<h4 class="my-0">List Of Districts Covered Under Each Cluster</h4>
								<div class="panel-actions">
									<a href="#" class="fa fa-caret-down"></a>
									<a href="#" class="fa fa-times"></a>
								</div>
						
								
							</header>
							
							<div class="panel-body px-0">
								<div class="table-responsive">
								<table class="table table-bordered table-striped mb-none mt-0" >
									<thead>
										<tr class="table-success">
											<th>S.NO</th>
											 <th>Cluster Name</th>
											<th>Districts Covered Under This Cluster</th>
											<th>Edit</th>
											<th>Action</th>
										
										</tr>
									</thead>
									<tbody>
										<?php  $count=0; ?>
									
								
									<tr class="gradeX">
										<?php
										
										?>
										 
											 @foreach($clustersdistrict as $clur)
											 	<?php $count++; ?>
												<td>{{$count}}</td>
												<td>{{$clur->cluster_name}}</td>
												<td>
												@foreach($clur->cluster_district as $clurd) 
												 {{ $clurd->area_district->area_name??''}}, 
												 @endforeach
												</td>
											<td><button class="btn btn-primary"><a href="{{url('cluster_edit/'.$clur->id)}}" style="text-decoration:none;color:white;">Edit</a></button></td>
										

								    <td><a class="btn btn-danger" onclick="return confirm('Are you sure to delete?')" href= "{{url('deleteUser/'.$clur->id)}}">Delete</a></td>
									</tr>
									
                    						@endforeach
											
									</tbody>
								</table>
							</div>
							</div>
						</section>
				</section>
				<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    			<script>
				
				</script>
	@stop	