@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 - Eventos/Corridas</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">LISTA DE EVENTOS</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void();" data-target="#destaq" data-toggle="pill" class="nav-link"><span class="hidden-xs">Eventos em destaque</span></a>
                    </li>

                    @can('inserir evento')
                        <li class="nav-item">
                            <a href="javascript:void();" data-target="#new" data-toggle="pill" class="nav-link"><span class="hidden-xs">NOVO EVENTO</span></a>
                        </li>
                    @endcan

                    @can('inserir categoria')
                        <li class="nav-item">
                            <a href="javascript:void();" data-target="#category" data-toggle="pill" class="nav-link"><span class="hidden-xs">Categorias</span></a>
                        </li>
                    @endcan

                    @can('inserir documentos')
                        <li class="nav-item">
                            <a href="javascript:void();" data-target="#documents" data-toggle="pill" class="nav-link"><span class="hidden-xs">Documentos</span></a>
                        </li>
                    @endcan

                    <li class="nav-item">
                        <a href="{{ route('races.index') }}" class="nav-link btn-secondary"><span class="hidden-xs">Voltar</span></a>
                    </li>
                </ul>
            </div>
        

        <!--
            *******************

            ****** CORPO ******
        -->
        <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 {{ $action=='destaq' ? 'active' : '' }}" id="destaq">
                                
		                        <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>Categoria</th>
                                            <th>Data da prova</th>
                                            <th>Documentos</th>
                                            <th>Destaque</th>
                                            <th>Estado</th>
                                            <th>Evento criado em: </th>
                                            <th>Última atualização</th>
                                            <th colspan="3">Acções</th>
								        </thead>
								        <tbody>
                                            
                                            @forelse ($events->where('race_destaq',1) as $key => $e)
                                                <tr>
                                                    <td>{{ $key+1 }}</td>
                                                    <td>{!! $e->race_name !!}</td>
                                                    <td>{{ $e->category->name }}</td>
                                                    <td nowrap>{{ $e->race_date }}</td>
                                                    <td align="center">{{ count($e->documents) }}</td>
                                                    <td>{{$e->race_destaq ? 'Sim': 'Não'}}</td>
                                                    <td>{{$e->race_status ? 'Activo' : 'Inativo'}}</td>
                                                    <td nowrap>{{ $e->created_at }}</td>
                                                    <td nowrap>{{ $e->updated_at }}</td>
                                                    <td><a href="{{ route('showEvent',$e->race_url) }}"><img src="{{asset('img/info.png')}}" width="25px"/></a></td>
                                                    @can('editar evento')
                                                        <td><a href="{{ route('races.edit',$e->race_id) }}"><img src="{{asset('img/edit.png')}}" width="25px"/></a></td>
                                                    @endcan
                                                    @can('apagar evento')
                                                        <td><a class="deleteRace" href="{{ route('racesDelete',$e->race_id) }}"><img src="{{asset('img/del.png')}}" width="25px"/></a></td>
                                                    @endcan
                                                </tr>    
                                            @empty
                                                <tr><td colspan="10" align="center">Não existe eventos em destaque</td></tr>
                                            @endforelse
										
										</tbody>
                                    </table>
                                   
		                        </div>
                            </div>
                        <!-- FIM DA LISTA -->

                        <!-- LISTA DE EVENTOS -->
                            <div class="tab-pane {{ $action=='LIST' ? 'active' : '' }}" id="list">
                                
                                <div class="col-sm-12 col-lg-12" style="overflow-x: auto">
                                    <form action="{{ route('searchEventName') }}" method="POST" name="races">
                                        @csrf
                                        <div class="form-group row">
                                            <label class="col-lg-12">
                                                <strong>Procurar</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">
                                                <a href="{{ route('races.index')}}"><input type="button" class="btn btn-secondary" value="Limpar" /></a>	
                                                <input type="submit" class="btn btn-primary" value="Procurar" />
                                            </div>
                                        </div>
                                    </form>
                                </div>


                                <div class="col-sm-12 col-lg-12" style="overflow-x: auto ">
                                    <div class="form-group row">
                                        <label class="col-lg-12">
                                            <strong>Lista de todos os eventos</strong>
                                        </label>
                                    </div> 
		                            <table class="table table-hover table-striped">
		                                <thead>
											<th>#</th>
								            <th>Nome</th>
								            <th>Categoria</th>
                                            <th>Data da prova</th>
                                            <th>Documentos</th>
                                            <th>Destaque</th>
                                            <th>Estado</th>
                                            <th>Evento criado em: </th>
                                            <th>Última atualização</th>
                                            <th colspan="3">Acções</th>
								        </thead>
								        <tbody>
                                            
                                            @forelse ($events as $key => $e)
                                                <tr>
                                                    <td>{{ $e->race_id }}</td>
                                                    <td>{!! $e->race_name !!}</td>
                                                    <td>{{ $e->category->name }}</td>
                                                    <td nowrap>{{ $e->getRaceDateAttribute() }}</td>
                                                    <td align="center">{{ count($e->documents) }}</td>
                                                    <td>{{$e->race_destaq ? 'Sim': 'Não'}}</td>
                                                    <td>{{$e->race_status ? 'Activo' : 'Inativo'}}</td>
                                                    <td nowrap>{{ $e->created_at }}</td>
                                                    <td nowrap>{{ $e->updated_at }}</td>
                                                    <td><a href="{{ route('showEvent',$e->race_url) }}"><img src="{{asset('img/info.png')}}" width="25px"/></a></td>
                                                    @can('editar evento')
                                                        <td><a href="{{ route('races.edit',$e->race_id) }}"><img src="{{asset('img/edit.png')}}" width="25px"/></a></td>
                                                    @endcan
                                                    @can('apagar evento')
                                                        <td><a class="deleteRace" href="{{ route('racesDelete',$e->race_id) }}"><img src="{{asset('img/del.png')}}" width="25px"/></a></td>
                                                    @endcan
                                                </tr>    
                                            @empty
                                                <tr><td colspan="10" align="center">Não existe eventos para apresentar</td></tr>
                                            @endforelse
										
										</tbody>
                                    </table>
                                    <div>{{ $events->links() }}</div>
		                        </div>
                            </div>
                        <!-- FIM DA LISTA -->
                        
                        <!-- FORMULÁRIO NOTICIAS-->
                        <div class="tab-pane {{ $action=='EDIT' ? 'active' : '' }} " id="new">
                            @include('admin.races.includes.newEventForm')
                        </div>
                        <!-- FIM DO FORMULÁRIO -->

                        <!-- CATEGORIAS -->
                        <div class="tab-pane {{ $action=='EDITCAT' ? 'active' : '' }}" id="category">
                            <div class="col-lg-12">
                                @include('admin.includes.categorys')
                            </div>
                        </div>
                        <!-- END -->

                        <!-- NOVO DOCUMENTOS -->
                        <div class="tab-pane" id="documents">
                            <div class="col-sm-12 col-lg-12">
                                @include('admin.includes.documents')
                            </div>
                        </div>
                        <!-- END -->

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

        </div>
    </div>

    <script>
        
        var editorBody = new Jodit('#editorBody', {
            "uploader" : {
                "insertImageAsBase64URI": true
            }
        });
        
        $('.deleteRace').on('click',function(event){
            event.preventDefault();
            let url = $(this).attr('href');
            swal({
                title: 'Remover o evento?',
                text: 'Esta ação é irrevesivel! Pretende eliminar o evento?',
                icon: 'warning',
                buttons: ["Cancelar","Sim"]
            }).then(function(value){
                if(value){
                    window.location.href = url
                }
            }) 
        })

    </script>
@endsection