@extends('layouts.app_panel')

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Admin panel</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Users</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">Usuarios Registrados</h5>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
         
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <a href="#" class="btn btn-primary mb-2" data-toggle="modal" data-target="#createModal">+ADD</a>
                <br>
             
                <table class="table table-hover datatable">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Name</th>
                      <th scope="col">Email</th>
                      <th scope="col">Creted</th>
                      <th scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
             
              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <h5>Title</h5>
      <p>Sidebar content</p>
    </div>
  </aside>
  <!-- /.control-sidebar -->


<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crear usuarios</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{ url('create_users') }}" method="POST" onsubmit="save_post(this); return false">
          <label for="">Usuario:</label>
          <div class="row">
            <div class="col-12">
              <input type="text" class="form-control" name="name" placeholder="Name user" required="">
            </div>
          </div>
          <hr>
          <label for="">Email:</label>
          <div class="row">
            <div class="col-12">
              <input type="text" class="form-control" name="email" placeholder="Email user" required="">
            </div>
          </div>
          <hr>
          <label for="">Password:</label>
          <div class="row">
            <div class="col-12">
              <input type="text" class="form-control" name="password" placeholder="password" required="">
            </div>
          </div>
          <hr>
          <label for="">Roles:</label>
          <div class="row">
            <div class="col-12">
              <select name="roles" id="" class="form-control" required="">
                <option value="user">Usuario</option>
                <option value="master">Master</option>
              </select>
            </div>
            
          </div>
          <div class="row mt-2">
            <div class="col-12 text-center">
              <button class="btn btn-primary">Guardar</button>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="response"></div>
@endsection

@section('scripts')
<script src="{{ asset('js/functions_views/global.js') }}"></script>

<script>
    let columns = [
      {data: 'id'},
      {data: 'name'},
      {data: 'email'},
      {data: 'created_at'},
      {data: 'action'},
    ];
    window.addEventListener('load', function() {

      var table = $('.datatable').DataTable({
        "processing": true,
        "serverSide": true,
        "serverMethod": 'post',
        "ajax":{'url':'{{url("get_tableusers")}}', 
                "data":function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.action = 'showtable';
                },
                "dataSrc": function ( json ) {
                    return json.data;
                }  
                
        } ,
        "columns": columns,
        'createdRow': function( row, data, dataIndex ) {
            $(row).attr( 'id','codenv'+data.id );
          },
           "language": {
            "info": "Pagina _PAGE_ de _PAGES_",
        },
      });
    })  
</script>
@endsection