@extends('Admin/layout')
@section('title','Scheme List')
@section('content')
@if(has_permission('Scheme','View'))
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Scheme List</h4>
                    <div class="flex-shrink-0">
                           @if(has_permission('Scheme','Create'))
                           <div class="form-check form-switch form-switch-right form-switch-md">
                           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModals">Add Scheme</button>
                           </div>
                           @endif
                     </div>
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="live-preview">
                        <div class="table-responsive table-card mb-1">
                            <table class="table table-sm table-striped align-middle table-nowrap mb-0" id='scheme_list_table'>
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Company Name</th>
                                        <th scope="col">Scheme Name</th>
                                        <th scope="col">Latitude</th>
                                        <th scope="col">Longitude</th>
                                        <th scope="col">Distance in KM</th>
                                        <th scope="col">Address</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    
                                </tbody>
                                
                            </table>
                            <!-- end table -->
                        </div>
                        <!-- end table responsive -->
                    </div>
                    
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div><!-- end col -->
       
    </div>
</div>
@endif
<div class="modal fade bs-example-modal-center" id="bs-example-modal-center" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-5">
            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
            </lord-icon>
            <div class="mt-4">
               <h4 class="mb-3">Do you want to change status?</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                  <input type="hidden" id="status_id"/>
                  <input type="hidden" id="status_value"/>
                  <input type="hidden" id="status_url"/>
                  <a href="javascript:void(0);" onclick="changeStatus('scheme_list_table')" class="btn btn-danger">Yes</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<div class="modal fade bs-example-modal-center-delete" id="bs-example-modal-center-delete" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-5">
            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
            </lord-icon>
            <div class="mt-4">
               <h4 class="mb-3">Are you sure want to delete? This action can't be undo.</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                  <input type="hidden" id="delete_id"/>
                  <input type="hidden" id="delete_url"/>
                  <a href="javascript:void(0);" onclick="destroy('scheme_list_table')" class="btn btn-danger">Delete</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

@if(has_permission('Scheme','Create'))
<div id="addModals" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-xl">
      <div class="modal-content border-0 overflow-hidden">
         <div class="modal-header p-3">
            <h4 class="card-title mb-0">Create Scheme</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
       
         <div class="modal-body">
            <div class="row">
               <div class="col-12">
                     <form method="POST" class="needs-validation" novalidate >
                        <div class="row">
                           <div class="col-md-3">
                                  <div class="mb-3">
                                    <label for="citynameInput" class="form-label">Company Name <span class="text-danger">*</span></label>
                                    <select class="form-control" data-choices name="company_name" id="company_name" required>
                                       <option value="">Choose Company Name</option>
                                       @if(!empty($companylsit))
                                          @foreach($companylsit as $key => $value)
                                                <option value="{{$value->id}}" {{old('company_name') == $value->id ? 'selected' : ''}}>{{$value->name}}</option>
                                          @endforeach
                                       @endif
                                    </select>
                                 </div>
                           </div>
                           <div class="col-md-3">
                              <div class="mb-3">
                                 <label for="Nameinput" class="form-label">Scheme Name <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control" placeholder="Enter Scheme Name" id="scheme_name" name="name" value="{{old('name')}}" required>
                              </div>
                       
                           </div>
                           <div class="col-md-3">
                                 <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Latitude </label>
                                    <input type="text" class="form-control" name="latitude" id="latitude" placeholder="Latitude" value="{{old('latitude')}}" onkeyup="getValue()">
                                 </div>
                       
                           </div>
                           <div class="col-md-3">
                                  <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Longitude</label>
                                    <input type="text" class="form-control" name="longitude" id="longitude" placeholder="Longitude" value="{{old('longitude')}}" onkeyup="getValue()">
                                 </div>
                           </div>
                           <div class="col-md-3">
                                 <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" name="start_date" id="start_date" placeholder="Start Date" value="" >
                                 </div>
                           </div>
                           <div class="col-md-3">
                               <div class="mb-3">
                                 <label for="Nameinput" class="form-label">Apf Date</label>
                                 <input type="date" class="form-control" name="apf_date" id="apf_date" placeholder="Apf Date" value="" >
                              </div>
                           </div>
                           <div class="col-md-3">
                               <div class="mb-3">
                                 <label for="Nameinput" class="form-label">Rera Date</label>
                                 <input type="date" class="form-control" name="rera_date" id="rera_date" placeholder="Rera Date" value="" >
                              </div>
                           </div>
                           <div class="col-md-3">
                                   <div class="mb-3">
                                    <label for="citynameInput" class="form-label">Day Diff Master <span class="text-danger">*</span></label>
                                    <select class="form-control" data-choices name="day_diff_master_id" id="day_diff_master_id" required>
                                       <option value="">Choose Day Diff Master</option>
                                       @if(!empty($day_diff_master_list))
                                          @foreach($day_diff_master_list as $key => $value)
                                                <option value="{{$value->id}}" {{old('day_diff_master_id') == $value->id ? 'selected' : ''}}>{{$value->name}}</option>
                                          @endforeach
                                       @endif
                                    </select>
                                 </div>
                           </div>
                           <div class="col-md-3">
                                   <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Distance in KM</label>
                                    <input type="number" class="form-control" name="distance_in_km" id="distance_in_km" placeholder="Distance in KM" value="{{old('distance_in_km')}}" step="0.1" onkeyup="convertToMeter(this)">
                                    <p class="mt-2 text-danger metervalueshow" style="display:none;">Distance in Meter= <span class="metervalue"></span></p>
                                 </div>
                           </div>
                           <div class="col-md-3">
                               <div class="mb-3">
                                 <label for="Nameinput" class="form-label">Scheme Address </label>
                                 <textarea class="form-control" rows="2" id="scheme_address" ></textarea>
                              </div>
                           </div>
                           <div class="col-md-3">
                               <div class="mb-3">
                                 <label for="Nameinput" class="form-label">Scheme Description </label>
                                 <textarea class="form-control" rows="2" id="scheme_description" ></textarea>
                              </div>
                           </div>
                        </div>
                       
                     
                        <div class="text-end">
                           <button type="button" onclick="saveScheme('scheme-store')" class="btn btn-primary">Save</button>
                        </div>
                     </form>
               </div>
               <div class="col-6">
                  <div id="iframedata"></div>
               </div>
            </div>
            
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
@endif
@if(has_permission('Scheme','Edit'))
<div id="editModals" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-xl">
      <div class="modal-content border-0 overflow-hidden">
         <div class="modal-header p-3">
            <h4 class="card-title mb-0">Edit Scheme</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
       
         <div class="modal-body">
         <div class="row">
            <div class="col-6">
                  <form method="POST" class="needs-validation" novalidate >
                     <div class="mb-3">
                           <label for="citynameInput" class="form-label">Company Name <span class="text-danger">*</span></label>
                           <select class="form-control" name="edit_company_name" id="edit_company_name" required>
                              <option value="">Choose Company Name</option>
                              @if(!empty($companylsit))
                                 @foreach($companylsit as $key => $value)
                                       <option value="{{$value->id}}" {{old('company_name') == $value->id ? 'selected' : ''}}>{{$value->name}}</option>
                                 @endforeach
                              @endif
                           </select>
                        </div>
                     <div class="mb-3">
                        <input type="hidden" class="form-control" placeholder="Enter Scheme" id="edit_scheme_id" name="edit_scheme_id"  required>
                        <label for="Nameinput" class="form-label">Scheme Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Scheme Name" id="edit_scheme_name_value" name="edit_scheme_name"  required>
                     </div>
                     <div class="mb-3">
                        <label for="Nameinput" class="form-label">Latitude </label>
                        <input type="text" class="form-control" name="latitude" id="edit_latitude" placeholder="Latitude" value="{{old('latitude')}}" onkeyup="getValue1()">
                     </div>
                     <div class="mb-3">
                        <label for="Nameinput" class="form-label">Longitude</label>
                        <input type="text" class="form-control" name="longitude" id="edit_longitude" placeholder="Longitude" value="{{old('longitude')}}" onkeyup="getValue1()">
                     </div>
                     <div class="mb-3">
                        <label for="Nameinput" class="form-label">Distance in KM</label>
                        <input type="number" class="form-control" name="distance_in_km" id="edit_distance_in_km" placeholder="Distance in KM" value="{{old('distance_in_km')}}" step="0.1" onkeyup="convertToMeter(this)">
                        <p class="mt-2 text-danger metervalueshow" style="display:none;">Distance in Meter= <span class="metervalue"></span></p>
                     </div>
                     <div class="mb-3">
                        <label for="Nameinput" class="form-label">Scheme Address </label>
                        <textarea class="form-control" rows="2" id="edit_scheme_address" ></textarea>
                     </div>
                     <div class="mb-3">
                           <label for="Nameinput" class="form-label">Scheme Description </label>
                           <textarea class="form-control" rows="2" id="edit_scheme_description" ></textarea>
                     </div>
                     <div class="text-end">
                        <button type="button" onclick="updateScheme('scheme-update')" class="btn btn-primary">Update</button>
                     </div>
                  </form>
            </div>
            <div class="col-6">
               <div id="iframedata1"></div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
@endif


<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script src="https://cdn.ckeditor.com/4.17.2/standard/ckeditor.js"></script>
<script>
      //   CKEDITOR.replace( 'scheme_description' );
      //   CKEDITOR.replace( 'edit_scheme_description' );
</script>
<script>
    $(document).ready(function(){
        get_scheme_list('{{$user_id}}','{{$role_id}}');
    });
    let digitValidate = function(ele){
         console.log(ele.value);
         ele.value = ele.value.replace(/[^0-9]/g,'');
      }

      function convertToMeter(e) {
        if(e.value){
            $(".metervalueshow").show();
            $(".metervalue").text(e.value ? e.value*1000 +' meter' : '');
        }else{
            $(".metervalueshow").hide();
        }
       
        }

        function getValue(){
          
            var latitude = $("#latitude").val();
            var longitude = $("#longitude").val();
            $('#iframedata').html('<iframe src = "https://maps.google.com/maps?q='+latitude+','+longitude+'&hl=es;z=14&output=embed" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>');
        }

        getValue();

        function getValue1(){
          
          var latitude = $("#edit_latitude").val();
          var longitude = $("#edit_longitude").val();
          
          $('#iframedata1').html('<iframe src = "https://maps.google.com/maps?q='+latitude+','+longitude+'&hl=es;z=14&output=embed" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>');
      }

      
</script>
@endsection