@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="contenedor-blanco w-100">

    <p class="text-gris-400 mb-0" style="font-size:0.85rem;">
        Gestioná altas masivas de contrapartes y generación de informes mediante archivos Excel.
    </p>

    <div class="d-flex gap-4 flex-wrap justify-content-center mt-4">

        {{-- Card: Alta masiva de contrapartes --}}
        <div class="om-card">
            <div>
                <p class="fw-700 text-gris-500 text-uppercase mb-2" style="font-size:0.85rem; letter-spacing:.04em;">
                    ALTA MASIVA DE CONTRAPARTES
                </p>
                <p class="text-gris-400 mb-4" style="font-size:0.82rem; line-height:1.5;">
                    Dá de alta múltiples contrapartes mediante un archivo Excel y generá
                    informes asociados de forma opcional.
                </p>
            </div>
            <div class="d-flex align-items-center justify-content-end gap-3">
                @if ($cantidadPendientes === 1)
                    <a href="{{ route('operaciones-masivas.alta.continuar-pendiente') }}"
                       class="btn btn-small btn-prod-text">
                        Continuar carga pendiente
                    </a>
                @elseif ($cantidadPendientes > 1)
                    <button type="button" class="btn btn-small btn-prod-text" id="btn-abrir-pendientes">
                        Continuar carga pendiente
                    </button>
                @endif
                <a href="{{ route('operaciones-masivas.alta.paso1') }}"
                   class="btn btn-small btn-prod-fill">
                    Iniciar
                </a>
            </div>
        </div>

        {{-- Card: Generación masiva de informes --}}
        <div class="om-card">
            <div>
                <p class="fw-700 text-gris-500 text-uppercase mb-2" style="font-size:0.85rem; letter-spacing:.04em;">
                    GENERACIÓN MASIVA DE INFORMES
                </p>
                <p class="text-gris-400 mb-4" style="font-size:0.82rem; line-height:1.5;">
                    Generá informes de forma masiva para contrapartes previamente dadas de alta.
                </p>
            </div>
            <div class="d-flex align-items-center justify-content-end">
                <a href="{{ route('operaciones-masivas.generacion.paso1') }}"
                   class="btn btn-small btn-prod-fill">
                    Iniciar
                </a>
            </div>
        </div>

    </div>

</div>

@if ($cantidadPendientes > 1)
{{-- Modal: seleccionar carga pendiente --}}
<div class="om-modal" id="modal-pendientes" 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;">
                CARGAS PENDIENTES
            </h5>
            <button type="button" class="btn btn-small btn-prod-text px-1" id="btn-cerrar-pendientes">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <p class="text-gris-400 mb-3" style="font-size:0.83rem;">
            Tenés {{ $cantidadPendientes }} cargas pendientes. Seleccioná la que querés retomar.
        </p>
        <div class="d-flex flex-column gap-2">
            @foreach ($pendientes as $p)
            <a href="{{ route('operaciones-masivas.alta.continuar-pendiente') }}?id_config={{ $p->id_config }}"
               class="om-pendiente-row">
                <div>
                    <div class="fw-600 text-gris-500" style="font-size:0.85rem;">{{ $p->cliente_nombre }}</div>
                    <div class="text-gris-400" style="font-size:0.8rem;">
                        {{ $p->familia_nombre }} &mdash; {{ $p->filial_nombre }}
                    </div>
                </div>
                <div class="text-gris-350" style="font-size:0.76rem; white-space:nowrap;">
                    {{ \Carbon\Carbon::parse($p->updated_at)->format('d/m/Y') }}
                </div>
            </a>
            @endforeach
        </div>
    </div>
</div>
@endif

@endsection

@section('funcionesJS_panel')
@if ($cantidadPendientes > 1)
<script>
    document.getElementById('btn-abrir-pendientes')?.addEventListener('click', function () {
        document.getElementById('modal-pendientes').style.display = '';
    });
    document.getElementById('btn-cerrar-pendientes')?.addEventListener('click', function () {
        document.getElementById('modal-pendientes').style.display = 'none';
    });
</script>
@endif
@endsection