@extends('layouts.mobile')

@section('title', 'Editar perfil')
@section('back', route('profile'))
@section('app-eyebrow', 'Perfil')
@section('app-title', 'Editar perfil')

{{-- Pantalla "detrás" del perfil: datos de la persona fermentista
     (nombre, nivel, fermento favorito). Espejo del tab "perfil" de la web. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="perfilEditar()" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:160px;"></div></template>

    <template x-if="!loading">
        <div class="fm-stack">
            <div class="fm-card fm-stack" style="gap:16px;">
                <div class="fm-sectitle" style="margin:0;"><span>Tus datos</span><span x-show="saved" x-cloak class="fm-badge fm-badge--green">Guardado</span></div>

                <div>
                    <label class="fm-label">Nombre</label>
                    <input class="fm-input" x-model="form.name" @change="save()" placeholder="Tu nombre">
                </div>

                <div>
                    <span class="fm-label">Nivel fermentista</span>
                    <div class="fm-seg">
                        <template x-for="opt in ['principiante','apasionado','pro']" :key="opt">
                            <button type="button" :class="form.fermenter_profile === opt ? 'on' : ''" @click="form.fermenter_profile = opt; save()" x-text="opt"></button>
                        </template>
                    </div>
                </div>

                <div>
                    <label class="fm-label">Fermento favorito</label>
                    <select class="fm-input" x-model="form.favorite_guide_id" @change="save()">
                        <option value="">— Sin favorito —</option>
                        <template x-for="f in ferments" :key="f.id">
                            <option :value="f.id" x-text="f.name"></option>
                        </template>
                    </select>
                </div>
            </div>

            <div class="fm-card fm-row">
                <span class="fm-glyph" style="width:40px;height:40px;border-radius:12px;background:var(--paper-2);color:var(--ink-400);"><i class="fa-solid fa-image"></i></span>
                <div style="flex:1;">
                    <div style="font:600 13.5px var(--font-sans);color:var(--text-primary);">Foto de perfil</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Por ahora, la foto se cambia desde la versión web.</div>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function perfilEditar() {
    return {
        loading: true, saved: false, ferments: [], _t: null,
        form: { name: '', fermenter_profile: 'principiante', favorite_guide_id: '' },
        async load() {
            if (!window.fmRequireAuth(location.pathname)) { this.loading = false; return; }
            try {
                const [me, cat] = await Promise.all([window.FermentyAPI.me(), window.FermentyAPI.catalogue()]);
                const u = me.data;
                this.form = {
                    name: u.name || '',
                    fermenter_profile: u.fermenter_profile || 'principiante',
                    favorite_guide_id: u.favorite_guide_id || '',
                };
                this.ferments = cat.ferments || [];
            } catch (e) {}
            this.loading = false;
        },
        async save() {
            const payload = {
                name: this.form.name,
                fermenter_profile: this.form.fermenter_profile,
                favorite_guide_id: this.form.favorite_guide_id || null,
            };
            try {
                await window.FermentyAPI.updateMe(payload);
                this.saved = true; clearTimeout(this._t); this._t = setTimeout(() => this.saved = false, 1500);
            } catch (e) {}
        },
    };
}
</script>
@endpush