@extends('layouts.app')

@section('content')
    <link href="{{ asset('css/profile.css')}}" rel="stylesheet">

    <div class="profile d-flex">
        <div class="row">
            <h2 class="mt-2 mb-3">Administração - Gestão de permissões</h2>
        </div>
    </div>

    <div class="profile justify-content-center">

        <!-- 
            *****  MENU ***** 
        -->

        <div class="row">
            <div class="col-sm-12 col-lg-2">
                <ul class="nav flex-column nav-pills nav-pills-primary">
                    <li class="nav-item">
                        <a href="javascript:void();" data-target="#list" data-toggle="pill" class="nav-link active show"><span class="hidden-xs">Permissões</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void();" data-target="#new" data-toggle="pill" class="nav-link"><span class="hidden-xs">Nova permissão</span></a>
                    </li>
                </ul>
            </div>

            
            <div class="col-sm-12 col-lg-10">
                <div class="card z-depth-3">
                    <div class="card-body">
                        <div class="tab-content p-3">
    
                            <!-- LISTA DE SLIDES -->
    
                            <div class="tab-pane active" id="list">
                                <div class="col-sm-12 col-lg-12" style="overflow-x: auto ">  
                                    <table class="table table-hover table-striped">
                                        <thead>
                                            <th>#</th>
                                            <th>Nome</th>
                                            <th>Data</th>  
                                        </thead>
                                        <tbody>
                                            @forelse ($permissions as $item)
                                                <tr>
                                                    <td>{{$item->id}}</td>
                                                    <td>{{ ucfirst($item->name) }}</td>
                                                    <td>{{$item->created_at}}</td>
                                                </tr>
                                            @empty
                                                
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane" id="new">
                                <div class="col-sm-12 col-lg-12">
                                    <form action="{{ route('permissions.store') }}" method="POST" name="permissions" enctype="multipart/form-data">
                                        @csrf        
                                        <div>
                                            <div class="form-group row">
                                                <label class="col-lg-12">
                                                    <strong>Nova permissão</strong>
                                                </label>
                                            </div>
    
                                            <div class="form-group row">
                                                <label class="col-lg-3 col-form-label form-control-label">Nome</label>
                                                <div class="col-lg-9">
                                                <input class="form-control" type="text" name="name" value="">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-lg-12" align="right">	
                                                    <input type="submit" class="btn btn-primary" value="Guardar" />
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>




        </div>
    </div>

@endsection