@extends('layouts.app')
<style>
    #submenus-tbl th{padding:0.75rem;}
    #submenus-tbl td{padding:0.75rem;}
</style>
@section('content')
<section class="submenus">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="text-center">
                        Submeniuri Lista
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                    <table class="table table-hover table-bordered" id="submenus-tbl">
                        <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Denumire</th>
                                    <th>Pagina</th>
                                    <th>Rol</th>
                                    <th>Incldue</th>
                                    <th style="width:200px;">Optiuni <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#add-submenu-modal"><i class="fa fa-plus"></i></button></th>
                                </tr>
                        </thead>
                        <tbody>
                            @foreach($submenus as $submenu)
                            <tr>
                                <td>{{$submenu->id}}</td>
                                <td>{{$submenu->submenu_name}}</td>
                                @if($submenu->page)
                                <td>{{$submenu->page->page_name}}</td>
                                @else 
                                <td>Nu gasesc pagina</td>
                                @endif
                                @if($submenu->myrole)
                                    <td>{{$submenu->myrole->role_name}}</td>
                                @else 
                                    <td>Fara rol</td>
                                @endif
                                <td>{{$submenu->include}}</td>
                                <td>
                                    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit-modal{{$submenu->id}}"><i class="fa fa-edit"></i></button>
                                    <a href="{{route('delete-submenu',$submenu->id)}}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>

                            <div class="modal" tabindex="-1" role="dialog" id="edit-modal{{$submenu->id}}">
                              <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 submeniu</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-submenu',$submenu->id)}}" method="post" id="update-submenu{{$submenu->id}}">
                                      @csrf
                                      <label for="">Denumire</label>
                                      <input type="text" name="submenu_name" value="{{$submenu->submenu_name}}" class="form-control">
                                      <label for="">Pagina</label>
                                      <select name="page_id" id="" class="form-control">
                                        <option value="">Alegeti pagina</option>
                                        @foreach($pages as $page)
                                          <option value="{{$page->id}}" @if($page->id==$submenu->page->id) selected @endif >{{$page->page_name}}</option>
                                        @endforeach
                                      </select>
                                      
                                      <label for="">Rol</label>
                                      <select name="role_id" id="" class="form-control">
                                        <option value="">Alegeti rol</option>
                                        @foreach($roles as $role)
                                          <option value="{{$role->role_id}}" @if($submenu->role_id==$role->role_id) selected @endif >{{$role->role_name}}</option>
                                        @endforeach
                                      </select>
                                      <label for="">Incldue</label>
                                      <input type="text" name="include" value="{{$submenu->include}}" class="form-control">
                                      
                                      <input type="hidden" name="icon" value="fa fa-info" class="form-control">
                                    </form>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="submit" form="update-submenu{{$submenu->id}}" class="btn btn-warning">Salveaza</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>

      <!--Add modal -->
      <div class="modal" tabindex="-1" role="dialog" id="add-submenu-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 submeniu</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-submenu')}}" method="post" id="add-submenu">
                @csrf
                <label for="">Denumire</label>
                <input type="text" name="submenu_name" class="form-control">
                <label for="">Pagina</label>
                <select name="page_id" id="" class="form-control">
                  <option value="">Alegeti pagina</option>
                  @foreach($pages as $page)
                    <option value="{{$page->id}}">{{$page->page_name}}</option>
                  @endforeach
                </select>
                
                <label for="">Rol</label>
                <select name="role_id" id="" class="form-control">
                  <option value="">Alegeti rol</option>
                  @foreach($roles as $role)
                    <option value="{{$role->role_id}}">{{$role->role_name}}</option>
                  @endforeach
                </select>
                <label for="">Incldue</label>
                <input type="text" name="include" class="form-control">
                <input type="hidden" name="icon" value="fa fa-info" class="form-control">
              </form>
            </div>
            <div class="modal-footer">
              <button type="submit" form="add-submenu" class="btn btn-primary">Salveaza</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
            </div>
          </div>
        </div>
      </div>

      <!--Add modal ends-->
</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>   
$('#submenus-tbl').DataTable({
        searching:true,
        paging:true,           
        ordering:false,
       
        
    });
</script>
@endpush