@extends('layouts.app')

@section('title', $utilisateur ? 'Édition : '.$utilisateur->uti_login : 'Nouveau joueur')

@section('content')
<div class="space-y-6 max-w-lg">

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.utilisateur') }}" class="text-slate-400 hover:text-teal-600 transition">
            <i data-lucide="arrow-left" class="w-5 h-5"></i>
        </a>
        <h1 class="text-2xl font-bold text-slate-800">
            {{ $utilisateur ? $utilisateur->uti_login : 'Nouveau joueur' }}
        </h1>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4">
        <form id="form-edit" method="POST" action="{{ route('admin.utilisateur.edit.command') }}"
              enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="command" value="sauvegarder">
            <input type="hidden" name="uti_id" value="{{ $utilisateur?->uti_id }}">

            @if($utilisateur)
            <div class="flex items-center gap-4 pb-2">
                <img src="{{ App\Models\User::avatarUrlForId($utilisateur->uti_id) }}" alt=""
                     id="avatar-preview" width="64" height="64"
                     class="rounded-full object-cover border border-gray-200 shrink-0">
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Avatar</label>
                    <input type="file" name="avatar" accept="image/*" id="avatar-input"
                           class="block text-sm text-slate-500 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 cursor-pointer">
                </div>
            </div>
            @endif

            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Login <span class="text-red-500">*</span></label>
                    <input type="text" name="uti_login" value="{{ $utilisateur?->uti_login }}" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Mot de passe</label>
                    <div class="flex gap-1">
                        <input type="text" name="uti_password" id="uti_password" value="{{ $utilisateur?->uti_password }}"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                        <button type="button" onclick="genererMotDePasse()"
                            class="shrink-0 px-2 py-1 text-xs bg-slate-100 hover:bg-slate-200 border border-gray-300 rounded-lg text-slate-600 transition" title="Générer">
                            <i data-lucide="shuffle" class="w-4 h-4"></i>
                        </button>
                        <button type="button" onclick="copierMotDePasse()"
                            class="shrink-0 px-2 py-1 text-xs bg-slate-100 hover:bg-slate-200 border border-gray-300 rounded-lg text-slate-600 transition" title="Copier">
                            <i data-lucide="copy" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Nom <span class="text-red-500">*</span></label>
                    <input type="text" name="uti_nom" value="{{ $utilisateur?->uti_nom }}" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Prénom</label>
                    <input type="text" name="uti_prenom" value="{{ $utilisateur?->uti_prenom }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1 col-span-2">
                    <label class="text-sm font-medium text-slate-700">Pseudo</label>
                    <input type="text" name="uti_pseudo" value="{{ $utilisateur?->uti_pseudo }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Mail principal</label>
                    <input type="email" name="uti_mail" value="{{ $utilisateur?->uti_mail }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Mail secondaire</label>
                    <input type="email" name="uti_mail2" value="{{ old('uti_mail2', $utilisateur->uti_mail2 ?? '') }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Bonus manuel</label>
                    <input type="number" name="uti_bonus" value="{{ $utilisateur?->uti_bonus ?? 0 }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Malus manuel</label>
                    <input type="number" name="uti_malus" value="{{ $utilisateur?->uti_malus ?? 0 }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
            </div>

            <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer pt-1">
                <input type="checkbox" name="uti_admin" @checked($utilisateur?->uti_admin)
                    class="rounded border-gray-300 text-teal-600">
                Administrateur
            </label>

        </form>

        {{-- Boutons hors du form principal pour éviter l'imbrication --}}
        <div class="flex items-center gap-3 pt-2">
            <button type="submit" form="form-edit"
                class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition cursor-pointer">
                <i data-lucide="save" class="w-4 h-4"></i>
                Sauvegarder
            </button>
            <a href="{{ route('admin.utilisateur') }}"
                class="inline-flex items-center gap-2 border border-gray-300 text-slate-600 hover:bg-gray-50 text-sm font-medium px-4 py-2 rounded-lg transition">
                Retour
            </a>

            @if($utilisateur)
            <form method="POST" action="{{ route('admin.utilisateur.edit.command') }}" class="ml-auto">
                @csrf
                <input type="hidden" name="command" value="supprimer">
                <input type="hidden" name="uti_id" value="{{ $utilisateur->uti_id }}">
                <button type="submit" onclick="return confirm('Supprimer ce joueur ?')"
                    class="inline-flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-medium px-4 py-2 rounded-lg transition border border-red-200 cursor-pointer">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                    Supprimer
                </button>
            </form>
            @endif
        </div>
    </div>
</div>
@push('scripts')
<script>
const avatarInput = document.getElementById('avatar-input');
if (avatarInput) {
    avatarInput.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = e => document.getElementById('avatar-preview').src = e.target.result;
        reader.readAsDataURL(file);
    });
}

function genererMotDePasse() {
    const chars = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789';
    let pwd = '';
    for (let i = 0; i < 10; i++) {
        pwd += chars[Math.floor(Math.random() * chars.length)];
    }
    document.getElementById('uti_password').value = pwd;
}

function copierMotDePasse() {
    const input = document.getElementById('uti_password');
    if (!input.value) return;
    navigator.clipboard.writeText(input.value).then(() => {
        const btn = event.currentTarget;
        btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>';
        lucide.createIcons();
        setTimeout(() => {
            btn.innerHTML = '<i data-lucide="copy" class="w-4 h-4"></i>';
            lucide.createIcons();
        }, 1500);
    });
}
</script>
@endpush
@endsection