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

@section('content')

<div class="container">
    @include('partials.breadcrumb', ['rubrique' => $r, 'trail' => $pro['trail'], 'current' => $pro['title']])
</div>

<section class="section" style="padding-top:0">
    <div class="container">
        {{-- Bandeau établissement --}}
        <div class="panel" style="padding:0;overflow:hidden">
            <x-media :icon="$pro['icon']" :seed="$pro['seed']" :url="$pro['cover']" :alt="$pro['title']"
                     ratio="wide" style="aspect-ratio:5/1;min-height:150px" data-zoom="fiche"/>
            <div style="padding:20px 22px">
                <div class="row-between" style="align-items:flex-start">
                    <div class="row" style="gap:16px;align-items:flex-start;min-width:0">
                        <span class="pro-logo" style="width:74px;height:74px;margin-top:-52px;border:4px solid #fff;box-shadow:var(--shadow-sm)">
                            <x-icon :name="$pro['icon']" style="width:32px;height:32px"/>
                        </span>
                        <div style="min-width:0">
                            <div class="row-center" style="gap:8px;flex-wrap:wrap">
                                <h1 style="font-size:1.55rem">{{ $pro['title'] }}</h1>
                                @if($pro['verified'])<span class="badge badge-green"><x-icon name="check-circle"/> Vérifié</span>@endif
                                @if($pro['premium'])<span class="badge badge-gold"><x-icon name="star"/> Premium</span>@endif
                            </div>
                            <p class="muted" style="margin:6px 0 0">
                                {{ implode(' › ', array_column($pro['trail'], 'name')) }}
                            </p>
                            <div class="row-center" style="gap:12px;margin-top:10px;flex-wrap:wrap">
                                <span class="stars">
                                    @for($i = 1; $i <= 5; $i++)
                                        <x-icon name="star" :fill="$i <= round($pro['rating'])" style="{{ $i <= round($pro['rating']) ? '' : 'color:var(--line)' }}"/>
                                    @endfor
                                </span>
                                <span class="rating-value">{{ number_format($pro['rating'], 1, ',', '') }}</span>
                                <span class="small muted">{{ $pro['reviews'] }} avis clients</span>
                                <span class="badge {{ $pro['ouvert'] ? 'badge-green' : 'badge-red' }}">{{ $pro['ouvert'] ? 'Ouvert actuellement' : 'Fermé actuellement' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="row-center" style="gap:8px">
                        <button class="btn btn-outline btn-icon" data-fav="{{ $pro['ref'] }}" title="Enregistrer"><x-icon name="heart"/></button>
                        <button class="btn btn-outline btn-icon" data-copy="url" title="Partager"><x-icon name="share"/></button>
                        <a href="tel:0399000000" class="btn btn-primary"><x-icon name="phone"/> {{ $pro['tel'] }}</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="split-right" style="margin-top:22px">
            <div class="stack">
                <div class="panel">
                    <h2 style="font-size:1.1rem;margin-bottom:12px">Présentation</h2>
                    <div class="prose" style="font-size:.95rem">
                        @foreach(explode("\n\n", $pro['description']) as $para)<p>{{ $para }}</p>@endforeach
                    </div>

                    @if($pro['services'])
                        <h3 style="font-size:1rem;margin:22px 0 10px">Services &amp; équipements</h3>
                        <div class="row-center" style="gap:8px;flex-wrap:wrap">
                            @foreach($pro['services'] as $s)
                                <span class="chip"><x-icon name="check" size="14"/> {{ $s }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>

                @if($pro['photos'])
                    <div class="panel">
                        <div class="panel-head">
                            <h2 style="font-size:1.1rem">Photos de l'établissement</h2>
                            <span class="small muted">{{ $pro['photos'] }} photos</span>
                        </div>
                        <div class="grid grid-4" style="gap:10px" data-zoom="fiche">
                            @foreach($pro['image_urls'] as $i => $url)
                                <x-media :icon="$pro['icon']" :seed="$pro['seed'] + $i" :url="$url"
                                         :alt="$pro['title'].' — photo '.($i + 1)"
                                         ratio="square" style="border-radius:8px"/>
                            @endforeach
                        </div>
                    </div>
                @endif

                @php
                    $avis = $pro->publishedReviews;
                    $monAvis = auth()->check() ? $avis->firstWhere('user_id', auth()->id()) : null;
                    $repartition = collect(range(5, 1))->mapWithKeys(fn ($n) => [
                        $n => $avis->count() ? round($avis->where('rating', $n)->count() / $avis->count() * 100) : 0,
                    ]);
                @endphp

                <div class="panel" id="avis">
                    <div class="panel-head">
                        <h2 style="font-size:1.1rem">Avis clients</h2>
                        @auth
                            @if($pro->user_id !== auth()->id())
                                <button class="btn btn-outline btn-sm" data-reveal="formulaire-avis">
                                    <x-icon name="edit"/> {{ $monAvis ? 'Modifier mon avis' : 'Laisser un avis' }}
                                </button>
                            @endif
                        @else
                            <a href="{{ url('/connexion') }}" class="btn btn-outline btn-sm"><x-icon name="edit"/> Laisser un avis</a>
                        @endauth
                    </div>

                    @auth
                        @if($pro->user_id !== auth()->id())
                            <div id="formulaire-avis" hidden style="margin-bottom:18px">
                                <form method="post" action="{{ url('/professionnel/'.$pro->id.'/avis') }}" class="stack">
                                    @csrf
                                    <div class="field-group">
                                        <label class="label" for="rating">Votre note</label>
                                        <select class="select" id="rating" name="rating" style="max-width:220px" required>
                                            @for($n = 5; $n >= 1; $n--)
                                                <option value="{{ $n }}" @selected(old('rating', $monAvis?->rating) == $n)>
                                                    {{ $n }} / 5 — {{ ['Très déçu', 'Décevant', 'Correct', 'Très bien', 'Excellent'][$n - 1] }}
                                                </option>
                                            @endfor
                                        </select>
                                        @error('rating')<span class="field-error">{{ $message }}</span>@enderror
                                    </div>
                                    <div class="field-group">
                                        <label class="label" for="avis-body">Votre expérience</label>
                                        <textarea class="textarea @error('body') is-invalid @enderror" id="avis-body" name="body"
                                                  rows="4" required maxlength="2000">{{ old('body', $monAvis?->body) }}</textarea>
                                        @error('body')<span class="field-error">{{ $message }}</span>@enderror
                                    </div>
                                    <div>
                                        <button class="btn btn-primary" type="submit">
                                            <x-icon name="check"/> {{ $monAvis ? 'Mettre à jour' : 'Publier mon avis' }}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    @endauth

                    <div class="row" style="gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:18px">
                        <div class="center">
                            <div class="price-tag">{{ number_format($pro['rating'], 1, ',', '') }}</div>
                            <span class="stars" style="margin-top:4px">
                                @for($i = 1; $i <= 5; $i++)
                                    <x-icon name="star" :fill="$i <= round($pro['rating'])" style="{{ $i <= round($pro['rating']) ? '' : 'color:var(--line)' }}"/>
                                @endfor
                            </span>
                            <p class="tiny muted" style="margin:6px 0 0">{{ $pro['reviews'] }} avis</p>
                        </div>
                        <div style="flex:1;min-width:220px">
                            @foreach($repartition as $note => $pct)
                                <div class="row-center" style="gap:10px;margin-bottom:6px">
                                    <span class="tiny muted" style="width:34px">{{ $note }} ★</span>
                                    <span style="flex:1;height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden">
                                        <span style="display:block;height:100%;width:{{ $pct }}%;background:var(--orange)"></span>
                                    </span>
                                    <span class="tiny muted" style="width:34px">{{ $pct }}%</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @forelse($avis as $a)
                        <div style="padding:16px 0;border-top:1px solid var(--line-soft)">
                            <div class="row-between">
                                <div class="row-center" style="gap:10px">
                                    <span class="seller-avatar" style="width:38px;height:38px;font-size:.9rem;margin:0">{{ $a->user->initials }}</span>
                                    <div>
                                        <strong style="font-size:.9rem;color:var(--ink-900)">{{ $a->user->display_name }}</strong>
                                        <span class="stars" style="display:block">
                                            @for($i = 1; $i <= 5; $i++)
                                                <x-icon name="star" :fill="$i <= $a->rating" style="{{ $i <= $a->rating ? '' : 'color:var(--line)' }};width:12px;height:12px"/>
                                            @endfor
                                        </span>
                                    </div>
                                </div>
                                <span class="tiny muted">{{ $a->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="small" style="margin:10px 0 0;color:var(--ink-700)">{{ $a->body }}</p>

                            @if($a->reply)
                                <p class="small" style="margin:10px 0 0;padding-left:12px;border-left:2px solid var(--orange-300);color:var(--ink-700)">
                                    <strong>Réponse de {{ $pro->name }} :</strong> {{ $a->reply }}
                                </p>
                            @endif
                        </div>
                    @empty
                        <p class="muted small" style="margin:0;padding-top:14px;border-top:1px solid var(--line-soft)">
                            Aucun avis pour le moment. Soyez le premier à partager votre expérience.
                        </p>
                    @endforelse

                    @if($avis->count() > 5)
                        <a href="#avis" class="btn btn-outline btn-block" style="margin-top:14px">
                            Voir les {{ $pro['reviews'] }} avis
                        </a>
                    @endif
                </div>
            </div>

            <aside class="sticky stack">
                <div class="panel">
                    <h3 style="font-size:1rem;margin-bottom:14px">Coordonnées</h3>
                    <div class="stack" style="font-size:.9rem">
                        <div class="row" style="gap:10px">
                            <x-icon name="pin" style="color:var(--orange-600);flex:none"/>
                            <span>@if($pro['adresse']){{ $pro['adresse'] }}<br>@endif{{ $pro['cp'] }} {{ $pro['ville'] }}@if($pro['etranger'])<br>{{ $pro['pays_nom'] }}@endif</span>
                        </div>
                        @if($pro['tel'])
                            <div class="row" style="gap:10px">
                                <x-icon name="phone" style="color:var(--orange-600);flex:none"/>
                                <a href="tel:{{ preg_replace('/\s+/', '', $pro['tel']) }}">{{ $pro['tel'] }}</a>
                            </div>
                        @endif
                        @if($pro['email'])
                            <div class="row" style="gap:10px">
                                <x-icon name="mail" style="color:var(--orange-600);flex:none"/>
                                <a href="mailto:{{ $pro['email'] }}">{{ $pro['email'] }}</a>
                            </div>
                        @endif
                        @if($pro['site'])
                            <div class="row" style="gap:10px">
                                <x-icon name="globe" style="color:var(--orange-600);flex:none"/>
                                <a href="{{ Str::startsWith($pro['site'], ['http://', 'https://']) ? $pro['site'] : 'https://'.$pro['site'] }}"
                                   rel="noopener nofollow" target="_blank">{{ $pro['site'] }}</a>
                            </div>
                        @endif
                    </div>

                    <div style="margin-top:14px">
                        <x-carte :ville="$pro['ville']" :cp="$pro['cp']" :adresse="$pro['adresse']" :pays="$pro['pays']" ratio="4/3"/>
                    </div>

                    <div class="stack" style="margin-top:14px">
                        @if(auth()->check() && $pro->user_id && auth()->id() !== $pro->user_id)
                            <button class="btn btn-primary btn-block" data-reveal="contact-pro">
                                <x-icon name="message"/> Contacter
                            </button>
                            <div id="contact-pro" hidden>
                                <form method="post" action="{{ url('/professionnel/'.$pro->id.'/message') }}" class="stack">
                                    @csrf
                                    <textarea class="textarea @error('body') is-invalid @enderror" name="body" rows="4"
                                              required maxlength="4000">{{ old('body', 'Bonjour, je souhaiterais avoir des informations sur vos prestations.') }}</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>
                        @elseif(auth()->id() === $pro->user_id)
                            <a href="{{ url('/pro/fiche') }}" class="btn btn-primary btn-block">
                                <x-icon name="edit"/> Modifier ma fiche
                            </a>
                        @else
                            <a href="{{ url('/connexion') }}" class="btn btn-primary btn-block">
                                <x-icon name="message"/> Se connecter pour contacter
                            </a>
                        @endif

                        <a class="btn btn-outline btn-block" rel="noopener" target="_blank"
                           href="{{ \App\Support\Carte::itineraire($pro['adresse'], $pro['cp'], $pro['ville'], $pro['pays']) }}">
                            <x-icon name="map"/> Itinéraire
                        </a>
                    </div>
                </div>

                <div class="panel">
                    <h3 style="font-size:1rem;margin-bottom:10px">Horaires d'ouverture</h3>
                    @forelse($pro['horaires'] ?? [] as $jour => $h)
                        <div class="switch-row" style="padding:8px 0">
                            <span class="small {{ $h === 'Fermé' ? 'muted' : '' }}">{{ $jour }}</span>
                            <span class="small {{ $h === 'Fermé' ? 'muted' : 'strong' }}">{{ $h }}</span>
                        </div>
                    @empty
                        <p class="small muted" style="margin:0">Horaires non communiqués.</p>
                    @endforelse
                </div>

                @if(auth()->id() !== $pro->user_id)
                    <div class="panel" style="background:var(--orange-50);border-color:var(--orange-100)">
                        <h3 style="font-size:1rem">C'est votre établissement ?</h3>
                        <p class="small muted" style="margin:8px 0 12px">
                            Signalez-le nous : nous vous rattachons la fiche pour que vous puissiez
                            modifier vos informations, répondre aux avis et publier vos actualités.
                        </p>
                        <a href="{{ url('/contact?sujet=Revendication+de+fiche&ref='.$pro->ref) }}"
                           class="btn btn-dark btn-block btn-sm">Revendiquer cette fiche</a>
                    </div>
                @endif
            </aside>
        </div>
    </div>
</section>

@if($similaires)
    <section class="section section-alt">
        <div class="container">
            <div class="section-head">
                <div><span class="eyebrow">À proximité</span><h2 style="margin-top:8px">Autres professionnels de la même catégorie</h2></div>
                <a href="{{ $pro['trail'][0]['url'] }}" class="btn btn-outline">Toute la catégorie <x-icon name="arrow-right"/></a>
            </div>
            <div class="grid grid-3">
                @foreach($similaires as $item)<x-pro-card :pro="$item"/>@endforeach
            </div>
        </div>
    </section>
@endif

@endsection