@extends('layouts.dashboard')

@section('title', 'Demander un Paiement - Professeur Sciences Afrique')
@section('page-title', 'Demander un Paiement')
@section('page-subtitle', 'Retirez vos gains disponibles.')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Balance Card -->
    <div class="bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-2xl p-6 mb-6">
        <div class="text-center">
            <p class="text-sm font-medium text-green-600 mb-1">Solde Disponible</p>
            <p class="text-5xl font-bold text-green-900">${{ number_format($stats['available_balance'], 2) }}</p>
            @if($stats['pending_balance'] > 0)
                <p class="text-sm text-green-600 mt-2">
                    <i class="fa-solid fa-clock mr-1"></i>
                    ${{ number_format($stats['pending_balance'], 2) }} en attente de disponibilité
                </p>
            @endif
        </div>
    </div>

    <!-- Request Form -->
    <div class="bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-sm">
        <div class="p-6">
            @if($stats['available_balance'] < config('payout.minimum_payout', 10))
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fa-solid fa-triangle-exclamation text-amber-500 mt-0.5"></i>
                        <div>
                            <p class="font-medium text-amber-800">Solde insuffisant</p>
                            <p class="text-sm text-amber-700 mt-1">Le montant minimum de retrait est de ${{ number_format(config('payout.minimum_payout', 10), 2) }}. Continuez à créer du contenu pour accumuler des gains.</p>
                        </div>
                    </div>
                </div>
            @endif

            @if($accounts->count() === 0)
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fa-solid fa-info-circle text-blue-500 mt-0.5"></i>
                        <div>
                            <p class="font-medium text-blue-800">Aucun compte de paiement configuré</p>
                            <p class="text-sm text-blue-700 mt-1">
                                Vous devez d'abord ajouter un compte de paiement (PayPal, Mobile Money ou Banque).
                                <a href="{{ route('teacher.payouts.accounts') }}" class="underline font-medium">Configurer maintenant</a>
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            <form action="{{ route('teacher.payouts.store') }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Montant à retirer (USD)</label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-lg font-bold">$</span>
                            <input type="number" name="amount" step="0.01" min="0.01" max="{{ $stats['available_balance'] }}"
                                   value="{{ old('amount') }}"
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl text-lg font-semibold focus:ring-2 focus:ring-green-500 focus:border-transparent {{ $errors->has('amount') ? 'border-red-500' : '' }}"
                                   placeholder="0.00"
                                   {{ $stats['available_balance'] <= 0 ? 'disabled' : '' }}>
                        </div>
                        @if($errors->has('amount'))
                            <p class="mt-1 text-sm text-red-600">{{ $errors->first('amount') }}</p>
                        @endif
                        <div class="flex justify-between mt-2 text-xs text-gray-500">
                            <span>Min: ${{ number_format(config('payout.minimum_payout', 10), 2) }}</span>
                            <button type="button" onclick="document.querySelector('[name=amount]').value = {{ $stats['available_balance'] }}" 
                                    class="text-royal-blue hover:underline">
                                Retirer tout le solde
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Méthode de Paiement</label>
                        <div class="space-y-3">
                            @foreach($accounts as $account)
                                <label class="flex items-center p-4 border-2 rounded-xl cursor-pointer transition {{ old('payout_account_id') == $account->id ? 'border-green-500 bg-green-50' : 'border-gray-200 hover:border-gray-300' }}">
                                    <input type="radio" name="payout_account_id" value="{{ $account->id }}" 
                                           class="w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500"
                                           {{ old('payout_account_id') == $account->id ? 'checked' : '' }}>
                                    <div class="ml-3 flex items-center space-x-3">
                                        <div class="p-2 rounded-lg {{ $account->isPayPal() ? 'bg-blue-100' : ($account->isMobileMoney() ? 'bg-green-100' : 'bg-purple-100') }}">
                                            <i class="fa-solid {{ $account->isPayPal() ? 'fa-brands fa-paypal text-blue-600' : ($account->isMobileMoney() ? 'fa-solid fa-mobile-screen text-green-600' : 'fa-solid fa-building-columns text-purple-600') }}"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-900">{{ $account->label }}</p>
                                            <p class="text-xs text-gray-500">{{ \App\Models\TeacherPayoutAccount::getProviders()[$account->provider] ?? $account->provider }}</p>
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                        @if($errors->has('payout_account_id'))
                            <p class="mt-1 text-sm text-red-600">{{ $errors->first('payout_account_id') }}</p>
                        @endif
                    </div>

                    <div class="bg-gray-50 rounded-xl p-4">
                        <h4 class="font-semibold text-gray-700 mb-2">Récapitulatif</h4>
                        <div class="space-y-1 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Commission plateforme (20%)</span>
                                <span class="text-gray-900">Déjà déduite</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Devise</span>
                                <span class="text-gray-900">USD</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Délai de traitement</span>
                                <span class="text-gray-900">1-3 jours ouvrables</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4">
                        <button type="submit" 
                                class="flex-1 px-6 py-3 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
                                {{ $stats['available_balance'] <= 0 || $accounts->count() === 0 ? 'disabled' : '' }}>
                            <i class="fa-solid fa-paper-plane mr-2"></i>
                            Soumettre la Demande
                        </button>
                        <a href="{{ route('teacher.payouts.index') }}" class="px-6 py-3 bg-gray-100 text-gray-600 font-semibold rounded-xl hover:bg-gray-200 transition">
                            Annuler
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection