@extends('layouts.super-admin')
@section('title','Providers')
@section('eyebrow','Configuración IA')
@section('page-title','Providers')
@section('page-description','Conexiones globales hacia proveedores de modelos de IA.')
@section('page-actions')<button class="btn btn-primary" id="newProviderButton"><i class="bi bi-plus-lg me-2"></i>Nuevo provider</button>@endsection
@section('content')
<div id="providersAdmin">
    <div id="providersAlert" class="alert d-none" role="alert"></div>
    <section class="content-card">
        <div class="table-toolbar admin-filters">
            <div class="search-box"><i class="bi bi-search"></i><input id="providerSearch" type="search" placeholder="Buscar provider…"></div>
            <div class="d-flex gap-2 flex-wrap">
                <select class="form-select filter-select" id="providerStatusFilter"><option value="">Todos los estados</option><option value="1">Habilitados</option><option value="0">Deshabilitados</option></select>
                <button class="btn btn-light" id="refreshProviders" title="Recargar"><i class="bi bi-arrow-clockwise"></i></button>
            </div>
        </div>
        <div class="table-responsive"><table class="table agents-table align-middle mb-0"><thead><tr><th>Nombre</th><th>Tipo</th><th>URL base</th><th>API</th><th>Estado</th><th>Actualización</th><th></th></tr></thead><tbody id="providersBody"><tr><td colspan="7" class="loading-cell"><span class="spinner-border spinner-border-sm me-2"></span>Cargando providers…</td></tr></tbody></table></div>
        <div class="table-footer"><span id="providersSummary">—</span></div>
    </section>
</div>
<div class="modal fade" id="providerModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
    <div class="modal-header border-0"><div><h2 class="modal-title fs-5" id="providerModalTitle">Nuevo provider</h2><p class="modal-subtitle">Configura una referencia segura hacia un proveedor de IA.</p></div><button class="btn-close" data-bs-dismiss="modal"></button></div>
    <form id="providerForm"><div class="modal-body pt-0"><div class="alert alert-danger d-none" data-form-error></div><div class="row g-3">
        <div class="col-md-7"><label class="form-label">Nombre</label><input class="form-control" name="name" maxlength="100" required></div>
        <div class="col-md-5"><label class="form-label">Tipo</label><select class="form-select" name="provider_type" required><option value="">Seleccionar…</option>@foreach(['openai','vllm','ollama','azure_openai','anthropic','openai_compatible'] as $type)<option value="{{ $type }}">{{ $type }}</option>@endforeach</select></div>
        <div class="col-12"><label class="form-label">URL base</label><input class="form-control" type="url" name="base_url" maxlength="500" placeholder="https://api.example.com/v1" required><div class="form-text">Ingresá la URL base sin <span class="font-monospace">/chat/completions</span>.</div></div>
        <div class="col-12"><label class="form-label">Referencia de credenciales</label><input class="form-control" name="credentials_reference" maxlength="255" placeholder="OPENAI_API_KEY"><div class="form-text">Referencia al secreto; nunca ingreses la API key real.</div></div>
        <div class="col-md-6"><label class="form-label">Protocolo API</label><select class="form-select" name="api_protocol" id="providerApiProtocol" required><option value="chat_completions">OpenAI Chat Completions</option></select><div class="form-text">Agrega automáticamente <span class="font-monospace">/chat/completions</span> a la URL base.</div></div>
        <div class="col-md-6"><label class="form-label">Versión API</label><input class="form-control" name="api_version" maxlength="50" placeholder="Opcional"></div>
        <div class="col-12"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="enabled" id="providerEnabled" checked><label class="form-check-label" for="providerEnabled">Provider habilitado</label></div></div>
    </div></div><div class="modal-footer border-0"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Cancelar</button><button class="btn btn-primary" type="submit"><span class="spinner-border spinner-border-sm me-2 d-none"></span><span data-submit-label>Guardar provider</span></button></div></form>
</div></div></div>
@endsection