@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-2">
        <a href="{{ route('operaciones-masivas.alta.paso2') }}" class="btn btn-small btn-prod-text p-4">
            <i class="bi bi-arrow-left"></i> Atrás
        </a>
    </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">REVISIÓN DE CARGA</span>
        <p class="text-gris-400 mb-0" style="font-size:0.83rem;">
            Paso 3 de 3: Revisá el resultado del archivo cargado y resolvé las situaciones que requieran acción 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>

    {{-- Resumen (5 ítems según diseño) --}}
    <div class="mb-4">
        <span class="om-seccion-label">RESUMEN</span>
        <div class="om-resumen mt-2">
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--green"></span>
                <strong>{{ $resumen['listos'] }}</strong> CUIT listos para dar de alta
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--red"></span>
                <strong>{{ $resumen['invalidos'] }}</strong> CUIT inválidos
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--red"></span>
                <strong>{{ $resumen['pais_incorrecto'] ?? 0 }}</strong> CUIT con país no coincidente
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--red"></span>
                <strong>{{ $resumen['denominacion_no_coincide'] }}</strong> CUIT con denominación no coincidente
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--red"></span>
                <strong>{{ $resumen['duplicados'] }}</strong> CUIT duplicados
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--orange"></span>
                <strong>{{ ($resumen['gestion_misma_familia'] ?? 0) + ($resumen['gestion_otra_familia'] ?? 0) }}</strong> CUIT con gestión activa
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size:0.83rem;">
                <span class="dot dot--orange"></span>
                <strong>{{ $resumen['multiples_gestiones'] ?? 0 }}</strong> CUIT con múltiples gestiones activas
            </div>
        </div>
    </div>

    {{-- Cards de revisión --}}

    @if ($resumen['invalidos'] > 0)
    <div class="om-review-card mb-3">
        <div class="om-review-card-header">CUIT INVÁLIDOS</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--red"></span>
                    <strong>{{ $resumen['invalidos'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Estos CUIT no podrán darse de alta y serán excluidos del proceso. Descargá el detalle para visualizar cuáles son.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-descargar-detalle" data-tipo="invalidos">
                <i class="bi bi-download"></i> Descargar detalle
            </button>
        </div>
    </div>
    @endif

    @if (($resumen['pais_incorrecto'] ?? 0) > 0)
    <div class="om-review-card mb-3">
        <div class="om-review-card-header">CUIT CON PAÍS NO COINCIDENTE</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--red"></span>
                    <strong>{{ $resumen['pais_incorrecto'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    El país ingresado no coincide con el país registrado en padrones para ese CUIT. Serán excluidos del proceso.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-descargar-detalle" data-tipo="pais_incorrecto">
                <i class="bi bi-download"></i> Descargar detalle
            </button>
        </div>
    </div>
    @endif

    @if ($resumen['denominacion_no_coincide'] > 0)
    <div class="om-review-card mb-3">
        <div class="om-review-card-header">CUIT CON DENOMINACIÓN NO COINCIDENTE</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--red"></span>
                    <strong>{{ $resumen['denominacion_no_coincide'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Algunos nombres o razones sociales ingresados no coinciden con el CUIT informado y serán excluidos del proceso.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-descargar-detalle" data-tipo="denominacion">
                <i class="bi bi-download"></i> Descargar detalle
            </button>
        </div>
    </div>
    @endif

    @if ($resumen['duplicados'] > 0)
    <div class="om-review-card mb-3">
        <div class="om-review-card-header">CUIT DUPLICADOS</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--red"></span>
                    <strong>{{ $resumen['duplicados'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Estos CUIT aparecen repetidos en el archivo cargado y se darán de alta una única vez.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-descargar-detalle" data-tipo="duplicados">
                <i class="bi bi-download"></i> Descargar detalle
            </button>
        </div>
    </div>
    @endif

    @if (($resumen['gestion_misma_familia'] ?? 0) > 0)
    <div class="om-review-card mb-3 om-review-card--requiere-revision" data-tipo="misma-familia" id="card-misma-familia">
        <div class="om-review-card-header">CUIT CON GESTIÓN ACTIVA EN LA MISMA FAMILIA</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <span class="om-badge om-badge--warn mb-2" id="badge-misma-familia">
                    <i class="bi bi-exclamation-triangle-fill"></i> Requiere revisión
                </span>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--orange"></span>
                    <strong>{{ $resumen['gestion_misma_familia'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Algunas contrapartes ya existen dentro de la familia seleccionada. Revisá cada caso para definir cómo proceder.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-revisar" data-tipo="misma-familia">
                Revisar
            </button>
        </div>
    </div>
    @endif

    @if (($resumen['gestion_otra_familia'] ?? 0) > 0)
    <div class="om-review-card mb-3 om-review-card--requiere-revision" data-tipo="otra-familia" id="card-otra-familia">
        <div class="om-review-card-header">CUIT CON GESTIÓN ACTIVA EN OTRA FAMILIA</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <span class="om-badge om-badge--warn mb-2" id="badge-otra-familia">
                    <i class="bi bi-exclamation-triangle-fill"></i> Requiere revisión
                </span>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--orange"></span>
                    <strong>{{ $resumen['gestion_otra_familia'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Algunas contrapartes ya existen en otras familias del cliente. Revisá cada caso para definir cómo proceder.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-revisar" data-tipo="otra-familia">
                Revisar
            </button>
        </div>
    </div>
    @endif

    @if (($resumen['multiples_gestiones'] ?? 0) > 0)
    <div class="om-review-card mb-3">
        <div class="om-review-card-header">CUIT CON MÚLTIPLES GESTIONES ACTIVAS</div>
        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1" style="font-size:0.83rem;">
                    <span class="dot dot--red"></span>
                    <strong>{{ $resumen['multiples_gestiones'] }}</strong> registros detectados
                </div>
                <p class="text-gris-350 fst-italic mb-0" style="font-size:0.77rem; line-height:1.5;">
                    Estas contrapartes se encuentran repetidas múltiples veces en diferentes familias y deberán darse de alta de forma individual.
                </p>
            </div>
            <button type="button" class="btn btn-small btn-prod-fill flex-shrink-0 btn-descargar-detalle" data-tipo="multiples">
                <i class="bi bi-download"></i> Descargar detalle
            </button>
        </div>
    </div>
    @endif

    <div class="d-flex justify-content-end gap-3 mt-4 pt-3 border-top">
        <a href="{{ route('operaciones-masivas.index') }}" class="btn btn-small btn-neg-outline">
            <i class="bi bi-x-lg"></i> Cancelar
        </a>
        <button type="button" class="btn btn-small btn-prod-fill" id="btn-confirmar-carga" disabled>
            <i class="bi bi-check2"></i> Confirmar carga
        </button>
    </div>

</div>
@endsection

@section('extras_panel')

{{-- Modal revisión --}}
<div class="om-modal" id="modal-revision" style="display:none;">
    <div class="om-modal-content om-modal-content--lg">
        <div class="d-flex justify-content-between align-items-start mb-3 pb-2 border-bottom">
            <div>
                <h5 class="fw-700 text-gris-500 text-uppercase mb-0" style="font-size:0.88rem; letter-spacing:.04em;"
                    id="modal-revision-titulo"></h5>
                <span class="fw-600 text-gris-350" style="font-size:0.76rem;" id="modal-revision-subtitulo"></span>
            </div>
            <button type="button" class="btn btn-small btn-prod-text px-1" id="btn-cerrar-modal-revision">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <p class="text-gris-400 mb-3" style="font-size:0.83rem;">
            Seleccioná las contrapartes y aplicá la acción correspondiente.
        </p>
        <div class="d-flex justify-content-end gap-2 mb-3">
            <button type="button" class="btn btn-small btn-prod-outline" id="btn-modal-descargar-excel">
                <i class="bi bi-download"></i> Descargar Excel
            </button>
            <div class="om-dropdown" id="dropdown-acciones">
                <button type="button" class="btn btn-small btn-prod-outline om-dropdown__toggle">
                    Acciones <i class="bi bi-chevron-down"></i>
                </button>
                <div class="om-dropdown__menu" style="display:none;">
                    <button type="button" data-accion="no_crear">
                        <strong>No crear</strong>
                        <small>La contraparte no será dada de alta nuevamente.</small>
                    </button>
                    <button type="button" data-accion="nueva_gestion">
                        <strong>Nueva gestión</strong>
                        <small>Finaliza la gestión actual y genera una nueva gestión para la contraparte.</small>
                    </button>
                    <button type="button" data-accion="duplicar" class="om-accion-duplicar" style="display:none;">
                        <strong>Duplicar</strong>
                        <small>La gestión actual se mantendrá y se creará una nueva gestión en la familia seleccionada.</small>
                    </button>
                </div>
            </div>
        </div>
        <div class="om-table-wrapper">
            <table class="om-table" id="tabla-revision">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="check-all-modal"></th>
                        <th>CUIT</th>
                        <th>Razón social / Nombre</th>
                        <th>Familia</th>
                        <th>Fecha inicio</th>
                        <th>Fecha fin</th>
                        <th>Acción configurada</th>
                    </tr>
                </thead>
                <tbody id="tbody-revision"></tbody>
            </table>
        </div>
        {{-- Paginación modal --}}
        <div class="d-flex justify-content-between align-items-center mt-2" style="font-size:0.8rem; color:var(--gris-400);">
            <div id="om-modal-pag-info"></div>
            <div id="om-modal-paginacion" class="om-pagination"></div>
        </div>
        <div class="d-flex justify-content-end gap-3 mt-3 pt-3 border-top">
            <button type="button" class="btn btn-small btn-neg-outline" id="btn-cancelar-modal-revision">
                <i class="bi bi-x-lg"></i> Cancelar
            </button>
            <button type="button" class="btn btn-small btn-prod-fill" id="btn-confirmar-acciones">
                <i class="bi bi-check2"></i> Confirmar acciones
            </button>
        </div>
    </div>
</div>

{{-- Modal finalización: sin generación de informes --}}
<div class="om-modal" id="modal-fin-sin-informes" style="display:none;">
    <div class="om-modal-content" style="max-width:380px; text-align:center;">
        <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-small btn-prod-text px-1 btn-cerrar-fin">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="fw-700 text-gris-500 text-uppercase mb-3" style="font-size:0.88rem; letter-spacing:.04em;">PROCESO FINALIZADO</p>
        <p class="text-gris-400 mb-4" style="font-size:0.84rem;">Las contrapartes fueron dadas de alta correctamente.</p>
        <a href="{{ route('operaciones-masivas.index') }}" class="btn btn-small btn-prod-fill w-100 text-center">
            Aceptar
        </a>
    </div>
</div>

{{-- Modal finalización: con informes, un solo tipo --}}
<div class="om-modal" id="modal-fin-con-informes" style="display:none;">
    <div class="om-modal-content" style="max-width:380px; text-align:center;">
        <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-small btn-prod-text px-1 btn-cerrar-fin">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="fw-700 text-gris-500 text-uppercase mb-3" style="font-size:0.88rem; letter-spacing:.04em;">PROCESO FINALIZADO</p>
        <p class="text-gris-400 mb-4" style="font-size:0.84rem;">Las contrapartes fueron dadas de alta correctamente y se generaron los informes correspondientes.</p>
        <a href="{{ route('operaciones-masivas.index') }}" class="btn btn-small btn-prod-fill w-100 text-center">
            Aceptar
        </a>
    </div>
</div>

{{-- Modal finalización: con informes, múltiples tipos --}}
<div class="om-modal" id="modal-fin-multiples-tipos" style="display:none;">
    <div class="om-modal-content" style="max-width:420px; text-align:center;">
        <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-small btn-prod-text px-1 btn-cerrar-fin">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="fw-700 text-gris-500 text-uppercase mb-3" style="font-size:0.88rem; letter-spacing:.04em;">PROCESO FINALIZADO</p>
        <p class="text-gris-400 mb-2" style="font-size:0.84rem;">Las contrapartes fueron dadas de alta correctamente y se generaron los informes correspondientes.</p>
        <p class="text-gris-400 mb-4" style="font-size:0.83rem;">La familia seleccionada tiene otros tipos de informe disponibles. ¿Querés cargar contrapartes para alguno de ellos?</p>
        <div class="d-flex gap-3">
            <a href="{{ route('operaciones-masivas.alta.paso1') }}" class="btn btn-small btn-prod-outline flex-1 text-center">
                Continuar con otro informe
            </a>
            <a href="{{ route('operaciones-masivas.index') }}" class="btn btn-small btn-prod-fill flex-1 text-center">
                Finalizar
            </a>
        </div>
    </div>
</div>

@endsection

@section('funcionesJS_panel')
<script>
    window.OM_ROUTES = {
        revisionMismaFamilia: "{{ route('operaciones-masivas.alta.revision.misma-familia') }}",
        revisionOtraFamilia:  "{{ route('operaciones-masivas.alta.revision.otra-familia') }}",
        revisionConfirmar:    "{{ route('operaciones-masivas.alta.revision.confirmar') }}",
        descargarDetalle:     "{{ route('operaciones-masivas.alta.revision.descargar-detalle', ['tipo' => '__tipo__']) }}",
        confirmarCarga:       "{{ route('operaciones-masivas.alta.confirmar') }}",
    };
    window.OM_CONFIG = {
        generaInformes: {{ !empty($config['genera_informes']) ? 'true' : 'false' }},
        hayOtrosTipos:  {{ !empty($config['hay_otros_tipos']) ? 'true' : 'false' }},
    };
</script>
<script src="{{ asset('js/operaciones_masivas/alta.js') }}"></script>
@endsection