@extends('layouts.app')
@section('title', $listing->title . ' — ShareSpace')
@section('meta', '$' . number_format($listing->price) . '/mo · ' . $listing->type . ' in ' . $listing->location)

@section('content')

<div class="detail-wrap">

  <div class="breadcrumb">
    <a href="{{ route('listings.index') }}">Rooms</a> ›
    <a href="{{ route('listings.index', ['type' => $listing->type]) }}">{{ $listing->type }}</a> ›
    <span>{{ $listing->location }}</span>
  </div>

  {{-- Hero image (gradient + emoji, matching the card style) --}}
  <div class="detail-hero {{ $listing->color_class }}">
    @if($listing->badge === 'new')
      <span class="badge-abs badge-new">New</span>
    @elseif($listing->badge === 'discount' && $listing->discount_percent)
      <span class="badge-abs badge-disc">-{{ $listing->discount_percent }}%</span>
    @endif
    {{ $listing->icon }}
  </div>

  <div class="detail-grid">

    {{-- ── Main column ──────────────────────────────────────────────────── --}}
    <div class="detail-main">
      <span class="detail-type-b">{{ $listing->type }}</span>
      <h1>{{ $listing->title }}</h1>
      <div class="detail-loc">📍 {{ $listing->location }}</div>

      <div class="spec-row">
        <div class="spec"><div class="k">Rooms</div><div class="v">🛏 {{ $listing->rooms }}</div></div>
        @if($listing->size)<div class="spec"><div class="k">Size</div><div class="v">📐 {{ $listing->size }}</div></div>@endif
        <div class="spec"><div class="k">Available</div><div class="v" style="color:var(--green)">{{ $listing->avail_label }}</div></div>
        @if($listing->min_stay)<div class="spec"><div class="k">Min. stay</div><div class="v">⏳ {{ $listing->min_stay }}</div></div>@endif
      </div>

      <h2 class="detail-section-title">About this place</h2>
      <p class="detail-desc">{{ $listing->description }}</p>

      @if($listing->amenities)
        <h2 class="detail-section-title">What this place offers</h2>
        <div class="amen-grid">
          @foreach($listing->amenities as $a)
            <div class="amen-box"><span class="ck">✓</span> {{ $a }}</div>
          @endforeach
        </div>
      @endif

      <h2 class="detail-section-title">Location</h2>
      <div id="detailMap"></div>
    </div>

    {{-- ── Booking sidebar ──────────────────────────────────────────────── --}}
    <div>
      <div class="book-card">
        <div class="book-price">
          ${{ number_format($listing->price) }}<span class="per">/mo</span>
          @if($listing->old_price)<span class="book-old">${{ number_format($listing->old_price) }}</span>@endif
        </div>
        <div class="book-meta">Available from <span>{{ $listing->avail_label }}</span></div>

        {{-- Enquiry form (posts nowhere yet — wire to a controller when ready) --}}
        <div class="book-field">
          <label>Your name</label>
          <input type="text" placeholder="Jane Doe">
        </div>
        <div class="book-field">
          <label>Email</label>
          <input type="email" placeholder="jane@email.com">
        </div>
        <div class="book-field">
          <label>Message</label>
          <textarea rows="3" placeholder="Hi, is this room still available?"></textarea>
        </div>
        <button type="button" class="book-btn" onclick="alert('Enquiry sent! (Hook this up to a controller to store it.)')">Request a viewing</button>
        <button type="button" class="book-btn secondary" onclick="alert('Chat feature coming soon.')">Message host</button>
      </div>
    </div>
  </div>

  {{-- ── Similar listings ─────────────────────────────────────────────────── --}}
  @if($similar->count())
    <h2 class="detail-section-title">Similar places</h2>
    <div class="similar-grid">
      @foreach($similar as $s)
        <a href="{{ route('listings.show', $s) }}" class="sim-card">
          <div class="sim-img {{ $s->color_class }}">{{ $s->icon }}</div>
          <div class="sim-body">
            <div class="sim-price">${{ number_format($s->price) }}<span style="font-size:.72rem;font-weight:400;color:var(--muted)">/mo</span></div>
            <div class="sim-title">{{ $s->title }}</div>
            <div class="sim-loc">📍 {{ $s->location }}</div>
          </div>
        </a>
      @endforeach
    </div>
  @endif

</div>
@endsection

@push('scripts')
<script>
const LAT = {{ $listing->latitude }}, LNG = {{ $listing->longitude }};
const dmap = L.map('detailMap').setView([LAT, LNG], 14);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
  {attribution:'&copy; OpenStreetMap &copy; CARTO', maxZoom:19}).addTo(dmap);
const pin = document.createElement('div');
pin.className='pp on';
pin.textContent='${{ $listing->price >= 1000 ? number_format($listing->price/1000,1).'k' : $listing->price }}';
L.marker([LAT,LNG],{icon:L.divIcon({html:pin,className:'',iconAnchor:[22,14]})}).addTo(dmap);
</script>
@endpush