@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="tab-pane active" id="output_tax_tab">
            <table class="table table-bordered data-table dataTable" id="prime_info_table">
               <thead>
                  <tr>
                     <th>SL No.</th>
                     <th width="300px">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: 'store_name',
               name: 'store_name'
            },
            {
               data: 'delivery_based_on',
               name: 'delivery_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) {
                  if (row.based_on !== 'pincode') {
                     var url = "{{ url('/') }}";
                     return '<a href="' + url + '?id=' + row.id + '" target="_blank" style="color:blue;font-weight:600"> VIEW </a>';
                  } else {
                     return '<span class="btn btn-danger disabled">Disabled</span>';
                  }
               }
            },
            {
               data: 'pincode_count',
               name: 'pincode_count',
               render: function(data, type, row) {
                  if (row.based_on !== 'km') {
                     var url = "{{ url('/show-pincode') }}";
                     return '<a href="' + url + '?id=' + row.id + '" target="_blank" style="color:blue;font-weight:600;" >' + row.pincode_count + '</a>';
                  } else {
                     return '<span class="btn btn-danger disabled">Disabled</span>';
                  }
               }

            },
            {
               data: 'map_view',
               name: 'map_view',
               render: function(data, type, row) {
                  if (row.based_on !== 'km') {
                     var url = "{{ url('/show-pincode') }}";
                     return '<a href="' + url + '?id=' + row.id + '" target="_blank" style="color:red;font-weight:500;" > Manage</a>';
                  } else {
                     return '<span class="btn btn-danger disabled">Disabled</span>';
                  }

               }
            },
         ]
      });
   });


   $('#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');

      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.");
               }
            }
         });
      }

   });
   // BasedOn => CHange Functionality
   $(document).on('change', '.based_on_loc', function(e) {
      e.preventDefault();
      var currentRow = $(this).closest("tr");
      var basedOn = currentRow.find(".based_on_loc").val();
      var id = currentRow.find('.location_name').attr('data-id');
      var dataObj = {
         id: id,
         basedOn: basedOn
      };
      console.log(dataObj);
      $.ajax({
         url: '/update-delivery-location-basedon',
         method: 'POST',
         data: {
            id: id,
            basedOn: basedOn
         },
         dataType: 'json',
         success: function(data) {
            console.log(data);
            if (data.success == '1') {
               $('#alert_message').html('<div class="alert alert-success">' + data.message + '</div>');
               $('#prime_info_table').DataTable().ajax.reload();
            } else {
               $("#alert_message").removeClass('alert-success');
            }
         }
      });
   });


   // Km => change Functionality
   $(document).on('change', '.km', function(e) {
      e.preventDefault();
      var currentRow = $(this).closest("tr");
      var km = currentRow.find(".km").val();
      var id = currentRow.find('.location_name').attr('data-id');
      var dataObj = {
         id: id,
         km: km
      };
      console.log(dataObj);
      $.ajax({
         url: '/update-delivery-location-km',
         method: 'POST',
         data: {
            id: id,
            km: km
         },
         dataType: 'json',
         success: function(data) {
            console.log('return result');
            console.log(data);
            if (data.success == '1') {
               $('#alert_message').html('<div class="alert alert-success">' + data.message + '</div>');
               $('#prime_info_table').DataTable().ajax.reload();
            } else {
               $("#alert_message").removeClass('alert-success');
            }
         }
      });
   });


   // lattitude => Change Functionality
   $(document).on('change', '.lat', function(e) {
      e.preventDefault();
      var currentRow = $(this).closest("tr");
      var lat = currentRow.find(".lat").val();
      var id = currentRow.find('.location_name').attr('data-id');
      var dataObj = {
         id: id,
         lat: lat
      };
      console.log(dataObj);
      $.ajax({
         url: '/update-delivery-location-lat',
         method: 'POST',
         data: {
            id: id,
            lat: lat
         },
         dataType: 'json',
         success: function(data) {
            console.log('return result');
            console.log(data);
            if (data.success == '1') {
               $('#alert_message').html('<div class="alert alert-success">' + data.message + '</div>');
               $('#prime_info_table').DataTable().ajax.reload();
            } else {
               $("#alert_message").removeClass('alert-success');
            }
         }
      });
   });

   // longitude => Change Functionality
   $(document).on('change', '.lng', function(e) {
      e.preventDefault();
      var currentRow = $(this).closest("tr");
      var lng = currentRow.find(".lng").val();
      var id = currentRow.find('.location_name').attr('data-id');
      var dataObj = {
         id: id,
         lng: lng
      };
      console.log(dataObj);
      $.ajax({
         url: '/update-delivery-location-lng',
         method: 'POST',
         data: {
            id: id,
            lng: lng
         },
         dataType: 'json',
         success: function(data) {
            console.log('return result');
            console.log(data);
            if (data.success == '1') {
               $('#alert_message').html('<div class="alert alert-success">' + data.message + '</div>');
               $('#prime_info_table').DataTable().ajax.reload();
            } else {
               $("#alert_message").removeClass('alert-success');
            }
         }
      });
   });

   // $(document).on('change', '.based_on_loc', function(e) {
   //  e.preventDefault();
   //  var currentRow = $(this).closest("tr");
   //  var basedOn = currentRow.find(".based_on_loc").val();
   //  var id = currentRow.find('.location_name').attr('data-id');
   //  var dataObj =  {
   //          id: id,
   //          basedOn: basedOn
   //      };
   //      console.log(dataObj);
   //    $.ajax({
   //      url: '/update-delivery-location-basedon',
   //      method: 'POST',
   //       data : {
   //          id: id,
   //          basedOn: basedOn
   //      },
   //      dataType:'json',
   //       success: function(data) {
   //          console.log(data);
   //          if (data.success =='1') {
   //              $('#alert_message').html('<div class="alert alert-success">' + data.message + '</div>');
   //              $('#prime_info_table').DataTable().ajax.reload();
   //          } else {
   //              $("#alert_message").removeClass('alert-success');
   //          }
   //      }
   //  });
   // }); 
</script>
<!-- <script>
   function displaytext() {
   
   var basedOn = document.getElementById("based_on").value;
   //alert(basedOn);
   if(basedOn=='both')
   {
      
   }
   // if(basedOn=='km')
   // {
 
   // }
   // if(basedOn=='pincode')
   // {
  
   // }
   }
</script> -->
@endsection