@extends('layouts.admin')

@section('content')

<div class="">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Users</h4>
          <div class="pull-right">
               <select id="hospital" class="form-control ml-2 pull-right" style="width: 200px;" onchange="refreshTable()">
                  <option value="">All hospital</option>
                  @php
                     $hospitals = \App\Models\Hospital::all();
                  @endphp
                  @foreach($hospitals as $key => $hospital)
                  <option value="{{$hospital->id}}">{{$hospital->name}}</option>
                  @endforeach
               </select>
               <select id="role" class="form-control ml-2 pull-right" style="width: 200px;" onchange="refreshTable()">
                  <option value="">All role</option>
                  @php
                     $roles = \App\Models\Role::all();
                  @endphp
                  @foreach($roles as $key => $role)
                  <option value="{{$role->id}}">{{$role->name}}</option>
                  @endforeach
               </select>
               <a href="{{ route('admin.users.add') }}" class="btn btn-primary btn-round pull-right ml-2">Add user<div class="ripple-container"></div></a>
          </div>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th>Username</th>
              <th>Name</th>
              <th>Hospital</th>
              <th>Role</th>
              <th>Approve</th>
              <th></th>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection 

@section('styles')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('scripts')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      var dataTable;
      $(document).ready(function() {
        dataTable = $('#dataTable').DataTable({
                "ajax": {
                    "url": "{{route('admin.users.ajax')}}",
                    "type": "POST",
                    data: dataTableValue
                },
                "paging": true,
                "processing": false,
                "serverSide": true,
                "ordering": false,
                "language": {
                  "oPaginate": oPaginate
                },
                "columns": [
                    { "data": "username" },
                    { "data": "name" },
                    { "data": "hospital" },
                    { "data": "role" },
                    { "data": "approve_input" },
                    { "data": "action" }
                ]
            });
      });

      function dataTableValue(data){

          data._token = '{{ csrf_token() }}';
          data.hospital = jQuery('#hospital').val();
          data.role = jQuery('#role').val();
          return data;
      }

      function refreshTable(){
          dataTable.ajax.reload();
      }

      function approved(event){
          var approved = 0;
          var id = $(event).data('userid');
          if(jQuery().prop('checked')){
            approved = 1;
          }
          jQuery.ajax({
            url: '{{ route('admin.users.approved') }}',
            type: 'post',
            dataType: 'json',
            data: {
              _token: '{{ csrf_token() }}',
              approved: approved,
              id: id
            },
            success: function(res){
              console.log(res);
            }
          })
      }
    </script>
@endsection