@extends('layouts.crud')
@section('title', 'Logs do Cronograma')
@section('plugins.Sweetalert2', true)

@section('content')

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-end">
        <h3>Logs do Cronograma</h3>
        <div id="divVoltar" class='pb-1 mr-3'>
            <a href="{{ route('associados.edit', ['id' => \Crypt::encrypt($cronograma->associado_id)]) }}" class="text-white">
                <i class="fas fa-reply"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="alert alert-info">
                    <h5><i class="fas fa-info-circle"></i> Informações do Cronograma</h5>
                    <p><strong>Associado:</strong> {{ $cronograma->associado->nome_completo }}</p>
                    <p><strong>Finalidade:</strong> {{ $cronograma->finalidade->nome ?? 'N/A' }}</p>
                    <p><strong>Instituição:</strong> {{ $cronograma->instituicao->nome ?? 'N/A' }}</p>
                    <p><strong>Curso:</strong> {{ $cronograma->curso->nome ?? 'N/A' }}</p>
                    <p><strong>Rota:</strong> {{ $cronograma->rota->nome ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        @if(count($logs) > 0)
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Arquivo</th>
                            <th>Tamanho</th>
                            <th>Última Modificação</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($logs as $log)
                            <tr>
                                <td>
                                    <i class="fas fa-file-alt text-primary"></i>
                                    {{ $log['name'] }}
                                </td>
                                <td>{{ $log['formatted_size'] }}</td>
                                <td>{{ $log['formatted_date'] }}</td>
                                <td>
                                    <button type="button"
                                            class="btn btn-sm btn-primary"
                                            onclick="visualizarLog('{{ \Crypt::encrypt($cronograma->id) }}', '{{ $log['name'] }}')"
                                            title="Visualizar Log">
                                        <i class="fas fa-eye"></i> Visualizar
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                Nenhum arquivo de log encontrado para este cronograma.
            </div>
        @endif
    </div>
</div>

<!-- Modal para visualizar o log -->
<div class="modal fade" id="logModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logModalTitle">Visualizar Log</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <strong>Arquivo:</strong> <span id="logFileName"></span><br>
                    <strong>Associado:</strong> <span id="logAssociado"></span>
                </div>

                <!-- Legenda explicativa -->
                <div class="card mb-3" style="border: 2px solid #007bff; border-radius: 8px; background-color: #ffffff;">
                    <div class="card-body" style="padding: 1rem;">
                        <h6 style="color: #000000; margin-bottom: 0.75rem;">
                            <i class="fas fa-info-circle" style="color: #007bff;"></i>
                            <strong>Legenda dos Dados:</strong>
                        </h6>
                        <ul class="mb-0" style="font-size: 0.9rem; color: #000000;">
                            <li><strong>periodo_inicial</strong> e <strong>periodo_final</strong>: Datas em que o cronograma permitia preencher</li>
                            <li><strong>Viagens Novas</strong> e <strong>Viagens Antigas</strong>: A chave dos objetos segue o padrão <code>[M,T,N] [I,V] [DATA]: ON</code></li>
                            <li><strong>Turnos:</strong> M = Manhã, T = Tarde, N = Noite</li>
                            <li><strong>Sentidos:</strong> I = Ida, V = Volta</li>
                            <li><strong>DATA:</strong> Formato YYYY-MM-DD</li>
                            <li><strong>Exemplo:</strong> <code>M I 2024-01-15: ON</code> = Manhã Ida 15/01/2024 marcada</li>
                        </ul>
                    </div>
                </div>

                <div class="border rounded p-3" style="background-color: #f8f9fa; max-height: 500px; overflow-y: auto;">
                    <pre id="logContent" style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 12px;"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<script>
function visualizarLog(cronogramaId, fileName) {
    // Mostrar loading
    $('#logModalTitle').text('Carregando...');
    $('#logFileName').text(fileName);
    $('#logAssociado').text('');
    $('#logContent').text('Carregando conteúdo...');
    $('#logModal').modal('show');

    $.ajax({
        url: '{{ route("cronogramas.visualizar-log") }}',
        method: 'GET',
        data: {
            cronograma_id: cronogramaId,
            file: fileName,
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#logModalTitle').text('Visualizar Log');
            $('#logFileName').text(response.filename);
            $('#logAssociado').text(response.associado);
            $('#logContent').text(response.content);
        },
        error: function(xhr) {
            $('#logModalTitle').text('Erro');
            $('#logFileName').text(fileName);
            $('#logAssociado').text('');
            $('#logContent').text('Erro ao carregar o arquivo de log. Verifique se o arquivo existe.');

            if (xhr.status === 404) {
                $('#logContent').text('Arquivo de log não encontrado.');
            } else if (xhr.status === 403) {
                $('#logContent').text('Acesso negado. Você não tem permissão para visualizar este log.');
            }
        }
    });
}
</script>

@stop