@extends('layouts.app')

@section('head')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" />


@endsection


@section('content')
<div class="col-md-12">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Lista de roles</div>
                <div class="card-body">
                    <form action="{{url('/admin/config/roles')}}" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="id" value="nuevo">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>Nombre</label>
                                    <input required type="text" class="form-control" name="nombre">
                                </div>
                        </div>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-block">Agregar</button>
                </div>
                </form>
            </div>

            <div class="card-header">Lista de roles</div>
            <div class="card-body">
                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Guardar</th>
                            <th>Borrar</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($roles as $item)
                        <tr>
                            <form id="form_{{$item->id}}" method="POST" action="{{url('/admin/config/roles')}}">
                                {{ csrf_field() }}
                            <input type="hidden" name="id" value="{{$item->id}}">
                                <td>{{$item->id}}</td>
                                <td><input type="text" class="form-control" name="nombre" value="{{$item->nombre}}"/></td>
                                <td><button type="submit" name="guardar" class="btn btn-info"
                                    value="guardar">Guardar</button></td>

                            <td><button type="button" name="borrar" onclick="remove('form_{{$item->id}}')"
                                    class="btn btn-danger" value="borrar">Borrar</button></td>
                            </form>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Guardar</th>
                            <th>Borrar</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js">
</script>



<script>
    $(document).ready(function() {
    var table = $('#example').DataTable( {
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        },
        stateSave: true,
        "order": [[1, 'asc']]
    } );
} );

function confirmarBorrar(){
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire(
            'Deleted!',
            'Your file has been deleted.',
            'success'
          )
        }
      })
}


</script>

@endsection