@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@php
    use Carbon\Carbon;
@endphp
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Avisos'])
    {{--modal avisos--}}
    
    {{--fim modal avisos--}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4" >
                    <div class="card-header pb-0">
                        <h6>Avisos</h6>
                    </div>
                    @if(Auth::user()->id == 1 || Auth::user()->id == 2 || Auth::user()->id == 75)
                    <div class="col-12 my-3 text-end p-2 " style="background:#1a4742; margin: 0px !important">
                        <a class="btn bg-gradient-dark mb-0 me-4" href="{{route('avisos.create')}}"><i
                                class="fa fa-plus text-sm"></i>&nbsp;&nbsp;Criar novo aviso</a>
                    </div>
                    @endif
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                @if(Auth::user()->id == 1 || Auth::user()->id == 2 || Auth::user()->id == 75)
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">id</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Usuário</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Tipo</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Assunto</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Abertura</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Inicio</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Fim</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Status</th>
                                @else
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2 ">Assunto</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2 ">Conteudo</th>
                                <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2 ">Data</th>
                                @endif
                                </tr>
                            </thead>
                            <tbody id="tb">
                            @foreach ($avisos as $aviso)
                                {{--var_dump($aviso)--}}
                                <tr data-url="{{ route('avisos.edit', $aviso->idaviso) }}" style="cursor: pointer;" id="tr"> {{--lembrar de criar rota com passagem de id--}}
                                    @if(Auth::user()->id == 1 || Auth::user()->id == 2 || Auth::user()->id == 75)
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ $aviso->idaviso }}</p>
                                       
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0  pb-0">{{ ($aviso->user ? $aviso->user->name : '' ) }} </p>
                                        <p class="text-xs font-weight-bold mb-0  pb-0">{{ ($aviso->user) ? $aviso->user->username : '' }}</p>
                                       
                                    </td>
                                    <td>
                                                <p class="text-xs font-weight-bold mb-0  pb-0">{{ $aviso->tipo }}</p>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ $aviso->assunto }}</p>
                                       
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ Carbon::parse($aviso->created_at)->format('d/m/y') }}</p>
                                       
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ Carbon::parse($aviso->inicio_at)->format('d/m/y') }}</p>
                                       
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ Carbon::parse($aviso->fim_at)->format('d/m/y') }}</p>
                                       
                                    </td>
                                    <td class="align-middle text-center text-sm">
                                        <span class="badge badge-sm bg-gradient-success p-2">{{ $aviso->status }} </span>
                                    </td>                                    
                                    @else
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ $aviso->assunto }}</p>
                                    </td>
                                    <td style="max-width: 50vw; overflow: hidden; text-overflow: ellipsis;">
                                        <p class="text-xs font-weight-bold mb-0 p-2" >{{ $aviso->conteudo }}</p>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0 p-2">{{ Carbon::parse($aviso->inicio_at)->format('d/m/y') }}</p>
                                    </td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                
                </div>
            </div>
        </div>
    </div>    
    @include('layouts.footers.auth.footer')
    <div id="user-id" style="display: none">
        {{ Auth::user()->id }}
    </div>
@endsection
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script>
    function desenhaModalAviso(data) {
        console.log('aqui: ', data);
        var tipoToCorMap = {
        'Alerta': 'danger',
        'Informacao': 'info',
        'Atualizacao': 'info',
        'Saudacao': 'info',
        'Urgente': 'danger'
    };

    // Get the color for the given tipo
    
    var corDoAssunto = tipoToCorMap[data.tipo] || 'info';

    // Create modal content
    var iconOuImagem = data.imagem ? `<img src="${'{{ asset('storage') }}/' + data.imagem}" alt="Image" width="40%">` : `<i class="ni ni-bell-55 ni-3x"></i>`;
    var modalContent = `
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-notification">Aviso!</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="py-3 text-center">
                    ${iconOuImagem}
                    <h4 class="text-gradient text-${corDoAssunto} mt-4">${data.assunto}</h4>
                    <p class="text-xs font-weight-bold mb-0  pb-0">${data.conteudo}</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-bs-dismiss="modal">Ok</button>
                <button type="button" class="btn btn-link text-white ml-auto" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    `;

    // Append modal content to body
    $('.modal-content').empty();
    $('.modal-content').append(modalContent);

    // Show modal
    $('#modal-notification').modal('show');

    }
</script>
<script>
    //ajax para buscar aviso pelo id
    function getAvisoById(id) {
        $.ajax({
            url: '/avisos/' + id + '/busca',
            type: 'GET',
            success: function(data) {
                //console.log(data);
                desenhaModalAviso(data);
            },
            error: function(error, response) {
                console.log(error);
                console.log(response);
            }
        });
    }
</script>
<script>
$(document).ready(function() {
    // Use delegation to handle click events on dynamically added rows
    $(document).on('click', 'tr[data-url]', function() {
        user_id = $('#user-id').text();
        if(user_id == 1 || user_id == 2 || user_id == 75){
            window.location.href = $(this).data('url');
        } else {
            getAvisoById($(this).data('url').split('/').slice(-2, -1)[0]); //pega o id do aviso
        }
    });
});
</script>

<script>
    //faz o modal aparecer ao carregar a janela
    $(document).ready(function(){
      $('#modal-notification').modal('show');
    });
  </script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    let currentPage = 1;
    const lastPage = {{ $avisos->lastPage() }};
    
    window.onscroll = function () {
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
            currentPage++;
            if (currentPage <= lastPage) {
                fetch(`/avisos?page=${currentPage}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (!data || !data.data) {
                        console.error('No data found in response:', data);
                        console.error(response.data);
                        return;
                    }
                    const tb = document.querySelector('#tb');
                    data.data.forEach(item => {
                        console.log('aqui2');
                        console.log('item:', item);
                        const row = document.createElement('tr');
                        row.setAttribute('data-url', `http://sislog-os.test/avisos/${item.idaviso}/edit`);
                        row.style.cursor = 'pointer';

                        const cell1 = document.createElement('td');
                        const c1paragraph = document.createElement('p');
                        c1paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c1paragraph.textContent = item.idaviso ? item.idaviso : '';
                        cell1.appendChild(c1paragraph);
                        row.appendChild(cell1);

                        const cell2 = document.createElement('td');
                        const c2paragraph_nome = document.createElement('p');
                        const c2paragraph_email = document.createElement('p');
                        c2paragraph_nome.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-0');
                        c2paragraph_email.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-0');
                        if(item.id && item.id == 1){
                            c2paragraph_nome.textContent = 'Ricardo Viana';
                            c2paragraph_email.textContent = 'ricardo@ishipper.com.br';
                        }else if(item.id && item.id == 2 ){
                            c2paragraph_nome.textContent = 'Marcelo Cunha Cardoso';
                            c2paragraph_email.textContent = 'marcelo.cunha@inpush.com.br';
                        }
                        else if(item.id && item.id == 75){
                            c2paragraph_nome.textContent = 'Amanda Julia Ferreira';
                            c2paragraph_email.textContent = 'suporte@ishipper.com.br';
                        }
                        cell2.appendChild(c2paragraph_nome);
                        cell2.appendChild(c2paragraph_email);
                        row.appendChild(cell2);

                        const cell3 = document.createElement('td');
                        const c3paragraph = document.createElement('p');
                        c3paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c3paragraph.textContent = item.tipo ? item.tipo : '';
                        cell3.appendChild(c3paragraph);
                        row.appendChild(cell3);

                        const cell4 = document.createElement('td');
                        const c4paragraph = document.createElement('p');
                        c4paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c4paragraph.textContent = item.assunto ? item.assunto : '';
                        cell4.appendChild(c4paragraph);
                        row.appendChild(cell4);

                        const cell5 = document.createElement('td');
                        const c5paragraph = document.createElement('p');
                        c5paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c5paragraph.textContent = item.created_at ?  new Date(item.created_at).toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }): '';
                        cell5.appendChild(c5paragraph);
                        row.appendChild(cell5);

                        const cell6 = document.createElement('td');
                        const c6paragraph = document.createElement('p');
                        c6paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c6paragraph.textContent = item.inicio_at ? new Date(item.inicio_at).toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }): '';
                        cell6.appendChild(c6paragraph);
                        row.appendChild(cell6);

                        const cell7 = document.createElement('td');
                        const c7paragraph = document.createElement('p');
                        c7paragraph.classList.add('text-xs', 'font-weight-bold', 'mb-0', 'p-2');
                        c7paragraph.textContent = item.fim_at ? new Date(item.fim_at).toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }): '';
                        cell7.appendChild(c7paragraph);
                        row.appendChild(cell7);

                        const cell8 = document.createElement('td');
                        const c8span = document.createElement('span');
                        cell8.classList.add('align-middle', 'text-center', 'text-sm');
                        c8span.classList.add('badge', 'badge-sm', 'bg-gradient-success', 'p-2');
                        c8span.textContent = item.status ? item.status : '';
                        cell8.appendChild(c8span);
                        row.appendChild(cell8);

                        tb.appendChild(row);
                    });
                })
                .catch(error => console.error('Error:', error));
            }
        }
    };
});

  </script>