{{-- Messagens da session --}}
@include('partials.session-message')
<style>
    .max-height-modal .modal-content {
        max-height: 80vh;
        margin: 0 auto;
    }

    .max-height-modal .modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .max-height-modal img {
        max-width: 100%; /* Redimensiona a largura da imagem para caber no modal */
        max-height: 100%; /* Redimensiona a altura da imagem para caber no modal */

    }
</style>
{{-- Modal --}}
<div class="modal fade max-height-modal" id="imagemModal" tabindex="-1" role="dialog" aria-labelledby="imagemModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img id="imagemModalContent" src="#" alt="Imagem Ampliada" />
            </div>
        </div>
    </div>
</div>

<div class="card shadow-lg mx-4 card-profile-bottom">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-auto">
                <div class="avatar avatar-xl position-relative">
                    <i class="fa fa-users" style="color:#344767; font-size:48px !important"></i>
                </div>
            </div>
            <div class="col-auto my-auto ">
                <div class="h-100">
                    <h5 id="head-assunto" class="mb-1">
                            {{ isset($aviso) ? $aviso->assunto : '-' }}
                    </h5>
                    <p id="head-username" class="mb-0 font-weight-bold text-sm">
                            @if(isset($aviso))
                                @switch($aviso->status)
                                    @case('ativo')
                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $aviso->status }}</span>
                                        @break
                                    @case('inativo')
                                        <span class="badge badge-sm bg-gradient-success p-2">{{ $aviso->status }}</span>
                                        @break
                                    @case('pendente')
                                        <span class="badge badge-sm bg-gradient-warning p-2">{{ $aviso->status }}</span>
                                        @break
                                    @default
                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $aviso->status }}</span>
                                @endswitch
                            @endif
                    </p>
                </div>
            </div>
            {{--Botão de status ativo, inativo e pendente--}}
            @if (isset($aviso))
                <div class="col-lg-8 col-md-8 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                    <div class="nav-wrapper position-relative end-0 text-end">
                        <a id="ativo" href="#" data-status="ativo" class="form-status btn btn-success btn-sm d-inline-block" style="{{ (isset($aviso) && $aviso->status == 'inativo' || $aviso->status == 'pendente' ) ? '' : 'display:none !important'}} "><i class="fa fa-check me-3" aria-hidden="true"></i>Ativo</a>
                        <a id="inativo" href="#" data-status="inativo" class="form-status btn btn-danger btn-sm d-inline-block" style="{{ (isset($aviso) && $aviso->status == 'ativo' || $aviso->status == 'pendente' ) ? '' : 'display:none !important'}}"><i class="fa fa-times me-3" aria-hidden="true"></i>Inativo</a>
                        <a id="pendente" href="#" data-status="pendente" class="form-status btn btn-warning btn-sm d-inline-block" style="{{ (isset($aviso) && $aviso->status == 'inativo' || $aviso->status == 'ativo' ) ? '' : 'display:none !important'}}"><i class="fa fa-spinner me-3" aria-hidden="true"></i>Pendente</a>
                    </div>
                    
                </div>
            @endif
        </div>
    </div>
</div>
<div class="container-fluid py-4" >
    <div class="row">
        <div class="col-md-8">
            
            <div class="card" >
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-4">Preencha as informações abaixo</p>
                        <div class="ms-auto">
                                <button type="submit" class="btn btn-success btn-sm ms-auto "><i class="fas fa-save me-3"></i>Salvar</button>
                                <button class="btn btn-danger btn-sm ms-auto d-none"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-uppercase text-sm">Descrição</p>
                    <div class="row">
                        {{-- Tipo do aviso --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Tipo') }}</label>
                                <select class="form-control  {{ $errors->has('tipo') ? ' is-invalid' : '' }}" name="tipo" id="select-tipo" {{-- isset($aviso) ? 'disabled' : ''--}}>
                                    <option value="">- Selecione o Tipo -</option>
                                    <option value="Alerta" {{ (isset($aviso) && $aviso->tipo == 'Alerta') || old('tipo') == 'Alerta' ? 'selected' : '' }}>Alerta</option>
                                    <option value="Informacao" {{ (isset($aviso) && $aviso->tipo == 'Informacao') || old('tipo') == 'Informacao' ? 'selected' : '' }}>Informação</option>
                                    <option value="Atualizacao" {{ (isset($aviso) && $aviso->tipo == 'Atualizacao') || old('tipo') == 'Atualizacao' ? 'selected' : '' }}>Atualização</option>
                                    <option value="Saudacao" {{ (isset($aviso) && $aviso->tipo == 'Saudacao') || old('tipo') == 'Saudacao' ? 'selected' : '' }}>Saudação</option>
                                    <option value="Urgente" {{ (isset($aviso) && $aviso->tipo == 'Urgente') || old('tipo') == 'Urgente' ? 'selected' : '' }}>Urgente</option>
                                </select>
                                 @if ($errors->has('name'))
                                    <span id="tipo-error" class="error text-danger"
                                        for="input-tipo">{{ $errors->first('tipo') }}</span>
                                @endif
                            </div>
                        </div>
                        {{-- Assunto do aviso --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Assunto') }}</label>
                                <input class="form-control{{ $errors->has('assunto') ? ' is-invalid' : '' }}" 
                                name="assunto" id="input-assunto" type="text"
                                value="{{ isset($aviso) ? $aviso->assunto : old('assunto') }}"
                                placeholder="{{ __('Assunto') }}" 
                                onkeyup="updateHeadName('input-assunto', 'head-assunto')" 
                                {{-- isset($aviso) ? 'readonly' : ''--}}
                                 />
                            @if ($errors->has('assunto'))
                                <span id="assunto-error" class="error text-danger"
                                    for="input-assunto">{{ $errors->first('assunto') }}</span>
                            @endif
                            </div>
                        </div>
                        {{-- Inicio do aviso --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Inicio') }}</label>
                                 <input class="form-control{{ $errors->has('inicio_at') ? ' is-invalid' : '' }}" type="datetime-local" value="{{ isset($aviso) ? $aviso->inicio_at : old('inicio_at') }}" id="input-inicio" name="inicio_at">
                            @if ($errors->has('inicio_at'))
                                <span id="inicio_at-error" class="error text-danger"
                                    for="input-inicio">{{ $errors->first('inicio_at') }}</span>
                            @endif
                            </div>
                        </div>
                        {{-- Fim do aviso --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Fim') }}</label>
                                 <input class="form-control{{ $errors->has('fim_at') ? ' is-invalid' : '' }}" type="datetime-local" value="{{ isset($aviso) ? $aviso->fim_at : old('fim_at') }}" id="input-fim" name="fim_at">
                            @if ($errors->has('fim_at'))
                                <span id="fim_at-error" class="error text-danger"
                                    for="input-fim">{{ $errors->first('fim_at') }}</span>
                            @endif
                            </div>
                        </div>
                        {{-- Conteudo do aviso --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __('Conteúdo') }}</label>
                                    <textarea id="myTextarea" oninput="resizeTextarea()" placeholder="{{ __('Digite o conteudo do aviso a ser exibido') }}" name="conteudo" id="input-conteudo" class="form-control" aria-label="With textarea" {{-- isset($aviso) ? 'readonly' : ''--}}>{{ isset($aviso) ? $aviso->conteudo : old('conteudo') }}</textarea>
                                @if ($errors->has('conteudo'))
                                    <span id="conteudo-error" class="error text-danger"
                                        for="input-conteudo">{{ $errors->first('conteudo') }}</span>
                                @endif
                            </div>
                        </div>
                        {{-- hidden inputs pro banco --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="hidden" id="status" name="status" value="{{ isset($ordem) ? $ordem->status : old('status') }}">
                            </div>
                        </div>

                    </div>
                    
                    <hr class="horizontal dark">
                    
                    
                </div>
                
                
            </div>
           
        </div>

        <div class="col-md-4  mt-4 mt-md-0">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-4">Customização</p>
                        <button class="btn btn-primary btn-sm ms-auto d-none">Settings</button>
                    </div>
                </div>
                <div class="card-body">
                <p class="text-uppercase text-sm">Personalização</p>
                @if (isset($aviso))
                    <div class="row">
                        <div class=" col-md-12 ">
                            <!-- Input para upload da imagem da logo -->
                            <div class="form-group">
                                <label>{{ __('Imagem') }}</label>
                                <input type="file" class="form-control{{ $errors->has('imagem') ? ' is-invalid' : '' }}" name="imagem">
                                @if ($errors->has('imagem'))
                                    <span class="error text-danger" for="input-imagem">{{ $errors->first('imagem') }}</span>
                                @endif
                            </div>
                        </div>
                        @if(isset($aviso->imagem))
                            {{-- Foto --}}
                            <div class="col-md-3 pb-4">
                            <label></label>
                                <img id="preview-logo" src="{{ asset('storage/' . $aviso->imagem) }}" alt="Preview da Imagem" style="border:8px solid #f0f2f5;border-radius:4px;max-width:90px; max-height: 90px;float:left" onclick="document.getElementById('imagemModalContent').src = this.src; $('#imagemModal').modal('show');" />
                            </div>
                            <div class="col-md-9  pb-4 text-start">
                                <button type="button" class="btn btn-danger btn-xs" id="delete-logo" style="margin-left: 10px;">
                                    <i class="fa fa-trash"></i>
                                </button>
                                <span id="delete-logo-text" class="text-danger" style="display: none; margin-left: 10px;">Salve o registro para confirmar a exclusão</span>
                                {{-- Campo oculto para controle de exclusão --}}
                                <input type="hidden" name="delete_logo" id="delete-logo-input" value="0">
                            </div>
                        @endif
                        <div class="col-md-12">
                            <!-- Input para upload da imagem de banner -->
                            {{--<div class="form-group">
                                <label>{{ __('Banner') }}</label>
                                <input type="file" class="form-control{{ $errors->has('banner') ? ' is-invalid' : '' }}" name="banner">
                                @if ($errors->has('banner'))
                                    <span class="error text-danger" for="input-banner">{{ $errors->first('banner') }}</span>
                                @endif
                            </div>--}}
                        </div>
                        @if(isset($tenant->banner))
                            {{-- Foto --}}
                            {{--<div class="col-md-3 pb-2">
                            <label></label>
                                <img id="preview-banner" src="{{ asset('storage/' . $tenant->banner) }}" alt="Preview da Imagem" style="border:8px solid #f0f2f5;border-radius:4px;max-width:90px; max-height: 90px;float:left" onclick="document.getElementById('imagemModalContent').src = this.src; $('#imagemModal').modal('show');" />
                            </div>--}}
                            <div class="col-md-9  pb-4 text-start">
                                {{--<button type="button" class="btn btn-danger btn-xs" id="delete-banner" style="margin-left: 10px;">
                                    <i class="fa fa-trash"></i>
                                </button>--}}
                                {{--<span id="delete-banner-text" class="text-danger" style="display: none; margin-left: 10px;">Salve o registro para confirmar a exclusão</span>--}}
                                {{-- Campo oculto para controle de exclusão --}}
                                {{--<input type="hidden" name="delete_banner" id="delete-banner-input" value="0">--}}
                            </div>
                        @endif
                        <div class="col-6">
                            <!-- Input para cor primária HEX -->
                            {{--<div class="form-group">
                                <label>{{ __('Cor Primária') }}</label>
                                <input type="color" class="form-control{{ $errors->has('corprimaria') ? ' is-invalid' : '' }}" name="corprimaria" id="corprimaria" 
                                value="{{ isset($tenant) ? $tenant->corprimaria : old('corprimaria') }}" placeholder="{{ __('Cor Primária') }}">
                                @if ($errors->has('corprimaria'))
                                    <span class="error text-danger" for="input-corprimaria">{{ $errors->first('corprimaria') }}</span>
                                @endif
                            </div>--}}
                        </div>
                        <div class="col-6">
                            {{--<div class="input-group-append mt-4">
                                <button class="btn btn-danger btn-xs" type="button" id="resetColorButton">Limpar</button>
                            </div>--}}
                        </div>
                        <div class="col-6 d-none">
                            <!-- Input para cor secundária HEX -->
                            {{--<div class="form-group">
                                <label>{{ __('Cor Secundária') }}</label>
                                <input type="color" class="form-control{{ $errors->has('corsecundaria') ? ' is-invalid' : '' }}" name="corsecundaria" 
                                value="{{ isset($tenant) ? $tenant->corsecundaria : old('corsecundaria') }}" placeholder="{{ __('Cor Secundária') }}">
                                @if ($errors->has('corsecundaria'))
                                    <span class="error text-danger" for="input-corsecundaria">{{ $errors->first('corsecundaria') }}</span>
                                @endif
                            </div>--}}
                        </div>
                    </div>
                @endif
            </div>
               
        </div>
    </div>       
</div>

    <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script>
        function changeStatus(model, id, newStatus) {
            $.ajax({
                url: `../../avisos/status/${model}/${id}/${newStatus}`,
                method: 'GET',
                success: function(response) {
                    //console.log(response);
                    console.log('foi');
                    $('#navbarDropdownMenuLink2').text(newStatus).css('text-transform', 'uppercase');
                    // Atualize a UI aqui
                },
                error: function(error) {
                    console.error(error);
                    // Lidar com erros aqui
                }
            });
        }
    </script>
    <script>
        //chama a changestatus com o click
        document.addEventListener('DOMContentLoaded', () => {
            const ordemId = {{ $aviso->idaviso ?? 'undefined' }};
            const statusElements = document.querySelectorAll('.form-status');

            statusElements.forEach((element) => {
                element.addEventListener('click', () => {
                    const status = element.getAttribute('data-status');
                    changeStatus('avisos', ordemId, status);
                });
            });
        });
    </script>
    <script>
        function updateHeadName(inputId, outputId) {
            var inputValue = $('#' + inputId).val();
            $('#' + outputId).text(inputValue);
        }
                
    </script>
    <script>
    $(document).ready(function(){
    $('#input-cellphone').mask('(00) 00000-0000');
    });
    </script>
<script>
    $(document).ready(function(){
    $('#input-cnpj').mask('00.000.000/0000-00');
    $('#input-cep').mask('00000-000');
    });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#input-cep').keyup(function() {
                var cep = $(this).val();
    
                // Remove caracteres não numéricos e verifica se o CEP tem 8 caracteres
                var cleanCep = cep.replace(/\D/g, '');
                if(cleanCep.length == 8){
                    $.ajax({
                        url: '/buscar-cep/' + cleanCep,
                        method: 'GET',
                        success: function(data) {
                            // Supondo que os nomes das chaves na resposta sejam 'endereco', 'bairro', etc.
                            // Ajuste conforme necessário de acordo com a estrutura da sua resposta
                            $('#input-endereco').val(data.logradouro);
                            $('#input-bairro').val(data.bairro);
                            $('#input-cidade').val(data.localidade);
                            $('#input-estado').val(data.uf);
                            $('#input-ibge').val(data.ibge);
                            // Note que 'numero' e 'complemento' não estão sendo preenchidos, 
                            // pois geralmente não são fornecidos por APIs de CEP
                        },
                        error: function(error) {
                            console.error(error);
                            alert('Erro ao buscar CEP. Tente novamente.');
                        }
                    });
                } else {
              //      alert('CEP inválido. Por favor, insira um CEP válido.');
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#associate-empresa-container input[type="checkbox"]').change(function() {
                let tenantId = $(this).data('tenant-id');
                let empresaId = $(this).data('empresa-id');
                let associate = $(this).is(':checked');

                $.ajax({
                    url: `/updateAssociation`,
                    method: 'POST',
                    data: {
                        _token: $('input[name="_token"]').val(),
                        tenant_id: tenantId,
                        idempresa: empresaId,
                        associate: associate
                    },
                    success: function(response) {
                        console.log(response.message);
                    }
                });
            });
        });
    </script>
    <script>
        var deleteBannerButton = document.getElementById('delete-banner');
        if (deleteBannerButton) {
            deleteBannerButton.addEventListener('click', function() {
                // Mostrar texto de confirmação
                document.getElementById('delete-banner-text').style.display = 'inline';
                // Definir o campo oculto para 1 (indicando exclusão)
                document.getElementById('delete-banner-input').value = '1';
                // Opcional: Esconder a imagem
                document.getElementById('preview-banner').style.display = 'none';
            });
        }

        var deleteLogoButton = document.getElementById('delete-logo');
        if (deleteLogoButton) {
            deleteLogoButton.addEventListener('click', function() {
                // Mostrar texto de confirmação
                document.getElementById('delete-logo-text').style.display = 'inline';
                // Definir o campo oculto para 1 (indicando exclusão)
                document.getElementById('delete-logo-input').value = '1';
                // Opcional: Esconder a imagem
                document.getElementById('preview-logo').style.display = 'none';
            });
        }
        //document.getElementById('resetColorButton').addEventListener('click', function() {
        //document.getElementById('corprimaria').value = '#8D1F06E6';
//});
    </script>
     
     <script>
        document.addEventListener('DOMContentLoaded', () => {
        const statusElements = document.querySelectorAll('.form-status');

        statusElements.forEach((element) => {
            element.addEventListener('click', (event) => {
                event.preventDefault();
                const status = element.getAttribute('data-status');
                if (status) {
                    document.querySelector('input[id="status"]').value = status;
                    document.getElementById('formPrincipal').submit();
                }
            });
        });
    });
    </script>
    <script>
        function resizeTextarea() {
            var textarea = document.getElementById("myTextarea");
            textarea.style.height = "auto"; // Redefine a altura para que a altura calculada seja aplicada corretamente
            textarea.style.height = (textarea.scrollHeight) + "px"; // Define a altura com base no conteúdo
        }

        // Chamada inicial para redimensionar a área de texto ao carregar a página
        window.onload = function() {
            resizeTextarea();
        };
    </script>
    @include('partials.upload-js')
    @include('layouts.footers.auth.footer')
</div>