@include('header_nuevo_generico')
<style>
   /*  #myTable thead {
        background-color: #057151; 
        color: #fcf8f8; 
    } */
</style>
<div class="container-fluid" style="width: 100%;">
    <div class="position-absolute end-0 me-3" style="top: 80px;">
        <a href="/administrador-ia" class="btn btn-outline-fidelitas  px-4 py-2 shadow-sm rounded-pill">Volver al Menú</a>        
    </div>
    <div class="d-flex justify-content-center" style="margin-top:5%;">
        <h1 class="display-4 text-fidelitas">Panel de Prompts</h1>
    </div>
    <div class="row justify-content-center mt-3">
    <input type="hidden" name="token" id="token_" value="{{ csrf_token() }}">
        <div class="col-3">
            <label for="tipoDePrompt">Tipo de Prompt</label>            
            <select id="tipoDePrompt" class="form-select" aria-label="">
                <option value="default" selected>Todos</option>
                @foreach($tipoPrompts as $tipos)
                    <option value="{{$tipos->aiPromptScopeID}}">{{$tipos->scope_name}}</option>                    
                @endforeach            
            </select>
        </div>        
        <div id="cargandoBusqueda" class="spinner-border text-fidelitas d-none" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>                 
    </div>
    <div class="row justify-content-center mt-4" style='margin-left:50px;'>
        <div class="col-2">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="radioEstados" id="radioEstados3" value="todos" checked>
                <label class="form-check-label" for="radioEstados3">Todos</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="radioEstados" id="radioEstados2" value="1">
                <label class="form-check-label" for="radioEstados2">Activo</label>
            </div>  
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="radioEstados" id="radioEstados1" value="0">
                <label class="form-check-label" for="radioEstados1">Inactivo</label>
            </div>                     
        </div>
    </div>
    <button type="button" class="btn btn-fidelitas  px-5 py-3 shadow-sm rounded-pill" id="botonNuevoPrompt" style="margin-left:90%">Crear Prompt</button>
    <div class="mt-5">
        <table id="myTable" class="table table-striped table-bordered shadow-lg rounded" style="width:100%;">
            <thead>
                <th>Nombre Prompt</th>
                <th>Tipo Prompt</th>
                <!-- <th>Punto de Acceso</th> -->
                <th>Modelo de ChatGPT</th>
                <th>Modificado Por</th>
                <th>Fecha Modificacion</th>
                <th>Estado</th>
                <th>Modificar</th>
                <th>Duplicar</th>
            </thead>
            <tbody>
                @foreach ($datos_prompt as $column => $value)
                <tr>
                    <td>{{$value->prompt_name}}</td>
                    <td>{{$value->type_prompt}}</td>
                    <!-- <td><b>{{$value->ai_endpoint}}</b></td> -->
                    <td>{{$value->ai_provider}}</td>
                    <td>{{$value->usuario}}</td>
                    <td>{{$value->created}}</td>
                    @if($value->active == 1)
                        <td><i class="bi bi-plus-square-fill" style="color:green;" onclick="cambioEstado(0,{{$value->id_prompt}})"></i></td>
                        @else
                        <td><i class="bi bi-x-square-fill" style="color:red;" onclick="cambioEstado(1,{{$value->id_prompt}})"></i></td>
                    @endIf
                    <td>
                        <button type="button" 
                                class="btn btn-fidelitas" 
                                data-prompt-id="{{$value->id_prompt}}"
                                data-prompt-nombre = "{{$value->prompt_name}}"
                                data-prompt-ai_endpoint = "{{$value->ai_endpoint}}" 
                                data-prompt-ai_provider = "{{$value->ai_provider}}"
                                data-prompt-user_prompt = "{{$value->user_prompt}}"
                                data-prompt-system_prompt = "{{$value->system_prompt}}"
                                data-prompt-type-prompt = "{{$value->type_prompt}}"
                                data-prompt-pais_prompt = "{{$value->pais_prompt}}"
                                data-prompt-clae = "{{$value->clae}}"
                                onclick="modalModificar($(this))">
                                <i class="bi bi-pencil-square"></i> Modificar
                        </button>
                    </td>
                    <td>
                        <button type="button" 
                                class="btn btn-fidelitas" 
                                data-prompt-id="{{$value->id_prompt}}"
                                data-prompt-nombre = "{{$value->prompt_name}}"
                                onclick="duplicarRegistro($(this))">
                                <i class="bi bi-file-earmark-plus"></i> Duplicar
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>   
</div>
<div class="modal" id="modal-loading" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body text-center">
            <div class="spinner-border text-fidelitas" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            Cargando..
          </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id='modalConfirmarCopia'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar copia</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Esta seguro que desea realizar la copia del prompt <b class='text-fidelitas' id='nombreCopiaPrompt'></b>?</p>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                <button id='confirmarCopiaPrompt' type="button" class="btn btn-fidelitas">Confirmar</button>
            </div>
        </div>
    </div>
</div>
@include('/seccion-prompts/modal_prompts')
<!-- @include('/seccion-prompts/modal_editar_prompt')-->
<script type="text/javascript" src="{{ URL::asset('Libreria_CA/Js/panel_prompts.js') }}"></script>