@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'indicador',
])

@section('content')
<div class="container">
    <h3>⚙️ Configuración de Tablero</h3>
    <h5 class="text-white">🧠 Procesamiento Manual</h5>
    <div class="mb-3">
        <button id="btnPaso1" onclick="ejecutarPaso(1)" class="btn btn-primary text-white">Ejecutar Paso 1: Seteo</button>
        <button id="btnPaso2" onclick="ejecutarPaso(2)" class="btn btn-secondary text-white" disabled>Ejecutar Paso 2: Inicialización</button>
        <button id="btnPaso3" onclick="ejecutarPaso(3)" class="btn btn-secondary text-white" disabled>Ejecutar Paso 3: Carga</button>
    </div>

    <hr>
    <h5 class="text-white">🧠 Procesamiento Automático</h5>
    <button id="btnAuto" onclick="ejecutarAutomatico()" class="btn btn-success text-white">▶️ Ejecución Automática</button>

    <hr>

    <h5 class="text-white">🧠 Cálculo de Indicadores</h5>
        <button id="btnSP" onclick="ejecutarSP()" class="btn btn-warning text-white">📊 Ejecutar SP Indicadores</button>

    <hr>

    <h5 class="text-white">📋 Estado de Ejecución</h5>
    <table class="table table-bordered t text-white">
        <thead class="thead-dark">
            <tr>
                <th>Paso</th>
                <th>Descripción</th>
                <th>Estado</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Seteo</td>
                <td id="estadoPaso1">⏳ Por ejecutar</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Inicialización</td>
                <td id="estadoPaso2">⏳ Por ejecutar</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Carga</td>
                <td id="estadoPaso3">⏳ Por ejecutar</td>
            </tr>
            <tr>
                <td>SP</td>
                <td>Procedimiento Indicadores</td>
                <td id="estadoSP">⏳ Por ejecutar</td>
            </tr>
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    fetch('{{ url('/tablero/estado') }}')
        .then(res => res.json())
        .then(data => {
            // Evaluamos si ya se ejecutó cada paso según la respuesta del backend

            // Paso 1
            if (data.paso1 == 0) {
                document.getElementById('btnPaso1').disabled = true;
                document.getElementById('btnPaso1').innerText = 'Paso 1 Ejecutado';
                document.getElementById('estadoPaso1').innerHTML = '✅ Ejecutado';
                // Habilitar paso 2 solo si no ha sido ejecutado aún
                if (data.paso2 != 0) {
                    document.getElementById('btnPaso2').disabled = false;
                }
            } else {
                document.getElementById('btnPaso1').disabled = false;
                document.getElementById('estadoPaso1').innerHTML = '⏳ Por ejecutar';

            }

            // Paso 2
            if (data.paso2 == 0) {
                document.getElementById('btnPaso2').disabled = true;
                document.getElementById('btnPaso2').innerText = 'Paso 2 Ejecutado';
                document.getElementById('estadoPaso2').innerHTML = '✅ Ejecutado';
                if (data.paso3 != 0) {
                    document.getElementById('btnPaso3').disabled = false;
                }
            } else {
                if(data.paso1 == 0 && data.paso2 == 1){
                    document.getElementById('btnPaso2').disabled = false; // Siempre deshabilitado hasta que paso 1 esté completo
                    document.getElementById('estadoPaso2').innerHTML = '⏳ Por ejecutar';
                }

            }

            // Paso 3
            if (data.paso3 == 0) {
                document.getElementById('btnPaso3').disabled = true;
                document.getElementById('btnPaso3').innerText = 'Paso 3 Ejecutado';
                document.getElementById('estadoPaso3').innerHTML = '✅ Ejecutado';
            } else {
                if(data.paso2 == 0 && data.paso2 == 0 && data.paso3 == 1){
                    document.getElementById('btnPaso3').disabled = false; // Siempre deshabilitado hasta que paso 2 esté completo
                    document.getElementById('estadoPaso3').innerHTML = '⏳ Por ejecutar';

                }
                
            }
            // Estado del SP
            if (data.sp == 0) {
                document.getElementById('btnSP').disabled = true;
                document.getElementById('btnSP').innerText = 'SP Ejecutado';
                document.getElementById('estadoSP').innerHTML = '✅ Ejecutado';
            } else {
                document.getElementById('estadoSP').innerHTML = '⏳ Por ejecutar';
            }


        });
});

    function ejecutarPaso(paso) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Vas a ejecutar el paso ' + paso,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, ejecutar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                procesarPaso(paso);
            }
        });
    }

    function procesarPaso(paso) {
        const btn = document.getElementById('btnPaso' + paso);
        btn.disabled = true;
        btn.innerText = 'Ejecutando...';

        fetch('{{ url('/tablero/paso') }}' + paso, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            Swal.fire({
                title: '¡Listo!',
                text: data.message,
                icon: 'success',
                confirmButtonText: 'Aceptar'
            });

            btn.innerText = 'Paso ' + paso + ' Ejecutado';
            document.getElementById('estadoPaso' + paso).innerHTML = '✅ Ejecutado';

            if (paso === 1) document.getElementById('btnPaso2').disabled = false;
            if (paso === 2) document.getElementById('btnPaso3').disabled = false;
        })
       /* .catch(err => {
            Swal.fire({
                title: 'Error',
                text: 'Hubo un error en el paso ' + paso,
                icon: 'error'
            });
            btn.disabled = false;
            btn.innerText = 'Ejecutar Paso ' + paso;
        });*/
    }

    async function ejecutarAutomatico() {
        const confirm = await Swal.fire({
            title: '¿Ejecutar los 3 pasos automáticamente?',
            text: 'Esta acción ejecutará todos los pasos en orden sin pausas.',
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'Cancelar'
        });

        if (confirm.isConfirmed) {
            await ejecutarPasoSecuencial(1);
            await ejecutarPasoSecuencial(2);
            await ejecutarPasoSecuencial(3);

            Swal.fire({
                title: '¡Completado!',
                text: 'Los 3 pasos fueron ejecutados exitosamente. La página se actualizará en breve.',
                icon: 'success',
                timer: 3000,
                showConfirmButton: false
            });

            setTimeout(() => {
                location.reload();
            }, 3000);
        }
    }

    async function ejecutarPasoSecuencial(paso) {
        const btn = document.getElementById('btnPaso' + paso);
        if (btn.disabled) return;

        btn.disabled = true;
        btn.innerText = 'Ejecutando...';

        try {
            const res = await fetch('{{ url('/tablero/paso') }}' + paso, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                }
            });
            const data = await res.json();

            btn.innerText = 'Paso ' + paso + ' Ejecutado';
            document.getElementById('estadoPaso' + paso).innerHTML = '✅ Ejecutado';

            Swal.fire({
                title: 'Paso ' + paso + ' completado',
                text: data.message,
                icon: 'success',
                timer: 1000,
                showConfirmButton: false
            });

            if (paso === 1) document.getElementById('btnPaso2').disabled = false;
            if (paso === 2) document.getElementById('btnPaso3').disabled = false;
        } catch (err) {
            Swal.fire({
                title: 'Error',
                text: 'Hubo un error en el paso ' + paso,
                icon: 'error'
            });
            btn.disabled = false;
            btn.innerText = 'Ejecutar Paso ' + paso;
        }
    }

    function ejecutarSP() {
    Swal.fire({
        title: '¿Ejecutar el SP de indicadores?',
        text: 'Este procedimiento actualizará los valores del tablero.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, ejecutar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('btnSP').disabled = true;
            document.getElementById('btnSP').innerText = 'Ejecutando...';

            fetch('{{ route('configurar.cargarSP') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                Swal.fire({
                    title: '¡SP ejecutado!',
                    text: 'El procedimiento almacenado se ejecutó correctamente.',
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                });
                document.getElementById('btnSP').innerText = '✅ SP Ejecutado';
                document.getElementById('estadoSP').innerHTML = '✅ Ejecutado';
            })
            .catch(err => {
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo ejecutar el procedimiento.',
                    icon: 'error'
                });
                document.getElementById('btnSP').disabled = false;
                document.getElementById('btnSP').innerText = '📊 Ejecutar SP Indicadores';
            });
        }
    });
}

</script>
@endpush
