@extends('adminlte::page')

@section('title', " $title ")

@section('content')
<div class="container-fluid">

    <div class="row pt-4">
        <div class="col-md-4">
            <h4><a class="btn btn-primary shadow" data-toggle="modal" data-target="#create">
                + ADICIONAR NOVO BANNER</a> <span class="badge badge-secondary shadow">{!! $count !!}</span>
            </h4>
        </div>

        <div class="col-md-4"></div>

        <div class="col-md-4">
            <form action="{{ route('banner.search') }}" method="get" class="form form-inline float-right">
                @csrf
                <input type="text" name="name" placeholder="Filtrar: insira o nome do titulo" class="form-control" style="width: 450px;" value="{{ $filters['name'] ?? '' }}">
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
            </form>
        </div>

    </div>
    
    <!-- Created -->
    <div class="modal fade" id="create">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-primary">
                    <h4 class="modal-title"><i class="fa fa-camera"></i> Cadastrando Banner</h4>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form action="{{ route('banner.store') }}" method="post" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label>Titulo</label>
                            <input type="text" name="title" class="form-control" placeholder="Digite o titulo">
                        </div>

                        <div class="form-group">
                            <label>SubTitulo</label>
                            <input type="text" name="subtitle" class="form-control" placeholder="Digite o subtitulo">
                        </div>

                        <div class="form-group"></div>
                            <label>Imagem <code>Inserir imagem com as dimenssões 1920 x 1080 para melhor resolução e visualização</code></label>
                            <input type="file" name="image" class="form-control d-none" id="customFile1" onchange="displaySelectedImage(event, 'selectedImage')">

                            <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                <label class="form-label text-white m-1" for="customFile1">Escolher Imagem</label>
                            </div>
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success submit">Salvar</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        </div>

                    </form>
                </div>

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

    <div class="row border shadow mt-3">
        <div class="table table-responsive">
            <div class="card-body">

                @include('app.includes.alerts')
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr class ="bg-dark text-white">
                                <th><strong><i class="fa fa-calendar"></i> Data</strong></th>
                                <th><strong>Titlulo</strong></th>
                                <th><strong>Subtitulo</strong></th>
                                <th><strong></strong><i class="fa fa-camera"></i> Imagem</strong></th>
                                <th><strong>Editar</strong></th>
                                <th><strong>Excluir</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($banners as $banner)
                            <tr>
                                <td><sapn class="badge badge-secondary shadow" style="font-size:16px;">{{ date("d/m/Y", strtotime($banner->created_at)) }}</sapn></td>
                                <td>{{ $banner->title }}</td>
                                <td>{{ $banner->subtitle }}</td>
                                <td>
                                    @if( !isset($banner->image) ) 
                                        <img src="{{ url("images/sem-imagem.png") }}" class="img-fluid" alt="Sem Imagem definida" style="max-width: 79px;">       
                                    @else
                                        <img src="{{ url("storage/{$banner->image}") }}" class="img-thumbnail img-fluid shadow" alt="{{ $banner->title }}" style="max-width: 110px;">     
                                    @endif 
                                </td>
                                <td>
                                <a href="#" class="btn btn-outline-success me-1 edit-btn shadow" title="Editar Banner"
                                        data-toggle="modal" data-target="#update"
                                        data-id="{{ $banner->id }}"
                                        data-title="{{ $banner->title }}"
                                        data-subtitle="{{ $banner->subtitle }}"><i class="fa fa-edit"></i>
                                    </a>
                                </td>
                                <td>
                                    <form action="{{ route('banner.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger shadow" title="Excluir Banner"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    
                    {{-- Paginação --}}
                    {{ $banners->links() }}

                </div>
            </div>

        </div>
    </div>

    <!-- Update -->
    <div class="modal fade" id="update">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-success">
                    <h4 class="modal-title"><i class="fa fa-camera"></i> Atualizando Banner</h4>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form action="{{ route('banner.update') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <input type="hidden" name="id" class="form-control" value="" id="id">

                        <div class="form-group">
                            <label>Titulo</label>
                            <input type="text" name="title" class="form-control" value="" id="title">
                        </div>

                        <div class="form-group">
                            <label>SubTitulo</label>
                            <input type="text" name="subtitle" class="form-control" value="" id="subtitle">
                        </div>

                        <div class="form-group"></div>
                            <label>Imagem <code>Inserir imagem com as dimenssões 1920 x 1080 para melhor resolução e visualização</code></label>
                            <input type="file" name="image" class="form-control d-none" id="customFile2" onchange="displaySelectedImage(event, 'selectedImage')">

                            <div data-mdb-ripple-init class="btn btn-success btn-rounded">
                                <label class="form-label text-white m-1" for="customFile2">Escolher Imagem</label>
                            </div>
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success submit">Salvar</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        </div>

                    </form>
                </div>

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

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Seleciona todos os botões de edição
            var editButtons = document.querySelectorAll('.edit-btn');

            // Adiciona um evento de clique para cada botão de edição
            editButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    let id = this.getAttribute('data-id');
                    let title = this.getAttribute('data-title');
                    let subtitle = this.getAttribute('data-subtitle');

                    document.getElementById('id').value = id;
                    document.getElementById('title').value = title;
                    document.getElementById('subtitle').value = subtitle;
                });
            });
        });

        function displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }
    </script>

</div>
@stop