@extends('backend.header')
@section('index-content')
<style>
  .add-btn{
    width: auto !important;
    height: 31px !important;
    border-radius: 3px !important;
    line-height: 16px !important;
  }
  .table-bordered>tbody>tr>td{
        vertical-align: middle !important;
    }
  .table-responsive:nth-child(2) {
      width: 100%;
      height: 75vh;
  }
  .table-responsive:first-child{
      overflow-x: hidden;
  }
  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;
    }
    label.lable {
	    margin-top: 6px;
	    float: right;
	}
    </style>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<?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);
  }
?>
				<section role="main" class="content-body">
					<header class="page-header">
						<div class="row px-4">
							<div class="col-lg-5 pl-0">
								<h2>Mandal 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">Mandal</span></li>
								</ol>
							</div>
						</div>
					</header>
					<!-- <header class="page-header">
						<h2>Mandal Form </h2>
					</header>
					<div class="row">
						<div class="col-xs-12">
							<div class="">
								<ol class="breadcrumbs">
									<li>
										<a href="{{url('index')}}">
											<i class="fa fa-home"></i>
										</a>
									</li>
									<li><span class="active">Mandal</span></li>
								</ol>
							</div>
						</div>
					</div> -->

					<!-- start: page -->
					<div class="row">
						<div class="col-md-12">
							<form id="form" action="{{route('taluka.store')}}" class="form-horizontal" method="post">
							@csrf
								<section class="panel mt-2">
									
									<div class="panel-body">
										<div class="row">
									<div class="col-md-11">
										<div class="row">
											<div class="col-md-4">
							    		<div class="form-group row">
										    <div class="col-sm-4 pl-2 pr-0 my-auto">
										    	<label class="lable">District Name<span class="required">*</span></label>
										    </div>
										    <div class="col-sm-8">
										     <select name="district_name" class="form-control" required>
														<option value="">District Name</option>
														@foreach($jilla as $ai)
														<option value="{{$ai->id}}">{{$ai->area_name}}</option>
														
														@endforeach
														</select>
										    </div>
										  </div>
							    	</div>
							    	<div class="col-md-5">
							    		<div class="form-group row">
										    <div class="col-sm-4 pr-0 my-auto">
										    	<label class="lable float-right">Mandal Name<span class="required">*</span></label>
										    </div>
										    <div class="col-sm-8">
										    <input type="text" 
														name="mandal_name" id="mandal_name" class="form-control" required>
														@error('mandal_name')
														<font size="3" color="red">{{$message}}</font>
														@enderror	
										    </div>
										  </div>
							    	</div>
							    	<div class="col-md-3">
							    		<div class="form-group row">
										    <div class="col-sm-4 my-auto">
										    	<label class="lable float-right">Code<span class="required">*</span></label>
										    </div>
										    <div class="col-sm-8">
										    <input type="text" 
														name="code" class="form-control" required>
														@error('code')
														<font size="3" color="red">{{$message}}</font>
														@enderror	
										    </div>
										  </div>
							    	</div>
										</div>
									</div>
							    	<div class="col-sm-1 pl-2">
                          <button class="btn btn-success" type="submit">Submit</button>
                    </div> 
                </div>

										<!-- <div class="row">
											<div class="col-md-10">
												<div class="form-group">
													<label class="col-sm-3 control-label">District Name<span class="required">*</span></label>
													<div class="col-sm-9">
														<select name="district_name" class="form-control" required>
														<option value="">District Name</option>
														@foreach($jilla as $ai)
														<option value="{{$ai->id}}">{{$ai->area_name}}</option>
														
														@endforeach
														</select>
															
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label">Mandal Name<span class="required">*</span></label>
													<div class="col-sm-9">
														<input type="text" 
														name="mandal_name" id="mandal_name" class="form-control" required>
														@error('mandal_name')
														<font size="3" color="red">{{$message}}</font>
														@enderror	
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label">Code<span class="required">*</span></label>
													<div class="col-sm-9">
														<input type="text" 
														name="code" class="form-control" required>
														@error('code')
														<font size="3" color="red">{{$message}}</font>
														@enderror	
													</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 Mandals</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 mt-2 px-0">
								<table class="table table-bordered table-striped mb-none mt-0" id="datatable-default">
									<thead>
										<tr class="table-success">
											<th>S.NO</th>
											<th>District Name</th>
											<th>Mandal Name</th>
											<th>Code</th>
											<th>Status</th>
											<th>Edit</th>
											
										</tr>
									</thead>
									<tbody>
									
									<?php  $count=0; ?>
									
									@foreach($users as $a)
									<?php $count++; ?>
									<tr class="gradeX">
									    <?php
									    $id=$a->tid;
									    //$num=convertToUnicodeNumber($id);
									    ?>
											<td>{{$count}}</td>
											<td>{{$a->jilla}}</td>
											<td>{{$a->taluka}}</td>
											<td>{{$a->code}}</td>
											<td>
												<span id="view{{$a->id}}"></span>
												<span id="statu{{$a->id}}">
												<?php 
												$s=$a->status;
												if($s=='active')
												{
													?>
								
													<a onclick="change_active('{{$a->status}}',{{$a->id}})"  class="btn btn-success" id="statuschk" value="{{$a->id}}">{{$a->status}}</a>
													<?php
												}else{
													?>
													<a onclick="change_active('{{$a->status}}',{{$a->id}})" class="btn btn-warning" id="statuschk" value="{{$a->id}}">{{$a->status}}</a>
													<?php
												}
												?>
												</span>
											</td>
											<td class="actions">
												<a href="{{route('taluka.edit',$a->tid)}}" style="text-decoration:none;color:white;" class="btn btn-primary on-default edit-row">Edit</a>
											</td>										
											
									</tr>
									
									@endforeach
									
									</tbody>
								</table>
							</div>
						</section>
				</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
			
<script>


	   $("#mandal_name").keypress(function(event){
        var inputValue = event.which;
        // allow letters and whitespaces only.
        if(!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)) { 
            event.preventDefault(); 
        }
    });

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: '../statuschktaluka',
	        dataType : 'json',
	        data: {id:id,status:status},
	        success: function(response) {
	            if(response == 1){
					$('#statu'+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>';
					}else{
						var view = '<a onclick="change_active('+st.trim()+','+id+')" class="btn btn-warning" id="statuschk'+id+'" value='+id+'>inactive</a>';
					}
					$('#view'+id).html(view);
	            }
	        }
	});
}
</script>
			@stop

			 
