@extends('layouts/layoutMaster')

@section('title', 'Worker')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/cards-advance.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('content')
<div class="row">
	<div class="card p-3">
		<h4 class="mb-4">
		  <span class="fheading">Worker
		  <a href="javascript::void(0)" title="Add" data-bs-toggle="offcanvas" id="create" data-bs-target="#offcanvasAddUser" class="btn  ml-5" style="float:right;  background-color: {{Config::get('app.BUTTON_COLOR')}};color: white"><i class="fa-solid fa-plus"></i></a>

      <a href="javascript::void(0)"  class="btn" title="Export" id="Export" style="float:right; background: {{Config::get('app.BUTTON_COLOR')}};margin-right: 15px;"><i class="fa-solid fa-file-export"></i></a>
		</h4>
		<div class="table-responsive">
        <table class="table table-bordered yajra-datatable">
          <thead>
              <tr>
                  <th>No</th>
                  <th>Name</th>
                  <th>Worker Id</th>
                  <th>Passport</th>
                  <th>Company</th>
                  <th>Site</th>
                  <th>Status</th>
                  <th>Action</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
    </div>
	</div>
</div>


<div class="offcanvas offcanvas-end"  tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasAddUserLabel" class="offcanvas-title"><span id="heading"></span> Worker</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
    <form class="add-new-user pt-0" id="form-data" onsubmit="return false" enctype="multipart/form-data">
      @csrf

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Company <span class="text-danger">*</span></b></label>
        <input type="hidden" name="id" id="id" class="form-control" >
        <select class="form-control" id="company_id" name="company_id">
          <option value="">Select Company</option>
          @foreach($companies as $company)
            <option value="{{$company->id}}">{{$company->name}}</option>
          @endforeach
        </select>
        <small id="companyErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Site <span class="text-danger">*</span></b></label>
        
        <input type="hidden"  id="siteiddd" class="form-control" >
        <select class="form-control" id="site_id" name="site_id">
        </select>
        <small id="siteErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Worker Name <span class="text-danger">*</span></b></label>
        <input type="text" name="name" id="name" class="form-control" placeholder="Enter Worker Name">
        <small id="nameErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Passport <span class="text-danger">*</span></b> </b></label>
        <input type="text" name="passport" id="passport" class="form-control" placeholder="Enter Passport">
        <small id="passportErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Password <span class="text-danger">*</span></b></label>
        <input type="password" name="password" class="form-control" id="lat" placeholder="Enter Password">
        <small id="passwordErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Nationality </b></label>
        <select name="nationality" class="form-control" id="nationality">
          <option value="">Select Nationality</option>
          @foreach($countries as $country)
            <option value="{{$country->id}}">{{$country->name}}</option>
          @endforeach
        </select>
        <small id="nationalityErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Date Of Birth </b></label>
        <input type="date" name="dob" class="form-control" id="dob" placeholder="Enter Date Of Birth">
        <small id="dobErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Profile Image </b></label>
        <input type="file" name="profile_img" class="form-control" id="profile_img" >
        <small id="profile_imgErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Current Location </b></label>
        <textarea name="current_location" class="form-control" id="current_location" placeholder="Enter Current Location"></textarea>
        <small id="current_locationErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Current Lat </b></label>
        <input type="text" name="current_lat" class="form-control" id="current_lat" placeholder="Enter Current Lat">
        <small id="current_latErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Current Long </b></label>
        <input type="text" name="current_long" class="form-control" id="current_long" placeholder="Enter Current Long">
        <small id="current_longErr" class="text-danger"  ></small>
      </div>
      <div class="mb-3">
        <label class="form-label" for="bank_name"><b>Bank Name </b></label>
        <input type="text" name="bank_name" class="form-control" id="bank_name" placeholder="Enter Bank Name">
        <small id="bank_nameErr" class="text-danger"  ></small>
      </div>
      <div class="mb-3">
        <label class="form-label" for="account_number"><b>Account Number </b></label>
        <input type="text" name="account_number" class="form-control" id="account_number" placeholder="Enter Account Number">
        <small id="account_numberErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Status </b></label>
        <select class="form-control" id="status_id" name="status_id">
          @foreach($statuses as $status)
            <option value="{{$status->id}}">{{$status->name}}</option>
          @endforeach
        </select>
        <small id="statusErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Enter Remark </b></label>
        <textarea name="remark" class="form-control" id="remark" placeholder="Enter Remark"></textarea>
        <small id="remarkErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3" style="float: right;">
        <button type="reset" id="cancelBtn" class="btn btn-danger " data-bs-dismiss="offcanvas">Cancel</button>
        <button type="submit" class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit-btn submit-form" id="createBtn" style="background-color: {{Config::get('app.BUTTON_COLOR')}}; color: white;">Create</button>
      </div>
    </form>
  </div>
</div>
<input type="hidden" id="status" value="{{request()->status}}">
@include('content.Admin.Layoutes.Footer')
@endsection


@section('page-script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
  //Table Create
  $(function () {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
              url: "{{ route('worker') }}",
              type:'GET',
              data: function (d) {
                  d.status  = $('#status').val()
              }
          },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'worker_id', name: 'worker_id'},
            {data: 'passport', name: 'passport'},
            {data: 'company_name', name: 'company_name'},
            {data: 'site_name', name: 'site_name'},
            { 
                data: 'status', 
                name: 'status',
                render: function ( data, type, full, meta ) {
                      if(data == 'Active'){
                          return '<small class="badge bg-label-success"; text-capitalized="">'+data+'</small>'
                      }else{
                          return '<small class="badge bg-label-danger"; text-capitalized="">'+data+'</small>'
                      }
                    }
            },
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
            
        ]
    });
  });

  //Create
  $('#create').click(function(){
    emptyErr()
    $("#createBtn").prop('disabled', false);
    $('#createBtn').html('Create');
  	$('#heading').html('Create')
  	$('#createBtn').html('Create')
    $('#id').val('')

    $('#form-data').trigger("reset");
    $('#site_id').empty()
  })

  //Edit
  $('body').delegate('.edit', 'click', function() {
      $("#createBtn").prop('disabled', false);
      $('#createBtn').html('Create');
      $('#heading').html('Edit')
      $('#createBtn').html('Update')
      emptyErr()

      var id = $(this).attr("data-id")
      $.ajax({
  		    url: "{{ route('worker.edit') }}", 
          method: "POST",  
          data:{id:id},
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },  
          dataType: 'json',
          success: function(response) {
            $('#id').val(response.id)
            $('#company_id').val(response.company_id)
            $('#siteiddd').val(response.site_id)
            $('#name').val(response.name)
            $('#passport').val(response.passport)
            $('#password').val(response.password)
            $('#nationality').val(response.country_id)
            $('#current_location').val(response.current_location)
            $('#current_lat').val(response.current_lat)
            $('#current_long').val(response.current_long)
            $('#site_id').val(response.site_id)
            $('#status_id').val(response.status_id)
            $('#remark').val(response.remark)
            $('#dob').val(response.dob)
            $('#bank_name').val(response.bank_name)
            $('#account_number').val(response.account_number)
            
          },
          complete: function (data) {
            getSite($('#company_id').val(),'Yes')
          }
      })
    })

  //Form Submit
  $('#form-data').on('submit', function(event){
      emptyErr()
      event.preventDefault();
      $.ajax({
         url:"{{ route('worker.save') }}",
         method:"POST",
         data:new FormData(this),
         dataType:'JSON',
         contentType: false,
         cache: false,
         processData: false,
         beforeSend: function() {
              $("#createBtn").prop('disabled', true);
              var html = $('#createBtn').html()
              $('#createBtn').html('....Please wait');
          },
          success: function(response) {
            if ($.isEmptyObject(response.error)) {
              $('.yajra-datatable').DataTable().ajax.reload();

              $(".modalForm").modal('hide');
              $("#cancelBtn").click()
              printSuccessMsg(response.msg);
            } else {
              printErrorMsg(response.error);
            }
          },
          error: function(response) { 
                $('#companyErr').text(response.responseJSON.errors.company_id);
                $('#siteErr').text(response.responseJSON.errors.site_id);
                $('#nameErr').text(response.responseJSON.errors.name);
                $('#addressErr').text(response.responseJSON.errors.address);
                $('#passportErr').text(response.responseJSON.errors.passport);
                $('#passwordErr').text(response.responseJSON.errors.password);
                $('#nationalityErr').text(response.responseJSON.errors.nationality);
                $('#profile_imgErr').text(response.responseJSON.errors.profile_img);
                $('#current_locationErr').text(response.responseJSON.errors.current_location);
                $('#current_latErr').text(response.responseJSON.errors.current_lat);
                $('#current_longErr').text(response.responseJSON.errors.current_long);
                $('#statusErr').text(response.responseJSON.errors.status);
                $('#remarkErr').text(response.responseJSON.errors.remark);
                $('#dobErr').text(response.responseJSON.errors.dob);
                $('#bank_nameErr').text(response.responseJSON.errors.bank_name);
                $('#account_numberErr').text(response.responseJSON.errors.account_number);
                $("#createBtn").prop('disabled', false);
                if($('#id').val()){
                  $('#createBtn').html('Update');
                }else{
                  $('#createBtn').html('Create');
                } 
          }    
        });
  });

  //Empty  Errors
  function emptyErr(){
    $('#companyErr').html('')
    $('#siteErr').html('')
    $('#nameErr').html('')
    $('#addressErr').html('')
    $('#passportErr').html('')
    $('#passwordErr').html('')
    $('#nationalityErr').html('')
    $('#profile_imgErr').html('')
    $('#current_locationErr').html('')
    $('#current_latErr').html('')
    $('#statusErr').html('')
    $('#remarkErr').html('')
    $('#dobErr').html('')
    $('#bank_nameErr').html('')
    $('#account_numberErr').html('')
  }

  //Delete Popup
  $('body').delegate('.deleteData', 'click', function() {
  	  $('#deleteRecord').html('Worker')
  	  $('#modalCenter').modal('show');
  	  var id = $(this).attr("data-id")
  	  $('#delete_id').val(id)
  })

  // Delete
  $('#delete').click(function(){
    $("#delete").prop('disabled', true);
    $('#delete').html('Deleteing....');
    var id = $('#delete_id').val();
	  $.ajax({
		url: "{{ route('worker.delete') }}", 
        method: "POST",  
        data:{id:id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },  
        dataType: 'json',
        success: function(response) {
      	  $('.yajra-datatable').DataTable().ajax.reload();
          $("#modalCenter").modal('hide');
          $("#delete").prop('disabled', false);
          $('#delete').html('Delete');
          printSuccessMsg('Wrker Deleted Successfully..');
        }
      })
  })

  //Get Site According To Company
  $('#company_id').change(function(){
    var id = $(this).val();
    getSite(id,'No')
  })

  function getSite(id,status){
     $.ajax({
          url: "{{ route('getSite') }}", 
          method: "POST",  
          data:{id:id},
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },  
          dataType: 'json',
          success: function(response) {
            $('#site_id').html('<option value="">-- Select Site --</option>');
            $.each(response, function (key, value) {
                $("#site_id").append('<option value="' + value
                    .id + '">' + value.name + '</option>');
            });
          },
          complete: function (data) {
            if(status == 'Yes'){
              $('#site_id option[value="'+$('#siteiddd').val()+'"]').attr("selected", "selected");
            }
          }
     })
  }

  //Export Data
  $('#Export').click(function(){
      var search = $('.dataTables_filter input').val();
      var status = $('#status').val();
      window.location.href = window.origin+'/admin/worker-export?search='+search+"&status="+status;
  })
</script>

@endsection