@extends('layouts._includes.admin.Header')
@section('titulo', 'Imagens do Álbum: ' . $album->vc_titulo)

@section('conteudo')

    <div class="content-wrapper">
        <!-- START PAGE CONTENT-->
        <div class="page-content fade-in-up">
            <div class="col-md-12">
                <a href="{{ route('admin.albuns.listar') }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Voltar aos Álbuns
                </a>
                <a href="{{ route('admin.albuns.ver', $album->id) }}" class="btn btn-info">
                    <i class="fa fa-eye"></i> Ver Álbum
                </a>
                <a href="{{ route('admin.galeria_imagens.cadastrar') }}?album={{ $album->id }}" class="btn btn-primary">
                    <i class="fa fa-plus"></i> Adicionar Imagem
                </a>
            </div>
            <div class="col-md-12">
                <div class="ibox">
                    <div class="ibox-head">
                        <div class="ibox-title">Imagens do Álbum: {{ $album->vc_titulo }} ({{ $imagens->count() }} imagens)</div>
                        <div class="ibox-tools">
                            <a class="ibox-collapse"><i class="fa fa-minus"></i></a>
                        </div>
                    </div>
                    <div class="card shadow mb-4">
                        <div class="card-body">
                            @if($imagens->count() > 0)
                                <div class="row">
                                    @foreach ($imagens as $imagem)
                                        <div class="col-md-3 col-sm-6 mb-4">
                                            <div class="card">
                                                <div class="position-relative">
                                                    <img src="{{ $imagem->url_imagem }}"
                                                         class="card-img-top"
                                                         style="height: 200px; object-fit: cover;"
                                                         title="{{ $imagem->vc_legenda ?? 'Sem legenda' }}">

                                                    @if($imagem->vc_status == 'oculta')
                                                        <span class="badge badge-secondary position-absolute"
                                                              style="top: 10px; right: 10px;">
                                                            <i class="fa fa-eye-slash"></i> Oculta
                                                        </span>
                                                    @endif
                                                </div>

                                                <div class="card-body p-2">
                                                    <h6 class="card-title text-truncate">
                                                        {{ $imagem->vc_legenda ?? 'Sem legenda' }}
                                                    </h6>
                                                    <p class="card-text">
                                                        <small class="text-muted">
                                                            {{ $imagem->created_at->format('d/m/Y H:i') }}
                                                        </small>
                                                    </p>

                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-outline-dark dropdown-toggle w-100"
                                                                type="button" id="dropdownMenuButton{{ $imagem->id }}"
                                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="fa fa-cog"></i> Ações
                                                        </button>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $imagem->id }}">

                                                            @if (Auth::user()->id_nivel_usuario <= 3)
                                                                <a href="{{ route('admin.galeria_imagens.editar', $imagem->id) }}"
                                                                   class="dropdown-item">
                                                                    <i class="fa fa-edit"></i> Editar
                                                                </a>
                                                            @endif

                                                            <a href="{{ $imagem->url_imagem }}"
                                                               target="_blank"
                                                               class="dropdown-item">
                                                                <i class="fa fa-search-plus"></i> Ver em tamanho real
                                                            </a>

                                                            @if (Auth::user()->id_nivel_usuario == 1 || Auth::user()->id_nivel_usuario == 2)
                                                                <div class="dropdown-divider"></div>
                                                                <a href="{{ route('admin.galeria_imagens.eliminar', $imagem->id)}}"
                                                                   class="dropdown-item text-danger"
                                                                   data-confirm="Tem certeza que deseja eliminar esta imagem?">
                                                                    <i class="fa fa-trash"></i> Eliminar
                                                                </a>
                                                            @endif

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <i class="fa fa-image fa-3x text-muted mb-3"></i>
                                    <h4 class="text-muted">Nenhuma imagem neste álbum</h4>
                                    <p class="text-muted">Adicione a primeira imagem para começar a galeria.</p>
                                    <a href="{{ route('admin.galeria_imagens.cadastrar') }}?album={{ $album->id }}"
                                       class="btn btn-primary">
                                        <i class="fa fa-plus"></i> Adicionar primeira imagem
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="/js/datatables/jquery-3.5.1.js"></script>

        <script>
            $(document).ready(function() {
                //start delete
                $('a[data-confirm]').click(function(ev) {
                    var href = $(this).attr('href');
                    if (!$('#confirm-delete').length) {
                        $('body').append(
                            '<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Eliminar imagem</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Tem certeza que pretende eliminar esta imagem?</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button> <a  class="btn btn-danger" id="dataConfirmOk">Eliminar</a> </div></div></div></div>'
                        );
                    }
                    $('#dataConfirmOk').attr('href', href);
                    $('#confirm-delete').modal({
                        shown: true
                    });
                    return false;
                });
                //end delete
            });
        </script>

        @if (session('imagem.eliminar.true'))
            <script>
                Swal.fire(
                    'Imagem Eliminada com sucesso!',
                    '',
                    'success'
                )
            </script>
        @endif

        @if (session('imagem.cadastrar.true'))
            <script>
                Swal.fire(
                    'Imagem Cadastrada Com Sucesso!',
                    '',
                    'success'
                )
            </script>
        @endif

    </div>

@endsection