@extends('layouts.dashboard')

@section('title', __('Comisiones y pasarelas'))

@push('head')
    <style>
        .rt-ios-input {
            border-radius: 12px !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
            padding: 0.6rem 1rem !important;
            font-size: 0.95rem !important;
            background-color: #f9f9fb !important;
            transition: all 0.2s;
            height: auto !important;
            min-height: 46px;
        }
        .rt-ios-input:focus {
            background-color: #ffffff !important;
            border-color: var(--rt-cherry) !important;
            box-shadow: 0 0 0 4px rgba(185, 24, 48, 0.1) !important;
        }
        .rt-label {
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #8e8e93;
            margin-bottom: 0.5rem;
        }
        .rt-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.3rem 0.75rem;
            border-radius: 999px;
            text-transform: uppercase;
        }
        .rt-status-pill.ok { background: #ecfdf5; color: #065f46; }
        .rt-status-pill.warn { background: #fff5f5; color: #991b1b; }
        
        .rt-info-card {
            background: #f8fafc;
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.03);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-0">
        {{-- Header --}}
        <div class="mb-5 mt-2">
            <h1 class="h2 fw-bold text-dark mb-1">{{ __('Ajustes de Plataforma') }}</h1>
            <p class="text-muted small">{{ __('Define las comisiones por servicio y gestiona las integraciones de pago.') }}</p>
        </div>

        <div class="row">
            {{-- Configuración de Comisiones --}}
            <div class="col-xl-7 mb-4">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 24px;">
                    <div class="card-header bg-transparent border-0 px-4 pt-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-3 d-flex align-items-center justify-content-center mr-3" 
                                 style="width: 44px; height: 44px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); color: var(--rt-cherry);">
                                <i class="fas fa-percentage"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold text-dark mb-0">{{ __('Modelo de Comisiones') }}</h6>
                                <p class="text-muted x-small mb-0">{{ __('Configura lo que Regiticket cobra por cada entrada.') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <form method="post" action="{{ route('dashboard.settings.platform-fees.update') }}">
                            @csrf
                            @method('PUT')

                            <div class="row mb-4">
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <label class="rt-label" for="fixed_fee_usd">{{ __('Cargo Fijo (USD)') }}</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text rt-ios-input border-right-0" style="border-radius: 12px 0 0 12px !important; background: transparent;">$</span>
                                        </div>
                                        <input
                                            type="text"
                                            inputmode="decimal"
                                            name="fixed_fee_usd"
                                            id="fixed_fee_usd"
                                            class="form-control rt-ios-input border-left-0 @error('fixed_fee_usd') is-invalid @enderror"
                                            style="border-radius: 0 12px 12px 0 !important;"
                                            value="{{ old('fixed_fee_usd', number_format((float) $setting->fixed_fee_usd, 2, '.', '')) }}"
                                            required
                                        >
                                    </div>
                                    @error('fixed_fee_usd')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                                
                                <div class="col-md-6">
                                    <label class="rt-label" for="percentage">{{ __('Porcentaje Variable') }}</label>
                                    <div class="input-group">
                                        <input
                                            type="text"
                                            inputmode="decimal"
                                            name="percentage"
                                            id="percentage"
                                            class="form-control rt-ios-input border-right-0 @error('percentage') is-invalid @enderror"
                                            style="border-radius: 12px 0 0 12px !important;"
                                            value="{{ old('percentage', number_format((float) $setting->percentage_rate * 100, 2, '.', '')) }}"
                                            required
                                        >
                                        <div class="input-group-append">
                                            <span class="input-group-text rt-ios-input border-left-0" style="border-radius: 0 12px 12px 0 !important; background: transparent;">%</span>
                                        </div>
                                    </div>
                                    @error('percentage')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="form-group mb-4">
                                <label class="rt-label" for="checkout_payment_mode">{{ __('Visibilidad en el Checkout') }}</label>
                                <select
                                    name="checkout_payment_mode"
                                    id="checkout_payment_mode"
                                    class="custom-select rt-ios-input @error('checkout_payment_mode') is-invalid @enderror"
                                >
                                    @foreach (\App\Enums\CheckoutPaymentMode::cases() as $mode)
                                        <option value="{{ $mode->value }}" @selected(old('checkout_payment_mode', $setting->checkout_payment_mode->value) === $mode->value)>
                                            {{ $mode->label() }}
                                        </option>
                                    @endforeach
                                </select>
                                @php
                                    $modeDescKey = old('checkout_payment_mode', $setting->checkout_payment_mode->value);
                                    $modeForDesc = \App\Enums\CheckoutPaymentMode::tryFrom((string) $modeDescKey) ?? $setting->checkout_payment_mode;
                                @endphp
                                <div class="mt-2 text-muted px-2" style="font-size: 0.75rem; line-height: 1.4;">
                                    <i class="fas fa-info-circle mr-1 opacity-50"></i> {{ $modeForDesc->description() }}
                                </div>
                            </div>

                            <div class="p-3 mb-4 rt-info-card border-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="small fw-bold text-dark">
                                        {{ __('Ejemplo para entrada de $25.00') }}
                                    </div>
                                    <div class="text-right">
                                        <div class="small text-muted mb-1">{{ __('El usuario pagará:') }}</div>
                                        <div class="fw-bold text-primary h5 mb-0">${{ number_format((float) $feePreview['user_total'], 2) }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm" style="border-radius: 12px;">
                                    {{ __('Guardar Cambios') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Estado de Integración --}}
            <div class="col-xl-5 mb-4">
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 24px;">
                    <div class="card-header bg-transparent border-0 px-4 pt-4">
                        <h6 class="fw-bold text-dark mb-0">{{ __('Estado de Conexión') }}</h6>
                    </div>
                    <div class="card-body p-4 pt-2">
                        <p class="text-muted x-small mb-4">{{ __('Validación técnica de las llaves API configuradas en el servidor.') }}</p>
                        
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-center p-2 mb-2">
                                <div class="d-flex align-items-center">
                                    <i class="fab fa-stripe fa-lg mr-3 text-primary" style="width: 24px;"></i>
                                    <span class="small fw-bold text-dark">Stripe Connect</span>
                                </div>
                                @if ($stripeKeyPresent && $stripeSecretPresent)
                                    <span class="rt-status-pill ok"><i class="fas fa-check-circle mr-1"></i> {{ __('Activo') }}</span>
                                @else
                                    <span class="rt-status-pill warn"><i class="fas fa-exclamation-circle mr-1"></i> {{ __('Incompleto') }}</span>
                                @endif
                            </div>

                            <div class="d-flex justify-content-between align-items-center p-2 mb-2">
                                <div class="d-flex align-items-center">
                                    <i class="fab fa-paypal fa-lg mr-3 text-info" style="width: 24px;"></i>
                                    <span class="small fw-bold text-dark">PayPal SDK</span>
                                </div>
                                @if ($paypalClientPresent && $paypalSecretPresent)
                                    <span class="rt-status-pill ok"><i class="fas fa-check-circle mr-1"></i> {{ __('Activo') }}</span>
                                @else
                                    <span class="rt-status-pill warn"><i class="fas fa-exclamation-circle mr-1"></i> {{ __('Falta') }}</span>
                                @endif
                            </div>

                            <div class="d-flex justify-content-between align-items-center p-2 border-top pt-3 mt-1">
                                <span class="x-small text-muted text-uppercase fw-bold">{{ __('Modo PayPal') }}</span>
                                <span class="badge badge-dark rounded-pill px-3" style="font-size: 0.6rem;">{{ strtoupper($paypalMode ?: 'sandbox') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Guía Rápida --}}
                <div class="card border-0 shadow-sm" style="border-radius: 24px; background: #1c1c1e;">
                    <div class="card-body p-4">
                        <div class="rt-label text-white-50 mb-3">{{ __('¿Cómo funciona el Split?') }}</div>
                        <div class="d-flex mb-3">
                            <div class="flex-shrink-0 text-white opacity-50 mr-3">
                                <i class="fas fa-shield-alt fa-lg"></i>
                            </div>
                            <p class="text-white-50 x-small mb-0">
                                {{ __('En Stripe, el sistema retiene automáticamente la comisión y transfiere el resto al organizador.') }}
                            </p>
                        </div>
                        <div class="d-flex">
                            <div class="flex-shrink-0 text-white opacity-50 mr-3">
                                <i class="fas fa-sync-alt fa-lg"></i>
                            </div>
                            <p class="text-white-50 x-small mb-0">
                                {{ __('En PayPal, el ingreso es íntegro y el balance se ajusta posteriormente según tu configuración.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
