@include('header_nuevo_generico')
<style>
    /* Variables de colores según la guía */
    :root {    
        --white: #FCF8F8;
        --fidelitas-primary: #003469;
        --fidelitas-secondary: #7B9FC6;
        --backend-primary: #057151;
        --backend-secondary: #41A788;
        --apis-primary: #1C1A1C;
        --apis-secondary: #444444;
        --imperium-color: #E3AD2E;
        --inquiro-vitae-color: #A82B2B;

        /* Neutral and accent colors */
        --grey-light: #ECECEC;
        --grey-medium: #D9D9D9;
        --grey-dark: #484848;
        --disabled-grey: #444444;
        --hover-color: #1C1A1C;

        /* Additional colors */
        --violet: #9747FF;
        --card-production: #D2F1E8;
        --card-fidelitas: #E5F2FF;
        --alert-red: #FF3B30;
        --card-apis: #ECE6FF;

        /* Semaforo colors */
        --status-negative: #F45047;
        --status-orange: #FF9D10;
        --status-yellow: #FFCC00;
        --status-lime: #9FD039;
        --status-affirmative: #34C759;
        --status-expired: #ABABAB;
        --status-cyan: #0DCAF0;
        --status-teal: #30D8C7;

        /* Border radius values */
        --border-radius-large: 32px;
        --border-radius-medium-large: 24px;
        --border-radius-medium: 16px;
        --border-radius-small: 8px;

        /* Font sizes */
        --font-size-heading: 32px;
        --font-size-subtitle: 24px;
        --font-size-normal-text: 16px;
        --font-size-button-large: 20px;
        --font-size-button-small: 16px;
        --font-size-caption: 14px;

        /* Shadows */
        --shadow-target: rgba(0, 0, 0, 0.25);
    }

    /* Base typography styles */
    body {
        font-family: 'Roboto', sans-serif;
        background-color: var(--white);
        color: var(--grey-dark);
    }

    /* Headings and text styles */
    .heading { font-size: var(--font-size-heading); font-weight: bold; }
    .subtitle { font-size: var(--font-size-subtitle); font-weight: bold; }
    .body1 { font-size: var(--font-size-normal-text); font-weight: bold; }
    .body2 { font-size: var(--font-size-normal-text); font-weight: normal; }
    .button-primary { font-size: var(--font-size-button-large); font-weight: bold; }
    .button-secondary { font-size: var(--font-size-button-small); font-weight: bold; }
    .caption { font-size: var(--font-size-caption); font-weight: normal; }


    /* Estilos generales para botones */
    .btn {
        padding: 8px 20px;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

    /* Specific button sizes */
    .botones-large { border-radius: var(--border-radius-large); }
    .botones-medium { border-radius: var(--border-radius-medium); }
    .botones-small { border-radius: var(--border-radius-small); }


    /* Fondo del título de la página para Backend */
    .rectangle_bg_backend {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 364px;
        background: var(--backend-primary);
        display: flex;
        align-items: center;
        padding: 0 2rem;
    }

    /* Título de la página */
    .title_page {
        color: var(--white);
        font-family: 'Roboto', sans-serif;
        font-size: 24px; /* Uso de la variable de tamaño para h2 */
        font-weight: bold;
    }

    /* Contenedor principal para contenido */
    .content-target {
        position: relative;
        z-index: 2;
        width: 98%; /* Ajusta el ancho según sea necesario */
        height: auto; /* Ajusta la altura al contenido */
        margin-top: -270px; /* Elimina o ajusta el margen superior */
        margin-bottom:  16px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background: var(--white);
        border-radius: var(--border-radius-medium);
        justify-content: center;
        align-items: center; /* Centra el contenido dentro de content-target */
    }

    /* Cajas de contenido con sombra y fondo blanco */
    .content-box {
        width: 100%; /* Ajusta el tamaño al 100% del contenedor */
        min-height: 180px; /* Establece una altura mínima */
        padding: 0px 16px 16px 16px;
        background: var(--white);
        border-radius: var(--border-radius-large);        
    }

    .btn-backend-primary { background-color: var(--apis-primary); color: var(--white); }
    .btn-backend-secondary { background-color: var(--apis-secondary); color: var(--white); }
    .btn-backend-tertiary { background-color: var(--white); color: var(--backend-secondary); border: 3px solid var(--backend-secondary);border-radius: 8px;}
    .btn-backend-hover { background-color: var(--hover-color); color: var(--white); }
    .btn-backend-disabled { background-color: var(--disabled-grey); color: var(--grey-dark); cursor: not-allowed; }

    /* Interacciones de botones */
    .btn:hover:not(.btn-disabled) { opacity: 0.85; }
    .btn:active:not(.btn-disabled) { opacity: 0.75; }
    .btn:focus:not(.btn-disabled) { outline: none; box-shadow: 0 0 0 2px var(--hover-color); }
</style>
<div class="">
    <div class="rectangle_bg_backend align-items-start" style="margin-top: 64px;">
        <div class="d-flex justify-content-between align-items-start" style="width: 100%; margin-top:32px;">
            <div class="title_page">Panel de Prompts</div>        
            <input type="hidden" name="token" id="token_" value="{{ csrf_token() }}">        
            <div class="col-1">
                <!-- <label for="tipoDePrompt" class="body1" style="color:#FCF8F8;">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 class="d-flex align-items-center mt-2" style="color:#FCF8F8;">                   
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="radioEstados" id="radioEstados2" value="1" checked>
                        <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>        
            <div id="cargandoBusqueda" class="spinner-border text-fidelitas d-none" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>  
            <button type="button" class="btn btn-backend-tertiary" id="botonNuevoPrompt"><i class="bi bi-plus"></i> Crear Prompt</button>
          
        </div>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
        <div class="content-target">
            <div class="content-box">
                <div class="mt-5">
                    <table id="myTable" class="table table-striped table-bordered " style="width: 100%;">
                        <thead>
                            <th>Nombre Prompt</th>
                            <th>
                                Tipo Prompt
                                <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>
                            </th>
                            <th>Modelo de ChatGPT</th>
                            <th>Modificado Por</th>
                            <th>Fecha Modificacion</th>
                            <th>
                                Estado
                                <select id="estadoFiltro" name="estadoFiltro" class="form-control" style="width: 100%;">
                                    <option value="todos">Todos</option>
                                    <option value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                </select>
                            </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>{{$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>
    </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')
<script type="text/javascript" src="{{ URL::asset('Libreria_CA/Js/panel_prompts.js') }}"></script>