@extends('layouts.app')
@section('title', __('Manage Delivery Location'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <h1>Manage Delivery Location</h1>
   <ol class="breadcrumb" style='margin-right:20px'>
   <!-- <div >
      <a href="{{url('/save-notification')}}" > <button type="button" class="btn btn-block btn-primary" 
         data-href=""  data-container="">
      <i class="fa fa-plus"></i> Add </button></a>
      </div>
      </ol>  -->
</section>
<!-- Main content -->
<section class="content">
   @component('components.widget', ['class' => 'box-primary'])
   <div class="clearfix"></div>
   <div class="clearfix"></div>
   <form id="frmpincode">
      @csrf
      <div class="row">
         <div class="col-md-12" >
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">Select Location:</label>
                  <select class="form-control"  name="location_id"   >
                     <option value="" >Select Location</option>
                     @foreach($businessLocation as $businessLoc)
                     <option value="{{$businessLoc->id}}" >{{$businessLoc->name}}({{$businessLoc->location_id}})</option>
                     @endforeach
                  </select>
               </div>
            </div>
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">Based On:</label>
                  <select class="form-control"  name="based_on"  id="based_on" onchange="displaytext()" >
                     <option value="" selected>--Select--</option>
                     <option value="both" >Both</option>
                     <option value="km"  >KM</option>
                     <option value="pincode" >Pin Codes</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
      <div class="row" id="km_div" style="display:none" >
         <div class="col-md-12" >
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">KM in Radius:</label>
                  <input class="form-control" name="km" placeholder="KM in Radius" type="text"  >
               </div>
            </div>
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">Latitude:</label>
                  <input class="form-control" name="lat" placeholder="Latitude" type="text" >
               </div>
            </div>
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">Longitude:</label>
                  <input class="form-control" name="lng" placeholder="Longitude" type="text" >
               </div>
            </div>
         </div>
      </div>
      
      <div class="row" id="pin_div" style="display:none" >
         <div class="col-md-12" >
            <div class="col-sm-3">
               <div class="form-group">
                  <label for="share">Total Pin Codes:</label>
                  <input class="form-control" name="pincode" placeholder="Total Pin Codes" type="text"  >
               </div>
            </div>
            
         </div>
      </div>
   <div class="row" >
    <div class="col-md-12">
    <div class="col-md-2">
               <div class="form-group">
                  <div >
                     <br/>
                     <button type="submit" class="btn btn-primary" >Add</button>
                  </div>
               </div>
            </div> 
            <div class="col-md-10">   </div>
    </div>
   </div>
      </div>
      </div>
   </form>
   
   <div>
      <h3 class="text-primary" style="border-bottom:2px solid blue;">Delivery Location Listing</h3>
   </div>
   <div class="row">
      <div class="col-md-12" >
         <div class="active" >
            <table class="table table-bordered data-table dataTable"  id="prime_info_table" >
               <thead>
                  <tr>
                     <th>SL No.</th>
                     <th>Location</th>
                     <th>Based on</th>
                     <th>KM in Radius</th>
                     <th>Lattitude</th>
                     <th>Longitude</th>
                     <th>Map</th>
                     <th>Total Pin Codes</th>
                     <th>Manage</th>
                  </tr>
               </thead>
               <tbody>
               </tbody>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
   </div>
   @endcomponent
   {!! Form::close() !!}
</section>
<!-- /.content -->
@endsection
@section('javascript')
@php $asset_v = env('APP_VERSION'); @endphp
<script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>
<script>
   $(document).ready(function() {
        var i = 1;
        
         // $('.dataTable').DataTable({
          prime_info_table = $('#prime_info_table').DataTable({
          processing: true,
          serverSide: true,
         ajax: "{{ route('show-delivery-location')}}",
          columns: [
                   {
                  data: 'DT_Row_Index',
                  name: 'DT_Row_Index',
                  orderable: false,
                  searchable: false
                  },
                  { data: 'name', name: 'name' },
                  { data: 'based_on', name: 'based_on' },
                  { data: 'km', name: 'km' },
                  { data: 'lat' ,name:'lat'},
                  { data: 'lng' ,name:'lng'},
                  {
                    data: 'map_view',
                    name: 'map_view',
                    render: function(data, type, row) {
                      
                        return '<a href="#" style="color:red;font-weight:600"> VIEW </a>';
                   }
                 },
                  { data: 'pincode' ,name:'pincode'},
                  {
                    data: 'map_view',
                    name: 'map_view',
                    render: function(data, type, row) {
                      
                        return '<a href="{{url("/show-pincode")}}" style="color:red;font-weight:600"> MANAGE </a>';
                   }
                 }
                ]
        });
      });
   
   
         $('#frmpincode').on('submit', function(e) {
             e.preventDefault();
           
             FormRequest = new FormData(this);
             
                  $.ajax({
                   url:"{{route('save-delivery-location') }}",
                     type: "POST",
                     data:FormRequest,
                     processData: false,
                     contentType: false,
                     dataType:'json',
                     success: function(dataResult){
                       console.log(dataResult.success);
                        if(dataResult.success=='success'){
                          alert("Delivery Location added successfully"); 
                          // Reload DataTable
                          prime_info_table.ajax.reload();
                        }
                         else{
                            alert("Error occured !");
                         }
                         
                     }
                 });
             
         });
   
   
         $('#prime_info_table').on('click','.deletePincode',function(){
               var id = $(this).data('id');
   alert(id);
               var deleteConfirm = confirm("Are you sure?");
               if (deleteConfirm == true) {
                    // AJAX request
                    $.ajax({
                        url: "{{ route('delete-pincode') }}",
                        type: 'post',
                        data: {id: id},
                        success: function(response){
                             if(response.success == 1){
                                  alert("Record deleted.");
   
                                  // Reload DataTable
                                  prime_info_table.ajax.reload();
                             }else{
                                   alert("Invalid ID.");
                             }
                        }
                    });
               }
   
          });
   
   
       
</script>
<script>
   function displaytext() {
   
   var basedOn = document.getElementById("based_on").value;
   //alert(basedOn);
   if(basedOn=='both')
   {
   document.getElementById("km_div").style.display='block';
   document.getElementById("pin_div").style.display='block';
   }
   if(basedOn=='km')
   {
   document.getElementById("km_div").style.display='block';
   document.getElementById("pin_div").style.display='none';
   }
   if(basedOn=='pincode')
   {
   document.getElementById("km_div").style.display='none';
   document.getElementById("pin_div").style.display='block';
   }
   }
</script>
@endsection