@extends('layouts.app')
@php
    use App\Support\Content;
    use App\Support\Dates;
    $edition = (bool) $ad;
    $part    = config('billing.particulier');
    $payante = ! auth()->user()->hasProPlan();
    $specs   = $ad?->specs ?? [];
    $mode    = old('price_mode', $ad ? ($ad->price_on_request ? ($ad->price_label === 'Gratuit / Échange' ? 'gratuit' : 'debattre') : 'fixe') : 'fixe');
@endphp

@section('content')

<section class="section-tight section-alt">
    <div class="container center" style="padding-top:20px;padding-bottom:20px">
        <span class="eyebrow">{{ $edition ? 'Modification' : 'Dépôt gratuit' }}</span>
        <h1 style="margin:10px 0 8px">{{ $edition ? 'Modifier mon annonce' : 'Déposer une annonce' }}</h1>
        <p class="lead" style="max-width:60ch;margin:0 auto">
            @if($edition)
                Référence {{ $ad->ref }} — les modifications sont visibles immédiatement.
            @else
                Quatre étapes, deux minutes : décrivez, illustrez, localisez, publiez.
                Votre annonce est visible immédiatement par les habitants de votre secteur.
            @endif
        </p>
        @unless($edition)
            @php $quota = auth()->user()->adQuota(); @endphp
            @if($quota)
                <p class="small muted" style="margin-top:10px">
                    {{ auth()->user()->activeAdsCount() }} / {{ $quota }} annonces actives utilisées.
                </p>
            @endif
            @if($payante)
                <p class="small muted" style="margin-top:6px">
                    Gratuit dans toutes les rubriques ·
                    <strong>{{ Dates::euros($part['amount'], true) }}</strong> {{ $part['unite'] }},
                    réglée en ligne à la validation.
                </p>
            @endif
        @endunless
    </div>
</section>

<section class="section">
    <div class="container container-sm" data-deposit="{{ url('/data/arborescence.json') }}">

        <div class="steps">
            @foreach(['Catégorie', 'Description', 'Photos & prix', 'Coordonnées'] as $i => $label)
                <div class="step {{ $i === 0 ? 'is-current' : '' }}" data-step="{{ $i + 1 }}">
                    <span class="step-num">{{ $i + 1 }}</span>
                    <span class="step-label">{{ $label }}</span>
                </div>
            @endforeach
        </div>

        {{-- data-memoire : clé du brouillon local, distincte par annonce en édition --}}
        <form method="post" enctype="multipart/form-data"
              data-memoire="{{ $edition ? 'annonce-'.$ad->id : 'deposer' }}"
              action="{{ $edition ? url('/compte/annonces/'.$ad->id) : url('/deposer') }}">
            @csrf
            @if($edition)@method('put')@endif

            {{-- ÉTAPE 1 — CATÉGORIE --}}
            <div class="panel" data-step-panel="1">
                <h2 style="font-size:1.15rem;margin-bottom:6px">Dans quelle catégorie publier ?</h2>
                <p class="muted small" style="margin-bottom:20px">
                    Le choix de la catégorie détermine les critères proposés et la visibilité de votre annonce.
                </p>

                {{-- Rubrique verrouillée : ce formulaire ne crée que des petites annonces. --}}
                <select data-sel="rubrique" hidden><option value="annonces" selected>Petites annonces</option></select>
                <input type="hidden" name="category_path" data-category-path
                       value="{{ old('category_path', $ad?->category_path) }}">

                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label">Univers</label>
                        <select class="select @error('category_path') is-invalid @enderror" data-sel="univers">
                            <option>Chargement…</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="label">Catégorie</label>
                        <select class="select" data-sel="categorie" disabled><option>—</option></select>
                    </div>
                    <div class="field-group">
                        <label class="label">Sous-catégorie <span class="hint">(si disponible)</span></label>
                        <select class="select" data-sel="sous" disabled><option>—</option></select>
                    </div>
                    <div class="field-group">
                        <label class="label">Chemin retenu</label>
                        <input class="input" data-category-label readonly value="—" tabindex="-1">
                    </div>
                </div>
                @error('category_path')<span class="field-error">{{ $message }}</span>@enderror

                <hr>

                <p class="small muted">
                    Vous publiez en tant que
                    <strong>{{ auth()->user()->isPro() ? 'professionnel' : 'particulier' }}</strong>.
                    @unless(auth()->user()->isPro())
                        <a href="{{ url('/tarifs') }}" style="color:var(--orange-700)">Passer en compte pro</a>
                        pour des annonces illimitées.
                    @endunless
                </p>

                <div class="row-between" style="margin-top:24px">
                    <span class="small muted">Étape 1 sur 4</span>
                    <button type="button" class="btn btn-primary" data-goto="2">Continuer <x-icon name="arrow-right"/></button>
                </div>
            </div>

            {{-- ÉTAPE 2 — DESCRIPTION --}}
            <div class="panel" data-step-panel="2" hidden>
                <h2 style="font-size:1.15rem;margin-bottom:20px">Décrivez votre bien</h2>

                <div class="stack">
                    <div class="field-group">
                        <label class="label" for="title">Titre de l'annonce</label>
                        <input class="input @error('title') is-invalid @enderror" id="title" name="title" maxlength="70"
                               value="{{ old('title', $ad?->title) }}"
                               placeholder="Ex. : Canapé d'angle convertible en tissu gris" required>
                        <span class="hint">70 caractères maximum. Soyez précis : marque, modèle, état.</span>
                        @error('title')<span class="field-error">{{ $message }}</span>@enderror
                    </div>

                    <div class="field-group">
                        <label class="label" for="description">Description</label>
                        <textarea class="textarea @error('description') is-invalid @enderror" id="description"
                                  name="description" rows="8" required
                                  placeholder="Décrivez l'état, les dimensions, l'ancienneté, les raisons de la vente, les modalités de remise…">{{ old('description', $ad?->description) }}</textarea>
                        <span class="hint">Les annonces détaillées reçoivent en moyenne 3 fois plus de contacts.</span>
                        @error('description')<span class="field-error">{{ $message }}</span>@enderror
                    </div>

                    <div class="grid grid-2" style="gap:14px">
                        <div class="field-group">
                            <label class="label" for="etat">État</label>
                            <select class="select" id="etat" name="etat">
                                <option value="">Non précisé</option>
                                @foreach(['Neuf', 'Comme neuf', 'Très bon état', 'Bon état', 'Satisfaisant', 'Pour pièces'] as $e)
                                    <option value="{{ $e }}" @selected(old('etat', $specs['État'] ?? '') === $e)>{{ $e }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="field-group">
                            <label class="label" for="dispo">Disponibilité</label>
                            <select class="select" id="dispo" name="dispo">
                                <option value="">Non précisé</option>
                                @foreach(['Immédiate', 'Sous 48 heures', 'À convenir'] as $d)
                                    <option value="{{ $d }}" @selected(old('dispo', $specs['Disponibilité'] ?? '') === $d)>{{ $d }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row-between" style="margin-top:24px">
                    <button type="button" class="btn btn-ghost" data-goto="1"><x-icon name="arrow-left"/> Retour</button>
                    <button type="button" class="btn btn-primary" data-goto="3">Continuer <x-icon name="arrow-right"/></button>
                </div>
            </div>

            {{-- ÉTAPE 3 — PHOTOS & PRIX --}}
            <div class="panel" data-step-panel="3" hidden>
                <h2 style="font-size:1.15rem;margin-bottom:20px">Photos et prix</h2>

                <x-photo-uploader :photos="$ad?->images" :max="10"
                                  titre="Glissez vos photos ici"
                                  aide="JPG, PNG ou WebP · 10 photos maximum · 8 Mo par fichier"/>

                @error('photos')<span class="field-error">{{ $message }}</span>@enderror
                @error('photos.*')<span class="field-error">{{ $message }}</span>@enderror

                <hr>

                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label" for="price">Prix</label>
                        <div class="input-icon">
                            <x-icon name="euro"/>
                            <input class="input @error('price') is-invalid @enderror" id="price" type="number"
                                   name="price" min="0" step="0.01" placeholder="0"
                                   value="{{ old('price', $ad && $ad->price !== null ? $ad->price / 100 : '') }}">
                        </div>
                        @error('price')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="price_mode">Type de prix</label>
                        <select class="select" id="price_mode" name="price_mode">
                            <option value="fixe" @selected($mode === 'fixe')>Prix fixe</option>
                            <option value="debattre" @selected($mode === 'debattre')>Prix à débattre</option>
                            <option value="gratuit" @selected($mode === 'gratuit')>Gratuit / Échange</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label class="label" for="price_unit">Unité</label>
                        <select class="select" id="price_unit" name="price_unit">
                            @foreach(['' => 'Prix total', '/ mois' => 'Par mois', '/ jour' => 'Par jour', '/ semaine' => 'Par semaine', '/ pers.' => 'Par personne'] as $v => $l)
                                <option value="{{ $v }}" @selected(old('price_unit', $ad?->price_unit) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="stack" style="margin-top:16px">
                    <label class="check">
                        <input type="checkbox" name="livraison" value="1" @checked(old('livraison', $ad?->livraison))>
                        Je propose la livraison
                    </label>
                </div>

                <div class="row-between" style="margin-top:24px">
                    <button type="button" class="btn btn-ghost" data-goto="2"><x-icon name="arrow-left"/> Retour</button>
                    <button type="button" class="btn btn-primary" data-goto="4">Continuer <x-icon name="arrow-right"/></button>
                </div>
            </div>

            {{-- ÉTAPE 4 — LOCALISATION & CONTACT --}}
            <div class="panel" data-step-panel="4" hidden>
                <h2 style="font-size:1.15rem;margin-bottom:20px">Localisation et contact</h2>

                <div class="grid grid-2" style="gap:14px">
                    <div class="field-group">
                        <label class="label" for="ville">Ville</label>
                        <div class="input-icon">
                            <x-icon name="pin"/>
                            <input class="input @error('ville') is-invalid @enderror" id="ville" name="ville"
                                   list="liste-villes" placeholder="Lille" required
                                   value="{{ old('ville', $ad?->ville ?? auth()->user()->ville) }}">
                        </div>
                        <datalist id="liste-villes">
                            @foreach(Content::villes() as [$v, $c])<option value="{{ $v }}">{{ $c }}</option>@endforeach
                        </datalist>
                        @error('ville')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="field-group">
                        <label class="label" for="cp">Code postal</label>
                        <input class="input @error('cp') is-invalid @enderror" id="cp" name="cp"
                               maxlength="12" placeholder="59000" required
                               value="{{ old('cp', $ad?->cp ?? auth()->user()->cp) }}">
                        @error('cp')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <x-pays-select :value="old('pays', $ad?->pays ?? auth()->user()->pays)" />
                    <div class="field-group">
                        <label class="label">Nom affiché</label>
                        <input class="input" value="{{ auth()->user()->display_name }}" readonly tabindex="-1">
                        <span class="hint">Modifiable depuis <a href="{{ url('/compte/profil') }}" style="color:var(--orange-700)">votre profil</a>.</span>
                    </div>
                    <div class="field-group">
                        <label class="label" for="phone">Téléphone</label>
                        <input class="input" id="phone" name="phone" placeholder="06 00 00 00 00"
                               value="{{ old('phone', auth()->user()->phone) }}">
                        <span class="hint">Facultatif. Les acheteurs peuvent toujours vous écrire par la messagerie.</span>
                    </div>
                </div>

                <div class="stack" style="margin-top:16px">
                    <label class="check">
                        <input type="checkbox" name="cgu" value="1" @checked(old('cgu', $edition)) required>
                        J'accepte les <a href="{{ url('/cgu') }}" style="color:var(--orange-700)">conditions générales</a>
                        et je certifie être le propriétaire du bien.
                    </label>
                    @error('cgu')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                @if(! $edition && $payante)
                    <div class="notice" data-frais-immobilier style="display:none">
                        <x-icon name="building"/>
                        <div>
                            <strong class="strong">Annonce immobilière : {{ Dates::euros($part['amount'], true) }}</strong>
                            <p style="margin:4px 0 0">
                                La rubrique Immobilier est la seule facturée pour un particulier.
                                À la validation, vous serez redirigé vers le paiement sécurisé Stripe ;
                                l'annonce part en ligne dès la confirmation.
                            </p>
                        </div>
                    </div>
                @endif

                @unless($edition)
                    <hr>
                    <h3 style="font-size:1rem;margin-bottom:6px">Boostez votre annonce</h3>
                    <p class="small muted" style="margin-bottom:12px">
                        Les options de visibilité s'achètent depuis l'annonce, une fois celle-ci publiée —
                        vous verrez d'abord le résultat, vous déciderez ensuite.
                        <a href="{{ url('/tarifs') }}" style="color:var(--orange-700)">Voir les tarifs</a>
                    </p>
                @endunless

                <div class="row-between" style="margin-top:24px">
                    <button type="button" class="btn btn-ghost" data-goto="3"><x-icon name="arrow-left"/> Retour</button>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <x-icon name="check"/> {{ $edition ? 'Enregistrer les modifications' : 'Publier mon annonce' }}
                    </button>
                </div>
            </div>
        </form>

        @if(! $edition && $payante)
            <script>
                // Le bandeau « annonce payante » suit la catégorie choisie à l'étape 1.
                (function () {
                    var champ = document.querySelector('[data-category-path]');
                    var bandeau = document.querySelector('[data-frais-immobilier]');
                    var payants = @json($part['univers']);

                    if (! champ || ! bandeau) return;

                    var rafraichir = function () {
                        var univers = String(champ.value || '').split('/')[0];
                        // .notice est en display:flex : on bascule le style, pas l'attribut hidden.
                        bandeau.style.display = payants.indexOf(univers) === -1 ? 'none' : 'flex';
                    };

                    champ.addEventListener('change', rafraichir);
                    document.addEventListener('click', rafraichir);
                    rafraichir();
                })();
            </script>
        @endif

        <div class="grid grid-3" style="margin-top:24px">
            @foreach([
                ['camera', 'Soignez vos photos', 'Lumière naturelle, fond neutre, plusieurs angles.'],
                ['target', 'Fixez le bon prix', 'Comparez avec les annonces similaires de votre secteur.'],
                ['shield', 'Restez prudent', 'Ne communiquez jamais vos coordonnées bancaires.'],
            ] as [$i, $t, $d])
                <div class="usp">
                    <span class="usp-icon"><x-icon :name="$i"/></span>
                    <div><h3>{{ $t }}</h3><p>{{ $d }}</p></div>
                </div>
            @endforeach
        </div>
    </div>
</section>

@endsection