@extends('layouts.panel')
@section('content')
<link rel="stylesheet" href="{{ url('css/pasarelas.css') }}">
<link rel="stylesheet" href="{{ url('css/pasarelasEdit.css') }}">

<div class="pasarelas-container">
    <!-- Header -->
    <div class="pasarelas-header">
        <h2 class="pasarelas-titulo">Registrar Nueva Pasarela</h2>
        <a href="{{ route('pasarelas.index') }}" class="btn-nueva-pasarela">
            <i class="material-icons">arrow_back</i>
            Volver al Listado
        </a>
    </div>

    <!-- Formulario -->
    <div class="form-section">
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul style="margin: 0; padding-left: 20px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('pasarelas.store') }}" method="POST" id="formPasarela">
            @csrf

            <h3 class="form-section-title">Información General</h3>

            <div class="form-group-edit">
                <label class="form-label-edit" for="nombre">Nombre Descriptivo <span style="color: #e53e3e;">*</span></label>
                <input type="text" id="nombre" name="nombre" class="form-input-edit"
                       value="{{ old('nombre') }}" placeholder="Ej: Openpay Cuenta Principal" required>
                <small style="color: #718096; display: block; margin-top: 5px;">
                    Nombre que se mostrará en el listado (puede tener varias pasarelas del mismo tipo)
                </small>
            </div>

            <div class="form-group-edit">
                <label class="form-label-edit" for="tipo">Tipo de Pasarela <span style="color: #e53e3e;">*</span></label>
                <select id="tipo" name="tipo" class="form-input-edit" required onchange="mostrarCamposCredenciales(this.value)">
                    <option value="">-- Selecciona un tipo --</option>
                    <option value="efipay" {{ old('tipo') == 'efipay' ? 'selected' : '' }}>Efipay (PSE)</option>
                    <option value="openpay" {{ old('tipo') == 'openpay' ? 'selected' : '' }}>Openpay</option>
                    <option value="wompi" {{ old('tipo') == 'wompi' ? 'selected' : '' }}>Wompi</option>
                    <option value="mercadopago" {{ old('tipo') == 'mercadopago' ? 'selected' : '' }}>MercadoPago</option>
                </select>
                <small style="color: #718096; display: block; margin-top: 5px;">
                    Selecciona el proveedor de pago que utilizarás
                </small>
            </div>

            <div class="form-group-edit">
                <label class="form-label-edit" for="descripcion">Descripción (Opcional)</label>
                <textarea id="descripcion" name="descripcion" class="form-textarea-edit" rows="2"
                          placeholder="Descripción breve...">{{ old('descripcion') }}</textarea>
            </div>

            <!-- Credenciales dinámicas según el tipo -->
            <div id="credencialesContainer" style="display: none; margin-top: 30px;">
                <h3 class="form-section-title">Credenciales de Acceso</h3>
                <div id="credencialesInputs"></div>
            </div>

            <div class="form-actions">
                <a href="{{ route('pasarelas.index') }}" class="btn-form btn-cancelar">
                    <i class="material-icons">close</i>
                    Cancelar
                </a>
                <button type="submit" class="btn-form btn-guardar">
                    <i class="material-icons">save</i>
                    Guardar Pasarela
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Configuración de campos según la pasarela
const camposPorPasarela = {
    'efipay': [
        { name: 'token', label: 'Token de Efipay', type: 'password', placeholder: 'Tu token de Efipay', required: true },
        { name: 'bearer', label: 'Bearer Token', type: 'password', placeholder: 'Tu bearer token', required: true },
        { name: 'office_id', label: 'Office ID', type: 'text', placeholder: 'Tu office ID', required: true }
    ],
    'openpay': [
        { name: 'id', label: 'Openpay ID', type: 'text', placeholder: 'Tu Openpay ID', required: true },
        { name: 'sk', label: 'Secret Key (SK)', type: 'password', placeholder: 'Tu secret key', required: true }
    ],
    'wompi': [
        { name: 'public_key', label: 'Public Key', type: 'text', placeholder: 'pub_test_...', required: true },
        { name: 'private_key', label: 'Private Key', type: 'password', placeholder: 'prv_test_...', required: true },
        { name: 'events_secret', label: 'Events Secret', type: 'password', placeholder: 'Tu events secret', required: true }
    ],
    'mercadopago': [
        { name: 'access_token', label: 'Access Token', type: 'password', placeholder: 'Tu access token', required: true },
        { name: 'public_key', label: 'Public Key', type: 'text', placeholder: 'Tu public key', required: false }
    ]
};

function mostrarCamposCredenciales(tipo) {
    const container = document.getElementById('credencialesContainer');
    const inputsContainer = document.getElementById('credencialesInputs');

    if (!tipo) {
        container.style.display = 'none';
        inputsContainer.innerHTML = '';
        return;
    }

    const campos = camposPorPasarela[tipo] || [];

    if (campos.length === 0) {
        container.style.display = 'none';
        inputsContainer.innerHTML = '';
        return;
    }

    container.style.display = 'block';
    inputsContainer.innerHTML = '';

    campos.forEach(campo => {
        const div = document.createElement('div');
        div.className = 'form-group-edit';
        div.style.marginBottom = '20px';

        const label = document.createElement('label');
        label.className = 'form-label-edit';
        label.textContent = campo.label;
        if (campo.required) {
            const span = document.createElement('span');
            span.style.color = '#e53e3e';
            span.textContent = ' *';
            label.appendChild(span);
        }

        const inputWrapper = document.createElement('div');
        inputWrapper.className = 'input-with-toggle';
        inputWrapper.style.position = 'relative';

        const input = document.createElement('input');
        input.type = campo.type;
        input.name = `credenciales[${campo.name}]`;
        input.className = 'form-input-edit';
        input.placeholder = campo.placeholder;
        input.required = campo.required;
        if (campo.type === 'password') {
            input.style.paddingRight = '45px';
        }

        if (campo.type === 'password') {
            const toggleBtn = document.createElement('button');
            toggleBtn.type = 'button';
            toggleBtn.className = 'toggle-visibility-btn';
            toggleBtn.innerHTML = '<i class="material-icons">visibility</i>';
            toggleBtn.style.position = 'absolute';
            toggleBtn.style.right = '10px';
            toggleBtn.style.top = '50%';
            toggleBtn.style.transform = 'translateY(-50%)';
            toggleBtn.style.border = 'none';
            toggleBtn.style.background = 'transparent';
            toggleBtn.style.cursor = 'pointer';
            toggleBtn.style.color = '#718096';

            toggleBtn.onclick = function() {
                if (input.type === 'password') {
                    input.type = 'text';
                    toggleBtn.innerHTML = '<i class="material-icons">visibility_off</i>';
                } else {
                    input.type = 'password';
                    toggleBtn.innerHTML = '<i class="material-icons">visibility</i>';
                }
            };

            inputWrapper.appendChild(input);
            inputWrapper.appendChild(toggleBtn);
        } else {
            inputWrapper.appendChild(input);
        }

        div.appendChild(label);
        div.appendChild(inputWrapper);
        inputsContainer.appendChild(div);
    });
}

// Si hay un valor antiguo de tipo (después de un error de validación)
@if(old('tipo'))
    mostrarCamposCredenciales('{{ old('tipo') }}');
@endif
</script>

@endsection