@extends('Admin/layout')
@section('title','Visit List')
@section('content')
@if(has_permission('Visit','View') || has_permission('Report','Visit List'))
<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">Visit List</h4>
                    <div class="flex-shrink-0">
                           <div class="form-check form-switch form-switch-right form-switch-md">
                                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#filterModals">Filter</button>
                                @if(has_permission('Visit','Create'))
                                <a href="{{route('visitportal.visit-add')}}"><button type="button" class="btn btn-primary">Add Visit</button></a>
                                @endif
                           </div>
                     </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='visit_list_table'>
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">DateTime</th>
                                        <th scope="col">Action</th>
                                        <th scope="col">Associate Name</th>
                                        <th scope="col">Client Name</th>
                                        <th scope="col">Photo</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Mobile Number</th>
                                        <th scope="col">Father Name</th>
                                        <th scope="col">Map</th>
                                        <th scope="col">Scheme Name</th>
                                        <th scope="col">Pin Name</th>
                                        <th scope="col">Team Name</th>
                                        <th scope="col">Rera Number</th>
                                        <th scope="col">Visit Status</th>
                                        <th scope="col">Reason</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>

<div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"  id="document_type">Image Show</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center" >
        <img class="rounded shadow" id="srcvalue" alt="200x200" width="300" src="" data-holder-rendered="true">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<div class="modal fade bs-example-modal-center-status" id="bs-example-modal-center-status" 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('associate_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('visit_list_table')" class="btn btn-danger">Delete</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<div id="filterModals" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
   <div class="modal-dialog  modal-md  modal-dialog-scrollable">
      <div class="modal-content border-0 overflow-hidden">
         <div class="modal-header p-3">
            <h4 class="card-title mb-0">Filter Visit Data</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
            <form>
            <div class="row">
            <div class="col-md-6">
               <div class="mb-3">
                    <label for="validationDefault01" class="form-label">From Date</label>
                    <input type="date" class="form-control " id="fromdate" name="fromdate" value="{{$current_date}}" placeholder="From Date">
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
                    <label for="validationDefault01" class="form-label">To Date</label>
                    <input type="date" class="form-control " id="todate" name="todate" value="{{$current_date}}" placeholder="From Date">
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
                <label for="validationDefault01" class="form-label">Phone Number</label>
                    <input type="text" class="form-control " id="associate_phone_number" name="associate_phone_number" value="" placeholder="Associate Phone Number">
               </div>
               </div>
            <div class="col-md-6">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Rera Number</label>
				<input type="text" class="form-control " id="rera_number" name="rera_number" value="" placeholder="Rera Number">
               </div>
            </div>
            <div class="col-md-12">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Associate Name</label>
               <select  data-choices class="form-control" id="associates_name" name="associates_name">
                    <option value="" >Select Associates Name</option>
                    @if(!empty($tblassociates))
                        @foreach($tblassociates as $key => $value)
                            <option value="{{$value->id}}">{{$value->name}}</option>
                        @endforeach
                    @endif
                </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Team Name</label>
               <select  data-choices class="form-control" id="team_name" name="team_name">
                    <option value="" >Select Team Name</option>
                    @if(!empty($tblteams))
                        @foreach($tblteams as $key => $value)
                            <option value="{{$value->id}}">{{$value->name}}</option>
                        @endforeach
                    @endif
                </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Pin Name</label>
               <select  data-choices class="form-control" id="pin_name" name="pin_name">
                    <option value="" >Select Pin Name</option>
                    @if(!empty($tblpins))
                        @foreach($tblpins as $key => $value)
                            <option value="{{$value->id}}"  >{{$value->name}}</option>
                        @endforeach
                    @endif
                </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Scheme Name</label>
               <select  data-choices class="form-control" id="scheme_name" name="scheme_name">
                    <option value="" >Scheme Name</option>
                    @if(!empty($tbl_schemes))
                        @foreach($tbl_schemes as $key => $value)
                            <option value="{{$value->id}}"  >{{$value->name}}</option>
                        @endforeach
                    @endif
                </select>
               </div>
            </div>
            <div class="col-md-6">
               <div class="mb-3">
               <label for="validationDefault01" class="form-label">Status</label>
               <select  data-choices class="form-control" id="status" name="status">
                    <option value="" >Select Status</option>
                    <option value="Pending" >Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                </select>
               </div>
            </div>


            </div><!-- row end -->
               <div class="text-end">
               <button type="button" id="btnFiterVisitsubmitSearch" class="btn btn-primary" onClick="filterVisitData()">Filter</button>
                  <button type="button" id="clearVisitFilter" class="btn btn-danger" onClick="clearVisitFilterData()">Clear Filter</button>
                  
               </div>
            </form>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<div class="modal fade bs-example-modal-center" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
   <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-body text-center p-5">
               <img src="" id="imagesrc" style="width:100%;cursor:pointer;"/>
            </div>
         </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div>

<div id="myModallocation" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
   <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="myModalLabel">Location</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               <div id="map_canvas" ></div>
            </div>
           
         </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div>

<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script>
    $(document).ready(function(){
      get_visit_list('{{$user_id}}','{{$role_id}}');
    });

    function openimage(url){
		$('#imagesrc').attr('src',"");
		$('#imagesrc').attr('src',url);
		$('.bs-example-modal-center').modal('show');
	  }

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

      function getComboA(selectObject) {
         var value = selectObject.value;  
         // console.log(value);
         var id = selectObject.id;
         // console.log(id);
         var datastring = {
            "_token": "{{ csrf_token() }}",
            status : value,
            id : id
         };
         $.ajax({
               type:'POST',
               cache: false,
               url:"{{route('visitportal.visit-changeStatus')}}",
               dataType: "json",
               data:datastring,
               success:function(data) {
                  alert("Status change successfully")
               //  debugger
               // location.reload();
               }
            });
      }

</script>
@endif
@endsection