{{-- resources/views/dashboard-api/dashboard_new.blade.php --}}

@extends('header_nuevo_generico')

@section('styles')
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/vista_generica.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/clientes_api.css') }}?v=1">

@endsection

@section('main')
    <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">

    {{-- Título y Navegación Superior (SIN CAMBIOS) --}}
    <div class="rectangle_bg_backend align-items-start pt-5 pb-5 mt-5 mb-5">
        <div class="d-flex flex-column w-100">
            <div class="d-flex align-items-center mt-2">
                <h1 class="title_page mb-0">Gestor de APIs</h1>
            </div>
            <div class="nav-apis nav-container pt-4">
                <ul class="nav nav-tabs border-0">
                    <li class="nav-item"> <a class="nav-link api-nav active fs-7 me-1" aria-current="page" href="#">
                            Clientes y APIs</a> </li>
                    <li class="nav-item"> <a class="nav-link api-nav text-white fs-7 me-1" href="/dashboard-api/json"disabled>
                        Supervisión de APIs</a>
                    </li>
                    <li class="nav-item"> <a class="nav-link api-nav text-white fs-7" href="#" disabled
                        >Información de APIs</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center align-items-start w-100">
        <div class="content-target">
            <div class="content-box">
                <div class="mt-2">
                    <div id="contenedor">
                    <div id="contenedor-botones"
                        class="d-flex flex-column gap-3 mt-3 mb-4 p-3 bg-light rounded shadow-sm">

                        <!-- fila superior: botones + buscador -->
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div class="d-flex gap-2">
                                <button id="periodo_diario" class="btn listado-btn fw-bold d-none">
                                    <i class="bi bi-download pe-2"></i>Reporte de consumo
                                </button>
                            <form id="form-descarga-excel-facturacion" method="POST" action="/descargar-excel/apis-pop-up">
                            @csrf
                            <div class="inputs-fechas d-flex gap-2">
                                    <button id="descargar-fact" class="btn listado-btn fw-bold">
                                        <i class="bi bi-download pe-2"></i>Exportar excel
                                    </button>
                                    <div class="fecha-desde-container mb-1 flex-fill">
                                        <label class="fecha-label">@traducir('desde', 'Fecha Desde')</label>
                                        <input type="text" id="fecha_desde_fact_visible" class="form-control form-control-sm" autocomplete="off" required>
                                        <input type="hidden" name="fecha_desde_fact" id="fecha_desde_fact">
                                    </div>
                                    <div class="fecha-hasta-container mb-1 flex-fill">
                                        <label class="fecha-label">@traducir('hasta', 'Fecha Hasta')</label>
                                        <input type="text" id="fecha_hasta_fact_visible" class="form-control form-control-sm" autocomplete="off" required>
                                        <input type="hidden" name="fecha_hasta_fact" id="fecha_hasta_fact">
                                    </div>
                                </div>
                            </form>
                            </div>

                            <div class="d-flex align-items-center ms-auto form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" autocomplete="off">
                                <label class="form-check-label text-fidelitas" for="flexSwitchCheckDefault">
                                    Ver solo clientes con monto a facturar
                                </label>
                            </div>
                            <div class="d-flex align-items-center ms-auto w-25">
                                <label for="buscarInput" class="me-2 mb-0">Buscar:</label>
                                <input type="text" id="buscarInput" class="form-control w-100">
                            </div>
                        </div>

                        <!-- fila inferior: switch a la derecha -->
                        <div class="d-flex justify-content-end">
 
                        </div>
                    </div>


                        @if(!empty($documentosAgrupados))
                            @php $i = 0; @endphp
                            @foreach($documentosAgrupados as $nombreCliente => $documentos)
                                @php 
                                    $tieneMonto = collect($documentos)->contains(fn($d) => $d->mes_actual != 0);
                                @endphp
                                <div id="clientes-wrapper-{{ $i }}" class="clientes-wrapper" data-monto="{{ $tieneMonto ? '1' : '0' }}">
                                    <div class="menu-dropdown background-fidelitas-secondary rounded"
                                        onclick="toggleSubmenu('tabla{{ $i }}')">
                                        <div class="menu-item-body d-flex align-items-center justify-content-between">
                                            <div class="d-flex align-items-center">
                                                <span class="me-2 fs-5"><i class="bi bi-chevron-compact-right"></i></span>
                                                <span class="fw-bold">{{ $nombreCliente }}</span> <span class="ps-2">({{ $documentos[0]->cli_codigo }})</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3">
                                                @php $primerDoc = $documentos[0] ?? null; @endphp
                                                @if($primerDoc)
                                                    <!-- <span class="me-3 text-fidelitas">
                                                        Periodo a facturar: <strong>08/2025</strong> | 
                                                        Monto a facturar: <strong>1000</strong>
                                                    </span> -->

                                                    <button type="button" class="btn btn-fidelitas-gap btnedit" 
                                                        id="btn-{{ $primerDoc->cliente }}"
                                                        data-cliente="{{ $primerDoc->cliente }}"
                                                        data-nombre="{{ $nombreCliente }}"
                                                        data-toggle="modal"
                                                        data-target="#DescargarExcel">
                                                        <i class="bi bi-download fs-5"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>



                                    <div id="tabla{{ $i }}" class="submenu shadow-sm">
                                        <div class="table-responsive">
                                            <table id="datatable-{{ $i }}"
                                                class="table table-hover align-middle fs-5 w-100 shadow-sm">
                                                <thead class="table-light">
                                                    <tr class="sub-table-titles">
                                                        <th>ID</th>
                                                        <th>API</th>
                                                        <th>Tipo de API</th>
                                                        <th>Tipo de contrato</th>
                                                        <th>Moneda</th>
                                                        <th class="text-end">Precio consulta</th>
                                                        <th class="text-end">Consumo último mes cerrado</th>
                                                        <th class="text-end">Consumo diario</th>
                                                        <th class="d-none text-end">Consumo mensual</th>
                                                        <th class="d-none">Consultas mínimas</th>
                                                        <th class="d-none">Cant. de usuarios</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @foreach($documentos as $doc)
                                                        <tr class="toggle-table-content">
                                                            <td>{{ $doc->id_producto }}</td>
                                                            <td>{{ $doc->nombre_producto }}</td>
                                                            <td>{{ $doc->tipo_de_api }}</td>
                                                            <td>{{ $doc->tipo_de_contrato }}</td>
                                                            <td>{{ $doc->moneda }}</td>
                                                            <td class="text-end">{{ $doc->precio_unitario }}</td>
                                                            <td class="text-end">{{ '0' ?? '0' }}</td>
                                                            <td class="text-end">{{ $doc->diario }}</td>
                                                            <td class="d-none text-end">{{ $doc->mes_actual }}</td>
                                                            <td class="d-none text-end"></td>
                                                            <td class="d-none text-end"></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                @php $i++; @endphp
                            @endforeach
                            <div class="d-flex justify-content-between align-items-center mt-3 pagination">
                                <div id="pagination-info" class="text-muted small"></div>
                                <div id="pagination-controls" class="btn-group"></div>
                            </div>
                        @else
                            <div class="nodocu-card shadow-sm p-1 pt-0 w-90 h-100">
                                <p class="text-center text-wrap fs-6 pt-3"><b>
                                        No se encuentran documentos disponibles en este momento. Ante cualquier consulta, por
                                        favor comuníquese con nosotros a través del correo electrónico
                                        soporteled@fidelitas.com.ar
                                    </b>
                                </p>
                            </div>
                        @endif


                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup-descarga shadow p-3 bg-white rounded border popup-descarga-custom" id="popup-descarga">
        <form id="form-descarga-excel" method="POST" action="/descargar-excel/apis-pop-up">

            @csrf
            <input class="d-none" value="" id="soycliente" name="cliente"></input>
            <input class="d-none" value="" id="nombrecliente" name="nombrecliente"></input>
            <div class="container-info d-flex flex-column rounded mb-3">
                <div class="mb-2">
                    <span>*En caso de superar el <strong>1M de registros</strong>, sugerimos descargar de a un reporte a la vez.</span>
                </div>
                <div>
                    <span>*El número al lado de cada checkbox representa el <strong>consumo del mes actual</strong> de esa api.</span>
                </div>
            </div>
            <div class="inputs-fechas mb-2 d-flex gap-2">
                <div class="fecha-desde-container mb-1 flex-fill">
                    <label class="fecha-label">@traducir('desde', 'Fecha Desde')</label>
                    <input type="text" id="fecha_desde_visible" class="form-control form-control-sm" required>
                    <input type="hidden" name="fecha_desde" id="fecha_desde">
                </div>
                <div class="fecha-hasta-container mb-1 flex-fill">
                    <label class="fecha-label">@traducir('hasta', 'Fecha Hasta')</label>
                    <input type="text" id="fecha_hasta_visible" class="form-control form-control-sm" required>
                    <input type="hidden" name="fecha_hasta" id="fecha_hasta">
                </div>
            </div>
            <div id="select-buttons" class="select-buttons">
                <button type="button" class="btn select-btn btn-sm btn-outline-primary" id="select-all">Seleccionar
                    todo</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect-all">Deseleccionar todo</button>
            </div>
            <div id="checkbox-list" class="d-flex flex-column gap-2 mb-2 checkbox-popup">
                <!-- Se insertan los checkboxes por jQuery -->
            </div>
            <div class="d-flex justify-content-end gap-2 mt-3">
                <button type="submit" class="btn download-btn btn-sm btn-primary">Descargar</button>
            </div>
        </form>
    </div>

<!-- <div class="popup-overlay shadow bg-white popup-descarga-facturacion" id="popup-overlay-facturacion">
    <div class="popup-box shadow p-3 rounded border">
        <form id="form-descarga-excel-facturacion" method="POST" action="/descargar-excel/apis-pop-up">
            @csrf
            <div class="inputs-fechas mb-2 d-flex gap-2">
                <div class="fecha-desde-container mb-1 flex-fill">
                    <label class="fecha-label">@traducir('desde', 'Fecha Desde')</label>
                    <input type="text" id="fecha_desde_fact_visible" class="form-control form-control-sm" required>
                    <input type="hidden" name="fecha_desde_fact" id="fecha_desde_fact">
                </div>
                <div class="fecha-hasta-container mb-1 flex-fill">
                    <label class="fecha-label">@traducir('hasta', 'Fecha Hasta')</label>
                    <input type="text" id="fecha_hasta_fact_visible" class="form-control form-control-sm" required>
                    <input type="hidden" name="fecha_hasta_fact" id="fecha_hasta_fact">
                </div>
            </div>
            <div class="d-flex justify-content-end gap-2 mt-3">
                <button type="submit" class="btn download-btn btn-sm btn-primary" id="descargar-fact">Descargar</button>
                <button type="button" id="cerrar-popup-facturacion" class="btn btn-sm btn-secondary">Cancelar</button>
            </div>
        </form>
    </div>
</div> -->



@endsection

@section('funcionesJS')
    <script language="JavaScript" src="{{ asset('/Libreria_CA/Js/apiDashboardClientes.js') }}?v=2"></script>
@endsection