@extends('header_panel_generico')

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

@section('contenido_panel')

<div class="mb-2">
    <a href="{{ route('operaciones-masivas.index') }}" 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">

    

    <h3 class="fw-700 text-gris-500 text-uppercase mb-3" style="font-size:0.92rem; letter-spacing:.03em;">
        GENERACIÓN MASIVA DE INFORMES
    </h3>

    <div class="om-paso-header mb-4">
        <span class="om-paso-label">BÚSQUEDA DE ALTAS DE CONTRAPARTES</span>
        <p class="text-gris-400 mb-0" style="font-size:0.83rem;">
            Paso 1 de 2: Seleccioná el cliente y la familia para visualizar las altas de contrapartes disponibles pendientes de generación de informes.
        </p>
    </div>

    <form id="form-busqueda" action="{{ route('operaciones-masivas.generacion.buscar') }}" method="POST">
        @csrf
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <label class="om-label" for="cliente_id">Cliente <span class="text-neg-pri">*</span></label>
                <select id="cliente_id" name="cliente_id" class="select-prod w-100" required>
                    <option value="">Seleccioná el cliente</option>
                    @foreach ($clientes as $cliente)
                        <option value="{{ $cliente->cliente }}"
                            {{ old('cliente_id') == $cliente->cliente ? 'selected' : '' }}>
                            {{ $cliente->nombre_cliente }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="om-label" for="familia_id">Familia <span class="text-neg-pri">*</span></label>
                <select id="familia_id" name="familia_id" class="select-prod w-100" required disabled>
                    <option value="">Placeholder</option>
                </select>
            </div>
        </div>
        <div class="d-flex justify-content-end mb-4">
            <button type="submit" class="btn btn-small btn-prod-fill">
                <i class="bi bi-search"></i> Buscar
            </button>
        </div>
    </form>

    {{-- Resultados --}}
    @isset($lotes)
    <div id="om-resultados">
        <span class="om-seccion-label">LOTES DE CONTRAPARTES</span>

        @if ($lotes->isEmpty())
            <div class="om-alerta-warn mt-2">
                <i class="bi bi-exclamation-triangle"></i>
                No se encontraron contrapartes pendientes de generación de informes para la familia y cliente seleccionado.
            </div>

        @elseif (isset($familiaConfig['sin_tipos_informe']) && $familiaConfig['sin_tipos_informe'])
            <div class="om-alerta-warn mt-2">
                <i class="bi bi-exclamation-triangle"></i>
                La familia seleccionada no tiene tipos de informe asignados. Es necesario configurarlos antes de generar informes en forma masiva.
            </div>
            <div class="mt-3">
                @include('operaciones_masivas.generacion._tabla_lotes', ['lotes' => $lotes, 'interactiva' => false])
            </div>

        @else
            <p class="text-gris-400 mt-2 mb-2" style="font-size:0.83rem;">
                Seleccioná el lote de contrapartes para el que querés generar informes.
            </p>
            @include('operaciones_masivas.generacion._tabla_lotes', ['lotes' => $lotes, 'interactiva' => true])
        @endif
    </div>
    @endisset

</div>
@endsection

@section('funcionesJS_panel')
<script>
    window.OM_ROUTES = {
        familiasPorCliente: "{{ route('operaciones-masivas.familias-por-cliente') }}",
    };
</script>
<script src="{{ asset('js/operaciones_masivas/generacion.js') }}?v={{ rand() }}"></script>
@endsection