@extends('layouts.app')
@section('title', 'Rooms for Rent in Los Angeles, CA | ShareSpace')
@section('meta', 'Browse ' . $total . ' rooms, studios and apartments for rent in Los Angeles. Filter by price, type, move-in date and amenities.')

@section('content')

<form method="GET" action="{{ route('listings.index') }}" class="filter-form" id="filterForm">

  {{-- ── Search bar ─────────────────────────────────────────────────────── --}}
  <div class="search-bar-wrap">
    <div class="search-bar">
      <div class="search-input">
        <span style="color:var(--muted)">📍</span>
        <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="City or neighborhood..."/>
      </div>
      <input type="date" name="move_in" value="{{ $filters['move_in'] }}"
             class="filter-btn" style="cursor:pointer;" title="Move-in date"/>
      <button type="submit" class="search-submit">Search</button>
    </div>
  </div>

  {{-- ── View toggle + sort ─────────────────────────────────────────────── --}}
  <div class="view-toggle-bar">
    <div style="display:flex;align-items:center;">
      <div class="view-tabs">
        <button type="button" class="view-tab active" id="btnList" onclick="switchView('list')">
          <svg width="13" height="13" viewBox="0 0 13 13" fill="currentColor"><rect y="0" width="13" height="2.3" rx="1"/><rect y="5" width="13" height="2.3" rx="1"/><rect y="10" width="13" height="2.3" rx="1"/></svg>
          List View
        </button>
        <button type="button" class="view-tab" id="btnMap" onclick="switchView('map')">
          <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6.5 1C4.57 1 3 2.57 3 4.5c0 3.25 3.5 7.5 3.5 7.5S10 7.75 10 4.5C10 2.57 8.43 1 6.5 1z"/><circle cx="6.5" cy="4.5" r="1.4"/></svg>
          Map View
        </button>
      </div>
      <span class="result-info"><strong>{{ $total }}</strong> {{ Str::plural('room', $total) }} in Los Angeles</span>
    </div>
    <div class="sort-row">
      <span class="sort-label">Sort by:</span>
      <select class="sort-select" name="sort" onchange="document.getElementById('filterForm').submit()">
        <option value="price_asc"  @selected($filters['sort']==='price_asc')>Price: Low to High</option>
        <option value="price_desc" @selected($filters['sort']==='price_desc')>Price: High to Low</option>
        <option value="newest"     @selected($filters['sort']==='newest')>Newest first</option>
        <option value="available"  @selected($filters['sort']==='available')>Available soonest</option>
      </select>
    </div>
  </div>

  {{-- ── LIST VIEW ──────────────────────────────────────────────────────── --}}
  <div id="listView">
    <aside class="sidebar">
      <div class="filter-card">
        <h4>Property Type</h4>
        <div class="type-grid">
          @foreach($typeOptions as $t)
            <div class="type-chip {{ $filters['type']===$t ? 'active' : '' }}"
                 data-type="{{ $t }}" onclick="pickType(this)">{{ $t }}</div>
          @endforeach
        </div>
        <input type="hidden" name="type" id="typeInput" value="{{ $filters['type'] }}">
      </div>

      <div class="filter-card">
        <h4>Price Range (USD/mo)</h4>
        <div class="price-range">
          <input type="number" name="min_price" placeholder="Min" value="{{ $filters['min_price'] }}"/>
          <input type="number" name="max_price" placeholder="Max" value="{{ $filters['max_price'] }}"/>
        </div>
      </div>

      <div class="filter-card">
        <h4>Amenities</h4>
        <div class="amenity-list">
          @foreach($amenityOptions as $a)
            <label class="amenity-item">
              <input type="checkbox" name="amenities[]" value="{{ $a }}"
                     @checked(in_array($a, (array) $filters['amenities']))/> {{ $a }}
            </label>
          @endforeach
        </div>
        <button type="submit" class="apply-btn">Apply Filters</button>
      </div>
    </aside>

    <main class="listing-area">
      @if($listings->count())
        <div class="cards-grid" id="cardsGrid">
          @foreach($listings as $l)
            <div class="listing-card" onclick="window.location='{{ route('listings.show', $l) }}'">
              <div class="card-image {{ $l->color_class }}">
                @if($l->badge === 'new')
                  <span class="card-badge badge-new">New</span>
                @elseif($l->badge === 'discount' && $l->discount_percent)
                  <span class="card-badge badge-disc">-{{ $l->discount_percent }}%</span>
                @endif
                <div class="thumb">{{ $l->icon }}</div>
                <div class="dots"><div class="dot on"></div><div class="dot"></div><div class="dot"></div></div>
              </div>
              <div class="card-body">
                <div>
                  <div class="price-row">
                    <span class="price">${{ number_format($l->price) }}</span>
                    <span class="per">/mo</span>
                    @if($l->old_price)<span class="old">${{ number_format($l->old_price) }}</span>@endif
                  </div>
                  <span class="type-b">{{ $l->type }}</span>
                  <div class="ctitle">{{ $l->title }}</div>
                  <div class="cloc">📍 {{ $l->location }}</div>
                  <div class="details">
                    <span class="pill">🛏 {{ $l->rooms }} {{ Str::plural('room', $l->rooms) }}</span>
                    @if($l->size)<span class="pill">📐 {{ $l->size }}</span>@endif
                    @if($l->min_stay)<span class="pill">⏳ Min. {{ $l->min_stay }}</span>@endif
                  </div>
                  <div class="tags">
                    @foreach($l->amenities ?? [] as $a)<span class="tag">{{ $a }}</span>@endforeach
                  </div>
                </div>
                <div class="cfooter">
                  <div class="avail">Available: <span>{{ $l->avail_label }}</span></div>
                  <div>
                    <button type="button" class="sbtn" onclick="event.stopPropagation();toggleSave(this)">♡</button>
                    <button type="button" class="vbtn" onclick="event.stopPropagation();window.location='{{ route('listings.show', $l) }}'">View</button>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        </div>

        {{-- Pagination --}}
        <div class="pagination">
          {{-- Prev --}}
          <a class="pg {{ $listings->onFirstPage() ? 'disabled' : '' }}"
             href="{{ $listings->previousPageUrl() ?: '#' }}">‹</a>
          @foreach($listings->getUrlRange(1, $listings->lastPage()) as $page => $url)
            <a class="pg {{ $page === $listings->currentPage() ? 'on' : '' }}" href="{{ $url }}">{{ $page }}</a>
          @endforeach
          {{-- Next --}}
          <a class="pg {{ !$listings->hasMorePages() ? 'disabled' : '' }}"
             href="{{ $listings->nextPageUrl() ?: '#' }}">›</a>
        </div>
      @else
        <div class="no-results">
          <h3>No rooms match your filters</h3>
          <p>Try widening your price range or clearing some filters.<br>
             <a href="{{ route('listings.index') }}">Reset all filters</a></p>
        </div>
      @endif
    </main>
  </div>
</form>

{{-- ── MAP VIEW ─────────────────────────────────────────────────────────── --}}
<div id="mapView">
  <div class="map-split">
    <div class="map-list-panel">
      <div class="map-list-inner" id="mapCards"></div>
    </div>
    <div class="map-panel">
      <div id="leafletMap"></div>
    </div>
  </div>
</div>

<div class="about-section" id="aboutSection">
  <div class="about-card">
    <h2>Rooms for Rent in Los Angeles, CA</h2>
    <p>Los Angeles is known for its chilled-out, laid-back vibe. This eclectic city — home to celebrities, sunshine, and the iconic Hollywood sign — has a lot to offer. As the second-biggest city in the United States, rooms for rent in Los Angeles are in abundance. From beachside Santa Monica to vibrant Silver Lake, Los Feliz, and the Arts District, LA has a vast amount of living options to fit every lifestyle and budget.</p>
  </div>
</div>

@endsection

@push('scripts')
<script>
// Listings for the map, provided by Laravel (already filtered server-side)
const DATA = @json($mapListings);

/* ── Property-type chip picker (updates hidden input, submits) ─────────── */
function pickType(el){
  const input = document.getElementById('typeInput');
  const already = el.classList.contains('active');
  document.querySelectorAll('.type-chip').forEach(c=>c.classList.remove('active'));
  if(already){ input.value=''; }
  else { el.classList.add('active'); input.value = el.dataset.type; }
  document.getElementById('filterForm').submit();
}

function toggleSave(btn){
  const on = btn.textContent === '♥';
  btn.textContent = on ? '♡' : '♥';
  btn.style.color = on ? '' : 'var(--accent)';
  btn.style.borderColor = on ? '' : 'var(--accent)';
}

/* ── Map (Leaflet) ─────────────────────────────────────────────────────── */
let map, markers = {}, activePin = null, mapReady = false;

function initMap(){
  const center = DATA.length ? [DATA[0].lat, DATA[0].lng] : [34.052, -118.34];
  map = L.map('leafletMap').setView([34.052, -118.34], 11);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
    {attribution:'&copy; OpenStreetMap &copy; CARTO', maxZoom:19}).addTo(map);

  DATA.forEach(l=>{
    const el = document.createElement('div');
    el.className='pp';
    el.textContent = l.pinLabel;
    const icon = L.divIcon({html:el, className:'', iconAnchor:[22,14]});
    const m = L.marker([l.lat,l.lng],{icon}).addTo(map);
    m.on('click',()=>activatePin(l.id));
    markers[l.id]={marker:m, el};
  });

  if(DATA.length){
    const grp = L.featureGroup(Object.values(markers).map(o=>o.marker));
    map.fitBounds(grp.getBounds().pad(0.2));
  }
}

function activatePin(id){
  if(activePin && markers[activePin]) markers[activePin].el.classList.remove('on');
  activePin = id;
  if(markers[id]) markers[id].el.classList.add('on');
  const mc = document.getElementById('mc'+id);
  if(mc){ document.querySelectorAll('.map-card').forEach(c=>c.classList.remove('on')); mc.classList.add('on'); mc.scrollIntoView({behavior:'smooth',block:'nearest'}); }
  const l = DATA.find(x=>x.id===id);
  if(l) map.flyTo([l.lat,l.lng],14,{duration:0.8});
}

function renderMapCards(){
  document.getElementById('mapCards').innerHTML = DATA.length ? DATA.map(l=>`
    <div class="map-card" id="mc${l.id}" onclick="activatePin(${l.id})">
      <div class="mc-img ${l.colorClass}">${l.icon}</div>
      <div class="mc-body">
        <div class="mc-price">$${l.price.toLocaleString()}<span style="font-size:.7rem;font-weight:400;color:var(--muted)">/mo</span></div>
        <div class="mc-title">${l.title}</div>
        <div class="mc-loc">📍 ${l.loc}</div>
        <div class="mc-tags">${l.amenities.map(a=>`<span class="mc-tag">${a}</span>`).join('')}</div>
        <a href="${l.url}" style="display:inline-block;margin-top:6px;font-size:.72rem;color:var(--accent);font-weight:600;text-decoration:none;">View details →</a>
      </div>
    </div>`).join('') : '<p style="padding:1rem;color:var(--muted);font-size:.85rem;">No rooms match your filters.</p>';
}

function switchView(v){
  const lv=document.getElementById('listView'), mv=document.getElementById('mapView');
  const ab=document.getElementById('aboutSection');
  document.getElementById('btnList').classList.toggle('active', v==='list');
  document.getElementById('btnMap').classList.toggle('active', v==='map');
  if(v==='map'){
    lv.style.display='none'; mv.style.display='block'; ab.style.display='none';
    if(!mapReady){ renderMapCards(); initMap(); mapReady=true; }
    else setTimeout(()=>map.invalidateSize(),60);
  } else {
    lv.style.display='flex'; mv.style.display='none'; ab.style.display='block';
  }
}
</script>
@endpush