@extends('layouts.user')
@section('title', 'Properties')
@php use Illuminate\Support\Str; @endphp

@section('content')
<div class="page">
  <div class="page-head">
    <div>
      <p class="eyebrow">Real Estate</p>
      <h1 class="page-title">Featured properties</h1>
      <p class="page-sub">Browse opportunities curated for the community.</p>
    </div>
    <div class="pill-stat">
      <span class="pill-stat__label">Wallet balance</span>
      <span class="pill-stat__value">${{ number_format($walletSummary['total_usd'] ?? 0, 2) }}</span>
    </div>
  </div>

  <div class="card-grid">
    @forelse($properties as $property)
      <div class="card property-card">
        <div class="property-card__media" style="background-image:url('{{ $property->hero_image }}');"></div>
        <div class="property-card__body">
          <div class="property-card__header">
            <div>
              <h3 class="property-title">{{ $property->title }}</h3>
              <p class="property-loc">{{ $property->location ?? 'Location TBD' }}</p>
            </div>
            <div class="property-price">${{ number_format($property->price, 2) }}</div>
          </div>
          <div class="property-meta">
            <span>{{ $property->bedrooms ?? '—' }} bd</span>
            <span>{{ $property->bathrooms ?? '—' }} ba</span>
            <span>{{ $property->area_sqft ? number_format($property->area_sqft) . ' sqft' : '—' }}</span>
            <span class="status status-{{ $property->status }}">{{ ucfirst($property->status) }}</span>
          </div>
          @if($property->description)
            <p class="property-desc">{{ Str::limit($property->description, 140) }}</p>
          @endif
          @if(is_array($property->gallery_images) && count($property->gallery_images))
            <div class="thumbs">
              @foreach(array_slice($property->gallery_images, 0, 3) as $img)
                <div class="thumb" style="background-image:url('{{ $img }}');"></div>
              @endforeach
            </div>
          @endif
        </div>
        <div class="property-card__actions">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#purchase{{ $property->id }}">Purchase</button>
          <a class="btn btn-ghost" href="{{ route('dashboard.wallet.deposit') }}">Deposit</a>
        </div>
      </div>

      <div class="modal fade" id="purchase{{ $property->id }}" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Buy {{ $property->title }}</h5>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              <p class="mb-2"><strong>Price:</strong> ${{ number_format($property->price, 2) }}</p>
              <p class="mb-3"><strong>Status:</strong> {{ ucfirst($property->status) }}</p>
              <div class="payment-box">
                <h6>Deposit to purchase</h6>
                <p class="text-muted mb-2">Make a crypto deposit, then confirm with support.</p>
                <div class="methods">
                  @forelse($depositMethods as $method)
                    <div class="method-card">
                      <div class="method-asset">{{ $method->asset }}</div>
                      <div class="method-net">{{ $method->network ?? 'Any network' }}</div>
                      <div class="method-addr">{{ $method->address }}</div>
                    </div>
                  @empty
                    <p class="text-muted mb-0">No deposit addresses configured yet.</p>
                  @endforelse
                </div>
                <a class="btn btn-sm btn-primary mt-3" href="{{ route('dashboard.wallet.deposit') }}">Go to Deposit</a>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

    @empty
      <div class="empty">No properties available yet.</div>
    @endforelse
  </div>
</div>
@endsection

@section('styles')
<style>
  .page { padding:32px; }
  .page-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
  .page-title { font-size:28px; font-weight:700; color:var(--text); }
  .page-sub { color:var(--text2); margin-top:6px; }
  .eyebrow { text-transform:uppercase; letter-spacing:0.08em; font-size:11px; color:var(--primary); font-weight:700; }
  .pill-stat { background:var(--surface); border:1px solid var(--border); padding:12px 16px; border-radius:12px; min-width:220px; }
  .pill-stat__label { display:block; font-size:12px; color:var(--text2); }
  .pill-stat__value { font-size:20px; font-weight:700; color:var(--text); }
  .card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
  .property-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:0 10px 30px rgba(15,21,53,0.06); }
  .property-card__media { height:160px; background-size:cover; background-position:center; background-color:var(--surface2); }
  .property-card__body { padding:16px; display:flex; flex-direction:column; gap:10px; }
  .property-card__header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
  .property-title { margin:0; font-size:18px; font-weight:700; }
  .property-loc { margin:2px 0 0; color:var(--text2); font-size:13px; }
  .property-price { font-size:18px; font-weight:700; color:var(--primary); }
  .property-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--text2); }
  .status { padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-weight:600; font-size:12px; text-transform:capitalize; }
  .status-available { color:#0f9b4c; border-color:#c8efd8; background:#f2fff7; }
  .status-pending { color:#d18b0d; border-color:#ffe4b3; background:#fff9ec; }
  .status-sold { color:#c53030; border-color:#ffd1d1; background:#fff2f2; }
  .property-desc { color:var(--text2); font-size:14px; margin:0; }
  .thumbs { display:flex; gap:8px; }
  .thumb { width:64px; height:48px; border-radius:10px; background-size:cover; background-position:center; border:1px solid var(--border); }
  .property-card__actions { padding:14px 16px 16px; display:flex; gap:10px; }
  .property-card .btn { flex:1; text-align:center; border-radius:10px; padding:10px 12px; font-weight:600; }
  .btn-ghost { border:1px solid var(--border); background:transparent; color:var(--text); }
  .empty { padding:32px; text-align:center; color:var(--text2); background:var(--surface); border:1px dashed var(--border); border-radius:12px; }
  .payment-box { border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface2); }
  .methods { display:grid; gap:10px; margin-top:10px; }
  .method-card { border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface); }
  .method-asset { font-weight:700; }
  .method-net { color:var(--text2); font-size:12px; }
  .method-addr { font-family: 'Space Grotesk', monospace; font-size:12px; margin-top:4px; word-break: break-all; }
  @media (max-width: 640px) { .page { padding:20px; } }
</style>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-target^="#purchase"]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var target = btn.getAttribute('data-target');
        if (!target) return;
        var el = document.querySelector(target);
        if (!el) return;
        if (window.bootstrap && window.bootstrap.Modal) {
          new bootstrap.Modal(el).show();
        } else if (window.$ && $(el).modal) {
          $(el).modal('show');
        }
      });
    });
  });
</script>
@endpush