@extends('header_panel_generico')

@section('titulo_panel', 'OPERACIONES MASIVAS')
@section('styles_panel')
    <link rel="stylesheet" href="{{ asset('css/fidelitas/operaciones_masivas.css') }}">
@endsection

@section('contenido_panel')
<div class="mb-1">
    <button type="button" class="btn btn-small btn-prod-text p-4" id="btn-atras-paso2">
        <i class="bi bi-arrow-left"></i> Atrás
    </button>
</div>

<div class="contenedor-blanco w-100">
      <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
    <h3 class="fw-700 text-gris-500 text-uppercase mb-3" style="font-size:0.92rem; letter-spacing:.03em;">
        ALTA MASIVA DE CONTRAPARTES
    </h3>

    <div class="om-paso-header mb-4">
        <span class="om-paso-label">DESCARGA Y CARGA DE ARCHIVO</span>
        <p class="text-gris-400 mb-0" style="font-size:0.83rem;">
            Paso 2 de 3: Completá la plantilla con la información requerida para continuar con el proceso.
        </p>
    </div>

    {{-- Contexto --}}
    <div class="om-contexto mb-4">
        <span class="om-contexto-label">CONFIGURACIÓN SELECCIONADA</span>
        <div class="d-flex gap-5 flex-wrap mt-2">
            <div>
                <div class="fw-600 text-gris-350 mb-1" style="font-size:0.72rem; text-transform:uppercase;">Cliente</div>
                <div class="fw-700 text-gris-500" style="font-size:0.84rem;">{{ $config['cliente_nombre'] ?? '—' }}</div>
            </div>
            <div>
                <div class="fw-600 text-gris-350 mb-1" style="font-size:0.72rem; text-transform:uppercase;">Familia</div>
                <div class="fw-700 text-gris-500" style="font-size:0.84rem;">{{ $config['familia_nombre'] ?? '—' }}</div>
            </div>
            <div>
                <div class="fw-600 text-gris-350 mb-1" style="font-size:0.72rem; text-transform:uppercase;">Filial</div>
                <div class="fw-700 text-gris-500" style="font-size:0.84rem;">{{ $config['filial_nombre'] ?? '—' }}</div>
            </div>
            @if (!empty($config['tipo_informe_nombre']))
            <div>
                <div class="fw-600 text-gris-350 mb-1" style="font-size:0.72rem; text-transform:uppercase;">Tipo de informe</div>
                <div class="fw-700 text-gris-500" style="font-size:0.84rem;">{{ $config['tipo_informe_nombre'] }}</div>
            </div>
            @endif
        </div>
    </div>

    {{-- DESCARGA --}}
    <div class="mb-4">
        <span class="om-seccion-label">DESCARGA</span>
        <div class="om-download-block mt-2">
            <div>
                <p class="fw-600 text-prod-pri mb-1" style="font-size:0.88rem;">
                    Descargá el Excel generado para esta configuración.
                </p>
                <p class="text-gris-400 mb-0" style="font-size:0.79rem; line-height:1.55;">
                    Las columnas obligatorias se identifican con (*). El país debe completarse
                    con su código internacional de dos letras (ej.: Argentina = AR).
                    <a href="#" id="btn-ver-codigos-pais" class="fw-600 text-prod-pri">Ver códigos de país.</a>
                    <br>Podrás volver más adelante y continuar el proceso desde este punto.
                </p>
            </div>
            <form action="{{ route('operaciones-masivas.alta.descargar-excel') }}" method="POST" class="flex-shrink-0">
                @csrf
                <button type="submit" class="btn btn-small btn-prod-fill">
                    <i class="bi bi-download"></i> Excel para completar
                </button>
            </form>
        </div>
    </div>

    {{-- CARGA --}}
    <div>
        <span class="om-seccion-label">CARGA</span>
        <form id="form-carga-archivo"
              action="{{ route('operaciones-masivas.alta.cargar-archivo') }}"
              method="POST"
              enctype="multipart/form-data">
            @csrf

            <p class="fw-700 text-prod-pri mt-2 mb-1" style="font-size:0.78rem; text-transform:uppercase; letter-spacing:.04em;">
                Excel con contrapartes
            </p>

            <div class="om-dropzone" id="om-dropzone">
                {{-- Sin archivo --}}
                <div class="d-flex align-items-center justify-content-between gap-3 w-100" id="om-dropzone-vacio">
                    <div class="d-flex align-items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="var(--prod-pri)" viewBox="0 0 24 24">
                            <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                        <div>
                            <p class="fw-600 text-gris-500 mb-0" style="font-size:0.85rem; line-height:1.4;">
                                Arrastrá el archivo acá
                            </p>
                            <p class="text-gris-400 mb-0" style="font-size:0.81rem;">o hacé click para buscarlo en tu equipo</p>
                            <span class="text-gris-350" style="font-size:0.76rem;">No hay ningún archivo seleccionado</span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-small btn-prod-outline flex-shrink-0" id="btn-seleccionar-archivo">
                        Seleccionar archivo
                    </button>
                </div>

                {{-- Con archivo --}}
                <div class="d-flex align-items-center justify-content-between gap-3 w-100 d-none"
                     id="om-dropzone-cargado">
                    <div class="d-flex align-items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="var(--prod-pri)" viewBox="0 0 24 24">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15h8v2H8zm0-4h8v2H8zm0-4h5v2H8z"/>
                        </svg>
                        <div>
                            <div class="fw-700 text-gris-500" style="font-size:0.85rem;">Archivo cargado</div>
                            <div class="text-prod-pri fw-600" style="font-size:0.82rem;" id="om-nombre-archivo"></div>
                            <div class="text-gris-400" style="font-size:0.78rem;">Arrastrá el archivo acá o hacé click para buscarlo en tu equipo</div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-small btn-prod-outline flex-shrink-0" id="btn-reemplazar">
                        Reemplazar archivo
                    </button>
                </div>

                <input type="file" name="archivo_excel" id="input-archivo" accept=".xls,.xlsx" style="display:none;">
            </div>
            <p class="text-gris-350 mt-1" style="font-size:0.75rem;">
                <i class="bi bi-info-circle"></i> Formatos válidos: xls, xlsx
            </p>

            <div class="d-flex justify-content-end gap-3 mt-4 pt-3 border-top">
                <button type="button" class="btn btn-small btn-neg-outline" id="btn-cancelar-paso2">
                    <i class="bi bi-x-lg"></i> Cancelar
                </button>
                <button type="submit" class="btn btn-small btn-prod-fill" id="btn-siguiente-paso2" disabled>
                    <span id="btn-siguiente-label"><i class="bi bi-check2"></i> Siguiente</span>
                    <span id="btn-siguiente-spinner" style="display:none;">
                        <span class="spinner-border spinner-border-sm" role="status" style="width:0.85rem;height:0.85rem;border-width:2px;"></span>
                        Procesando...
                    </span>
                </button>
            </div>
        </form>
    </div>

</div>
@endsection

@section('extras_panel')
{{-- Modal: Confirmar cancelación --}}
<div class="om-modal" id="modal-confirmar-cancelar" style="display:none;">
    <div class="om-modal-content" style="max-width:420px;">
        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
            <h5 class="fw-700 text-gris-500 text-uppercase mb-0" style="font-size:0.88rem; letter-spacing:.04em;">
                CANCELAR CARGA
            </h5>
            <button type="button" class="btn btn-small btn-prod-text px-1" id="btn-cerrar-modal-cancelar">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="text-gris-500 mb-1" style="font-size:0.87rem;" id="modal-cancelar-titulo"></p>
        <p class="text-gris-400 mb-4" style="font-size:0.82rem;" id="modal-cancelar-detalle"></p>
        <div class="d-flex justify-content-end gap-3">
            <button type="button" class="btn btn-small btn-prod-text" id="btn-volver-modal-cancelar">
                Volver
            </button>
            <button type="button" class="btn btn-small btn-neg-fill" id="btn-confirmar-cancelar">
                Sí, cancelar
            </button>
        </div>
    </div>
</div>

{{-- Modal: Códigos de país --}}
<div class="om-modal" id="modal-codigos-pais" style="display:none;">
    <div class="om-modal-content">
        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
            <h5 class="fw-700 text-gris-500 text-uppercase mb-0" style="font-size:0.88rem; letter-spacing:.04em;">
                CÓDIGOS INTERNACIONALES DE PAÍS
            </h5>
            <button type="button" class="btn btn-small btn-prod-text px-1" id="btn-cerrar-modal-pais">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="text-gris-400 mb-2" style="font-size:0.83rem;">
            Buscá un país para consultar su código internacional de dos letras.
        </p>
        <input type="text" id="input-buscar-pais" class="input-prod w-100 mb-2" placeholder="Buscar">
        <div id="om-resultados-paises" class="om-modal-resultados"></div>
        <button type="button" class="btn btn-small btn-prod-fill w-100 mt-2" id="btn-cerrar-modal-pais-2">
            Cerrar
        </button>
    </div>
</div>
@endsection

@section('funcionesJS_panel')
<form id="form-cancelar" action="{{ route('operaciones-masivas.alta.cancelar') }}" method="POST" style="display:none;">
    @csrf
</form>
<script src="{{ asset('js/operaciones_masivas/alta.js') }}?v={{ rand() }}"></script>
<script>
    const modalCancelar   = document.getElementById('modal-confirmar-cancelar');
    const tituloModal     = document.getElementById('modal-cancelar-titulo');
    const detalleModal    = document.getElementById('modal-cancelar-detalle');
    const origen          = '{{ session("alta_masiva_origen", "paso1") }}';

    const textos = {
        atras: {
            paso1:    { titulo: '¿Querés volver a la configuración?', detalle: 'Se descartará la configuración actual y vas a volver al paso anterior.' },
            continuar: { titulo: '¿Querés volver a Operaciones Masivas?', detalle: 'Se descartará la configuración cargada y vas a volver a la pantalla inicial.' },
        },
        cancelar: {
            paso1:    { titulo: '¿Estás seguro que querés cancelar la carga?', detalle: 'Se eliminará la configuración seleccionada y vas a volver a la pantalla inicial.' },
            continuar: { titulo: '¿Estás seguro que querés cancelar la carga?', detalle: 'Se eliminará la configuración seleccionada y vas a volver a la pantalla inicial.' },
        },
    };

    function abrirModalCancelar(tipo) {
        const t = textos[tipo][origen] || textos[tipo]['paso1'];
        tituloModal.textContent  = t.titulo;
        detalleModal.textContent = t.detalle;
        modalCancelar.style.display = '';
    }

    document.getElementById('btn-atras-paso2')?.addEventListener('click', () => abrirModalCancelar('atras'));
    document.getElementById('btn-cancelar-paso2')?.addEventListener('click', () => abrirModalCancelar('cancelar'));

    document.getElementById('btn-cerrar-modal-cancelar')?.addEventListener('click', () => {
        modalCancelar.style.display = 'none';
    });
    document.getElementById('btn-volver-modal-cancelar')?.addEventListener('click', () => {
        modalCancelar.style.display = 'none';
    });
    document.getElementById('btn-confirmar-cancelar')?.addEventListener('click', () => {
        document.getElementById('form-cancelar').submit();
    });

    document.getElementById('form-carga-archivo')?.addEventListener('submit', function () {
        const btn     = document.getElementById('btn-siguiente-paso2');
        const label   = document.getElementById('btn-siguiente-label');
        const spinner = document.getElementById('btn-siguiente-spinner');
        if (btn)     btn.disabled    = true;
        if (label)   label.style.display  = 'none';
        if (spinner) spinner.style.display = '';
    });
</script>
@endsection