@extends('admin.layouts.master')
@section('title', 'Dashboard')
@section('content')
<!-- start page content -->
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Nearest Town</div>
                </div>
                <ol class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{route('admin.deshbord')}}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    <li class="active">Nearest Town</li>
                </ol>
            </div>
        </div>
      <div class="container">
 	<div class="row">
 		<div class="col-md-12">
 			<div class="card">
 				<div class="card-header">
 					<div class="row">
 						<div class="col-md-8">
 							<p class="text-dark">Nearest Town List</p>
 						</div>
 						<div class="col-md-4 text-right">
 							<a href="" class="btn btn-theme" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i>Add Nearest Town</a>
 						</div>
 					</div>
 				</div>
 				<div class="card-body">
@if(Session::has('message'))
					<div class="alert alert-primary" role="alert">
						{{ Session::get('message') }}
					</div>
					@endif
 					<table id="buyertable" class="table table-bordered">
 						<thead class="thead bg-light text-center">
 							<tr>
 								<th>S.No</th>
								 <th>Nearest Town</th>
                                <th>Delete</th>
                            </tr>
 						</thead>
 						<tbody class="tbody text-center">
                         @foreach ($data as $row )
                             <tr>
								<td>{{$loop->index+1}}</td>
								<td>{{$row->name}}</td>
                                <td><a class="fa fa-trash" href="{{url('/nearesttown/delete/'.$row->id)}}"></a></td>
							</tr>
                         @endforeach
							 
 						</tbody>
 					</table>

 				</div>
 			</div>
 		</div>
 	</div>
 <!-- </div> -->
    </div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
  
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Nearest Town</h4>
        </div>
        <div class="modal-body">
          <input type="text" id="townname" class="form-control">
          <p class="text-danger" id="error"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-theme" data-dismiss="modal" onclick="myaddtown()">Add</button>
        </div>
      </div>
  
    </div>
  </div>
<!-- end page content -->
@endsection
@section('scripts')
<script>
function myaddtown(){
    let name = document.getElementById('townname').value;
    let check = name.length;
    if(check == 0){
        alert("please insert town name first")

        document.getElementById('error').innerText == "please insert town name first";
    }else{
        let name = document.getElementById('townname').value;
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },  
            type:"post",
            url:"{{url('/nearesttown/store')}}",
            data:{name:name},
            success:function(data){
                console.log(data);
                if (data == 1) {
                    alert('Nearest Town Added');
                    window.location.reload();
                }
            }
            
        });
    }

}
</script>
@endsection