@extends('layouts.app')
@section('title', 'Mon profil')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="text-center mb-6">
        <span class="inline-flex w-14 h-14 rounded-2xl btn-gradient shadow-glow items-center justify-center mb-4">
            <x-icon name="user" class="w-6 h-6 text-white" />
        </span>
        <h1 class="font-display text-2xl font-extrabold text-gray-900">Mon profil</h1>
        <p class="text-sm text-gray-500 mt-1">
            @if($user->role === 'organizer')
                Gère tes informations et celles de ta structure
            @elseif($user->role === 'admin')
                Gère les informations de ton compte administrateur
            @else
                Gère tes informations personnelles
            @endif
        </p>
    </div>

    <div class="bg-white p-6 sm:p-7 rounded-3xl border border-gray-100 shadow-card">
        <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
            @csrf
            @method('PUT')

            <div>
                <span class="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-fuchsia-600 bg-fuchsia-50 px-2.5 py-1 rounded-full mb-4">
                    <x-icon name="{{ $user->role === 'organizer' ? 'building' : ($user->role === 'admin' ? 'shield-check' : 'ticket') }}" class="w-3.5 h-3.5" />
                    @if($user->role === 'organizer') Compte organisateur
                    @elseif($user->role === 'admin') Compte administrateur
                    @else Compte acheteur
                    @endif
                </span>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Nom complet</label>
                <input name="name" value="{{ old('name', $user->name) }}" required
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Email</label>
                <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Téléphone</label>
                <input name="phone" value="{{ old('phone', $user->phone) }}"
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
            </div>

            @if($user->role === 'organizer')
                <div class="pt-2 border-t border-dashed border-gray-200">
                    <p class="text-xs font-bold text-gray-400 uppercase tracking-wide mt-4 mb-3">Ma structure</p>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1.5">Nom de la structure</label>
                    <input name="company_name" value="{{ old('company_name', optional($user->organizer)->company_name) }}" required
                           class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1.5">Opérateur mobile money</label>
                        <select name="mobile_money_operator" required
                                class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                            @php $op = old('mobile_money_operator', optional($user->organizer)->mobile_money_operator); @endphp
                            <option value="wave" {{ $op === 'wave' ? 'selected' : '' }}>Wave</option>
                            <option value="orange_money" {{ $op === 'orange_money' ? 'selected' : '' }}>Orange Money</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1.5">Numéro</label>
                        <input name="mobile_money_number" value="{{ old('mobile_money_number', optional($user->organizer)->mobile_money_number) }}" required
                               class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                    </div>
                </div>

                @if($user->organizer)
                    <p class="flex items-center gap-1.5 text-xs font-bold px-2.5 py-1.5 rounded-full w-fit
                        {{ $user->organizer->status === 'approved' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600' }}">
                        <x-icon name="{{ $user->organizer->status === 'approved' ? 'check-circle' : 'clock' }}" class="w-3.5 h-3.5" />
                        {{ $user->organizer->status === 'approved' ? 'Compte validé' : 'En attente de validation' }}
                    </p>
                @endif
            @endif

            <div class="pt-2 border-t border-dashed border-gray-200">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wide mt-4 mb-3">Changer de mot de passe (facultatif)</p>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1.5">Mot de passe actuel</label>
                <input type="password" name="current_password" autocomplete="current-password"
                       class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                <p class="text-xs text-gray-400 mt-1">Requis uniquement si tu changes ton mot de passe.</p>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1.5">Nouveau mot de passe</label>
                    <input type="password" name="password" autocomplete="new-password"
                           class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1.5">Confirmer</label>
                    <input type="password" name="password_confirmation" autocomplete="new-password"
                           class="w-full border border-gray-200 rounded-xl px-3.5 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-300 focus:border-fuchsia-300">
                </div>
            </div>

            <button class="w-full btn-gradient text-white rounded-xl py-3.5 font-bold shadow-glow hover:brightness-105 hover:-translate-y-0.5 active:translate-y-0 transition-all flex items-center justify-center gap-2">
                <x-icon name="check-circle" class="w-4.5 h-4.5" />
                Enregistrer les modifications
            </button>
        </form>
    </div>
</div>
@endsection