@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">Editar Pasarela: {{ $pasarela->nombre }}</h2>
        <a href="{{ route('pasarelas.index') }}" class="btn-nueva-pasarela">
            <i class="material-icons">arrow_back</i>
            Volver al Listado
        </a>
    </div>

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

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

        <form action="{{ route('pasarelas.update', $pasarela->id) }}" method="POST">
            @csrf
            @method('PUT')

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

            <div class="form-group-edit">
                <label class="form-label-edit" for="nombre">Nombre Descriptivo</label>
                <input type="text" id="nombre" name="nombre" class="form-input-edit"
                       value="{{ $pasarela->nombre }}" required>
            </div>

            <div class="form-group-edit">
                <label class="form-label-edit">Tipo de Pasarela</label>
                <input type="text" class="form-input-edit" value="{{ ucfirst($pasarela->tipo) }}" disabled>
                <small style="color: #718096; display: block; margin-top: 5px;">
                    El tipo de pasarela no se puede modificar una vez creada
                </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">{{ $pasarela->descripcion }}</textarea>
            </div>

            <h3 class="form-section-title" style="margin-top: 30px;">Credenciales de Acceso</h3>

            @php
                $credenciales = $pasarela->getCredencialesArray();
            @endphp

            <div id="credencialesInputs">
                @if($pasarela->tipo === 'efipay')
                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_token">Token de Efipay <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_token" name="credenciales[token]" class="form-input-edit"
                                   value="{{ $credenciales['token'] ?? '' }}" style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_token', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_bearer">Bearer Token <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_bearer" name="credenciales[bearer]" class="form-input-edit"
                                   value="{{ $credenciales['bearer'] ?? '' }}" style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_bearer', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_office_id">Office ID <span style="color: #e53e3e;">*</span></label>
                        <input type="text" id="cred_office_id" name="credenciales[office_id]" class="form-input-edit"
                               value="{{ $credenciales['office_id'] ?? '' }}" required>
                    </div>

                @elseif($pasarela->tipo === 'openpay')
                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_id">Openpay ID <span style="color: #e53e3e;">*</span></label>
                        <input type="text" id="cred_id" name="credenciales[id]" class="form-input-edit"
                               value="{{ $credenciales['id'] ?? '' }}" required>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_sk">Secret Key (SK) <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_sk" name="credenciales[sk]" class="form-input-edit"
                                   value="{{ $credenciales['sk'] ?? '' }}" style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_sk', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                @elseif($pasarela->tipo === 'wompi')
                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_public_key">Public Key <span style="color: #e53e3e;">*</span></label>
                        <input type="text" id="cred_public_key" name="credenciales[public_key]" class="form-input-edit"
                               value="{{ $credenciales['public_key'] ?? '' }}" placeholder="pub_test_..." required>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_private_key">Private Key <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_private_key" name="credenciales[private_key]" class="form-input-edit"
                                   value="{{ $credenciales['private_key'] ?? '' }}" placeholder="prv_test_..." style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_private_key', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_events_secret">Events Secret <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_events_secret" name="credenciales[events_secret]" class="form-input-edit"
                                   value="{{ $credenciales['events_secret'] ?? '' }}" style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_events_secret', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                @elseif($pasarela->tipo === 'mercadopago')
                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_access_token">Access Token <span style="color: #e53e3e;">*</span></label>
                        <div style="position: relative;">
                            <input type="password" id="cred_access_token" name="credenciales[access_token]" class="form-input-edit"
                                   value="{{ $credenciales['access_token'] ?? '' }}" style="padding-right: 45px;" required>
                            <button type="button" class="toggle-visibility-btn" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #718096;"
                                    onclick="togglePassword('cred_access_token', this)">
                                <i class="material-icons">visibility</i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group-edit">
                        <label class="form-label-edit" for="cred_public_key">Public Key</label>
                        <input type="text" id="cred_public_key" name="credenciales[public_key]" class="form-input-edit"
                               value="{{ $credenciales['public_key'] ?? '' }}">
                    </div>
                @endif
            </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 Cambios
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function togglePassword(inputId, button) {
    const input = document.getElementById(inputId);
    if (input.type === 'password') {
        input.type = 'text';
        button.innerHTML = '<i class="material-icons">visibility_off</i>';
    } else {
        input.type = 'password';
        button.innerHTML = '<i class="material-icons">visibility</i>';
    }
}
</script>

@endsection