@extends('layouts.telefone')
@section('content')
<div class="col">
    <div class="card">
        <div class="card-body">
            @can('ajuda.create')
            <a class="btn bg-{{ session('template')->nome }} float-right" href="{{route('ajuda.create')}}">Cadastrar nova informação</a>
            @endcan
            <h3 class="mb-0">Ajuda</h3>
        </div>
        
        @foreach($artigos as $artigo)
        <div class="card-body">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="heading{{ $artigo->id }}">
                        <h4 class="panel-title flex-row">
                            <a class="btn btn-ajuda" role="button" data-toggle="collapse" href="#collapse{{ $artigo->id }}" aria-expanded="false" aria-controls="collapse{{ $artigo->id }}">
                                {{ $artigo->nome }}
                            </a>
                            <div class="float-right">
                                @can('ajuda.edit')
                                <a class="btn btn-primary btn-sm left" href="{{route('ajuda.edit', $artigo->id)}}" title="Editar"><i class="fas fa-edit"></i></a>
                                @endcan
                                
                                @can('ajuda.delete')
                                <form class="float-right" action="{{ route('ajuda.delete', $artigo->id)}}" method="POST">
                                    {{ csrf_field() }}
                                    @method('DELETE')
                                    <button onclick="return confirm('Tem certeza que deseja excluir')" type="submit" class="btn btn-danger btn-sm" title="Excluir"><i class="fas fa-trash"></i></button>
                                </form>
                                @endcan
                            </div>
                        </h4>
                    </div>
                    <div id="collapse{{ $artigo->id }}" class="collapse">
                        <div class="panel-body">
                            <p>{!! $artigo->descricao !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection