@extends('layouts.admin-Lti')

@section('title', '- Histórico')

@section('content')

@php
    // Dados da sessão de forma segura
    $infoSession = session('infosession', []);
    $tipoSistema = data_get($infoSession, '0.TIpoSistema', 'Sistema');

    // Token CSRF seguro
    $csrfToken = csrf_token();

    // URL da rota
    $dashboardUrl = route('dashbord.create');
@endphp

<section class="content">

    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">
                <span>{{ $tipoSistema }}</span>
            </a>
        </li>

        <li class="breadcrumb-item active">
            <a href="#">
                <span><b>Página Inicial</b></span>
            </a>
        </li>
    </ol>

    <div class="container-fluid">

        <div class="col">
            <div class="form-group formularioData">

                <label for="reservation">
                    Escolha o intervalo de Datas:
                </label>

                <div class="input-group">

                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-calendar"></i>
                        </span>
                    </div>

                    <input
                        type="text"
                        name="Datas"
                        id="reservation"
                        class="form-control float-right inputSelectData"
                        autocomplete="off"
                    >

                </div>

            </div>
        </div>

        {{-- Área onde o resultado será carregado --}}
        <div
            class="divcontent"
            id="historico-content"
        >
            <div class="text-center py-3 d-none" id="loadingHistorico">
                <i class="fa fa-spinner fa-spin"></i>
                Carregando...
            </div>
        </div>

    </div>

</section>

@push('script')

<script>
$(document).ready(function () {

    const token = @json($csrfToken);
    const urlDashboard = @json($dashboardUrl);

    /**
     * Processa e carrega os dados do histórico
     */
    function processarDados() {

        const datas = $("input[name='Datas']").val() || '';

        const $content = $(".divcontent");
        const $loading = $("#loadingHistorico");

        // Mostrar loading
        $loading.removeClass("d-none");

        $.ajax({
            url: urlDashboard,
            type: "POST",

            data: {
                datas: datas,
                _token: token
            },

            success: function (data) {

                // Garantir que existe conteúdo
                if (data !== null && data !== undefined && data !== '') {
                    $content.html(data);
                } else {
                    $content.html(`
                        <div class="alert alert-info">
                            Nenhum dado encontrado.
                        </div>
                    `);
                }
            },

            error: function (xhr) {

                console.error(
                    "Erro ao carregar histórico:",
                    xhr.status,
                    xhr.responseText
                );

                let mensagem = "Não foi possível carregar o histórico.";

                if (xhr.status === 419) {
                    mensagem = "A sessão expirou. Atualize a página e tente novamente.";
                }

                if (xhr.status === 401) {
                    mensagem = "Sua sessão expirou. Faça login novamente.";
                }

                if (xhr.status === 403) {
                    mensagem = "Você não tem permissão para acessar estes dados.";
                }

                if (xhr.status === 404) {
                    mensagem = "A rota solicitada não foi encontrada.";
                }

                $content.html(`
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-triangle"></i>
                        ${mensagem}
                    </div>
                `);
            },

            complete: function () {
                $loading.addClass("d-none");
            }
        });
    }

    /**
     * Carregar ao abrir a página
     */
    processarDados();

    /**
     * Recarregar quando clicar em Aplicar
     */
    $(document).on("click", ".applyBtn", function () {
        processarDados();
    });

});
</script>

<script src="{{ asset('Admin-LTE/plugins/chart/chart2.js') }}"></script>

@endpush

@endsection