@extends('layouts.dashboardnew')

@section('content')

<div class="container py-5">
    <div class="row g-4">
        
        <!-- Tarjeta Google ReCaptcha -->
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-2 h-100" style="border-radius: 20px; min-height: 320px;">
                <div class="card-body">
                    
                    <!-- VISTA 1: INFO RECAPTCHA -->
                    <div id="info-recaptcha" class="d-flex flex-column align-items-center text-center">
                        <div class="mb-3">
                            <img src="{{ asset('recursos/api/recaptcha.png') }}" alt="ReCaptcha" style="height: 4rem;">
                        </div>
                        <h5 class="fw-bold mb-1">Google ReCaptcha</h5>
                        <p class="text-muted small mb-4">Protege tu sitio contra spam y abusos.</p>
                        
                        <h5 class="mb-3">Para obtener las credenciales puede usar la <a href="{{ env('URL_RECAPTCHA') }}" target="_blank">Guia de uso</a></h5>
                        
                        <button class="btn btn-outline-primary rounded-pill px-4" type="button" 
                                onclick="toggleView('recaptcha', true)">
                            Configurar API
                        </button>
                    </div>

                    <!-- VISTA 2: FORMULARIO RECAPTCHA -->
                    <div id="form-recaptcha" class="d-none animate__animated animate__fadeIn">
                        
                        <h5 class="fw-bold mb-3 text-center">Configuración ReCaptcha</h5>
                        
                        <form action="{{ route('procesador-recaptcha') }}" method="POST">
                            {{ csrf_field() }}
                            
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">Site Key *</label>
                                    <input type="text" class="form-control bg-light border-0 py-2" name="api_key" value="{{ env('NOCAPTCHA_SITEKEY') }}" required>
                                </div>
                            </div>
                                        
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">Secret *</label>
                                    <input type="text" class="form-control bg-light border-0 py-2" name="api_secret" value="{{ env('NOCAPTCHA_SECRET') }}" required>
                                </div>
                            </div>
                              
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-light w-100 rounded-pill py-2" onclick="toggleView('recaptcha', false)">
                                    Cancelar
                                </button>
                                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
                                    Aceptar
                                </button>
                            </div>
                            
                        </form>
                    </div>

                </div>
            </div>
        </div>

        <!-- Tarjeta OpenAI -->
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-2 h-100" style="border-radius: 20px; min-height: 320px;">
                <div class="card-body">
                    
                    <!-- VISTA 1: INFO OPENAI -->
                    <div id="info-openai" class="d-flex flex-column align-items-center text-center">
                        <div class="mb-3">
                             <img src="{{ asset('recursos/api/openai.png') }}" alt="Openai" style="height: 3rem; margin-top: 0.5rem; margin-bottom: 0.5rem;">
                        </div>
                        <h5 class="fw-bold mb-1">OpenAI (ChatGPT)</h5>
                        <p class="text-muted small mb-4">Integra inteligencia artificial en tu plataforma.</p>
                        
                        <h5 class="mb-3">Para obtener las credenciales puede usar la <a href="{{ env('URL_OPENAI') }}" target="_blank">Guia de uso</a></h5>
                        
                        <button class="btn btn-outline-primary rounded-pill px-4" type="button" 
                                onclick="toggleView('openai', true)">
                            Configurar API
                        </button>
                    </div>

                    <!-- VISTA 2: FORMULARIO OPENAI -->
                    <div id="form-openai" class="d-none animate__animated animate__fadeIn">
                        
                        <h5 class="fw-bold mb-3 text-center">Configuración OpenAI</h5>
                        
                        <form action="{{ route('procesador-openay') }}" method="POST">
                            {{ csrf_field() }}
                            
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">Api Key *</label>
                                    <input type="text" class="form-control" name="api_key" value="{{ env('OPENAI_API_KEY') }}" required>
                                </div>
                            </div>
                                        
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">ID de Organización *</label>
                                    <input type="text" class="form-control bg-light border-0 py-2" name="api_organization" value="{{ env('OPENAI_ORGANIZATION') }}" required>
                                </div>
                            </div>
                                        
                            <div class="mt-4 d-flex gap-2">
                                <button type="button" class="btn btn-light w-100 rounded-pill py-2" onclick="toggleView('openai', false)">
                                    Cancelar
                                </button>
                                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
                                    Aceptar
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        
        
        <!-- Tarjeta Onesignal -->
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-2 h-100" style="border-radius: 20px; min-height: 320px;">
                <div class="card-body">
                    
                    <!-- VISTA 1: INFO ONESIGNAL -->
                    <div id="info-onesignal" class="d-flex flex-column align-items-center text-center">
                        <div class="mb-3">
                            <img src="{{ asset('recursos/api/onesignal.png') }}" alt="ReCaptcha" style="height: 4rem;">
                        </div>
                        <h5 class="fw-bold mb-1">Onesignal</h5>
                        <p class="text-muted small mb-4">recibe notificaciones push en tiempo real.</p>
                        
                        <h5 class="mb-3">Para obtener las credenciales puede usar la <a href="{{ env('URL_ONESIGNAL') }}" target="_blank">Guia de uso</a></h5>
                        
                        <button class="btn btn-outline-primary rounded-pill px-4" type="button" 
                                onclick="toggleView('onesignal', true)">
                            Configurar API
                        </button>
                    </div>

                    <!-- VISTA 2: FORMULARIO ONESIGNAL -->
                    <div id="form-onesignal" class="d-none animate__animated animate__fadeIn">
                        
                        <h5 class="fw-bold mb-3 text-center">Configuración Onesignal</h5>
                        
                        <form action="{{ route('procesador-onesignal') }}" method="POST">
                            {{ csrf_field() }}
                            
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">APP ID *</label>
                                    <input type="text" class="form-control bg-light border-0 py-2" name="app_id" value="{{ env('ONESIGNAL_APP_ID') }}" required>
                                </div>
                            </div>
                                        
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label small fw-bold">Api key *</label>
                                    <input type="text" class="form-control bg-light border-0 py-2" name="api_key" value="{{ env('ONESIGNAL_REST_API_KEY') }}" required>
                                </div>
                            </div>
                              
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-light w-100 rounded-pill py-2" onclick="toggleView('onesignal', false)">
                                    Cancelar
                                </button>
                                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
                                    Aceptar
                                </button>
                            </div>
                            
                        </form>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>



@endsection

@push('script')
<script type="text/javascript">

function toggleView(service, showForm) {
    const $infoDiv = $(`#info-${service}`);
    const $formDiv = $(`#form-${service}`);

    if (showForm) {
        $infoDiv.fadeOut(200, function() {
            $formDiv.fadeIn(200).removeClass('d-none');
        }).addClass('d-none');
    } else {
        $formDiv.fadeOut(200, function() {
            $infoDiv.fadeIn(200).removeClass('d-none');
        }).addClass('d-none');
    }
}

</script>
@endpush