@extends('layouts.admin')

@section('title', 'Nouveau payout PayPal - Admin')

@section('content')
    <header class="flex justify-between items-end mb-16">
        <div>
            <a href="{{ route('admin.payouts.index') }}" class="inline-flex items-center gap-2 text-slate-500 hover:text-white mb-10 transition-colors text-sm font-bold">← Retour</a>
            <h1 class="text-5xl font-black tracking-tight mb-2">Nouveau <span class="text-indigo-500">payout</span></h1>
            <p class="text-slate-400 text-lg">Envoyer un paiement à un enseignant via PayPal.</p>
        </div>

        <div class="flex items-center gap-6 bg-slate-800/50 p-4 border border-slate-700/50 rounded-3xl backdrop-blur-xl">
            <div class="flex items-center gap-3">
                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                <span class="text-xs font-bold uppercase tracking-widest text-slate-300">Sandbox</span>
            </div>
        </div>
    </header>

    @if($errors->any())
        <div class="mb-8 p-5 bg-red-500/10 border border-red-500/30 rounded-2xl text-red-300 font-medium">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.payouts.store') }}" class="bg-slate-800/50 border border-slate-700/50 p-10 rounded-[3rem] backdrop-blur-xl space-y-8">
        @csrf

        <h2 class="text-2xl font-black mb-2 flex items-center gap-4">
            <span class="w-3 h-10 bg-indigo-500 rounded-full"></span>
            Détails
        </h2>

        <div>
            <label class="block text-xs font-black uppercase tracking-widest text-slate-500 mb-2">Enseignant</label>
            <select name="teacher_id" class="w-full px-5 py-4 bg-slate-900 border border-slate-700 rounded-2xl text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                @foreach($teachers as $t)
                    <option value="{{ $t->id }}" {{ (int)old('teacher_id') === (int)$t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->email }})</option>
                @endforeach
            </select>
            <p class="text-xs text-slate-500 mt-2">Assure-toi que le compte payout PayPal du prof est configuré.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div>
                <label class="block text-xs font-black uppercase tracking-widest text-slate-500 mb-2">Montant</label>
                <input name="amount" required value="{{ old('amount') }}" step="0.01" type="number" min="0.01"
                       class="w-full px-5 py-4 bg-slate-900 border border-slate-700 rounded-2xl text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>
            <div>
                <label class="block text-xs font-black uppercase tracking-widest text-slate-500 mb-2">Devise</label>
                <input name="currency" value="{{ old('currency', 'USD') }}"
                       class="w-full px-5 py-4 bg-slate-900 border border-slate-700 rounded-2xl text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>
        </div>

        <div>
            <label class="block text-xs font-black uppercase tracking-widest text-slate-500 mb-2">Note (optionnel)</label>
            <input name="note" value="{{ old('note') }}"
                   class="w-full px-5 py-4 bg-slate-900 border border-slate-700 rounded-2xl text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>

        <div class="pt-2">
            <button type="submit" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-black rounded-2xl transition-all shadow-xl shadow-indigo-600/20">
                Envoyer payout
            </button>
        </div>
    </form>
@endsection