@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-2 div-button">
                            <a href="{{ route('dashboard.users') }}" class="btn btn-info">Ver todos usuários</a>
                        </div>
                        <div class="col-md-8 div-button">Questionário por Usuário</div>
                        <div class="col-md-2 div-button">
                            <a href="{{ route('dashboard.export') }}" class="btn btn-success">Exportar dados</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="height: 650px; overflow-y:auto;">
                            <input type="search" name="search" id="usersSearch" class="form-control" placeholder="Digite o que deseja buscar...">
                            <table class="table table-striped">
                                <thead>
                                    <tr style="position: sticky; top: 0;background-color: white; z-index: 1000;">
                                        <th>Setor</th>
                                        <th scope="col">Nome</th>
                                        <th scope="col">Formulário</th>
                                        <th scope="col">E-mail</th>
                                        <th scope="col">Enviado</th>
                                        <th scope="col">Iniciado</th>
                                        <th scope="col">Progresso</th>
                                        <th scope="col">Concluído</th>
                                        <th scope="col">Data início de participação</th>
                                        <th scope="col">Data fim de participação</th>
                                        <th scope="col">Data última atualização</th>
                                        @if (Auth::user()->is_admin == '1')
                                            <th scope="col">Ações</th>
                                        @endif
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($userQuestionaries as $userQuestionary)
                                        <tr>
                                            <td data-setor="{{$userQuestionary['setor_descricao']}}">{{ $userQuestionary['setor_descricao'] }}</td>
                                            <td data-nome="{{$userQuestionary['user_name']}}">{{ $userQuestionary['user_name'] }}</td>
                                            <td data-quest-id="{{$userQuestionary['questionary_id']}}">{{ $userQuestionary['questionary_name'] }}</td>
                                            <td data-email="{{$userQuestionary['user_email']}}">{{ $userQuestionary['user_email'] }}</td>
                                            <td>{{ $userQuestionary['user_is_emailed'] ? 'Sim' : 'Não' }}</td>
                                            <td>{{ !empty($userQuestionary['initialized_at']) ? 'Sim' : 'Não' }}</td>
                                            <td>
                                                <div class="progress-container">
                                                    @php
                                                        $progress = $userQuestionary['progress'];
                                                        $color =
                                                            $progress < 40
                                                                ? '#4f6068'
                                                                : ($progress < 80
                                                                    ? '#005980'
                                                                    : ($progress < 100
                                                                        ? '#008061'
                                                                        : 'green'));
                                                    @endphp
                                                    <div class="progress-bar no-animation"
                                                        style="width: {{ $progress }}%; background-color: {{ $color }};">
                                                    </div>
                                                    <span>{{ $progress }}%</span>
                                                </div>
                                            </td>
                                            <td>{{ $userQuestionary['progress'] == 100 ? 'Sim' : 'Não' }}</td>
                                            <td>{{ !empty($userQuestionary['initialized_at']) ? \Carbon\Carbon::parse($userQuestionary['initialized_at'])->format('d/m/Y') : '-' }}</td>
                                            <td>{{ !empty($userQuestionary['finished_at']) ? \Carbon\Carbon::parse($userQuestionary['finished_at'])->format('d/m/Y') : '-' }}</td>
                                            <td>{{ \Carbon\Carbon::parse($userQuestionary['updated_at'])->format('d/m/Y H:i') }}</td>
                                            @if (Auth::user()->is_admin == '1')
                                                <td>
                                                    <a class="btn btn-primary mb-2" href="{{route('users.edit',['id' => $userQuestionary['user_id']])}}"> <i class="fa-solid fa-pen"></i></a>
                                                    @if($userQuestionary['user_is_emailed'] == 1)
                                                        <a class="btn btn-danger mb-2" href="{{route('users_questionary.remove', ['id' => $userQuestionary['id']])}}" onclick="return handleRemoveClick(event, '{{$userQuestionary['user_name']}}')"><i class="fa-solid fa-trash-can"></i></a>
                                                    @endif
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .progress-container {
            width: 100%;
            height: 20px;
            background-color: #ccc;
            position: relative;
            border-radius: 150px;
        }

        .progress-bar {
            height: 100%;
            position: absolute;
            transition: width 1s ease;
            border-radius: 150px;
        }

        .loading {
            animation: loadingAnimation 1.5s ease forwards;
        }

        .no-animation {
            animation: none !important;
        }

        @keyframes loadingAnimation {
            0% {
                width: 0%;
            }

            100% {
                width: 100%;
            }
        }

        .progress-container>span {
            display: block;
            width: 100%;
            position: absolute;
            text-align: center;
            font-weight: 900;
            font-size: 12px;
            line-height: 20px;
            color: #ffffff;
        }
    </style>
    <script>
        function searchItem(searchTerm){
            const param = new URLSearchParams({
                searchTerm: searchTerm
            });

            fetch(`{{ route('users.search') }}?${param.toString()}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(usersQuestionaries => {
                updateTable(usersQuestionaries);
            })
            .catch(error => {
                console.error('Erro na busca:', error);
            });
        }

        function updateTable(usersQuestionaries) {
            const tbody = document.querySelector('tbody');
            tbody.innerHTML = '';

            if (usersQuestionaries.length === 0) {
                tbody.innerHTML = '<tr><td colspan="12" class="text-center">Nenhum resultado encontrado</td></tr>';
                return;
            }

            usersQuestionaries.forEach(userQuestionary => {
                const row = createUserRow(userQuestionary);
                tbody.appendChild(row);
            });

            initProgressBars();
        }

        function createUserRow(userQuestionary) {
            const row = document.createElement('tr');

                const progress = userQuestionary.progress || 0;
                const progressColor = progress < 40 ? '#4f6068' :
                                    progress < 80 ? '#005980' :
                                    progress < 100 ? '#008061' : 'green';

                row.innerHTML = `
                    <td data-setor="${userQuestionary.setor_descricao ? userQuestionary.setor_descricao : ''}">${userQuestionary.setor_descricao ? userQuestionary.setor_descricao : ''}</td>
                    <td data-nome="${userQuestionary.user_name}">${userQuestionary.user_name}</td>
                    <td data-quest-id="${userQuestionary.questionary_id}">${userQuestionary.questionary_name}</td>
                    <td data-email="${userQuestionary.user_email}">${userQuestionary.user_email}</td>
                    <td>${userQuestionary.user_is_emailed ? 'Sim' : 'Não'}</td>
                    <td>${userQuestionary.initialized_at ? 'Sim' : 'Não'}</td>
                    <td>
                        <div class="progress-container">
                            <div class="progress-bar no-animation" style="width: ${progress}%; background-color: ${progressColor};"></div>
                            <span>${progress}%</span>
                        </div>
                    </td>
                    <td>${progress == 100 ? 'Sim' : 'Não'}</td>
                    <td>${userQuestionary.initialized_at ? formatDate(userQuestionary.initialized_at) : '-'}</td>
                    <td>${userQuestionary.finished_at ? formatDate(userQuestionary.finished_at) : '-'}</td>
                    <td>${formatDateTime(userQuestionary.updated_at)}</td>
                    ${@json(Auth::user()->is_admin == '1') ? `
                        <td>
                            <a class="btn btn-primary mb-2" href="/users/edit/${userQuestionary.user_id}">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                            ${userQuestionary.user_is_emailed == 1 ? `
                                <a class="btn btn-danger mb-2" href="/users/users_questionary/remove?id=${userQuestionary.id}" onclick="return handleRemoveClick(event, '${userQuestionary.user_name}')">
                                    <i class="fa-solid fa-trash-can"></i>
                                </a>
                            ` : ''}
                        </td>
                    ` : ''}
                `;
            return row;
        }

        function handleRemoveClick(event, userName) {
            event.preventDefault();

            const confirmed = confirm(`Tem certeza que deseja remover o usuário "${userName}" do questionário?`);
            if (!confirmed) {
                event.preventDefault();
                return false;
            }
            return true;
        }

        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('pt-BR');
        }

        function formatDateTime(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('pt-BR') + ' ' + date.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'});
        }

        function initProgressBars() {
            const progressBars = document.querySelectorAll('.progress-bar');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.classList.add('no-animation');
                bar.style.width = '0%';
                void bar.offsetWidth;
                bar.classList.remove('no-animation');
                bar.style.width = width;
            });
        }

        document.addEventListener("DOMContentLoaded", function() {
            const progressBars = document.querySelectorAll('.progress-bar');

            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.classList.add('no-animation'); // Desativar animações temporariamente
                bar.style.width = '0%'; // Resetar o width
                // Forçar reflow. Mais informações: https://stackoverflow.com/a/3485654
                void bar.offsetWidth;
                bar.classList.remove('no-animation'); // Reativar animações
                bar.style.width = width; // Definir o width original
            });

            const searchTerm = document.getElementById('usersSearch');
            if (searchTerm) {
                searchTerm.addEventListener('input', function(e) {
                    if (this.value.length === 0) {
                        location.reload();
                        return;
                    }
                    if (this.value.length < 3) return;
                    searchItem(this.value);
                });
            }
        });
    </script>
@endsection