@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 - Slideshow</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 slides</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void();" data-target="#order" data-toggle="pill" class="nav-link"><span class="hidden-xs">Ordenar</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 slide</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 {{ $action=='LIST' ? '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>Ordem</th>
                                        <th>Imagem</th>
                                        <th>Nome</th>
                                        <th>Link</th>
                                        <th>Activo</th>
                                        <th>Data</th>
                                        <th colspan="3">Acções</th>
                                    </thead>
                                    <tbody>
                                        @forelse ($items as $key => $item)
                                            <tr>
                                                <td>{{ $key+1 }}</td>
                                                <td>{!! $item->order + 1 !!}</td>
                                                <td><img src="{{asset($item->img_url)}}" alt="{{ $item->alt}}" width="150px"/></td>
                                                <td>{{ $item->name }}</td>
                                                <td>{{ $item->link }}</td>
                                                <td>{{ $item->active ? 'Activo' : 'Inativo'}}</td>
                                                <td nowrap>{{ $item->created_at }}</td>
                                                <td><a href="{{ route('slideshow.edit',$item->id)}}"><img src="{{asset('img/edit.png')}}" width="25px"/></a></td>
                                                <td><a class="deleteRace" href="{{ route('slideshowDelete',$item->id)}}"><img src="{{asset('img/del.png')}}" width="25px"/></a></td>
                                            </tr>    
                                        @empty
                                            <tr><td colspan="8" align="center">Não existe slideshow para apresentar</td></tr>
                                        @endforelse
                                    
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="tab-pane" id="order">
                            <div class="col-sm-12 col-lg-12" style="overflow-x: auto ">

                                <div class="form-group row">
                                    <label class="col-lg-12">
                                        <strong>Ordenar slides</strong>
                                    </label>
                                </div>

                                <form action="{{ route('slideshowOrder') }}" method="POST"> 
                                    @csrf 
                                    <table class="table table-hover table-striped" id="sort">
                                        <thead>
                                            <th>#</th>
                                            <th>Imagem</th>
                                            <th>Nome</th>
                                            <th>Link</th>
                                        </thead>
                                        <tbody>
                                            @forelse ($actives as $key => $a)
                                                <tr>
                                                    <td>{{$key+1}}</td>
                                                    <td><img src="{{asset($a->img_url)}}" alt="{{ $a->alt}}" width="150px"/></td>
                                                    <td>{{$a->name}}</td>
                                                    <td>{{$a->link}}</td>
                                                    <input type="hidden" value="{{$a->id}}" name="slides[]">
                                                </tr>
                                            @empty
                                                <tr><td colspan="8" align="center">Não existe nenhum slideshow ativo</td></tr> 
                                            @endforelse
                                            
                                            
                                        </tbody>
                                    </table>
                                    <hr />

                                    <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>

                        <!-- FIM DA LISTA -->

                        <!-- FORMULÁRIO -->

                        <div class="tab-pane {{ $action=='EDIT' ? 'active' : '' }}" id="new">
                            <div class="col-sm-12 col-lg-12">
                                <form action="{{ $action=='EDIT' ? route('slideshow.update',$slide->id) : route('slideshow.store')}}" method="POST" name="slides" enctype="multipart/form-data">
                                    @csrf
                                    @if(isset($slide))
                                        @method('PUT')
                                    @endif
                                    <div>
                                        <div class="form-group row">
                                            <label class="col-lg-12">
                                                <strong>{{ $action=='EDIT' ? 'Editar slide':'Novo slide'}}</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="{{ isset($slide)?$slide->name:'' }}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Link</label>
                                            <div class="col-lg-9">
                                            <input class="form-control" type="text" name="link" value="{{ isset($slide)?$slide->link:'' }}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="photo" class="col-lg-3 col-form-label form-control-label">Logotipo</label>
                                            <div class="col-lg-9">
                                                <input type="file" class="form-control-file" id="photo" name="photo">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Legenda da imagem</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" name="alt" value="{{ isset($slide)?$slide->alt:'' }}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="form-check-label col-form-label col-lg-3" for="raceStatus">Activa</label>
                                            <div class="col-lg-9">
                                            <input type="hidden" name="active" value="0" /> 
                                            <input class="form-check-input" type="checkbox" id="raceStatus" name="active" value="1" @isset($slide)@if($slide->active == 1) checked @endif @endisset />
                                            </div>
                                        </div>

                                        <hr />
                                        <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>


                        <!-- FIM -->



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

        </div>
    </div>

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
    <script type="text/javascript">

        $("#sort tbody").sortable();

    </script>

@endsection