@extends('layouts.admin.app')
@section('content')
    
      <div class="pd-30">
         <div class="col-sm-12 col-xl-12 " style="display: flex;">
            <h4 class="col-sm-8 col-xl-8 tx-gray-800 mg-b-5 title" >Region</h4>
            <div class="col-sm-4 col-xl-4" style="text-align:end">
             <a href="/gpclrmainportal/region/create" class="btn btn-primary mr-2" style="border-radius: 0px;">Add</a>
            </div>
          </div>    
        
      </div><!-- d-flex -->
      <div class=" br-pagebody mg-t-5 pd-x-30">
        <div class="br-section-wrapper row row-sm">
          <div class="col-sm-12 col-xl-12">
             <div class="table-responsive">
            <table id="example" class="table responsive nowrap dataTable no-footer dtr-inline" role="grid" aria-describedby="datatable1_info">
              @if(count($regions) > 0)
              <thead class="thead-colored">
                <tr>
                  <th class="wd-10p">ID</th>
                  <th class="wd-35p">Region</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                @php $i = 1; @endphp
                @foreach($regions as $key => $n)
                <tr>
                  <th scope="row">{{$i++}}</th>
                  <td>{{$n->name}}</td>
                  <td>
                    @if($n->status == 0)
                    <span class="badge-danger">Deactive</span>
                    @else
                      <span class="badge-success">Active</span>
                    @endif
                  </td>
                  <td style="display: flex;">   
                  <a href="/gpclrmainportal/region/{{$hashids->encode($n->id)}}/edit" class="btn-action-edit"><i class="fas fa-pen-square"></i></a> 
                 <!-- <form method="post" action="/gpclrmainportal/region/changestatus">
                    @csrf @method('post')
                   
                    <input type="hidden" name="id" value="{{$n->id}}">
                    <input type="hidden" name="status" value="{{$n->status}}">
                    
                    <button  class="btn-action-status" onclick="return confirm('Are you sure you want to  change status of this record?');">
                      @if($n->status == 1)
                      <i class="fas fa-toggle-on" style="font-size: 25px;color: white;"></i>
                      @else
                      <i class="fas fa-toggle-off" style="font-size: 25px;color: white;"></i>
                      @endif
                    </button>
                  </form> -->
                  </td>
                </tr>
               @endforeach
              </tbody>
            </table>
             @else
                <h4 class="text-center">No User Found</h4>
            @endif
            <br>
          </div>
        </div>
      </div>
    </div>
     

@endsection
@section('scripts')
<script>
  $(function() {
    $('.toggle-class').change(function() {
        var status = $(this).prop('checked') == true ? 1 : 0; 
        var user_id = $(this).data('id'); 
        //  alert(user_id);
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {'status': status, 'user_id': user_id},
            success: function(data){
              // console.log(data.success)
            }
        });
    })
  })
</script>

<script>
$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
    } );
 
    table.buttons().container()
        .appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
@endsection