@extends('layouts.app')

@section('content')
<section class="roles-list">
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="text-center">
                    Lista Roluri
                </h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered" @if($roles->count() > 10) id="roles-tbl" @endif >
                        <thead>
                            <tr>
                                <th>ID Rol</th>
                                <th>Denumire Rol</th>
                                <th style="width:200px;">Optiuni <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#add-role-modal"><div class="fa fa-plus"></div></button></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($roles as $role)
                                <tr>
                                        <td>{{$role->role_id}}</td>
                                        <td>{{$role->role_name}}</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit-role-modal{{$role->role_id}}"><i class="fa fa-edit"></i></button>
                                            <a href="{{route('delete-main-role',$role->role_id)}}" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
                                        </td>
                                </tr>


                                

                           <!--Edit modal -->
                  <div class="modal" tabindex="-1" role="dialog" id="edit-role-modal{{$role->role_id}}">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title"><i class="fa fa-edit"></i> Actualizare {{$role->role_name}}</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="{{route('edit-main-role',$role->role_id)}}" method="post" id="edit-role-form{{$role->role_id}}">
                          @csrf 
                          <label for="">Denumire</label>
                          <input type="text" name="role_name" value="{{$role->role_name}}" class="form-control">
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="submit" form="edit-role-form{{$role->role_id}}" class="btn btn-primary">Salveaza</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--Edit modal ends-->
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Add role modal-->
<div class="modal" tabindex="-1" role="dialog" id="add-role-modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="fa fa-plus"></i> Adauga Rol</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="{{route('add-main-role')}}" method="post" id="add-role-form">
          @csrf 
          <label for="">Denumire</label>
          <input type="text" name="role_name" class="form-control">
        </form>
        </div>
        <div class="modal-footer">
          <button type="submit" form="add-role-form" class="btn btn-primary">Salveaza</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
        </div>
      </div>
    </div>
  </div>
  <!--End add role-modal -->
</section>
@endsection
@push('scripts')

        <script src="{{URL::to('js/dataplugin/jquery-3.5.1.js')}}"></script>
<script src="{{URL::to('js/dataplugin/jquery.DataTables.js')}}"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script>   
$('#roles-tbl').DataTable({
        searching:true,
        paging:true,           
        ordering:false,
       
        
    });
</script>
@endpush