@extends('app.layout-auth')

@section('title', 'Compléter le profil — Babi Meet')

@section('auth_image', asset('images/onboarding/medium-shot-cute-couple-outdoors.jpg'))
@section('auth_headline', 'Presque prêt')
@section('auth_tagline', 'Complétez votre profil pour attirer les bonnes personnes.')
@section('auth_form_class', 'is-wide')

@section('content')
    <div class="auth-card auth-card-wide" id="profile-form">
        <p class="step-label">Étape <span id="step-num">1</span> / 3</p>
        <h1 id="step-title">Vos informations</h1>
        <p class="auth-sub" id="step-desc">Dites-nous en un peu plus sur vous.</p>

        <div class="profile-step" data-step="1">
            <div class="field-row">
                <div class="field-group">
                    <label class="field-label" for="first_name">Prénom</label>
                    <input type="text" id="first_name" class="field-input" required>
                </div>
                <div class="field-group">
                    <label class="field-label" for="last_name">Nom</label>
                    <input type="text" id="last_name" class="field-input" required>
                </div>
            </div>
            <label class="field-label" for="date_of_birth">Date de naissance</label>
            <input type="date" id="date_of_birth" class="field-input" required>
            <label class="field-label">Genre</label>
            <div class="gender-row">
                <label class="chip-radio"><input type="radio" name="gender" value="homme"> Homme</label>
                <label class="chip-radio"><input type="radio" name="gender" value="femme"> Femme</label>
                <label class="chip-radio"><input type="radio" name="gender" value="autre"> Autre</label>
            </div>
        </div>

        <div class="profile-step" data-step="2" hidden>
            <label class="field-label" for="bio">Bio</label>
            <textarea id="bio" class="field-input field-textarea" rows="4" maxlength="500" placeholder="Quelques mots sur vous…"></textarea>
            <label class="field-label">Centres d'intérêt</label>
            <div class="chips-select" id="interests-chips"></div>
        </div>

        <div class="profile-step" data-step="3" hidden>
            <label class="field-label">Photos de profil</label>
            <p class="auth-sub">Ajoutez au moins une photo pour être visible.</p>
            <div class="photo-drop" id="photo-drop">
                <input type="file" id="photos" accept="image/*" multiple hidden>
                <div class="photo-drop-inner">
                    <i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
                    <p class="photo-drop-title">Glissez vos photos ici</p>
                    <p class="photo-drop-sub">JPG, PNG — plusieurs fichiers possibles</p>
                    <button type="button" class="btn btn-outline btn-sm" id="btn-browse-photos">Parcourir</button>
                </div>
            </div>
            <div id="photo-preview" class="photo-preview-grid"></div>
            <button type="button" class="btn btn-outline btn-block" id="btn-geo"><i class="fa-solid fa-location-dot"></i> Utiliser ma position</button>
            <p id="geo-status" class="geo-status"></p>
        </div>

        <div class="profile-nav">
            <button type="button" class="btn btn-outline" id="btn-prev" hidden>Retour</button>
            <button type="button" class="btn btn-primary" id="btn-next">Continuer</button>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    import { initCompleteProfile } from '{{ asset('js/app/auth.js') }}?v=5';
    initCompleteProfile();
</script>
@endpush