@extends('layouts.app')

@section('title', 'Mon compte')

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

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="user-cog" class="w-6 h-6 text-teal-600"></i>
        Mon compte
    </h1>

    <form method="POST" action="{{ route('compte.command') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        <input type="hidden" name="command" value="sauvegarder">

        {{-- Avatar --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-4">Avatar</h2>
            <div class="flex items-center gap-5">
                <img id="avatar-preview"
                     src="{{ auth()->user()->avatarUrl() }}"
                     alt="Avatar"
                     class="w-16 h-16 rounded-full object-cover border-2 border-gray-200 shrink-0">
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Changer l'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.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 cursor-pointer">
                    <p class="text-xs text-gray-400">JPG, PNG, GIF — max 2 Mo</p>
                </div>
            </div>
        </div>

        {{-- Identifiants --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4">
            <h2 class="text-sm font-semibold text-teal-600 uppercase tracking-wide">Identifiants</h2>

            <div class="flex items-center gap-3">
                <span class="text-sm font-medium text-slate-500 w-32">Login</span>
                <span class="text-sm text-slate-800 font-semibold">{{ $user->uti_login }}</span>
            </div>

            <div class="space-y-1">
                <label for="uti_password" class="text-sm font-medium text-slate-700">Nouveau mot de passe</label>
                <input type="password" id="uti_password" name="uti_password"
                       placeholder="Laisser vide pour ne pas changer"
                       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>

        {{-- Grille aveugle --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4">
            <h2 class="text-sm font-semibold text-teal-600 uppercase tracking-wide flex items-center gap-2">
                <i data-lucide="eye-off" class="w-4 h-4"></i>
                Grille aveugle ({{ $nbEquipe }} matchs)
            </h2>
            <p class="text-xs text-gray-400">Format : chiffres collés, ex: 21 pour 2-1</p>

            <div class="grid grid-cols-2 gap-3">
                @for($i = 0; $i < $nbEquipe; $i++)
                @php $g = $grille->get($i); @endphp
                <div class="flex items-center gap-2">
                    <span class="text-xs text-slate-500 w-14 shrink-0">Match {{ $i + 1 }}</span>
                    <input type="text"
                           name="tbGrille_{{ $i }}"
                           value="{{ $g ? $g->gri_prono.' - '.$g->gri_prono_v : '' }}"
                           placeholder="X - X"
                           maxlength="5"
                           class="input-score w-20 text-center border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                @endfor
            </div>
        </div>

        <button type="submit"
            class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition">
            <i data-lucide="save" class="w-4 h-4"></i>
            Enregistrer
        </button>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('avatar-input').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);
});
</script>
@endpush