@extends('layouts.app', ['title' => term('nav_integrations','Integraciones')])

@section('content')
<div class="alert" style="background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.28);color:#a8c8f0;margin-bottom:16px">
    <i class="fa-solid fa-circle-info"></i>
    <span>Los <strong>bullets (•••)</strong> indican credenciales ya guardadas. Deja el campo como esta para conservarlas, o escribe encima para reemplazarlas.</span>
</div>

<div class="grid g3">
@foreach($services as $key => $service)
    @php $config = $existing->get($key); @endphp
    <div class="card">
        <div class="card-head">
            <div>
                <div class="card-title"><i class="{{ $service['icon'] }} text-gold"></i> {{ $service['name'] }}</div>
                <div class="sub">{{ $config && $config->is_enabled ? 'Conectado · '.optional($config->connected_at)->diffForHumans() : ($config ? 'Configurada · inactiva' : 'Sin conectar') }}</div>
            </div>
            <span class="badge {{ $config && $config->is_enabled ? 'green' : 'gray' }}">{{ $config && $config->is_enabled ? 'Activo' : 'Inactivo' }}</span>
        </div>
        <div class="card-body">
            <div class="row" style="margin-bottom:10px">
                @foreach($service['fields'] as $field)
                    <span class="pill {{ $config?->credential($field) ? 'green' : '' }}"><i class="fa-solid fa-{{ $config?->credential($field) ? 'circle-check' : 'key' }}"></i> {{ $field }}</span>
                @endforeach
            </div>
            <div class="actions">
                <button class="btn btn-sm btn-primary" type="button" data-modal-open="modal-int-{{ $key }}"><i class="fa-solid fa-gear"></i>Configurar</button>
                @if($config && $config->is_enabled)
                    <form method="post" action="{{ route('integrations.test', $key) }}" style="display:inline">@csrf<button class="btn btn-sm btn-info" type="submit"><i class="fa-solid fa-vial"></i>Probar</button></form>
                @endif
            </div>
        </div>
    </div>
@endforeach
</div>
@endsection

@section('modals')
@foreach($services as $key => $service)
    @php $config = $existing->get($key); @endphp
    <div class="modal-backdrop" id="modal-int-{{ $key }}">
        <div class="modal">
            <div class="modal-head"><h3><i class="{{ $service['icon'] }} text-gold"></i> {{ $service['name'] }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
            <form method="post" action="{{ route('integrations.update', $key) }}">
                @csrf
                <div class="modal-body">
                    <div class="sub" style="margin-bottom:12px">
                        Ingresa tus credenciales. Se almacenan <strong>cifradas</strong> con la APP_KEY.<br>
                        <span style="color:var(--gold)">Bullets (•••) = guardadas. Deja asi o reemplaza escribiendo encima.</span>
                    </div>
                    <div class="form-grid">
                        @foreach($service['fields'] as $field)
                            @php $hasCred = (bool) $config?->credential($field); @endphp
                            <label>
                                {{ str_replace('_', ' ', $field) }}
                                @if($hasCred)<span style="color:var(--success);font-size:10px;text-transform:none;letter-spacing:0">✓ guardado</span>@endif
                                <input
                                    name="{{ $field }}"
                                    type="text"
                                    value="{{ $hasCred ? str_repeat('•', 12) : '' }}"
                                    autocomplete="off"
                                    spellcheck="false"
                                    onfocus="if(this.value.match(/^[•●]+$/))this.value=''"
                                    placeholder="{{ $hasCred ? 'Deja para conservar · escribe para reemplazar' : 'Pega aqui tu '.$field }}"
                                >
                            </label>
                        @endforeach
                        <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px;padding:10px;background:rgba(201,168,76,.08);border-radius:10px">
                            <input type="checkbox" name="is_enabled" value="1" @checked($config?->is_enabled) style="width:auto">
                            <span><strong>Activar integracion</strong> — usar credenciales en producción</span>
                        </label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                    <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
                </div>
            </form>
        </div>
    </div>
@endforeach
@endsection