@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 - Calendário</h2>
        </div>
    </div>
    <div class="profile justify-content-center">

        <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">Calendário</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void();" data-target="#new" data-toggle="pill" class="nav-link"><span class="hidden-xs">Novo registo</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 EVENTOS -->
                                <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>Data</th>
                                                <th>Nome</th>
                                                <th>Hora</th>
                                                <th>Evento criado em: </th>
                                                <th colspan="3">Acções</th>
                                            </thead>
                                            <tbody>
                                                @forelse($items as $key => $value)
                                                    <tr>
                                                        <td>{{ $key+1 }}</td>
                                                        <td>{{ $value->date }}</td>
                                                        <td>{!! $value->name !!}</td>
                                                        <td>{{ $value->hour}}</td>
                                                        <td>{{ $value->created_at }}</td>
                                                        <td><img src="{{asset('img/info.png')}}" width="25px"/></td>
                                                    
                                                        <td><img src="{{asset('img/edit.png')}}" width="25px"/></td>
                                                   
                                                        <td><img src="{{asset('img/del.png')}}" width="25px"/></td>
                                                   
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr><td colspan="10" align="center">Não existe eventos em destaque</td></tr>
                                                @endforelse
                                         
                                            </tbody>
                                        </table>
                                       
                                    </div>
                                </div>

                                <div class="tab-pane" id="new">
                                    <div class="col-sm-12 col-lg-12" style="overflow-x: auto">
                                        <div class="form-group row">
                                            <label class="col-lg-12">
                                                <strong>Novo registo</strong>
                                            </label>
                                        </div>
                                        <form action="{{ route('calendar.store') }}" method="POST" name="calendars">
                                            @csrf
                                            <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">
                                                <label class="col-lg-3 col-form-label form-control-label">URL da prova/evento</label>
                                                <div class="col-lg-9">
                                                    <input class="form-control" type="text" name="link" value="">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-lg-3 col-form-label form-control-label">URL da ficha de inscrição</label>
                                                <div class="col-lg-9">
                                                    <input class="form-control" type="text" name="subscribe_link" value="">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="example-datetime-local-input" class="col-lg-3 col-form-label">Data e hora da prova</label>
                                                <div class="col-lg-9">
                                                  <input class="form-control" name="date" type="datetime-local" 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>
                                        </form>
                                    </div>
                                </div>
                        </div>
        </div>

    </div>
@endsection