@extends('layouts.publicador.default')

@section('content')
    <div class="container my-4 py-3">

        <h4 class="mb-4">
            @choice('labels.imagens', 0)
            <small class="text-muted">@lang('labels.acoes.pesquisar')</small>
        </h4>

        @include('publicador.imagens.pesquisa')

        <div class="alert alert-success text-center mb-3 sucesso-galeria" style="display: none">
            {{  __('labels.msg.imagem_adicionada') }}
        </div>

        @if (session('status-success'))
            <div class="alert alert-success text-center" role="alert">
                {{ session('status-success') }}
            </div>
        @endif

        @if (session('status-error'))
            <div class="alert alert-danger text-center" role="alert">
                {{ session('status-error') }}
            </div>
        @endif

        @include('layouts.publicador.aviso_paginacao')

        @can('imagens_adicionar')
        <div class="w-100 text-right mb-3">
            <a href="{{ route('publicador.imagens.adicionar') }}" class="btn btn-sm btn-success">@lang('labels.acoes.adicionar')</a>
        </div>
        @endcan
        @unless($lista->isEmpty())
            <table class="table table-sm table-striped table-bordered table-hover">
                <thead class="thead-default">
                <tr>
                    <th class="w-25">@lang('labels.titulo')</th>
                    <th class="w-25">@choice('labels.legendas', 1)</th>
                    <th class="d-none d-sm-table-cell">@lang('labels.data_cadastro')</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>

                @foreach ($lista as $c => $item)
                    <tr>
                        <td scope="row">{{ $item->titulo }}</td>
                        <td>{{ Str::limit($item->legenda, 50, '...') }}</td>
                        <td class="d-none d-sm-table-cell">{{ $item->created_at->format('d/m/Y H:i') }}</td>

                        <td class="text-right" nowrap>
                            {!! Form::open(['method' => 'DELETE', 'route' => ['publicador.imagens.excluir', $item->id], 'class' => 'form-delete']) !!}
                            @can('imagens_alterar')
                            <a href="{{ route('publicador.imagens.editar_tamanhos', ['id' => $item->id]) }}" class="btn btn-secondary btn-sm" title="@lang('labels.acoes.alterar')">
                                <span class="fa fa-file"></span>
                            </a>
                            <a href="{{ route('publicador.imagens.editar', ['id' => $item->id]) }}" class="btn btn-primary btn-sm" title="@lang('labels.acoes.alterar')">
                                <span class="fa fa-pencil"></span>
                            </a>
                            @endcan
                            @canany(['imagens_adicionar', 'imagens_alterar','noticias_adicionar', 'noticias_alterar'])
                                <a href="javascript:void(0)" data-id="{{ $item->id }}" class="btn btn-info btn-sm add-imagem" title="@lang('labels.acoes.alterar')">
                                    <span class="fa fa-plus"></span>
                                </a>
                            @endcanany
                            @can('imagens_excluir')
                            {{ Form::button('<span class="fa fa-trash"></span>', ['class' => 'btn btn-danger btn-sm btn-delete', 'type' => 'submit']) }}
                            @endcan
                            {!! Form::close() !!}
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endunless

        <div class="modal" tabindex="-1" role="dialog" id="modalGaleria">
            {!! Form::open(['route' => 'publicador.imagens.adicionar_galeria', 'class' => 'form form-galeria']) !!}
            {{ Form::hidden('imagem_id') }}
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@lang('labels.adicionar_galeria')</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="@lang('labels.acoes.fechar')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger col-12 text-center mb-3 erro-galeria" style="display: none"></div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    {{ Form::label('galeria_id', trans_choice('labels.galerias', 1)) }}
                                    {{ Form::select('galeria_id', $galerias, null, ['class' => 'form-control form-control-sm ', 'placeholder' => trans_choice('labels.galerias', 1)]) }}
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        {{ Form::submit(__('labels.acoes.adicionar'), ['class' => 'btn btn-success']) }}

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('labels.acoes.fechar')</button>
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
        </div>

        @include('layouts.publicador.paginacao')

        <script type="text/javascript">
            $('.add-imagem').click(function(){
                $('.form-galeria input[name="imagem_id"]').val($(this).data('id'));
                $('#modalGaleria').modal('show');
            });

            $('#modalGaleria form').submit(function(e){
                e.preventDefault();

                $.post($(this).prop('action'), $(this).serialize())
                .done(function(){
                    $('#modalGaleria').modal('hide');
                    $('.sucesso-galeria').show();
                    $('.erro-galeria').html('').hide();

                    setTimeout(function(){ $('.sucesso-galeria').hide(); }, 60000);
                }).fail(function(obj){
                    $('.erro-galeria').html(obj.responseText).show();
                    setTimeout(function(){ $('.erro-galeria').hide(); }, 30000);
                });
            });
        </script>
    </div>
@endsection