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

    <div class="pasarelas-container">
        <!-- Header -->
        <div class="pasarelas-header">
            <h2 class="pasarelas-titulo">Gestión de Pasarelas de Pago</h2>
            <a href="{{ route('pasarelas.create') }}" class="btn-nueva-pasarela">
                <i class="material-icons">add</i>
                Nueva Pasarela
            </a>
        </div>

        <!-- Contenido -->
        <div class="pasarelas-content">
            <!-- Alertas -->
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

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

            <!-- Grid de Cards de Pasarelas -->
            @if ($pasarelas->count() > 0)
                <div class="pasarelas-grid">
                    @foreach ($pasarelas as $pasarela)
                        <div class="pasarela-card {{ $pasarela->activa ? 'activa' : '' }}">
                            <!-- Header de la Card -->
                            <div class="pasarela-card-header">
                                <!-- Logo de la Pasarela -->
                                @php
                                    $logoData = $pasarela->getLogoData();
                                @endphp
                                <div class="pasarela-logo-container" style="background: {{ $logoData['bg'] }};">
                                    <div class="pasarela-logo-content">
                                        <i class="material-icons pasarela-logo-icon">{{ $logoData['icon'] }}</i>
                                        <span class="pasarela-logo-text">{{ $logoData['name'] }}</span>
                                    </div>
                                </div>

                                <div
                                    style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; margin-top: 16px;">
                                    <h3 class="pasarela-nombre" style="margin: 0; flex: 1;">
                                        {{ $pasarela->nombre }}
                                    </h3>
                                    <span class="pasarela-badge {{ $pasarela->activa ? 'activa' : 'inactiva' }}">
                                        {{ $pasarela->activa ? 'Activa' : 'Inactiva' }}
                                    </span>
                                </div>

                                <div style="display: flex; justify-content: space-between; align-items: center; gap: 15px;">
                                    <div style="flex: 1;">
                                        <div style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">
                                            <i class="material-icons"
                                                style="font-size: 14px; vertical-align: middle;">category</i>
                                            Tipo: <strong>{{ ucfirst($pasarela->tipo) }}</strong>
                                        </div>
                                        <div
                                            style="font-size: 12px; color: {{ $pasarela->tieneCredenciales() ? '#48bb78' : '#f56565' }};">
                                            <i class="material-icons" style="font-size: 14px; vertical-align: middle;">
                                                {{ $pasarela->tieneCredenciales() ? 'check_circle' : 'cancel' }}
                                            </i>
                                            {{ $pasarela->tieneCredenciales() ? 'Configuradas' : 'Sin configurar' }}
                                        </div>
                                    </div>

                                    <!-- Toggle Switch -->
                                    <div class="toggle-switch-container">
                                        <form
                                            action="{{ $pasarela->activa ? route('pasarelas.desactivar', $pasarela->id) : route('pasarelas.activar', $pasarela->id) }}"
                                            method="POST" id="form-toggle-{{ $pasarela->id }}" style="display: inline;">
                                            @csrf
                                            <label class="toggle-switch"
                                                title="{{ !$pasarela->tieneCredenciales() ? 'Primero configura las credenciales' : ($pasarela->activa ? 'Desactivar' : 'Activar') }}">
                                                <input type="checkbox" {{ $pasarela->activa ? 'checked' : '' }}
                                                    {{ !$pasarela->tieneCredenciales() ? 'disabled' : '' }}
                                                    onchange="document.getElementById('form-toggle-{{ $pasarela->id }}').submit()">
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Body de la Card -->
                            <div class="pasarela-card-body">
                                @if ($pasarela->descripcion)
                                    <p class="pasarela-descripcion">
                                        <i class="material-icons"
                                            style="font-size: 14px; vertical-align: middle; color: #6b7280;">info</i>
                                        {{ $pasarela->descripcion }}
                                    </p>
                                @endif

                                <!-- Acciones -->
                                <div class="pasarela-actions">
                                    <a href="{{ route('pasarelas.edit', $pasarela->id) }}" class="btn-pasarela btn-editar">
                                        <i
                                            class="material-icons">{{ $pasarela->tieneCredenciales() ? 'edit' : 'settings' }}</i>
                                        {{ $pasarela->tieneCredenciales() ? 'Editar' : 'Configurar' }}
                                    </a>

                                    @if ($pasarela->activa)
                                        <button class="btn-pasarela btn-eliminar" disabled
                                            title="No puedes eliminar una pasarela activa"
                                            style="opacity: 0.5; cursor: not-allowed;">
                                            <i class="material-icons">delete</i>
                                            Eliminar
                                        </button>
                                    @else
                                        <a href="#" class="btn-pasarela btn-eliminar"
                                            onclick="if(confirm('¿Estás seguro de eliminar esta pasarela?')){document.getElementById('delete-form-{{ $pasarela->id }}').submit(); return false;}">
                                            <i class="material-icons">delete</i>
                                            Eliminar
                                        </a>
                                        <form id="delete-form-{{ $pasarela->id }}"
                                            action="{{ route('pasarelas.destroy', $pasarela->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="pasarelas-empty">
                    <i class="material-icons">credit_card_off</i>
                    <h3 class="pasarelas-empty-title">No hay pasarelas configuradas</h3>
                    <p class="pasarelas-empty-text">Crea tu primera pasarela de pago para comenzar</p>
                    <a href="{{ route('pasarelas.create') }}" class="btn-nueva-pasarela">
                        <i class="material-icons">add</i>
                        Crear Primera Pasarela
                    </a>
                </div>
            @endif
        </div>
    </div>

@endsection