@extends('layouts.app')
@section('content')


@if (session('error'))
        <div class="col p-4 pb-0    rounded-3 border shadow-lg text-left">
            <div class="px-4 my-2">
                <div class="mr-4 alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            </div>
        </div>
@endif

 
    <div class="col p-4 pb-0    rounded-3 border shadow-lg text-left">
 
        <div class="card p-4">
            <h1 class="card-title mt-2">
                <i class="fa-solid fa-comment-smile"></i> Comentários do Gestor
            </h1>
            <ol class="list-group list-group-numbered" id="gestor">
                @foreach ($manager as $mn)
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            {{ $mn['comment'] }}
                        </div>


                        <span class="badge bg-primary rounded-pill ">
                            <small>{{ \Carbon\Carbon::parse($mn['created_at'])->format('d/m/Y H:i:s') }}</small>
                        </span>
                    </li>
                @endforeach
            </ol>

        </div>
        <div class="card-footer bg-transparent">
            <small><b>Atualizando em: <span id="timer" class="text-danger"></span></b></small>
        </div>
</div>

@push('scripts')
    <script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

        <script type="text/javascript">
            
            const duration = 10;

            $(document).ready(function() {

                display = document.querySelector('#timer');
                startTimer(duration, display);
                setInterval(() => {

                    comentarioGestor()
                }, 10000);

            });

            function startTimer(duration, display) {
                var timer = duration, minutes, seconds;
                setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);
                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;
                    display.textContent = minutes + ":" + seconds;
                    if (--timer < 0) {
                        timer = duration;
                    }
                }, 1000);
            }


            function comentarioGestor() {
                $.ajax({
                    url: `{{ url('/api/manager-comments') }}`,
                    type: "get",
                    success: function(response) {
                        let comments = response

                        console.log(comments, ' ---> resposta Gestor')
                        if (comments.length > 0) {
                            let html = ''
                            comments.forEach(item => {
                                html += `
                                <div class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">

                                    ${item.comment}
                                </div>

                                <span class="badge bg-primary rounded-pill ">
                                    <small>${moment(item.created_at).format('DD/MM/YYYY HH:mm:ss')}</small>
                                </span>
                            </div>`
                            });
                            document.getElementById('gestor').innerHTML = html
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }
                });
            }
        </script>
    @endpush
@endsection