@extends('adminlte::page')

@section('title', 'COPARN — Ocean Network Express (ONE)')

@section('content_header')
    <h1><i class="fas fa-ship text-danger"></i> COPARN &mdash; Ocean Network Express (ONE)</h1>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">

        {{-- Card principal --}}
        <div class="card card-danger card-outline">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-play-circle"></i> Procesar mensajes COPARN
                </h3>
            </div>
            <div class="card-body">
                <p class="text-muted mb-4">
                    Al ejecutar el proceso, el sistema se conectará al servidor SFTP de
                    <strong>Ocean Network Express (ONE)</strong>, descargará los archivos <code>.edi</code>
                    del directorio <code>out</code>, generará un reporte Excel y lo enviará
                    por correo a <strong>{{ env('COPARN_ONE_MAIL_TO') }}</strong>.
                </p>

                <div class="d-flex gap-3 align-items-center flex-wrap">
                    <button id="btn-procesar" class="btn btn-danger btn-lg">
                        <i class="fas fa-play-circle mr-2"></i> Procesar COPARN ahora
                    </button>
                    <span id="spinner" class="text-muted d-none">
                        <i class="fas fa-spinner fa-spin mr-1"></i> Procesando, por favor espera...
                    </span>
                </div>

                {{-- Resultado --}}
                <div id="resultado" class="mt-4 d-none">
                    <div id="resultado-ok" class="alert alert-success d-none">
                        <h6><i class="fas fa-check-circle"></i> Proceso completado</h6>
                        <pre id="resultado-detalle" class="mb-0 mt-2" style="font-size:0.8rem; background:transparent; border:none; padding:0; white-space:pre-wrap;"></pre>
                    </div>
                    <div id="resultado-error" class="alert alert-danger d-none">
                        <h6><i class="fas fa-times-circle"></i> Error en el proceso</h6>
                        <pre id="resultado-error-msg" class="mb-0 mt-2" style="font-size:0.8rem; background:transparent; border:none; padding:0; white-space:pre-wrap;"></pre>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted" style="font-size:0.82rem;">
                <i class="fas fa-info-circle text-info"></i>
                Servidor SFTP: <strong>{{ env('SFTP_ONE_HOST') }}</strong> &mdash;
                Directorio: <strong>{{ env('SFTP_ONE_DIR', 'out') }}</strong>
            </div>
        </div>

        {{-- Info --}}
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-info-circle"></i> ¿Qué hace este proceso?</h3>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Conecta al servidor SFTP de Ocean Network Express (ONE)</li>
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Descarga todos los archivos <code>.edi</code> (COPARN)</li>
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Parsea cada bloque <code>EQD</code> generando una fila por contenedor</li>
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Detecta carga peligrosa (segmento <code>DGS</code>) y la resalta en rojo</li>
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Genera reporte Excel con detalle y pestaña de resumen</li>
                    <li class="list-group-item"><i class="fas fa-check text-success mr-2"></i> Envía el Excel por correo y lo elimina del servidor</li>
                </ul>
            </div>
        </div>

    </div>
</div>
@endsection

@section('js')
<script>
document.getElementById('btn-procesar').addEventListener('click', function () {
    const btn       = this;
    const spinner   = document.getElementById('spinner');
    const resultado = document.getElementById('resultado');
    const okBox     = document.getElementById('resultado-ok');
    const errBox    = document.getElementById('resultado-error');

    btn.disabled = true;
    spinner.classList.remove('d-none');
    resultado.classList.add('d-none');
    okBox.classList.add('d-none');
    errBox.classList.add('d-none');

    fetch('{{ url("/coparn-one/procesar") }}', {
        headers: { 'Accept': 'application/json' }
    })
    .then(res => res.json())
    .then(data => {
        resultado.classList.remove('d-none');
        if (data.status === 'ok') {
            okBox.classList.remove('d-none');
            document.getElementById('resultado-detalle').textContent = data.detalle ?? '';
        } else {
            errBox.classList.remove('d-none');
            document.getElementById('resultado-error-msg').textContent = data.mensaje + '\n' + (data.detalle ?? '');
        }
    })
    .catch(err => {
        resultado.classList.remove('d-none');
        errBox.classList.remove('d-none');
        document.getElementById('resultado-error-msg').textContent = 'Error de conexión: ' + err.message;
    })
    .finally(() => {
        btn.disabled = false;
        spinner.classList.add('d-none');
    });
});
</script>
@endsection