@extends('Admin/layout')
@section('title','Associates List')
@section('content')
@if(has_permission('Associate','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">Associates 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('Associate','Create'))
                                <a href="{{route('visitportal.associates-add')}}"><button type="button" class="btn btn-primary">Add Associates</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='associate_list_table'>
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">Joining Date</th>
                                        <th scope="col">Action</th>
                                        <th scope="col">GK Code</th>
                                         <th scope="col">Status</th>
                                         <th scope="col">Opening Stock</th>
                                        <th scope="col">Full Name</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Mobile Number 1</th>
                                        <th scope="col">Upliner Name</th>
                                        <th scope="col">Upliner Rera No</th>
                                        <th scope="col">Mobile Number 2</th>
                                       
                                        <th scope="col">Father Name</th>
                                        <th scope="col">Mother Name</th>
                                        <th scope="col">Spouse Name</th>
                                        <th scope="col">Whatsapp Number</th>
                                        <th scope="col">Address</th>
                                        <th scope="col">DOB</th>
                                        
                                        <th scope="col">Pin Name</th>
                                        <th scope="col">Team Name</th>
                                        <th scope="col">Location Name</th>
                                        <th scope="col">Rera Number</th>
                                        <th scope="col">Rera Application Number</th>
                                        <th scope="col">Aadhar Number</th>
                                        <th scope="col">PAN Number</th>
                                        <th scope="col">Passport Number</th>
                                        <th scope="col">Bank Copy</th>
                                        <th scope="col">Certificate</th>
                                        <th scope="col">Nominee Name</th>
                                        <th scope="col">Nominee Relation</th>
                                        <th scope="col">Police Verification</th>
                                        <th scope="col">Opening Stock</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" 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 p-5">
           <div class="row">
               <div class="col-lg-12 col-md-12">
                  <div>
                        <h3 class="text-muted fw-medium">All Status List</h3>
                        <h4 class="text-primary">Associate Name: <span id="ass_name"></span></h4>
                        <!-- <p class="text-muted">Use <code>type="radio"</code> attribute to set a radio button and add <code>checked</code> attribute to set a radio checked by default.</p> -->
                        <div class="form-check mb-2">
                           <input class="form-check-input" type="radio" name="associate_status" id="associate_status" value="ACTIVE">
                           <label class="form-check-label" for="flexRadioDefault1">
                              ACTIVE
                           </label>
                        </div>
                        <div class="form-check mb-2">
                           <input class="form-check-input" type="radio" name="associate_status" id="associate_status" value="INACTIVE">
                           <label class="form-check-label" for="flexRadioDefault2">
                              INACTIVE
                           </label>
                        </div>
                        <div class="form-check mb-2">
                           <input class="form-check-input" type="radio" name="associate_status" id="associate_status" value="LEFT">
                           <label class="form-check-label" for="flexRadioDefault2">
                           LEFT
                           </label>
                        </div>
                        <div class="form-check mb-2">
                           <input class="form-check-input" type="radio" name="associate_status" id="associate_status" value="TERMINATE">
                           <label class="form-check-label" for="flexRadioDefault2">
                           TERMINATE
                           </label>
                        </div>
                        <div class="col-md-12">
                           <div class="mb-3">
                           <label for="validationDefault01" class="form-label">Comments</label>
                           <textarea type="text" class="form-control " id="comments" name="comments" value="" placeholder="Comments (If Any)"></textarea>
                           </div>
                        </div>
                  </div>
               </div>
              
           </div>
            <div class="mt-4">
              
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="width:100px;">Cancel</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="changeAssociateStatus('associate_list_table')" class="btn btn-success">Update Status</a>
               </div>
            </div>
            <div class="col-lg-12 col-md-12">
                  <h5 class="text-muted fw-medium">Status Activity Log</h5>
                  <table class="table table-sm align-middle table-bordered mb-0">
                     <thead>
                        <th>S.No</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Comments</th>
                     </thead>
                     <tbody id="associate_status_log_data">

                     </tbody>
                  </table>
         </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('associate_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-xl  modal-dialog-scrollable">
      <div class="modal-content border-0 overflow-hidden">
         <div class="modal-header p-3">
            <h4 class="card-title mb-0">Filter Associate 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-3" style="display:none;">
               <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-3" style="display:none;">
               <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-3" style="display:none;">
               <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-3">
               <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-3">
               <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-3">
               <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-3">
               <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-3">
               <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="ACTIVE" >ACTIVE</option>
                    <option value="INACTIVE">INACTIVE</option>
                    <option value="LEFT" >LEFT</option>
                    <option value="TERMINATE">TERMINATE</option>
                </select>
               </div>
            </div>


            </div><!-- row end -->
               <div class="text-end">
                  <button type="button" id="clearAssociatesFilter" class="btn btn-danger">Clear Filter</button>
                  <button type="button" id="btnFiterAssociateSubmitSearch" class="btn btn-primary">Filter</button>
               </div>
            </form>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

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

    $('#btnFiterAssociateSubmitSearch').click(function(){
    
      $('#filterModals').modal('hide');
      $('#associate_list_table').DataTable().draw(true);
   }); 

   $('#clearAssociatesFilter').click(function(){
      $("#associate_phone_number").val('');
      $("#rera_number").val('');
      $("#associates_name").val('');
      $("#team_name").val('');
      $("#pin_name").val('');
      $("#status").val('');
      const date = new Date();

      var today = new Date();
      var dd = String(today.getDate()).padStart(2, '0');
      var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
      var yyyy = today.getFullYear();
      
      today = yyyy + '-' + mm + '-' + dd;
      
      $('#fromdate').val(today);
      $('#todate').val(today);
      $('#filterModals').modal('hide');
      $('#associate_list_table').DataTable().draw(true);
   }); 

    function setChangeAssociateStatusValue(id,status,url_name,name){
      $("#status_id").val(id);
      $("#status_value").val(status);
      $("#status_url").val(url_name);
      $("#ass_name").text(name);
      $("#comments").val();
      $("input[name=associate_status][value='"+status+"']").prop("checked",true);

      $.ajax({
        type:'GET',
        cache: false,
        url:base_url+"/visitportal/getAssociateStatusLog?id="+id,
        dataType: "json",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "X-Auth-Token": adminauthdata.token,
            "uuid": adminauthdata.uuid
        },
        success:function(data) {
           debugger
           $('#associate_status_log_data').html('');
            if(data.status == '200'){
                if(data.data.length > 0){
                  for (var i = 0; i < data.data.length; i += 1) {
                     $('#associate_status_log_data').append('<tr><td>'+(i+1)+'</td><td>'+data.data[i].status+'</td><td>'+data.data[i].submit_date+'</td><td>'+(data.data[i].comments != null ? data.data[i].comments : '')+'</td></tr>');
                  }
                }
               
              
            }else{
                
            }
           
        }
    });
   }

function changeAssociateStatus(list_table) {
    var id = $("#status_id").val();
    var status = $('input[name="associate_status"]:checked').val();;
    var url_name = $("#status_url").val();
    var comments = $("#comments").val();
    var datastring = {
       status : status,
       id : id,
       comments : comments
    };
    
    $.ajax({
        type:'POST',
        cache: false,
        url:base_url+"/visitportal/"+url_name,
        dataType: "json",
        data:datastring,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "X-Auth-Token": adminauthdata.token,
            "uuid": adminauthdata.uuid
        },
        success:function(data) {
            $('#bs-example-modal-center').modal('hide');
            if(data.status == 'success'){
                $('#'+list_table).DataTable().draw(true);
                Toastify({
                    text: "Status changed successfully",
                    className: "success",
                    style: {
                      background: "linear-gradient(to right, #00b09b, #96c93d)",
                    }
                  }).showToast();
            }else{
                Toastify({
                    text: "Unable to status changed",
                    className: "danger",
                    style: {
                      background: "linear-gradient(to right, #f06548, #f06548)",
                    }
                  }).showToast();
            }
           
        }
    });
  }
</script>
@endif
@endsection