<div class="modal fade" tabindex="-1" role="dialog" id="modal_tope_panel">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title modificacion">Modificar Registro APIKEY</h4>
                <h4 class="modal-title alta d-none">Nuevo Registro APIKEY</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="modificar_tope_panel">
                <div class="modal-body">
                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                    <input type="hidden" name="alta_modificacion" id="alta_modificacion">
                    <!--input type="hidden" name="id_api" id="id_api"-->
                    <input type="hidden" id="id_cliente">
                    <div class="row">
                        <div class="col-sm-12">
                            <label for="">Nombre del cliente:</label>
                            <input type="text" name="nombre" id="nombre" readonly class="form-control">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-2">
                            <label for="">Tipo de Api:</label>
                            <select name="tipo_api" id="tipo_api" class="form-control">
                                <option value="">Seleccione...</option>
                                <option value="C">CLIENTES</option>
                                <option value="I">INTERNAS</option>
                                <option value="P">PROVEEDORES</option>
                            </select>
                        </div>
                        <div class="col-sm-9">
                            <label for="">Producto:</label>
                            <select name="codigo_producto" id="codigo_producto" class="form-control">
                                <option value=''>Seleccione... </option>
                                @foreach ($productos as $prod)
                                    <option value="{{$prod->id_producto}}">{{$prod->id_producto}} -
                                        {{$prod->nombre_producto}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <label for="">Id_api_key:</label>
                            <input type="text" name="id_api" id="id_api" readonly class="form-control">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-12"><label>Secciones:</label></div>
                        <div class="col-sm-12  text-center">
                            <table class="table table-condensed table-bordered">
                                <tr>
                                    <td><input type="checkbox" id="seccion1" name="seccion1"> Bancos y cheques</td>
                                    <td><input type="checkbox" id="seccion2" name="seccion2"> Comerciales</td>
                                    <td><input type="checkbox" id="seccion3" name="seccion3"> Comex</td>
                                    <td><input type="checkbox" id="seccion4" name="seccion4"> Contables</td>
                                    <td><input type="checkbox" id="seccion5" name="seccion5"> Fiscales</td>
                                    <td><input type="checkbox" id="seccion6" name="seccion6"> Formales</td>
                                    <td><input type="checkbox" id="seccion7" name="seccion7"> Legales</td>
                                    <td><input type="checkbox" id="seccion8" name="seccion8"> Legales homónimos</td>
                                    <td><input type="checkbox" id="seccion9" name="seccion9"> Relaciones</td>
                                    <td><input type="checkbox" id="seccion10" name="seccion10"> Relaciones homónimos
                                    </td>
                                    <td><input type="checkbox" id="seccion11" name="seccion11"> Score IC</td>
                                </tr>
                                <tr>
                                    <td colspan=11>
                                        <button id="todas_secciones" type="button" class="btn" style="padding: 2px;">
                                            &nbsp;&nbsp;Seleccionar todas las secciones&nbsp;&nbsp;
                                        </button>
                                        &nbsp;&nbsp;
                                        <button id="ninguna_seccion" type="button" class="btn" style="padding: 2px;">
                                            &nbsp;&nbsp;Borrar todas las secciones seleccionadas&nbsp;&nbsp;
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row my-3">
                        <div class="col-sm-2">
                            <label for="">Tope diario:
                                <!-- <span id="sugerido" class="hidden letrarojo"><br>* Valor Sugerido</span></label> -->
                                <input type="text" name="tope_diario" id="tope_diario" class="form-control numerico">
                                <div class="form-text letrarojo" id="sugerido">* Valor Sugerido</div>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Consumo diario:</label>
                            <input type="text" name="consumo_diario" id="consumo_diario" class="form-control" readonly>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Tope mensual:</label>
                            <input type="text" name="tope_mensual" id="tope_mensual" class="form-control numerico">
                        </div>
                        <div class="col-sm-2">
                            <label for="">Consumo mensual:</label>
                            <input type="text" name="consumo_mensual" id="consumo_mensual" class="form-control"
                                readonly>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Tope:</label>
                            <input type="text" name="tope_anual" id="tope_anual" class="form-control numerico">
                        </div>
                        <div class="col-sm-2">
                            <label for="">Consumo:</label>
                            <input type="text" name="consumo_anual" id="consumo_anual" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-4">
                            <label for="">Tipo de Contrato:</label>
                            <select name="tipo_contrato" id="tipo_contrato" class="form-control">
                                <option value="">Seleccione...</option>
                                <option value="C">X CONSUMO</option>
                                <option value="P">PREPAGO</option>
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label class="letra-10" for="moneda">Moneda</label>
                            <select name="moneda" id="moneda" class="form-control">
                                <option value=''>Seleccione la Moneda... </option>
                                @foreach ($monedas as $mon)
                                    <option value="{{$mon->moneda}}">{{$mon->moneda}} - {{$mon->nombre_moneda}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <label class="letra-10" for="precio_unitario">Precio unitario</label>
                            <input maxlength="21" pattern="-?\d+(.\d{1,2})?" class="decimal text-right"
                                name="precio_unitario" type="text" id="precio_unitario">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-4">
                            <label for="">Token:</label>
                            <input type="text" name="api_key" id="api_key" class="form-control" readonly>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Fecha Alta:</label>
                            <input name="fecha_alta" id="fecha_alta" class="form-control" data-date-format="yyyy-mm-dd"
                                data-date-start-date="-1y" data-date-end-date="+1y" readonly>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Vigencia:</label>
                            <input name="vigencia" id="vigencia" class="form-control" data-date-format="yyyy-mm-dd"
                                data-date-start-date="-1y" data-date-end-date="+15y" readonly>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Estado Token:</label>
                            <select name="estado_token" id="estado_token" class="form-control">
                                <option value="0">INACTIVO</option>
                                <option value="1">ACTIVO</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <label for="">Bloquea:</label>
                            <select name="bloquea" id="bloquea" class="form-control">
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-12"><label>Consumos mensuales:</label></div>
                        <div class="col-sm-12  text-center">
                            <table class="table table-condensed table-bordered">
                                <tr style="background-color: #eeeeee">
                                    <th id='mes'></th>
                                    <th id='mes2'></th>
                                    <th id='mes3'></th>
                                    <th id='mes4'></th>
                                    <th id='mes5'></th>
                                    <th id='mes6'></th>
                                    <th id='mes7'></th>
                                    <th id='mes8'></th>
                                    <th id='mes9'></th>
                                    <th id='mes10'></th>
                                    <th id='mes11'></th>
                                    <th id='mes12'></th>
                                </tr>
                                <tr>
                                    <td id='consumo_mes_anterior'></td>
                                    <td id='consumo_mes_anterior2'></td>
                                    <td id='consumo_mes_anterior3'></td>
                                    <td id='consumo_mes_anterior4'></td>
                                    <td id='consumo_mes_anterior5'></td>
                                    <td id='consumo_mes_anterior6'></td>
                                    <td id='consumo_mes_anterior7'></td>
                                    <td id='consumo_mes_anterior8'></td>
                                    <td id='consumo_mes_anterior9'></td>
                                    <td id='consumo_mes_anterior10'></td>
                                    <td id='consumo_mes_anterior11'></td>
                                    <td id='consumo_mes_anterior12'></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-6">
                            <label for="">Usuario:</label>
                            <select name="user_id" id="user_id" class="form-control">
                                <option value=''>Seleccione... </option>
                                @foreach ($usuarios as $usu)
                                    <option value="{{$usu->id}}">{{$usu->username}} - ({{$usu->nombre}})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="url">URL:</label>
                            <input name='url' id='url' value="" class="form-control">
                        </div>
                    </div>
                    <div class="mt-3">
                        <label for="rango_ip">Lista IP: <span style='color: red;'>(ALL ó si es una lista de IPs,
                                separarlas por coma, sin espacios)</span></label>
                        <div class="row">
                            <div class="col-sm-12">
                                <input name='rango_ip' id='rango_ip' value="" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label for="trazabilidad_api">Historial:</label>
                        <div class="row">
                            <div class="col-sm-12">
                                <textarea readonly="readonly" id='trazabilidad_api' class="form-control"
                                    rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--  <div class="mt-3">
                        <button type='submit' class="btn btn-fidelitas">Guardar</button>
                        <a class="btn btn-primary" data-dismiss="modal">Cancelar</a>
                    </div> -->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-lg"></i>
                        Cancelar</button>
                    <button type="submit" class="btn btn-fidelitas"><i class="bi bi-check-lg"></i> Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="{{ URL::asset('js/controlar_api/funciones.js') }}"></script>