@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-1">
    <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">
    <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>

    {{-- Header del paso --}}
    <div class="om-paso-header mb-4">
        <span class="om-paso-label">CONFIGURACIÓN DE CARGA</span>
        <p class="text-gris-400 mb-0" style="font-size:0.83rem;">
            Paso 1 de 3: Definí las configuraciones necesarias para generar la plantilla de carga masiva de contrapartes.
        </p>
    </div>

    <form id="form-configuracion"
          action="{{ route('operaciones-masivas.alta.paso1.guardar') }}"
          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="">Placeholder</option>
                    @foreach ($clientes as $cliente)
                        <option value="{{ $cliente->cliente }}">{{ $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 class="col-md-4">
                <label class="om-label" for="filial_id">Filial <span class="text-neg-pri">*</span></label>
                <select id="filial_id" name="filial_id" class="select-prod w-100" required disabled>
                    <option value="">Placeholder</option>
                </select>
            </div>
        </div>

        {{-- Alerta dinámica de tipo de informe --}}
        <div id="om-mensaje-informe" class="om-alerta-info" style="display:none;"></div>

        {{-- Pregunta generación de informes --}}
        <div id="om-genera-informes-block" style="display:none;">
            <p class="fw-700 text-prod-pri mb-1" style="font-size:0.88rem;">
                ¿Querés crear los informes para las contrapartes que vas a dar de alta?
            </p>
            <p class="text-gris-400 fst-italic mb-2" style="font-size:0.81rem;" id="om-genera-hint"></p>
            <div class="d-flex gap-4 mb-3">
                <label class="d-flex align-items-center gap-2 fw-600 text-gris-500" style="font-size:0.88rem; cursor:pointer;">
                    <input type="radio" name="genera_informes" value="1"> SÍ
                </label>
                <label class="d-flex align-items-center gap-2 fw-600 text-gris-500" style="font-size:0.88rem; cursor:pointer;">
                    <input type="radio" name="genera_informes" value="0"> NO
                </label>
            </div>
        </div>

        {{-- Selector tipo de informe --}}
        <div id="om-tipo-informe-block" style="display:none;">
            <p class="fw-600 text-gris-500 mb-1" style="font-size:0.84rem;">
                Seleccioná el tipo de informe que vas a crear en esta carga.
            </p>
            <p class="text-gris-400 fst-italic mb-2" style="font-size:0.8rem;">
                Se generará un único tipo de informe para todas las contrapartes que se den de alta.
            </p>
            <div style="max-width:320px;">
                <label class="om-label" for="tipo_informe_id">Tipo de informe</label>
                <select id="tipo_informe_id" name="tipo_informe_id" class="select-prod w-100">
                    <option value="">Seleccioná el tipo de informe a asignar</option>
                </select>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-small btn-prod-fill" id="btn-siguiente" disabled>
                <i class="bi bi-check2"></i> Siguiente
            </button>
        </div>

    </form>
</div>
@endsection

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