<div class="content-target" id="detalle-cliente-api">
    <div class="content-box">
        <div class="mt-2 d-flex justify-content-between align-items-start">
            <div>
                <span id="btn-return" class="texto-backend-primary fw-bold" style="cursor:pointer;">
                    <i class="bi bi-arrow-left"></i> Atrás
                </span><br>
                <div class="mt-2">
                    <input type="hidden" name="id_producto" value="{{ $id_producto }}" data-nombre-producto="{{ $producto }}">
                    <input type="hidden" name="id_cliente" value="{{ $cliente }}" data-nombre-cliente="{{ $nombre_cliente }}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <span class="texto-apis-primary fw-bold fs-5">
                        {{ $nombre_cliente }} - {{ $producto }} - ID {{ $id_producto }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Contenedor principal: menú + contenido -->
        <div class="d-flex justify-content-between align-items-start mt-4">
            
            <!-- Contenido dinámico -->
            <div class="contenido-opciones flex-grow-1 me-4">
                <div class="subcontenedor seccion-contratos fondo-white rounded shadow p-3 mb-4">
                    <div class="row">
                        <div class="col-2 text-start">
                            <span class="texto-apis-primary fs-6">Contrato</span>
                        </div>
                        <div class="col-6"></div>
                        <div class="col-4 text-end mb-2">
                            <button class="btn btn-subaccion rounded-pill" id="editar-contrato"><i class="bi bi-pencil-square me-2"></i>Editar contrato</button>
                            <button class="btn btn-subaccion rounded-pill me-2 d-none" id="cancelar-editar-contrato"><i class="bi bi-x-lg me-2"></i>Cancelar</button>
                            <button class="btn fondo-backend-primary text-white rounded-pill d-none" id="guardar-editar-contrato"><i class="bi bi-check-lg me-2"></i>Guardar cambios</button>
                        </div>
                        <div class="contenedor-form col-11">
                            <form id="form-contrato" class="form-contrato">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label for="tipo-contrato" class="texto-apis-primary label-editable">
                                            <small>Tipo de contrato</small>
                                        </label>
                                        <select id="tipo-contrato" name="tipo-contrato" class="form-select fondo-white texto-apis-primary input-editable fw-bold ps-2" disabled>
                                            <option value="CC" {{ ($data_consumo?->modalidad_pago === 'CC') ? 'selected' : '' }}>Cuenta Corriente</option>
                                            <option value="PP" {{ ($data_consumo?->modalidad_pago === 'PP') ? 'selected' : '' }}>Prepago</option>
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <label for="fecha-inicio" class="texto-apis-primary label-no-editable">
                                            <small>Fecha de inicio</small>
                                        </label>
                                        <input type="text" id="fecha-inicio" class="form-control fondo-white texto-apis-primary input-no-editable fw-bold ps-2" value="{{ $data_consumo->fecha_desde }}" readonly>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="tope-contrato" class="texto-apis-primary label-editable">
                                            <small>Tope contrato</small>
                                        </label>
                                        <input type="text" id="tope-contrato" name="tope-contrato" class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2" value="{{ $data_consumo?->limite_consumo ?: '0' }}" readonly>
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <label for="consumo-contrato" class="texto-apis-primary label-no-editable">
                                            <small>Consumo contrato</small>
                                        </label>
                                        <input type="text" id="consumo-contrato" name="consumo-contrato" class="form-control fondo-white texto-apis-primary input-no-editable fw-bold ps-2" value="{{ $data_consumo?->total_consumo ?: '0' }}" readonly>
                                    </div>
 <div class="col-md-2">
    <label for="tango-code" class="texto-apis-primary label-editable">
        <small>Tango Code</small>
    </label>
    <input type="text" id="tango-code" name="tango-code" class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2" value="{{ $data_consumo?->tango_code ?: '-' }}" readonly>
 </div>
                                    <div class="col-md-4">
                                        <label for="moneda" class="texto-apis-primary label-editable">
                                            <small>Moneda</small>
                                        </label>
                                        <select id="moneda" name="moneda" class="form-select fondo-white texto-apis-primary input-editable fw-bold ps-2" disabled>
                                            <option value="ARS" {{ ($data_consumo?->moneda === 'ARS') ? 'selected' : '' }}>ARS - Pesos Argentinos</option>
                                            <option value="USD" {{ ($data_consumo?->moneda === 'USD') ? 'selected' : '' }}>USD - Dólares Estadounidenses</option>
                                            <option value="EUR" {{ ($data_consumo?->moneda === 'EUR') ? 'selected' : '' }}>EUR - Euros</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="precio" class="texto-apis-primary label-editable">
                                            <small>Precio por consulta</small>
                                        </label>
                                        <input type="text" name="precio" id="precio" class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2" value="{{ $data_consumo?->precio_unitario ?: '0' }}" readonly>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="minimo-facturable" class="texto-apis-primary label-editable">
                                            <small>Mínimo facturable</small>
                                        </label>
                                        <input type="text" id="minimo-facturable" name="minimo-facturable" class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2" value="{{ $data_consumo?->minimo_factura ?: '0' }}" readonly>
                                    </div>
                                    <div class="col-md-8 d-none precio"></div>
                                    <div class="col-md-12 d-none precio">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                role="switch"
                                                id="precio-escalonado-switch"
                                                {{ $data_consumo->escalonado == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label label-editable" for="precio-escalonado-switch">Precios escalonados</label>
                                        </div>
                                    </div>
                                      <div class="col-md-3 precio tipo-escalonado-radios {{ $data_consumo->escalonado == 1 ? '' : 'd-none' }}">
                                          <label for="tipo-escalonado" class="texto-apis-primary label-editable">
                                                <small>Tipo escalonado</small>
                                            </label>
                                            <select id="tipo-escalonado-select" name="tipo-escalonado-select" 
                                                    class="form-select fondo-white texto-apis-primary input-editable fw-bold ps-2" 
                                                    disabled>
                                                <option value="1" {{ ($data_consumo->tipo_escalonado ?? 1) != 2 ? 'selected' : '' }}>
                                                    Escalonado Clásico (p × q)
                                                </option>
                                                <option value="2" {{ ($data_consumo->tipo_escalonado ?? 1) == 2 ? 'selected' : '' }}>
                                                    Por licencia (A + B + C)
                                                </option>
                                            </select>
                                        </div>

                                    <div id="contenedor-escalones" class="row g-3 mt-0 {{ $data_consumo->escalonado == 1 ? '' : 'd-none' }}">
                                        <input type="hidden" name="escalones_eliminados" id="escalones_eliminados">
                                        @foreach ($escalones as $idx => $escalon)
                                            @php
                                                $numero = $idx + 1;   // 1,2,3…
                                            @endphp

                                            <div class="row g-3 precio-escalonado bloque-escalon" data-escalon="{{ $numero }}">
                                                <input type="hidden" name="id-escalon-{{ $numero }}" value="{{ $escalon->id_escalon }}">
                                                {{-- Número de escalón --}}
                                                <div class="col-md-2">
                                                    <label class="texto-apis-primary label-no-editable">Escalón</label>
                                                    <input type="text" class="form-control fondo-white texto-apis-primary input-no-editable fw-bold ps-2"
                                                        value="{{ $numero }}" readonly>
                                                </div>

                                                {{-- Desde --}}
                                                <div class="col-md-3">
                                                    @php
                                                        $esPrimerEscalon = ($escalon->desde == 0);
                                                    @endphp

                                                    <label class="texto-apis-primary label-no-editable">
                                                        Desde (Cantidad de consultas)
                                                    </label>

                                                    <input type="number"
                                                        class="form-control fondo-white texto-apis-primary fw-bold ps-2 input-no-editable"
                                                        name="desde-{{ $numero }}"
                                                        id="desde-{{ $numero }}"
                                                        value="{{ $escalon->desde }}"
                                                        readonly required>
                                                </div>

                                                {{-- Hasta --}}
                                                <div class="col-md-3">
                                                    <label class="texto-apis-primary label-editable">Hasta (Cantidad de consultas)</label>
                                                    <input type="number"
                                                        class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2"
                                                        name="hasta-{{ $numero }}"
                                                        id="hasta-{{ $numero }}"
                                                        value="{{ $escalon->hasta }}"
                                                        readonly required>
                                                </div>

                                                {{-- Precio --}}
                                                <div class="col-md-3">
                                                    <label class="texto-apis-primary label-editable">Precio por consulta</label>
                                                    <input type="number"
                                                        class="form-control fondo-white texto-apis-primary input-editable fw-bold ps-2"
                                                        name="precio-{{ $numero }}"
                                                        id="precio-{{ $numero }}"
                                                        value="{{ $escalon->precio }}"
                                                        readonly required>
                                                </div>

                                                {{-- Eliminar --}}
                                                <div class="col-md-1 d-flex align-items-end">
                                                    <span class="eliminar-escalon texto-backend-primary fw-bold d-none" style="cursor:pointer;">
                                                        <i class="bi bi-x-circle-fill fs-4"></i>
                                                    </span>
                                                </div>

                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </form>
                            <div class="col-md-6 d-none agregar-escalon my-4">
                                <span id="agregar-escalon" class="texto-backend-primary fw-bold fs-6" style="cursor: pointer;"><i class="bi bi-plus-circle me-2"></i>Agregar escalón</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="subcontenedor seccion-contratos fondo-white rounded shadow p-3 mt-4">
                    <div class="row">
                        <div class="col-3 text-start">
                            <span class="texto-apis-primary fs-6">Historial de consumo mensual</span>
                        </div>
                        <div class="col-7"></div>
                        <div class="col-2 text-end">
                            <button class="btn btn-subaccion rounded-pill" id="historial-detallado"><i class="bi bi-download me-2"></i>Descargar historial</button>
                        </div>
                        <div class="w-100 mt-3">
                            <table class="table table-hover align-middle fs-5 w-100 shadow-sm tabla-historial-consumo">
                                <thead class="rounded p-1">
                                    <tr class="fondo-backend-secondary text-white">
                                        <th class="text-center">{{ $data_consumo?->mes_anterior ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior2 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior3 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior4 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior5 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior6 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior7 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior8 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior9 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior10 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior11 ?: '-'}}</th>
                                        <th class="text-center">{{ $data_consumo?->mes_anterior12 ?: '-'}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   <tr>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior2 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior3 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior4 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior5 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior6 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior7 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior8 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior9 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior10 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior11 ?: '0'}}</td>
                                        <td class="text-center">{{ $data_consumo?->consumo_mes_anterior12 ?: '0'}}</td>
                                   </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="subcontenedor seccion-usuarios fondo-white rounded shadow p-3 d-none">
                    <div class="row">
                        <div class="col-2 text-start">
                            <span class="texto-apis-primary fs-6">Usuarios</span>
                        </div>
                        <div class="col-6"></div>
                        <div class="col-4 text-end">
                            <button class="btn btn-subaccion rounded-pill me-2" id="listar-usuarios"><i class="bi bi-download me-2"></i>Listado de usuarios</button>
                            <div class="btn-group">
                                <button type="button" class="btn btn-subaccion rounded-pill dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bi bi-plus-circle me-2"></i>Agregar usuario
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item agregar-usuario-opcion texto-backend-primary" id="seleccionar-existente" style="cursor:pointer">Seleccionar usuario existente</a></li>
                                    <li><a class="dropdown-item agregar-usuario-opcion texto-backend-primary" id="crear-nuevo-usuario" style="cursor:pointer">Crear nuevo usuario</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="w-100 mt-3">
                            <table class="table table-hover align-middle fs-5 w-100 shadow-sm tabla-usuarios">
                                <thead class="rounded p-1">
                                    <tr class="fondo-backend-secondary text-white">
                                        <th class="w-15">Nombre y apellido</th>
                                        <th>Usuario</th>
                                        <th>E-mail</th>
                                        <th>Contraseña</th>
                                        <th>API key</th>
                                        <th class="w-15">Vencimiento API key</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($usuarios as $usuario)
                                    <tr data-user-id="{{ $usuario->user_id }}">
                                        <td>{{ $usuario->first_name }} {{ $usuario->last_name }}</td>
                                        <td>{{ $usuario->username }}</td>
                                        <td>{{ $usuario->email }}</td>
                                        <td>{{ $usuario->password }}</td>
                                        <td>{{ $usuario->api_key }}</td>
                                        <td>{{ $usuario->vigencia }}</td>
                                        <td>{{ $usuario->activo == 1 ? 'Habilitado' : 'Deshabilitado' }}</td>
                                    </tr>
                                    @endforeach
                                    <!-- Aquí se llenarán los datos de los usuarios mediante JavaScript o backend -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="subcontenedor seccion-whitelist fondo-white rounded shadow p-3 d-none">
                    <div class="row">
                        <div class="col-2 text-start">
                            <span class="texto-apis-primary fs-6">Whitelist</span>
                        </div>
                        <div class="col-6"></div>
                        <div class="col-4 text-end">
                            <button class="btn btn-subaccion rounded-pill me-2" id="listar-ips"><i class="bi bi-download me-2"></i>Listado de IPs</button>
                            <button class="btn btn-subaccion rounded-pill" id="agregar-ip"><i class="bi bi-plus-circle me-2"></i>Agregar IP</button>
                        </div>
                        <div class="w-100 mt-3">
                            <table class="table table-hover align-middle fs-5 w-100 shadow-sm tabla-whitelist">
                                <thead class="rounded p-1">
                                    <tr class="fondo-backend-secondary text-white">
                                        <th>IP</th>
                                        <th>Estado</th>
                                        <th>Fecha de alta</th>
                                        <th>Agregado por</th>
                                        <th>Habilitar/Deshabilitar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Aquí se llenarán los datos de los usuarios mediante JavaScript o backend -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="subcontenedor seccion-acciones fondo-white rounded shadow p-3 d-none">
                    <div class="row">
                        <div class="col-2 text-start">
                            <span class="texto-apis-primary fs-6">Historial</span>
                        </div>
                        <div class="col-6"></div>
                        <div class="col-4 text-end">
                            <button class="btn btn-subaccion rounded-pill me-2" id="listar-acciones"><i class="bi bi-download me-2"></i>Listado de acciones</button>
                        </div>
                        <div class="w-100 mt-3">
                            <table class="table table-hover align-middle fs-5 w-100 shadow-sm tabla-acciones">
                                <thead class="rounded p-1">
                                    <tr class="fondo-backend-secondary text-white">
                                        <th>Fecha/Hora</th>
                                        <th>Usuario</th>
                                        <th>Categoría</th>
                                        <th>Detalle</th>
                                        <th>Realizado por</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Aquí se llenarán los datos de los usuarios mediante JavaScript o backend -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Menú lateral -->
            <aside class="menu-opciones text-end ms-5" style="min-width: 15vw;">
                <button class="btn-opcion btn-contratos rounded fw-bold  text-start py-2 px-3 w-100 active">Detalles de contratación</button><br>
                <button class="btn-opcion btn-usuarios rounded fw-bold text-start py-2 px-3 w-100 mt-2">Usuarios y API keys</button><br>
                <button class="btn-opcion btn-whitelist rounded fw-bold text-start py-2 px-3 w-100 mt-2 d-none">Whitelist</button><br>
                <button class="btn-opcion btn-acciones rounded fw-bold text-start py-2 px-3 w-100 mt-2 d-none">Historial de acciones</button>
            </aside>
        </div>
    </div>
</div>
<!-- Modal detalle usuario -->
<div class="modal fade" id="modal-detalle-usuario" tabindex="-1" aria-labelledby="modal-detalle-usuario-label" aria-hidden="true"  data-bs-backdrop="static" data-bs-keyboard="false"></div>

<!-- Modal dinámico para advertencias -->
<div class="modal fade" id="modal-advertencia" tabindex="-1" aria-labelledby="modal-advertencia" aria-hidden="true"  data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div class="modal-title texto-apis-primary fw-bold text-center">
                    <span id="titulo-advertencia"><i class="bi bi-exclamation-triangle-fill me-1"></i> Advertencia</h3>
                </div>
                <!-- Div vacío para insertar contenido dinámico -->
                <div id="mensaje-advertencia"></div>
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn fondo-backend-primary text-white" data-bs-dismiss="modal">Entendido</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Agregar usuario-->
<div class="modal fade" id="modal-nuevo-usuario" tabindex="-1" aria-labelledby="modal-nuevo-usuario-label" aria-hidden="true"  data-bs-backdrop="static" data-bs-keyboard="false">
</div>

<script language="JavaScript" src="{{ asset('/Libreria_CA/Js/detalle_clientes_api.js') }}?t={{ time() }}"></script>
