@extends('layouts.admin_default')
@section('title', 'Service Technician Table')
@section('page', 'Service Technician / List')
@section('content')
<div class="layout-px-spacing">
   <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
         <div class="widget-content widget-content-area br-6">
            <div id="delete_bd_ms"></div>
             @if(isset($errors) && $errors->any())
             @foreach($errors->all() as $error )
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
                {{$error}}
            </div>
            @endforeach
            @endif
            @if(session()->has('message'))
            <div class="alert alert-success fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('message') }}
            </div>
            @elseif(session()->has('error'))
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('error') }}
            </div>
            @endif
            <div class="col-md-12 text-right">
               <a class="btn btn-success mb-2" href="javascript:void();" onclick="csvAddModal();">Import Service Technician</a>
               <a class="btn btn-success mb-2" href="{{ route('export-service_technician') }}">Export  Service Technician</a>
               <a href="javascript:void();" onclick="addModal();" class="btn btn-primary mb-2">Add +</a>
            </div>
            <div class="col-md-12 text-left">
               <div class="" id="#error"></div>
               <div class="multiple-action">
                  <button type="button" onclick="multiple_del()" class="btn btn-danger del">Delete</button>
                  {{-- <button type="button" onclick="multiple_active()" class="btn btn-success active-status">Active</button>
                  <button type="button"  onclick="multiple_deactive()" class="btn btn-danger inactive-status">Inactive</button> --}}
               </div>
               <small>Apply action on checked record.</small>
            </div>

            <div class="mb-4 mt-4">
               <table id="multi-column-ordering" class="table table-hover">
                  <thead>
                     <tr>
                        <th><input type="checkbox" class="new-control-input" id="contact-check-all"></th>
                        <th>Name</th>
                        <th>Service Technician Name</th>
                        <th>mobile</th>
                        <th>email</th>
                        <th>family number</th>
                        <th>father name</th>
                        <th>Address</th>
                        <th>aadhar card</th>
                        <th>Location</th>
                        <th>assigned_hub</th>
                        <th>radius</th>
                        <th>Created Date</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody id="tableItem">
                  </tbody>
                  <!-- <tfoot>
                     <tr>
                        <th></th>    
                        <th>Name</th>
                        <th>Service Technician Name</th>
                        <th>mobile</th>
                        <th>Email</th>
                        <th>family number</th>
                        <th>father name</th>
                        <th>Address</th>
                        <th>aadhar card</th>
                        <th>Location</th>
                        <th>assigned_hub</th>
                        <th>radius</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr>
                  </tfoot> -->
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!--end of listing -->
<!-- add modal start -->
<div class="modal fade" id="add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="DealerForm" method="post" action="{{route('savedServiceTechnician')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Add Service Technician</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Name -->
            <div class="form-group">
                <label for="name">Name*</label>
                <input type="text" class="form-control" name="name" required id="name">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Name -->
            <div class="form-group">
                <label for="name">Technician Name*</label>
                <input type="text" class="form-control" name="tech_name" required id="tec_name">
            </div>
        </div>
        
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Mobile -->
            <div class="form-group">
                <label for="mobile">Mobile</label>
                <input type="text" class="form-control" name="mobile" placeholder="Mobile">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="email">Email id*</label>
                        <input type="text" class="form-control" name="email" required id="email">
                     </div>
                  </div>

        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Family Number -->
            <div class="form-group">
                <label for="family_number">Family Number</label>
                <input type="text" class="form-control" name="family_number" id="family_number">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Father's Name -->
            <div class="form-group">
                <label for="father_name">Father's Name</label>
                <input type="text" class="form-control" name="father_name" id="father_name">
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <!-- Permanent Address (Textarea) -->
            <div class="form-group">
                <label for="permanent_address">Permanent Address*</label>
                <textarea class="form-control" name="permanent_address" id="permanent_address" rows="3"></textarea>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Aadhar Card -->
            <div class="form-group">
                <label for="aadhar_card">Aadhar Card</label>
                <input type="text" class="form-control" name="aadhar_card" id="aadhar_card">
            </div>
        </div>
        <!-- Add more profile creation fields here -->
    </div>

    <!-- Professional Details Fields -->
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Location -->
            <div class="form-group">
                <label for="location">Location</label>
                <input type="text" class="form-control" name="location" id="location">
            </div>
        </div>
        @php $roles = \App\Models\Role::distinct()->get(['role_id', 'title']); @endphp
             <div class="col-md-6 mb-4">
              <label for="fullName">Role*</label>
              <select required name="role" id="role" class="form-control" style="pointer-events: none;opacity: 0.6;background: #ccc;">  </select>
            </div>

    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Experience (Years) -->
            <div class="form-group">
                <label for="experience_years">Experience (Years)</label>
                <input type="number" class="form-control" name="experience_years" id="experience_years" min="0">
            </div>
        </div>

        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Experience (Months) -->
            <div class="form-group">
                <label for="experience_months">Experience (Months)</label>
                <input type="number" class="form-control" name="experience_months" id="experience_months" min="0">
            </div>
        </div>
    
        <div class="col-md-12">
            <!-- Training and Expertise (Textarea) -->
            <div class="form-group">
                <label for="training_and_expertise">Training and Expertise</label>
                <textarea class="form-control" name="training_and_expertise" id="training_and_expertise" rows="3"></textarea>
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
        <label for="password">Password</label>
        <input type="text" class="form-control" name="password" id="password">
    </div>
</div> 
    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Assigned Hub -->
            <div class="form-group">
                <label for="assigned_hub">Assigned Hub</label>
                <input type="text" class="form-control" name="assigned_hub" id="assigned_hub">
            </div>
        </div>
                            <div class="col-md-6 mb-4">
                                <label for="fullName">Status</label>
                                <select name="status" id="status" class="form-control select">
                                    <option value="1" @if(isset($user) && $user->status == 1){{'selected'}}@endif>Active</option>
                                    <option value="0" @if(isset($user) && $user->status == 0){{'selected'}}@endif>De-Active</option>
                                </select>
                            </div>    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Radius -->
            <div class="form-group">
                <label for="radius">Radius</label>
                <input type="number" class="form-control" name="radius" id="radius" min="0">
            </div>
        </div>
    </div>
       
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- add modal end -->
<!-- edit modal start -->
<div class="modal fade" id="edit_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="categoryEditForm" method="post" action="{{route('savedServiceTechnician')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <input type="hidden" name="id" id="id">
            <div class="modal-header">
               <h5 class="modal-title">Edit Service Technician</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Name -->
            <div class="form-group">
                <label for="name">Name*</label>
                <input type="text" class="form-control" name="name" required id="unm">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Name -->
            <div class="form-group">
                <label for="name">Technician Name*</label>
                <input type="text" class="form-control" name="tech_name" required id="tech_name">
            </div>
        </div>
        
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Mobile -->
            <div class="form-group">
                <label for="mobile">Mobile</label>
                <input type="text" class="form-control" name="mobile" placeholder="Mobile" id="mob">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="email">Email id*</label>
                        <input type="text" class="form-control" name="email" required id="em">
                     </div>
                  </div>


        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Family Number -->
            <div class="form-group">
                <label for="family_number">Family Number</label>
                <input type="text" class="form-control" name="family_number" id="f_num">
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Father's Name -->
            <div class="form-group">
                <label for="father_name">Father's Name</label>
                <input type="text" class="form-control" name="father_name" id="f_nm">
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <!-- Permanent Address (Textarea) -->
            <div class="form-group">
                <label for="permanent_address">Permanent Address*</label>
                <textarea class="form-control" name="permanent_address" id="p_add" rows="3"></textarea>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Aadhar Card -->
            <div class="form-group">
                <label for="aadhar_card">Aadhar Card</label>
                <input type="text" class="form-control" name="aadhar_card" id="addahar">
            </div>
        </div>
        <!-- Add more profile creation fields here -->
    </div>

    <!-- Professional Details Fields -->
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Location -->
            <div class="form-group">
                <label for="location">Location</label>
                <input type="text" class="form-control" name="location" id="locat">
            </div>
        </div>
        @php $roles = \App\Models\Role::distinct()->get(['role_id', 'title']); @endphp
             <div class="col-md-6 mb-4">
              <label for="fullName">Role*</label>
              <select required name="role" id="rol" class="form-control" style="pointer-events: none;opacity: 0.6;background: #ccc;">  </select>
            </div>
    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Experience (Years) -->
            <div class="form-group">
                <label for="experience_years">Experience (Years)</label>
                <input type="number" class="form-control" name="experience_years" id="e_year" min="0">
            </div>
        </div>

        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Experience (Months) -->
            <div class="form-group">
                <label for="experience_months">Experience (Months)</label>
                <input type="number" class="form-control" name="experience_months" id="e_mon" min="0">
            </div>
        </div>
    
        <div class="col-md-12">
            <!-- Training and Expertise (Textarea) -->
            <div class="form-group">
                <label for="training_and_expertise">Training and Expertise</label>
                <textarea class="form-control" name="training_and_expertise" id="train_e" rows="3"></textarea>
            </div>
        </div>
    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Assigned Hub -->
            <div class="form-group">
                <label for="assigned_hub">Assigned Hub</label>
                <input type="text" class="form-control" name="assigned_hub" id="assign">
            </div>
        </div>
                            <div class="col-md-6 mb-4">
                                <label for="fullName">Status</label>
                                <select name="status" id="status" class="form-control select">
                                    <option value="1" @if(isset($user) && $user->status == 1){{'selected'}}@endif>Active</option>
                                    <option value="0" @if(isset($user) && $user->status == 0){{'selected'}}@endif>De-Active</option>
                                </select>
                            </div>    
        <div class="col-sm-6 col-md-6 col-lg-6">
            <!-- Radius -->
            <div class="form-group">
                <label for="radius">Radius</label>
                <input type="number" class="form-control" name="radius" id="rad" min="0">
            </div>
        </div>
    </div>
       
               </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
</div>
<!-- edit modal end -->
<!-- view modal start -->
<div class="modal fade" id="view_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form method="post">
            <div class="modal-header">
               <h5 class="modal-title">Dealers Details</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body" id="detailContent">
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                  <button type="button" class="btn btn-danger" onclick="ajax_delete_item();" >Yes, Delete</button> -->
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- view modal end -->
<!-- import csv file to add Category start -->
<div class="modal fade" id="csv_add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="addCsvForm" method="post" action="{{route('importServiceTechnician')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Import Csv - Service Technician</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group mb-4">
                        <div class="custom-file text-left">
                           <input type="file" name="csv_file" class="custom-file-input" id="csv_file">
                           <label class="custom-file-label" for="csv_file">Choose file</label>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <a class="btn btn-success csvSample" href="{{route('sample-file-download-servicetechnician')}}">Download Sample</a>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- import csv file to add Category end -->
@endsection
@section('footer')
<script type="text/javascript">
   // function destroy(url){
   //   swal({
   //     title: "Are you sure?",
   //     text: "Do you want to delete this Category!",
   //     type: "warning",
   //     showCancelButton: true,
   //     confirmButtonText: "Yes, delete it!",
   //     cancelButtonText: "No, cancel plx!",
   //     closeOnConfirm: false,
   //   }, function(isConfirm) {
   //     if (isConfirm) {
   //       document.location.href = url;
   //     }
   //   });
   // }

</script>
<script type="text/javascript">
     $(document).ready(function(){
     $('#multi-column-ordering').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        ajax: "{{route('getserviceTechnicianDetails')}}",
        columns: [
           { data: 'checkall', orderable: false, searchable: false },
           {data:'name'},
           {data:'technician_name'},
           {data:'mobile'},
           {data:'email'},
           {data:'family_number'},
           {data:'father_name'},
           {data:'permanent_address'},
           {data:'aadhar_card'},
           {data:'location'},
           {data:'assigned_hub'},
           {data:'radius'},
           { data:'created_at'},
           { data: 'action', orderable: false, searchable: false },
        ],
        order: [[1, 'asc']],
        drawCallback: function (settings) {

           var response = settings.json;
           // $('#totalRecords').text(response.totalRecords);
           // $('#activeRecords').text(response.activeRecords);
           // $('#inactiveRecords').text(response.inactiveRecords);
           // $('#deletedRecords').text(response.deletedRecords);
           console.log(response);
           updateIcon()

       },
     });


       /*ajax header setup*/
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });
   });




   function addModal(){
        $("#add_blog_modal").modal('show');
   }

   function view_item(id){
       let _url = "{{route('getServiceTechnicianViewDetails')}}";
       let _token = $('meta[name="csrf-token"]').attr('content');
       $.ajax({
           url: _url,
           type: 'POST',
           data: {
            id: id,
             _token: _token
           },
           success: function(response) {
               console.log(response);
               let result = JSON.parse(response);
               if(result.status){
                   var itemDetails = result.data;
                   var d = new Date(itemDetails.created_at);
                   var created_at = d.toDateString() + ', '+d.getUTCHours() +':'+ d.getUTCMinutes()+':'+ d.getUTCSeconds();
                   $('#detailContent').html('');
                   $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>Service Technician Name</th><td>'+itemDetails.service_tech_name+'</td><th>Family Number</th><td>'+itemDetails.family_nnumber+'</td></tr><tr><th>Father Name</th> <td>'+itemDetails.father_name+'</td><th>permanent address</th> <td>'+itemDetails.permanent_address+'</td><th>aadhar card</th> <td>'+itemDetails.aadhar_card+'</td><th>Created Date</th><td>'+created_at+'</td></tr></table></div>');
                   $("#view_blog_modal").modal('show');

            }else{
                   myFaildToast('Something went wrong.');
               }
           }
       });
   }

   function edit_item(id){
       let _url = "{{route('getServiceTechnicianEditDetails')}}";
       let _token = $('meta[name="csrf-token"]').attr('content');
       $.ajax({
           url: _url,
           type: 'POST',
           data: {
            id: id,
             _token: _token
           },
           success: function(response) {
               console.log(response);
               let result = JSON.parse(response);
               if(result.status){
                  $('#imageContainer').empty();
                   // var itemDetails = result.data;
                  //  console.log(result.data.country);
               
                
                  $('#id').val(result.data.id);
                   $('#unm').val(result.data.name);
                   $('#tech_name').val(result.data.service_tech_name);
                   $('#em').val(result.data.email);
                   $('#mob').val(result.data.mobile);
                   $('#f_num').val(result.data.family_number);
                   $('#f_nm').val(result.data.father_name);
                   $('#p_add').val(result.data.permanent_address);
                   $('#addahar').val(result.data.aadhar_card);
                   $('#locat').val(result.data.location);
                   $('#rol').val(result.data.role);
                   $('#e_year').val(result.data.experience_years);
                   $('#e_mon').val(result.data.experience_months);
                   $('#train_e').val(result.data.training_and_expertise);
                   $('#assign').val(result.data.assigned_hub);
                   $('#rad').val(result.data.radius);
                   $('#status').val(result.data.status);
                   $("#edit_blog_modal").modal('show');
               }else{
                   myFaildToast('Something went wrong.');
               }
           }
       });
   }


</script>
<!-- form validation start -->
<script>
   $( "#CategoryForm" ).validate({
     // rules: {
     //   field: {
     //     required: true,
     //   }
     // }
   });


   $( "#CategoryEditForm" ).validate({
     // rules: {
     //   field: {
     //     required: true,
     //   }
     // }
   });


   $( "#addCsvForm" ).validate({ });



</script>
<!-- form validation end -->
<!-- getting item details start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<script type="text/javascript">
   function csvAddModal(){
        $("#csv_add_blog_modal").modal('show');
   }
</script>
<script>
   // Add the following code if you want the name of the file appear on select
   $(".custom-file-input").on("change", function() {
     var fileName = $(this).val().split("\\").pop();
     $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
   });
</script>


<!-- check all record start -->
<script type="text/javascript">
   $("#contact-check-all").click(function(){
       $('input:checkbox[name="multicheck[]"]').not(this).prop('checked', this.checked);
   });


   function multiple_del(){
      var multicheck = []
      $("input[name='multicheck[]']:checked").each(function ()
      {
          multicheck.push(parseInt($(this).val()));
      });
      if(multicheck.length > 0){
          Swal.fire({
           title: 'Are you sure?',
           text: "Do you want to delete selected Service Technician!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes'
           }).then((result) => {
           if (result.isConfirmed) {
               $.ajax({
                    url: "{{route('servicetech-multipleDel')}}",
                    method: 'post',
                    data: {ids: multicheck},
                })
                .done(function(obj) {
                    console.log(obj);
                    let result = JSON.parse(obj);
                    if(result.status){
                         mySuccessToast(result.message);
                         setTimeout(() => {
                           $('#contact-check-all').prop('checked', false);
                         }, 500);
                    }else{
                         myFaildToast('Something went wrong.');
                    }
                     $('#multi-column-ordering').DataTable().ajax.reload();
                });
           }else{
               // alert('false');
           }
       })
      }else{
         myFaildToast('Please select a record.');
      }


   } 
</script>
<!-- footer script if required -->
@endsection