@extends('layouts.app')

@section('title', 'Comptes de Paiement')

@push('styles')
<style>
    .payment-card {
        transition: all 0.3s ease;
    }
    .payment-card:hover {
        transform: translateY(-4px);
    }
    .connected {
        border-color: #10b981;
        background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    }
    .not-connected {
        border-color: #e5e7eb;
        background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 py-8">
    <div class="container mx-auto px-4 max-w-5xl">
        {{-- En-tête --}}
        <div class="mb-8">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Comptes de Paiement</h1>
                    <p class="text-gray-600">Connectez vos comptes pour recevoir vos paiements</p>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 flex items-center gap-3">
                <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 flex items-center gap-3">
                <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                </svg>
                {{ session('error') }}
            </div>
        @endif

        {{-- Info Box --}}
        <div class="mb-8 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                    <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="font-semibold text-blue-900 mb-1">Comment recevoir vos paiements ?</h3>
                    <p class="text-sm text-blue-700 leading-relaxed">
                        Pour recevoir les paiements de vos clients, vous devez connecter au moins un compte de paiement.
                        Nous prenons en charge <strong>Stripe</strong> (cartes bancaires), <strong>PayPal</strong> et les <strong>virements bancaires (IBAN)</strong>.
                        Une fois configuré, vos revenus seront automatiquement transférés sur votre compte.
                    </p>
                </div>
            </div>
        </div>

        {{-- Cartes des moyens de paiement --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            
            {{-- Stripe Connect --}}
            @if(feature_enabled('prestataire_stripe_connect'))
            <div class="payment-card rounded-2xl border-2 p-6 shadow-lg {{ $stripeConnected ?? false ? 'connected' : 'not-connected' }}">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center">
                        <i class="fab fa-cc-stripe text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900">Stripe Connect</h3>
                        <p class="text-sm text-gray-500">Cartes bancaires</p>
                    </div>
                </div>
                
                @if($stripeConnected ?? false)
                    <div class="mb-4 p-3 bg-green-100 rounded-lg">
                        <div class="flex items-center gap-2 text-green-700">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="font-medium">Connecté</span>
                        </div>
                        <p class="text-xs text-green-600 mt-1">ID: {{ Str::limit($stripeAccountId ?? '', 20) }}</p>
                    </div>
                    <a href="{{ route('prestataire.payments.stripe.dashboard') }}" 
                       class="block w-full py-3 bg-purple-600 hover:bg-purple-700 text-white text-center font-semibold rounded-xl transition">
                        Voir le dashboard Stripe
                    </a>
                @else
                    <p class="text-sm text-gray-600 mb-4">
                        Connectez votre compte Stripe pour accepter les paiements par carte bancaire directement.
                    </p>
                    <a href="{{ route('prestataire.payments.stripe.connect') }}" 
                       class="block w-full py-3 bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white text-center font-semibold rounded-xl transition shadow-lg hover:shadow-xl">
                        <i class="fab fa-stripe-s mr-2"></i>
                        Connecter Stripe
                    </a>
                @endif
            </div>
            @endif

            {{-- PayPal Business --}}
            @if(feature_enabled('prestataire_paypal_connect'))
            <div class="payment-card rounded-2xl border-2 p-6 shadow-lg {{ $paypalConnected ?? false ? 'connected' : 'not-connected' }}">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center">
                        <i class="fab fa-paypal text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900">PayPal Business</h3>
                        <p class="text-sm text-gray-500">Compte professionnel</p>
                    </div>
                </div>
                
                @if($paypalConnected ?? false)
                    <div class="mb-4 p-3 bg-green-100 rounded-lg">
                        <div class="flex items-center gap-2 text-green-700">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="font-medium">Connecté</span>
                        </div>
                        <p class="text-xs text-green-600 mt-1">{{ $paypalEmail ?? '' }}</p>
                    </div>
                    <button type="button" onclick="document.getElementById('paypal-form').classList.toggle('hidden')"
                            class="block w-full py-3 bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold rounded-xl transition">
                        Modifier l'email PayPal
                    </button>
                @else
                    <p class="text-sm text-gray-600 mb-4">
                        Ajoutez votre email PayPal Business pour recevoir des paiements via PayPal.
                    </p>
                    <button type="button" onclick="document.getElementById('paypal-form').classList.toggle('hidden')"
                            class="block w-full py-3 bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white text-center font-semibold rounded-xl transition shadow-lg hover:shadow-xl">
                        <i class="fab fa-paypal mr-2"></i>
                        Ajouter PayPal
                    </button>
                @endif
                
                {{-- Formulaire PayPal --}}
                <form id="paypal-form" action="{{ route('prestataire.payments.paypal.save') }}" method="POST" class="mt-4 hidden">
                    @csrf
                    <div class="mb-3">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email PayPal Business</label>
                        <input type="email" name="paypal_email" value="{{ $paypalEmail ?? '' }}" 
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="votre@email-paypal.com" required>
                    </div>
                    <button type="submit" class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
                        Enregistrer
                    </button>
                </form>
            </div>
            @endif

            {{-- IBAN / Virement bancaire --}}
            @if(feature_enabled('prestataire_iban_connect'))
            <div class="payment-card rounded-2xl border-2 p-6 shadow-lg {{ $ibanSaved ?? false ? 'connected' : 'not-connected' }}">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900">Virement Bancaire</h3>
                        <p class="text-sm text-gray-500">IBAN / RIB</p>
                    </div>
                </div>
                
                @if($ibanSaved ?? false)
                    <div class="mb-4 p-3 bg-green-100 rounded-lg">
                        <div class="flex items-center gap-2 text-green-700">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span class="font-medium">IBAN enregistré</span>
                        </div>
                        <p class="text-xs text-green-600 mt-1">{{ $ibanMasked ?? '****' }}</p>
                    </div>
                    <button type="button" onclick="document.getElementById('iban-form').classList.toggle('hidden')"
                            class="block w-full py-3 bg-green-600 hover:bg-green-700 text-white text-center font-semibold rounded-xl transition">
                        Modifier l'IBAN
                    </button>
                @else
                    <p class="text-sm text-gray-600 mb-4">
                        Ajoutez votre IBAN pour recevoir vos paiements par virement bancaire.
                    </p>
                    <button type="button" onclick="document.getElementById('iban-form').classList.toggle('hidden')"
                            class="block w-full py-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white text-center font-semibold rounded-xl transition shadow-lg hover:shadow-xl">
                        <svg class="w-5 h-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        Ajouter IBAN
                    </button>
                @endif
                
                {{-- Formulaire IBAN --}}
                <form id="iban-form" action="{{ route('prestataire.payments.iban.save') }}" method="POST" class="mt-4 hidden">
                    @csrf
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Titulaire du compte</label>
                            <input type="text" name="account_holder" value="{{ $accountHolder ?? '' }}" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                                   placeholder="Nom et Prénom" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
                            <input type="text" name="iban" value="{{ $iban ?? '' }}" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 font-mono"
                                   placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">BIC (optionnel)</label>
                            <input type="text" name="bic" value="{{ $bic ?? '' }}" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 font-mono"
                                   placeholder="BNPAFRPP">
                        </div>
                    </div>
                    <button type="submit" class="w-full mt-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition">
                        Enregistrer l'IBAN
                    </button>
                </form>
            </div>
            @endif
        </div>

        {{-- Si aucun moyen de paiement n'est activé --}}
        @if(!feature_enabled('prestataire_stripe_connect') && !feature_enabled('prestataire_paypal_connect') && !feature_enabled('prestataire_iban_connect'))
        <div class="text-center py-12 bg-white rounded-2xl shadow-sm border border-gray-200">
            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-10 h-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">Configuration en cours</h3>
            <p class="text-gray-500 max-w-md mx-auto">
                Les options de paiement ne sont pas encore disponibles. 
                Contactez l'administrateur pour plus d'informations.
            </p>
        </div>
        @endif

        {{-- Section d'aide --}}
        <div class="mt-8 bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
            <h3 class="font-bold text-lg text-gray-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Questions fréquentes
            </h3>
            
            <div class="space-y-4">
                <div class="p-4 bg-gray-50 rounded-xl">
                    <h4 class="font-semibold text-gray-800 mb-1">Quand vais-je recevoir mes paiements ?</h4>
                    <p class="text-sm text-gray-600">
                        Avec <strong>Stripe</strong>, les paiements sont transférés automatiquement sous 2-7 jours ouvrés.
                        Pour <strong>PayPal</strong>, les fonds sont disponibles immédiatement sur votre compte PayPal.
                        Les <strong>virements bancaires</strong> sont effectués chaque semaine ou au minimum de retrait atteint.
                    </p>
                </div>
                
                <div class="p-4 bg-gray-50 rounded-xl">
                    <h4 class="font-semibold text-gray-800 mb-1">Y a-t-il des frais ?</h4>
                    <p class="text-sm text-gray-600">
                        Stripe et PayPal appliquent leurs frais standards (environ 1.4% + 0.25€ pour Stripe, 2.9% + 0.35€ pour PayPal).
                        Les virements bancaires n'ont pas de frais supplémentaires.
                    </p>
                </div>
                
                <div class="p-4 bg-gray-50 rounded-xl">
                    <h4 class="font-semibold text-gray-800 mb-1">Mes informations sont-elles sécurisées ?</h4>
                    <p class="text-sm text-gray-600">
                        Oui ! Vos données bancaires sont cryptées et stockées de manière sécurisée. 
                        Nous ne stockons jamais vos identifiants de connexion Stripe ou PayPal.
                    </p>
                </div>
            </div>
        </div>

        {{-- Lien retour --}}
        <div class="mt-6 text-center">
            <a href="{{ route('prestataire.payments.index') }}" class="text-blue-600 hover:text-blue-800 font-medium">
                ← Retour à mes revenus
            </a>
        </div>
    </div>
</div>
@endsection