@extends('layouts.app')
@section('title', $bien->titre)

@section('content')

<section class="page-hero" style="padding:6rem 0 3rem;">
    <div class="container page-hero-inner">
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Accueil</a>
            <span class="breadcrumb-sep">/</span>
            <a href="{{ route('biens.index') }}">Biens</a>
            <span class="breadcrumb-sep">/</span>
            <span>{{ $bien->titre }}</span>
        </div>
    </div>
</section>

<section class="section-sm">
    <div class="container">
        <div class="detail-layout">

            {{-- ══ Contenu principal ══ --}}
            <div class="detail-main">

                {{-- Galerie d'images --}}
                @php
                    $imageUrls = $bien->images->map(fn($i) => $i->url)->values()->toArray();
                    if (empty($imageUrls) && $bien->image_url) $imageUrls = [$bien->image_url];
                @endphp

                @if(count($imageUrls) > 0)
                    @include('components.image-gallery', ['images' => $imageUrls, 'alt' => $bien->titre, 'emoji' => $bien->emoji])
                @else
                    <div class="detail-image-placeholder" style="height:380px;background:linear-gradient(135deg,var(--navy),var(--navy-dark));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:6rem;margin-bottom:2rem;">
                        {{ $bien->emoji }}
                    </div>
                @endif

                {{-- Header --}}
                <div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;">
                    <div>
                        <div style="display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap;">
                            <span class="badge {{ $bien->service_type === 'Location' ? 'badge-navy' : 'badge-gold' }}">{{ $bien->service_type }}</span>
                            <span class="badge badge-gray">{{ $bien->type }}</span>
                            <span class="badge {{ $bien->statut === 'Disponible' ? 'badge-green' : ($bien->statut === 'Loué' ? 'badge-blue' : 'badge-red') }}">{{ $bien->statut }}</span>
                            @if($bien->featured)<span class="badge badge-gold">★ Coup de cœur</span>@endif
                        </div>
                        <h1 style="font-size:clamp(1.4rem,4vw,2.2rem);">{{ $bien->titre }}</h1>
                        @if($bien->localisation)
                            <p style="color:var(--text-light);margin-top:.5rem;display:flex;align-items:center;gap:.35rem;">
                                <span><i class="fa-solid fa-location-dot"></i></span> {{ $bien->localisation }}
                            </p>
                        @endif
                    </div>
                    <div style="text-align:right;flex-shrink:0;">
                        <div style="font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:700;color:var(--navy);">
                            {{ $bien->prix ?? 'Prix sur demande' }}
                        </div>
                    </div>
                </div>

                {{-- Specs --}}
                <div class="detail-specs">
                    @if($bien->surface)
                        <div class="detail-spec"><div class="detail-spec-icon"><i class="fa-solid fa-ruler-combined"></i></div><div class="detail-spec-label">Surface</div><div class="detail-spec-value">{{ $bien->surface }}</div></div>
                    @endif
                    @if($bien->pieces)
                        <div class="detail-spec"><div class="detail-spec-icon"><i class="fa-solid fa-bed"></i></div><div class="detail-spec-label">Pièces</div><div class="detail-spec-value">{{ $bien->pieces }}</div></div>
                    @endif
                    <div class="detail-spec"><div class="detail-spec-icon"><i class="fa-solid fa-tag"></i></div><div class="detail-spec-label">Type</div><div class="detail-spec-value">{{ $bien->type }}</div></div>
                    <div class="detail-spec"><div class="detail-spec-icon">@if($bien->statut === 'Disponible')<i class="fa-solid fa-circle-check"></i>@else<i class="fa-solid fa-lock"></i>@endif</div><div class="detail-spec-label">Statut</div><div class="detail-spec-value">{{ $bien->statut }}</div></div>
                </div>

                @if($bien->description)
                    <div style="background:var(--off-white);border-radius:var(--radius);padding:2rem;margin-top:1.5rem;">
                        <h3 style="margin-bottom:1rem;font-size:1.2rem;">Description</h3>
                        <p style="color:var(--text-light);line-height:1.85;">{{ $bien->description }}</p>
                    </div>
                @endif

                @if($biensRelies->count())
                    <div style="margin-top:3rem;">
                        <h3 style="margin-bottom:1.5rem;">Biens similaires</h3>
                        <div class="grid-3">
                            @foreach($biensRelies as $b)
                                @include('components.bien-card', ['bien' => $b])
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            {{-- ══ Sidebar ══ --}}
            <div class="detail-sidebar">
                <div class="sidebar-card">
                    <h4><i class="fa-solid fa-comment-dots"></i> Intéressé par ce bien ?</h4>
                    <p style="color:var(--text-light);font-size:.88rem;margin-bottom:1.25rem;">Contactez-nous pour une visite ou plus d'informations.</p>
                    <form action="{{ route('contact.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="sujet" value="Demande - {{ $bien->titre }}">
                        <div class="form-group"><label class="form-label">Nom *</label><input type="text" name="nom" class="form-control" placeholder="Votre nom" required></div>
                        <div class="form-group"><label class="form-label">Téléphone *</label><input type="tel" name="telephone" class="form-control" placeholder="+224 6XX XXX XXX" required></div>
                        <div class="form-group"><label class="form-label">Message</label><textarea name="message" class="form-control" rows="3" required>Je suis intéressé(e) par le bien : {{ $bien->titre }}</textarea></div>
                        <button type="submit" class="btn btn-primary w-full" style="justify-content:center;"><i class="fa-solid fa-paper-plane"></i> Envoyer</button>
                    </form>
                </div>
                <div class="sidebar-card" style="background:var(--navy);color:white;">
                    <h4 style="color:white;border-bottom-color:rgba(255,255,255,.15);"><i class="fa-solid fa-phone"></i> Appel direct</h4>
                    <p style="color:rgba(255,255,255,.75);font-size:.88rem;margin-bottom:1rem;">Lun – Sam : 8h00 – 18h00</p>
                    <a href="tel:+224620000000" class="btn btn-primary w-full" style="justify-content:center;margin-bottom:.5rem;">+224 620 000 000</a>
                    <a href="https://wa.me/224620000000?text={{ urlencode('Bonjour, je suis intéressé par : '.$bien->titre) }}" target="_blank" class="btn btn-outline-white btn-sm w-full" style="justify-content:center;"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection