@extends('layouts.app')
<style>
    #pages-tbl th{padding:0.75rem;}
    #pages-tbl td{padding:0.75rem;}
</style>
@section('content')
<section class="pages-list">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="text-center">
                        Lista de pagini
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">

                 
                    <table class="table-bordered table-hover table" id="pages-tbl">
                        <thead>
                            <tr>
                                <th>ID Pagina</th>
                                <th>Denumire</th>
                                <th>Include</th>
                                <th>Rol</th>
                                <th style="width:200px;">Optiuni <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#add-page-modal"><i class="fa fa-plus"></i> Adauga</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pages as $page)
                            <tr>
                                    <td>{{$page->id}}</td>
                                    <td>{{$page->page_name}}</td>
                                    <td>{{$page->include}}</td>
                                    @if($page->myrole)
                                    <td>{{$page->myrole->role_name}}</td>
                                    @else 
                                        <td>Fara Rol</td>
                                    @endif
                                    <td>
                                        <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit-page-modal{{$page->id}}"><i class="fa fa-edit"></i></button>
                                        <a href="{{route('delete-page',$page->id)}}" class="btn btn-danger btn-sm" ><i class="fa fa-trash"></i></a>
                                    </td>
                            </tr>
                             <!--Edit page modal start-->
                             <div class="modal" tabindex="-1" role="dialog" id="edit-page-modal{{$page->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> Editare {{$page->page_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-page',$page->id)}}" id="edit-page{{$page->id}}" method="post">
                                        @csrf 
                                        <label for="">Denumire</label>
                                        <input type="text" name="page_name" value="{{$page->page_name}}" class="form-control">
                                        <label for="">Role</label>
                                        <select name="role_id" id="" class="form-control" required>
                                            <option value="">Alegeti Rol</option>
                                            @foreach($roles as $role)
                                                <option value="{{$role->role_id}}" @if($role->role_id==$page->role_id) selected @endif >{{$role->role_name}}</option>
                                            @endforeach
                                        </select>
                                        <label for="">Include</label>
                                        <input type="text" name="include" value="{{$page->include}}" class="form-control">
                                     
                                    </form>
                                    </div>
                                    <div class="modal-footer">
                                      <button type="submit" form="edit-page{{$page->id}}" class="btn btn-primary">Salveaza</button>
                                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <!--Edit page modal -->
                            @endforeach
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
    <!--Add page modal--->
    <div class="modal" tabindex="-1" role="dialog" id="add-page-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 pagina</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-page')}}" id="add-page" method="post">
                @csrf 
                <label for="">Denumire</label>
                <input type="text" name="page_name" class="form-control">
                <label for="">Role</label>
                <select name="role_id" id="" class="form-control" required>
                    <option value="">Alegeti Rol</option>
                    @foreach($roles as $role)
                        <option value="{{$role->role_id}}">{{$role->role_name}}</option>
                    @endforeach
                </select>
                <label for="">Include</label>
                <input type="text" name="include" class="form-control">
             
            </form>
            </div>
            <div class="modal-footer">
              <button type="submit" form="add-page" class="btn btn-primary">Salveaza</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Inchide</button>
            </div>
          </div>
        </div>
      </div>
    <!--Add page moal 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>   
$('#pages-tbl').DataTable({
        searching:true,
        paging:true,           
        ordering:false,
       
        
    });
</script>
@endpush