student-admission/resources/views/admin/loadCountry.blade.php

<style type="text/css">
  .page-item.active .page-link {
      border-color: #2e58a6 !important;
      background-color: #2e58a6 !important;
      color: #fff !important;
  }

  .universityTable th{
    padding: 6px !important;
  }
  .page-item.active .page-link {
    border-color: #2e1153 !important;
    background-color: #2e1153 !important;
  }
  
  #custom_switch .stoggler .slabel-on, .stoggler .slabel-off {
    visibility: hidden;
  }
  #custom_switch .swraper.light .stoggler.on {
    background: #17092a;
    transform: translateX(-9px) !important;
  }
  #custom_switch .swraper.light .stoggler .sblob{
    width: 10px !important;
    height: 10px !important;
  }
  #custom_switch .swraper{
    width: 30px !important;
    line-height: 17px !important;
  }
  #custom_switch .swraper.light .stoggler.off {
    transform: translateX(-21px) !important;
  }
</style>

@if(count($countries) > 0)
  <table class="table table-sm table-bordered universityTable list_table" style="width: 100%; font-size: 12px;">
      <thead>
        <tr>
          <th class="text-center">SL</th>
          <th>Country</th>
          <th class="text-center"><i class="fa fa-cog"></i></th>
        </tr>
      </thead>
      <tbody>
        @foreach($countries as $key => $row)
        <tr>
          <td class="text-center">{{ ++$key }}</td>
          <td>
            <img class="img-responsive listFlag" src="{{ asset('/assets/img/flags/4x3').'/'.strtolower($row->iso_3166_2).'.svg' }}" alt="Flag" data-toggle="tooltip" title="" data-placement="top">
            {{ $row->name }}
          </td>
          <td class="text-center" id="custom_switch">
            <div class="pretty p-switch p-fill" style="padding: 5px 0px;">
                <input type="checkbox" class="checkbox"  name="countries{{ $row->id }}" @if(in_array($row->id, $selected)) {{ 'checked' }} @endif data-id="{{ $row->id }}"/>
                <div class="state p-success">
                   <label for="">&nbsp;</label>
                </div>
             </div>

             {{-- <div class="form-check form-switch" id="">
              <input class="form-check-input" type="checkbox" name="countries{{ $row->id }}" @if(in_array($row->id, $selected)) {{ 'checked' }} @endif data-id="{{ $row->id }}" style="height:18px; width: 30px; position: absolute;">
              <label class="form-check-label" for=""></label>
          </div> --}}
            {{-- <input type="checkbox" class="checkbox" name="countries{{ $row->id }}" @if(in_array($row->id, $selected)) {{ 'checked' }} @endif data-id="{{ $row->id }}"/> --}}
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  <div class="row">
      <div class="col-md-12 text-center">
          {{ $countries->appends(request()->query())->links()}}
      </div>
  </div>
@else
<div class="col-md-12">
    <p class="text-danger text-center mb-3" style="font-size: 12px;">No information available</p>
</div>
@endif

<script type="text/javascript">
    $(document).ready(function(){
       // $("input[type='checkbox']").rcSwitcher();
    });

    $('.page-link').on('click',function() {
        $('.load_list_add').load($(this).attr('href'));
    });

    $('.checkbox').on('change', function(){

      var id = $(this).data('id');
      var checked=$(this).prop("checked");

      var form_data={
          _token: "{{ csrf_token() }}",
          id: id, 
          checked: checked, 
      }

      $.post("{{ route('ajax-post', ['name'=>'set_country']) }}", form_data, function(res){ 
          pop_up_msg(res.msg);

      }).fail(function(err){

          pop_up_msg(err_msg(err), 'error');

      });
            
    });

    // $(".checkbox").rcSwitcher().on({'toggle.rcSwitcher': function( e, dataObj, changeType ){
            
    //         if(changeType == 'turnon'){
    //           var type = 'add';
    //           var msg_success = 'Added Successfully.';
    //         }else{
    //           var type = 'remove';
    //           var msg_success = 'Removed Successfully.';
    //         }
    //         var urll="{{ url('/admin/dashboard/set_country') }}/"+type+'/'+id;
    //         var msg_error = 'Something went wrong!';
    //         $.ajax({
    //             url:urll,
    //             success: function(data){
    //                notify('success',msg_success);
    //             },
    //             error: function (data) {
    //                 notify('error',msg_error);
    //             }
    //         });
    //     },
    //});
</script>