@extends('layouts.app')
@php $r = \App\Support\Taxonomy::rubrique('annonces'); @endphp

@section('content')

<div class="container">
    @include('partials.breadcrumb', ['rubrique' => $r, 'trail' => $ad['trail'], 'current' => \Illuminate\Support\Str::limit($ad['title'], 42)])
</div>

<section class="section" style="padding-top:0">
    <div class="container split-right">

        {{-- ============================ Colonne principale ============================ --}}
        <div>
            <div class="gallery" data-gallery data-zoom="annonce">
                <div style="position:relative">
                    <x-media :icon="$ad['icon']" :seed="$ad['seed']" :url="$ad['cover']" :alt="$ad['title']"
                             ratio="wide" data-gallery-main
                             :badges="array_values(array_filter([
                                $ad['urgent'] ? ['label' => 'Urgent', 'class' => 'badge-orange', 'icon' => 'bolt'] : null,
                                $ad['premium'] ? ['label' => 'À la une', 'class' => 'badge-gold', 'icon' => 'star'] : null,
                             ]))"/>
                    @if($ad['photos'] > 1)
                        <button class="gallery-nav prev" data-gallery-prev aria-label="Photo précédente"><x-icon name="chevron-left"/></button>
                        <button class="gallery-nav next" data-gallery-next aria-label="Photo suivante"><x-icon name="chevron-right"/></button>
                        <span class="media-count" style="left:auto;right:12px;bottom:12px" data-gallery-counter>1 / {{ $ad['photos'] }}</span>
                    @endif
                </div>
                @if($ad['photos'] > 1)
                    <div class="gallery-thumbs">
                        @foreach($ad['image_urls'] as $i => $url)
                            <x-media :icon="$ad['icon']" :seed="$ad['seed'] + $i" :url="$url" data-gallery-thumb/>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="panel" style="margin-top:20px">
                <div class="row-between" style="align-items:flex-start">
                    <div>
                        <span class="fiche-cat">{{ implode(' › ', array_column($ad['trail'], 'name')) }}</span>
                        <h1 style="font-size:1.6rem;margin:6px 0 10px">{{ $ad['title'] }}</h1>
                        <div class="row-center" style="gap:14px;flex-wrap:wrap;color:var(--ink-500);font-size:.86rem">
                            <span class="row-center" style="gap:5px"><x-icon name="pin" size="15"/> {{ $ad['ville'] }} ({{ $ad['cp'] }})@if($ad['etranger']) · {{ $ad['pays_nom'] }}@endif</span>
                            <span class="row-center" style="gap:5px"><x-icon name="clock" size="15"/> {{ $ad['published'] }}</span>
                            <span class="row-center" style="gap:5px"><x-icon name="eye" size="15"/> {{ number_format($ad['vues'], 0, ',', ' ') }} vues</span>
                            <span class="row-center" style="gap:5px"><x-icon name="tag" size="15"/> Réf. {{ $ad['ref'] }}</span>
                        </div>
                    </div>
                    <div class="center">
                        <div class="price-tag">{{ $ad['price_label'] }} @if($ad['price_unit'])<span>{{ $ad['price_unit'] }}</span>@endif</div>
                        @if($ad['pro'])<span class="badge badge-outline" style="margin-top:8px">Prix professionnel</span>@endif
                    </div>
                </div>

                <hr>

                <h2 style="font-size:1.05rem;margin-bottom:10px">Description</h2>
                <div class="prose" style="font-size:.95rem">
                    @foreach(explode("\n\n", $ad['description']) as $para)
                        <p>{{ $para }}</p>
                    @endforeach
                </div>

                <h2 style="font-size:1.05rem;margin:26px 0 6px">Caractéristiques</h2>
                <table class="spec-table">
                    @foreach($ad['specs'] ?? [] as $k => $v)
                        <tr><td>{{ $k }}</td><td>{{ $v }}</td></tr>
                    @endforeach
                    <tr><td>Localisation</td><td>{{ $ad['ville'] }} ({{ $ad['cp'] }})@if($ad['etranger']) — {{ $ad['pays_nom'] }}@endif</td></tr>
                    <tr><td>Livraison</td><td>{{ $ad['livraison'] ? 'Possible, aux frais de l\'acheteur' : 'Remise en main propre uniquement' }}</td></tr>
                </table>

                <div class="row-center" style="gap:8px;margin-top:22px;flex-wrap:wrap">
                    <button class="btn btn-outline btn-sm" data-fav="{{ $ad['ref'] }}"><x-icon name="heart"/> Ajouter aux favoris</button>
                    <button class="btn btn-outline btn-sm" data-copy="url"><x-icon name="share"/> Partager</button>
                    <button class="btn btn-ghost btn-sm" data-reveal="signalement"><x-icon name="flag"/> Signaler l'annonce</button>
                </div>

                <div id="signalement" hidden style="margin-top:16px">
                    <form method="post" action="{{ url('/signalement') }}" class="stack">
                        @csrf
                        <input type="hidden" name="type" value="annonce">
                        <input type="hidden" name="ref" value="{{ $ad['ref'] }}">

                        <div class="field-group">
                            <label class="label" for="reason">Motif du signalement</label>
                            <select class="select" id="reason" name="reason" required>
                                @foreach(\App\Models\Report::RAISONS as $cle => $libelle)
                                    <option value="{{ $cle }}">{{ $libelle }}</option>
                                @endforeach
                            </select>
                        </div>

                        @guest
                            <div class="field-group">
                                <label class="label" for="report_email">Votre e-mail (facultatif)</label>
                                <input class="input" id="report_email" type="email" name="email" placeholder="vous@exemple.fr">
                            </div>
                        @endguest

                        <div class="field-group">
                            <label class="label" for="report_message">Précisions</label>
                            <textarea class="textarea" id="report_message" name="message" rows="3" maxlength="2000"
                                      placeholder="Expliquez brièvement ce qui vous semble anormal."></textarea>
                        </div>

                        <div><button class="btn btn-outline btn-sm" type="submit"><x-icon name="flag"/> Envoyer le signalement</button></div>
                    </form>
                </div>
            </div>

            {{-- Booster : réservé au propriétaire de l'annonce --}}
            @if(auth()->id() === $ad->user_id)
                <div class="panel" id="booster" style="margin-top:20px">
                    <div class="panel-head">
                        <h2 style="font-size:1.05rem">Booster cette annonce</h2>
                        <a href="{{ url('/tarifs') }}" class="small" style="color:var(--orange-700)">Détail des offres</a>
                    </div>

                    <div class="row-center" style="gap:8px;flex-wrap:wrap;margin-bottom:14px">
                        @if($ad->premium)
                            <span class="badge badge-gold"><x-icon name="star"/> À la une jusqu'au {{ $ad->featured_until->translatedFormat('j F') }}</span>
                        @endif
                        @if($ad->urgent)
                            <span class="badge badge-orange"><x-icon name="bolt"/> Urgent jusqu'au {{ $ad->urgent_until->translatedFormat('j F') }}</span>
                        @endif
                    </div>

                    <div class="grid grid-2" style="gap:10px">
                        @foreach(\App\Support\Boost::optionsPour($ad) as $option)
                            <form method="post" action="{{ url('/annonce/'.$ad->id.'/option/'.$option['key']) }}">
                                @csrf
                                <button class="card card-pad card-hover" type="submit"
                                        style="width:100%;text-align:left;border:1px solid var(--line);cursor:pointer">
                                    <span class="row-between" style="gap:10px">
                                        <span class="row-center" style="gap:10px;min-width:0">
                                            <span class="tile-icon"><x-icon :name="$option['icon']"/></span>
                                            <span style="min-width:0">
                                                <strong class="small" style="display:block;color:var(--ink-900)">{{ $option['name'] }}</strong>
                                                <span class="tiny muted">{{ $option['desc'] }}</span>
                                            </span>
                                        </span>
                                        <strong style="color:var(--orange-700);white-space:nowrap">
                                            {{ \App\Support\Dates::euros($option['amount'], true) }}
                                        </strong>
                                    </span>
                                </button>
                            </form>
                        @endforeach
                    </div>

                    <p class="tiny muted" style="margin-top:12px">
                        Paiement sécurisé par Stripe. Le reçu est disponible immédiatement dans
                        <a href="{{ url('/compte/achats') }}" style="color:var(--orange-700)">Achats &amp; factures</a>.
                    </p>
                </div>
            @endif

            {{-- Localisation --}}
            <div class="panel" style="margin-top:20px">
                <div class="panel-head">
                    <h2 style="font-size:1.05rem">Localisation</h2>
                    <span class="small muted">{{ $ad['ville'] }} ({{ $ad['cp'] }})</span>
                </div>
                <x-carte :ville="$ad['ville']" :cp="$ad['cp']"
                         legende="Seule la commune est indiquée : la position exacte n'est pas communiquée pour préserver la vie privée du vendeur."/>
            </div>

            {{-- Sécurité --}}
            <div class="notice" style="margin-top:20px">
                <x-icon name="shield"/>
                <div>
                    <strong class="strong">Nos conseils pour une transaction sereine</strong>
                    <ul style="margin:8px 0 0;padding-left:18px;list-style:disc">
                        <li>Privilégiez la remise en main propre et un lieu public.</li>
                        <li>N'envoyez jamais d'argent avant d'avoir vu le bien.</li>
                        <li>Méfiez-vous des demandes de paiement par lien ou par carte cadeau.</li>
                    </ul>
                    <a href="{{ url('/aide#securite') }}" class="small" style="color:var(--orange-700);font-weight:600;display:inline-block;margin-top:8px">
                        Lire tous les conseils de sécurité →
                    </a>
                </div>
            </div>
        </div>

        {{-- ================================ Colonne latérale ================================ --}}
        <aside class="sticky stack">
            <div class="panel">
                <div class="seller-card">
                    <div class="seller-avatar">{{ mb_strtoupper(mb_substr($ad['seller'], 0, 1)) }}</div>
                    <strong style="display:block;color:var(--ink-900);font-size:1.02rem">{{ $ad['seller'] }}</strong>
                    <span class="badge {{ $ad['pro'] ? 'badge-soft' : '' }}" style="margin-top:6px">{{ $ad['seller_type'] }}</span>
                    <div class="row-center" style="justify-content:center;gap:6px;margin-top:10px">
                        <span class="stars">
                            @for($i = 1; $i <= 5; $i++)
                                <x-icon name="star" :fill="$i <= round($ad['rating'])" style="{{ $i <= round($ad['rating']) ? '' : 'color:var(--line)' }}"/>
                            @endfor
                        </span>
                        <span class="rating-value">{{ number_format($ad['rating'], 1, ',', '') }}</span>
                        <span class="small muted">({{ $ad['reviews'] }})</span>
                    </div>
                    <p class="tiny muted" style="margin:8px 0 0">Membre depuis {{ $ad['member_since'] }} · Répond en moyenne en 2 h</p>
                </div>

                <hr style="margin:18px 0">

                <div class="stack">
                    @if(auth()->id() === $ad->user_id)
                        <a href="{{ url('/compte/annonces/'.$ad->id.'/modifier') }}" class="btn btn-primary btn-block btn-lg">
                            <x-icon name="edit"/> Modifier mon annonce
                        </a>
                        <a href="#booster" class="btn btn-outline btn-block"><x-icon name="rocket"/> Booster cette annonce</a>
                    @elseif(auth()->check())
                        <button class="btn btn-primary btn-block btn-lg" data-reveal="contact-vendeur">
                            <x-icon name="message"/> Envoyer un message
                        </button>
                        <div id="contact-vendeur" hidden>
                            <form method="post" action="{{ url('/annonce/'.$ad->id.'/message') }}" class="stack">
                                @csrf
                                <textarea class="textarea @error('body') is-invalid @enderror" name="body" rows="4" required
                                          maxlength="4000">{{ old('body', 'Bonjour, votre annonce « '.$ad->title.' » est-elle toujours disponible ?') }}</textarea>
                                @error('body')<span class="field-error">{{ $message }}</span>@enderror
                                <button class="btn btn-dark btn-block" type="submit"><x-icon name="arrow-right"/> Envoyer</button>
                            </form>
                        </div>
                    @else
                        <a href="{{ url('/connexion') }}" class="btn btn-primary btn-block btn-lg">
                            <x-icon name="message"/> Se connecter pour contacter
                        </a>
                    @endif

                    @if($ad->user?->phone)
                        <button class="btn btn-outline btn-block" data-reveal="tel-{{ $ad['ref'] }}"><x-icon name="phone"/> Afficher le téléphone</button>
                        <div id="tel-{{ $ad['ref'] }}" hidden>
                            <a href="tel:{{ preg_replace('/\s+/', '', $ad->user->phone) }}" class="btn btn-dark btn-block">{{ $ad->user->phone }}</a>
                        </div>
                    @endif

                    <button class="btn btn-ghost btn-block btn-sm" data-fav="{{ $ad['ref'] }}"><x-icon name="heart"/> Sauvegarder</button>
                </div>
            </div>

            <div class="panel">
                <h3 style="font-size:.95rem;margin-bottom:10px">Avant de conclure</h3>
                <p class="small muted" style="margin-bottom:12px">
                    CityMag met en relation acheteurs et vendeurs mais n'encaisse aucun paiement
                    entre particuliers. Réglez de la main à la main, après avoir vu le bien.
                </p>
                <div class="stack">
                    <a href="{{ url('/aide#securite') }}" class="btn btn-soft btn-block btn-sm">
                        <x-icon name="shield"/> Conseils de sécurité
                    </a>
                    <button class="btn btn-ghost btn-block btn-sm" data-reveal="signalement">
                        <x-icon name="flag"/> Signaler cette annonce
                    </button>
                </div>
            </div>

            @if($duMemeVendeur)
                <div class="panel">
                    <div class="panel-head"><h3 style="font-size:.95rem">Autres annonces du vendeur</h3></div>
                    @foreach($duMemeVendeur as $other)
                        <a href="{{ url('/annonce/'.$other['ref'].'-'.$other['slug']) }}" class="row" style="gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)">
                            <x-media :icon="$other['icon']" :seed="$other['seed']" ratio="square" style="width:64px;flex:none;border-radius:8px"/>
                            <span style="min-width:0">
                                <span class="small clamp-2" style="font-weight:600;color:var(--ink-900)">{{ $other['title'] }}</span>
                                <span class="small strong" style="display:block;margin-top:4px">{{ $other['price_label'] }}</span>
                            </span>
                        </a>
                    @endforeach
                </div>
            @endif
        </aside>
    </div>
</section>

{{-- Annonces similaires --}}
@if($similaires)
    <section class="section section-alt">
        <div class="container">
            <div class="section-head">
                <div>
                    <span class="eyebrow">Vous aimerez aussi</span>
                    <h2 style="margin-top:8px">Annonces similaires</h2>
                </div>
                <a href="{{ $ad['trail'][count($ad['trail']) - 1]['url'] }}" class="btn btn-outline">Toute la catégorie <x-icon name="arrow-right"/></a>
            </div>
            <div class="grid grid-4">
                @foreach($similaires as $item)
                    <x-ad-card :ad="$item"/>
                @endforeach
            </div>
        </div>
    </section>
@endif

@endsection