@extends('layouts.app', ['title' => term('nav_properties','Inmuebles')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-property"><i class="fa-solid fa-plus"></i>Agregar propiedad</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-house"></i><div class="metric-val">{{ $properties->total() }}</div><div class="metric-label">Propiedades</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $properties->getCollection()->where('status','Disponible')->count() }}</div><div class="metric-label">Disponibles</div></div>
    <div class="metric"><i class="fa-solid fa-eye"></i><div class="metric-val text-gold">{{ $properties->getCollection()->sum('landing_views') }}</div><div class="metric-label">Visitas a landings</div></div>
    <div class="metric"><i class="fa-solid fa-coins"></i><div class="metric-val">${{ number_format($properties->getCollection()->sum('price'),0) }}</div><div class="metric-label">Valor de inmuebles</div></div>
</div>

<div class="toolbar">
    <form class="filter-bar" method="get">
        <div class="fb-search">
            <span class="fb-search-icon"><i class="fa-solid fa-magnifying-glass"></i></span>
            <input name="search" placeholder="Buscar inmueble por nombre, ubicación, slug…" value="{{ request('search') }}">
        </div>
        <div class="fb-divider"></div>
        <label class="fb-field">
            <span class="fb-label">Tipo</span>
            <select name="type"><option value="">Todos</option>@foreach($types as $type)<option @selected(request('type') === $type)>{{ $type }}</option>@endforeach</select>
        </label>
        <label class="fb-field">
            <span class="fb-label">Estado</span>
            <select name="status"><option value="">Todos</option>@foreach($statuses as $status)<option @selected(request('status') === $status)>{{ $status }}</option>@endforeach</select>
        </label>
        <label class="fb-field">
            <span class="fb-label">Proyecto</span>
            <select name="project_id"><option value="">Todos</option>@foreach($projects as $project)<option value="{{ $project->id }}" @selected(request('project_id') == $project->id)>{{ $project->name }}</option>@endforeach</select>
        </label>
        <label class="fb-field" style="min-width:auto">
            <span class="fb-label">Destacadas</span>
            <label class="fb-toggle"><input type="checkbox" name="featured" value="1" @checked(request('featured'))> <span>⭐ Sólo destacadas</span></label>
        </label>
        <div class="fb-actions">
            <button class="btn btn-primary" type="submit"><i class="fa-solid fa-magnifying-glass"></i> Buscar</button>
            @if(request()->hasAny(['search','type','status','project_id','featured']))<a class="btn btn-ghost" href="{{ route('properties.index') }}" data-tip="Limpiar"><i class="fa-solid fa-xmark"></i></a>@endif
        </div>
    </form>
    <div class="toolbar-actions">
        <a class="btn btn-info" href="{{ route('properties.map') }}"><i class="fa-solid fa-map-location-dot"></i>Mapa</a>
        <button class="btn" type="button" onclick="downloadPDF('properties-print','Inmuebles.pdf')" data-tip="PDF lista"><i class="fa-solid fa-file-pdf"></i></button>
    </div>
</div>

<div id="properties-print">
    <div class="grid g3 stagger">
        @forelse($properties as $property)
            <div class="card" style="padding:0;overflow:hidden;position:relative">
                @if($property->featured)
                    <div style="position:absolute;top:12px;right:12px;z-index:3;background:linear-gradient(135deg,#e6c971,#8b6914);color:#111;padding:5px 10px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.05em;box-shadow:0 10px 18px -6px rgba(201,168,76,.55)"><i class="fa-solid fa-star"></i> DESTACADA</div>
                @endif
                <div style="position:relative;height:180px;background:linear-gradient(135deg,#ffffff,#ffffff);overflow:hidden">
                    @if($property->cover_image)
                        <img src="{{ $property->cover_image }}" alt="" style="width:100%;height:100%;object-fit:cover">
                    @else
                        <div style="display:grid;place-items:center;width:100%;height:100%;color:rgba(201,168,76,.3);font-size:54px"><i class="fa-solid fa-house"></i></div>
                    @endif
                    <span class="badge" style="position:absolute;bottom:10px;left:10px;backdrop-filter:blur(6px);background:color-mix(in srgb,{{ $property->status_color }} 25%,rgba(0,0,0,.5));color:#fff;border:1px solid color-mix(in srgb,{{ $property->status_color }} 50%,transparent)">{{ $property->status }}</span>
                    @if($property->media->count() > 1)
                        <span class="pill" style="position:absolute;bottom:10px;right:10px;backdrop-filter:blur(6px);background:rgba(0,0,0,.55);color:#fff;border:0"><i class="fa-solid fa-images"></i> {{ $property->media->count() }}</span>
                    @endif
                </div>
                <div style="padding:16px">
                    <div class="row between" style="margin-bottom:4px">
                        <div class="card-title" style="flex:1">{{ $property->name }}</div>
                        @if($property->landing_views > 0)
                            <span class="pill" style="font-size:10px"><i class="fa-solid fa-eye"></i> {{ $property->landing_views }}</span>
                        @endif
                    </div>
                    <div class="sub">{{ $property->location ?: '—' }}{{ $property->project ? ' · '.$property->project->name : '' }}</div>
                    <div class="metric-val text-gold" style="font-size:23px;margin-top:8px">${{ number_format($property->price, 0) }}</div>
                    <div class="sub" style="margin-top:4px">{{ $property->type }} · {{ rtrim(rtrim(number_format($property->area_m2,2),'0'),'.') }} m² · {{ $property->bedrooms ?? 0 }} rec · {{ $property->bathrooms ?? 0 }} baños</div>
                    @if($property->advisor)
                        <div class="sub" style="margin-top:6px"><i class="fa-solid fa-user-tie text-gold"></i> {{ $property->advisor->name }}</div>
                    @endif
                    <div class="row between" style="margin-top:14px;align-items:center;gap:8px">
                        <a class="btn btn-sm btn-primary" href="{{ $property->landing_url }}" target="_blank" rel="noopener" style="flex:1"><i class="fa-solid fa-globe"></i>Ver landing</a>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más acciones"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                <div class="group-label">Propiedad</div>
                                <a href="{{ route('properties.sheet', $property) }}" target="_blank"><i class="fa-solid fa-file-pdf"></i> Ficha técnica PDF</a>
                                <button type="button" data-modal-open="modal-share-{{ $property->id }}"><i class="fa-solid fa-share-nodes"></i> Compartir / QR</button>
                                <button type="button" data-modal-open="modal-edit-property-{{ $property->id }}"><i class="fa-solid fa-pen"></i> Editar propiedad</button>
                                <a href="{{ route('properties.qr', $property) }}" target="_blank"><i class="fa-solid fa-qrcode"></i> Descargar QR</a>
                                <hr>
                                <form method="post" action="{{ route('properties.destroy', $property) }}" onsubmit="return confirm('¿Eliminar propiedad?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="card" style="grid-column:1/-1"><div class="sub" style="text-align:center;padding:24px">Sin propiedades con esos filtros.</div></div>
        @endforelse
    </div>
</div>
<div style="margin-top:14px">{{ $properties->links() }}</div>
@endsection

@section('modals')
{{-- ============ AGREGAR PROPIEDAD ============ --}}
<div class="modal-backdrop" id="modal-add-property">
    <div class="modal wide">
        <div class="modal-head"><h3><i class="fa-solid fa-house text-gold"></i> Nueva propiedad</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('properties.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid three">
                    <label>Nombre / clave *<input name="name" required></label>
                    <label>Tipo *<select name="type">@foreach($types as $type)<option>{{ $type }}</option>@endforeach</select></label>
                    <label>Estado *<select name="status">@foreach($statuses as $status)<option>{{ $status }}</option>@endforeach</select></label>
                    <label>Proyecto<select name="project_id"><option value="">Independiente</option>@foreach($projects as $project)<option value="{{ $project->id }}">{{ $project->name }}</option>@endforeach</select></label>
                    <label>Asesor responsable<select name="advisor_id"><option value="">Sin asignar</option>@foreach($advisors as $a)<option value="{{ $a->id }}">{{ $a->name }}</option>@endforeach</select></label>
                    <label>Año construcción<input name="year_built" type="number" min="1800" max="{{ date('Y')+5 }}"></label>
                    <label>Precio *<input name="price" type="number" step="0.01" required></label>
                    <label>Superficie m²<input name="area_m2" type="number" step="0.01"></label>
                    <label>Etapa<input name="stage" value="Disponible"></label>
                    <label>Recamaras<input name="bedrooms" type="number" min="0"></label>
                    <label>Baños<input name="bathrooms" type="number" step="0.5" min="0"></label>
                    <label>Estacionamientos<input name="parking_spaces" type="number" min="0"></label>
                    <label style="grid-column:1/-1">Ubicación<input name="location" placeholder="Av. México 123, Tepic, Nayarit"></label>
                    <label>Latitud<input name="latitude" type="number" step="0.0000001" min="-90" max="90" placeholder="21.5039"></label>
                    <label>Longitud<input name="longitude" type="number" step="0.0000001" min="-180" max="180" placeholder="-104.8943"></label>
                    <label style="display:flex;align-items:flex-end"><button type="button" class="btn btn-sm btn-info" onclick="geocodeNearbyForm(this)"><i class="fa-solid fa-location-crosshairs"></i>Auto-geo</button></label>
                    <label style="grid-column:1/-1">Slug URL (opcional, se auto-genera)<input name="slug" pattern="[a-z0-9-]+" placeholder="ej. casa-valle-del-sol-14a"></label>
                    <label>URL Video (YouTube)<input name="video_url" type="url" placeholder="https://youtube.com/watch?v=..."></label>
                    <label>URL Tour 360 (Matterport, Kuula)<input name="tour_360_url" type="url" placeholder="https://my.matterport.com/show/?m=..."></label>
                    <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px;padding:8px 12px;background:rgba(201,168,76,.08);border-radius:10px;align-self:end">
                        <input type="checkbox" name="featured" value="1" style="width:auto"> ⭐ Marcar como destacada
                    </label>
                    <label style="grid-column:1/-1">Descripción<textarea name="description" rows="3" placeholder="Lo que hace única esta propiedad..."></textarea></label>
                </div>

                {{-- Amenidades --}}
                <fieldset style="grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Amenidades incluidas</legend>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin-top:6px">
                        @foreach($amenities as $key => $a)
                            <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px;font-size:13px;padding:6px 8px;border-radius:7px;cursor:pointer" onclick="this.style.background='rgba(201,168,76,.08)';setTimeout(()=>this.style.background='',200)">
                                <input type="checkbox" name="amenities[]" value="{{ $key }}" style="width:auto"> <i class="fa-solid {{ $a['icon'] }} text-gold" style="width:18px;text-align:center"></i> {{ $a['label'] }}
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar propiedad</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
async function geocodeNearbyForm(btn) {
    const form = btn.closest('form');
    if (!form) return;
    const location = form.querySelector('[name=location]')?.value?.trim();
    if (!location) { toast('Captura primero la ubicación', 'bad'); return; }
    const original = btn.innerHTML;
    btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>';
    try {
        const r = await fetch('https://nominatim.openstreetmap.org/search?format=json&limit=1&q=' + encodeURIComponent(location));
        const data = await r.json();
        if (!data.length) {
            toast('No se encontró ubicación. Pega lat/lng manualmente.', 'bad');
        } else {
            form.querySelector('[name=latitude]').value = parseFloat(data[0].lat).toFixed(7);
            form.querySelector('[name=longitude]').value = parseFloat(data[0].lon).toFixed(7);
            toast('Coordenadas: ' + data[0].display_name.substring(0, 70), 'ok');
        }
    } catch (e) { toast('Error: ' + e.message, 'bad'); }
    finally { btn.disabled = false; btn.innerHTML = original; }
}

function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        toast('Copiado', 'ok');
        if (btn) { const o = btn.innerHTML; btn.innerHTML = '<i class="fa-solid fa-check"></i>'; setTimeout(() => btn.innerHTML = o, 1500); }
    });
}
</script>
@endpush

{{-- ============ EDITAR PROPIEDAD ============ --}}
@foreach($properties as $property)
<div class="modal-backdrop" id="modal-edit-property-{{ $property->id }}">
    <div class="modal wide">
        <div class="modal-head">
            <h3><i class="fa-solid fa-pen text-gold"></i> Editar — {{ $property->name }}</h3>
            <button class="modal-close" type="button" data-modal-close>&times;</button>
        </div>
        <div class="modal-body">
            <form id="form-edit-prop-{{ $property->id }}" method="post" action="{{ route('properties.update', $property) }}">
                @csrf @method('PUT')
                <div class="form-grid three">
                    <label>Nombre *<input name="name" value="{{ $property->name }}" required></label>
                    <label>Tipo *<select name="type">@foreach($types as $type)<option @selected($property->type === $type)>{{ $type }}</option>@endforeach</select></label>
                    <label>Estado *<select name="status">@foreach($statuses as $status)<option @selected($property->status === $status)>{{ $status }}</option>@endforeach</select></label>
                    <label>Proyecto<select name="project_id"><option value="">Independiente</option>@foreach($projects as $project)<option value="{{ $project->id }}" @selected($property->project_id === $project->id)>{{ $project->name }}</option>@endforeach</select></label>
                    <label>Asesor responsable<select name="advisor_id"><option value="">Sin asignar</option>@foreach($advisors as $a)<option value="{{ $a->id }}" @selected($property->advisor_id == $a->id)>{{ $a->name }}</option>@endforeach</select></label>
                    <label>Año construcción<input name="year_built" type="number" min="1800" max="{{ date('Y')+5 }}" value="{{ $property->year_built }}"></label>
                    <label>Precio *<input name="price" type="number" step="0.01" value="{{ $property->price }}" required></label>
                    <label>Superficie m²<input name="area_m2" type="number" step="0.01" value="{{ $property->area_m2 }}"></label>
                    <label>Etapa<input name="stage" value="{{ $property->stage }}"></label>
                    <label>Recamaras<input name="bedrooms" type="number" min="0" value="{{ $property->bedrooms }}"></label>
                    <label>Baños<input name="bathrooms" type="number" step="0.5" min="0" value="{{ $property->bathrooms }}"></label>
                    <label>Estacionamientos<input name="parking_spaces" type="number" min="0" value="{{ $property->parking_spaces }}"></label>
                    <label style="grid-column:1/-1">Ubicación<input name="location" value="{{ $property->location }}"></label>
                    <label>Latitud<input name="latitude" type="number" step="0.0000001" min="-90" max="90" value="{{ $property->latitude }}"></label>
                    <label>Longitud<input name="longitude" type="number" step="0.0000001" min="-180" max="180" value="{{ $property->longitude }}"></label>
                    <label style="display:flex;align-items:flex-end"><button type="button" class="btn btn-sm btn-info" onclick="geocodeNearbyForm(this)"><i class="fa-solid fa-location-crosshairs"></i>Auto-geo</button></label>
                    <label style="grid-column:1/-1">Slug URL (de la landing)<input name="slug" pattern="[a-z0-9-]+" value="{{ $property->slug }}"></label>
                    <label>URL Video (YouTube)<input name="video_url" type="url" value="{{ $property->video_url }}" placeholder="https://youtube.com/watch?v=..."></label>
                    <label>URL Tour 360<input name="tour_360_url" type="url" value="{{ $property->tour_360_url }}" placeholder="Matterport, Kuula..."></label>
                    <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px;padding:8px 12px;background:rgba(201,168,76,.08);border-radius:10px;align-self:end">
                        <input type="checkbox" name="featured" value="1" @checked($property->featured) style="width:auto"> ⭐ Destacada
                    </label>
                    <label style="grid-column:1/-1">Descripción<textarea name="description" rows="4">{{ $property->description }}</textarea></label>
                </div>

                <fieldset style="border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-top:14px">
                    <legend class="sub" style="padding:0 8px;color:var(--gold);font-weight:600">Amenidades</legend>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px">
                        @foreach($amenities as $key => $a)
                            <label class="row" style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);gap:8px;font-size:13px;padding:6px 8px;border-radius:7px">
                                <input type="checkbox" name="amenities[]" value="{{ $key }}" @checked(in_array($key, $property->amenities ?? [], true)) style="width:auto"> <i class="fa-solid {{ $a['icon'] }} text-gold" style="width:18px;text-align:center"></i> {{ $a['label'] }}
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            </form>{{-- /form principal de edición --}}

                {{-- Multimedia: Portada / Galería / Renders / Videos --}}
                @php
                    $media = $property->media;
                    $cover = $media->firstWhere('role','cover') ?? $media->where('type','image')->first();
                    $gallery = $media->where('type','image')->filter(fn($m) => ($m->role ?? 'gallery') !== 'render' && (! $cover || $m->id !== $cover->id))->values();
                    $renders = $media->filter(fn($m) => ($m->role ?? null) === 'render')->values();
                    $videos = $media->where('type','video')->values();
                @endphp

                <div style="margin-top:18px;padding:14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px">
                    <div class="sub" style="color:var(--gold);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em"><i class="fa-solid fa-images"></i> Multimedia · {{ $media->count() }} archivos</div>

                    {{-- ====== PORTADA ====== --}}
                    <div style="margin-bottom:14px">
                        <div class="sub" style="margin-bottom:6px;color:var(--text);font-weight:600"><i class="fa-solid fa-star text-gold"></i> Imagen de portada</div>
                        <div style="display:flex;gap:10px;align-items:center">
                            <div style="width:140px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#ffffff;flex-shrink:0;position:relative">
                                @if($cover)
                                    <img src="{{ $cover->url }}" alt="" style="width:100%;height:100%;object-fit:cover">
                                    <form method="post" action="{{ route('properties.media.destroy', $cover) }}" onsubmit="return confirm('¿Eliminar la portada?')" style="position:absolute;top:4px;right:4px;margin:0">
                                        @csrf @method('DELETE')
                                        <button type="submit" title="Eliminar" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(2,4,9,.7);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px"><i class="fa-solid fa-trash"></i></button>
                                    </form>
                                @else
                                    <div style="display:grid;place-items:center;width:100%;height:100%;color:rgba(201,168,76,.35);font-size:28px"><i class="fa-solid fa-image"></i></div>
                                @endif
                            </div>
                            <form method="post" action="{{ route('properties.media.store', $property) }}" enctype="multipart/form-data" style="flex:1;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:rgba(201,168,76,.06)">
                                @csrf
                                <input type="hidden" name="role" value="cover">
                                <span class="sub" style="display:block;margin-bottom:4px"><i class="fa-solid fa-cloud-arrow-up text-gold"></i> {{ $cover ? 'Reemplazar' : 'Subir' }} portada (1 imagen, máx 50MB)</span>
                                <div style="display:flex;gap:6px;align-items:center">
                                    <input type="file" name="files[]" accept="image/*" required style="flex:1">
                                    <button class="btn btn-success btn-sm" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i>Subir</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- ====== GALERÍA ====== --}}
                    <div style="margin-bottom:14px">
                        <div class="sub" style="margin-bottom:6px;color:var(--text);font-weight:600"><i class="fa-solid fa-images text-gold"></i> Galería · {{ $gallery->count() }} fotos</div>
                        <form method="post" action="{{ route('properties.media.store', $property) }}" enctype="multipart/form-data" style="margin-bottom:10px;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:rgba(201,168,76,.04)">
                            @csrf
                            <input type="hidden" name="role" value="gallery">
                            <div class="row" style="gap:6px;align-items:center">
                                <input type="file" name="files[]" multiple accept="image/*" required style="flex:1">
                                <button class="btn btn-success btn-sm" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i>Subir fotos</button>
                            </div>
                        </form>
                        @if($gallery->count())
                            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px">
                                @foreach($gallery as $m)
                                    <div style="position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line)">
                                        <img src="{{ $m->url }}" alt="" style="width:100%;height:100%;object-fit:cover">
                                        <div style="position:absolute;top:4px;right:4px;display:flex;flex-direction:column;gap:4px">
                                            <form method="post" action="{{ route('properties.media.role', $m) }}" style="margin:0">
                                                @csrf
                                                <input type="hidden" name="role" value="cover">
                                                <button type="submit" title="Marcar como portada" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(201,168,76,.85);color:#111;cursor:pointer;display:grid;place-items:center;font-size:11px"><i class="fa-solid fa-star"></i></button>
                                            </form>
                                            <form method="post" action="{{ route('properties.media.role', $m) }}" style="margin:0">
                                                @csrf
                                                <input type="hidden" name="role" value="render">
                                                <button type="submit" title="Mover a Renders" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(80,120,200,.85);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:11px"><i class="fa-solid fa-cube"></i></button>
                                            </form>
                                            <form method="post" action="{{ route('properties.media.destroy', $m) }}" onsubmit="return confirm('Eliminar?')" style="margin:0">
                                                @csrf @method('DELETE')
                                                <button type="submit" title="Eliminar" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(2,4,9,.7);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px"><i class="fa-solid fa-trash"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="sub" style="text-align:center;padding:10px;color:var(--soft);font-size:12px">Sin fotos en galería todavía.</div>
                        @endif
                    </div>

                    {{-- ====== RENDERS ====== --}}
                    <div style="margin-bottom:14px">
                        <div class="sub" style="margin-bottom:6px;color:var(--text);font-weight:600"><i class="fa-solid fa-cube text-gold"></i> Renders 3D · {{ $renders->count() }}</div>
                        <form method="post" action="{{ route('properties.media.store', $property) }}" enctype="multipart/form-data" style="margin-bottom:10px;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:rgba(80,120,200,.08)">
                            @csrf
                            <input type="hidden" name="role" value="render">
                            <div class="row" style="gap:6px;align-items:center">
                                <input type="file" name="files[]" multiple accept="image/*" required style="flex:1">
                                <button class="btn btn-info btn-sm" type="submit"><i class="fa-solid fa-cube"></i>Subir renders</button>
                            </div>
                        </form>
                        @if($renders->count())
                            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px">
                                @foreach($renders as $m)
                                    <div style="position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(80,120,200,.4)">
                                        <img src="{{ $m->url }}" alt="" style="width:100%;height:100%;object-fit:cover">
                                        <div style="position:absolute;top:4px;right:4px;display:flex;flex-direction:column;gap:4px">
                                            <form method="post" action="{{ route('properties.media.role', $m) }}" style="margin:0">
                                                @csrf
                                                <input type="hidden" name="role" value="gallery">
                                                <button type="submit" title="Mover a Galería" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(201,168,76,.85);color:#111;cursor:pointer;display:grid;place-items:center;font-size:11px"><i class="fa-solid fa-images"></i></button>
                                            </form>
                                            <form method="post" action="{{ route('properties.media.destroy', $m) }}" onsubmit="return confirm('Eliminar?')" style="margin:0">
                                                @csrf @method('DELETE')
                                                <button type="submit" title="Eliminar" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(2,4,9,.7);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px"><i class="fa-solid fa-trash"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="sub" style="text-align:center;padding:10px;color:var(--soft);font-size:12px">Aún no hay renders. Los renders se muestran en la landing con un visor especial.</div>
                        @endif
                    </div>

                    {{-- ====== VIDEOS subidos ====== --}}
                    <div>
                        <div class="sub" style="margin-bottom:6px;color:var(--text);font-weight:600"><i class="fa-solid fa-video text-gold"></i> Videos subidos · {{ $videos->count() }}</div>
                        <form method="post" action="{{ route('properties.media.store', $property) }}" enctype="multipart/form-data" style="margin-bottom:10px;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:rgba(34,197,94,.06)">
                            @csrf
                            <input type="hidden" name="role" value="gallery">
                            <div class="row" style="gap:6px;align-items:center">
                                <input type="file" name="files[]" multiple accept="video/*" required style="flex:1">
                                <button class="btn btn-success btn-sm" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i>Subir videos</button>
                            </div>
                            <div class="sub" style="margin-top:4px;font-size:11px">O usa el campo "URL Video" arriba para enlazar uno de YouTube.</div>
                        </form>
                        @if($videos->count())
                            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px">
                                @foreach($videos as $m)
                                    <div style="position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#ffffff">
                                        <video src="{{ $m->url }}" controls style="width:100%;height:100%;object-fit:cover"></video>
                                        <form method="post" action="{{ route('properties.media.destroy', $m) }}" onsubmit="return confirm('Eliminar?')" style="position:absolute;top:4px;right:4px;margin:0">
                                            @csrf @method('DELETE')
                                            <button type="submit" title="Eliminar" style="width:26px;height:26px;border-radius:7px;border:0;background:rgba(2,4,9,.85);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:12px"><i class="fa-solid fa-trash"></i></button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="sub" style="text-align:center;padding:10px;color:var(--soft);font-size:12px">Sin videos.</div>
                        @endif
                    </div>
                </div>
            </div>{{-- /modal-body --}}
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit" form="form-edit-prop-{{ $property->id }}"><i class="fa-solid fa-floppy-disk"></i>Guardar cambios</button>
            </div>
        </div>
</div>

{{-- ============ MODAL DE COMPARTIR ============ --}}
<div class="modal-backdrop" id="modal-share-{{ $property->id }}">
    <div class="modal narrow">
        <div class="modal-head"><h3><i class="fa-solid fa-share-nodes text-gold"></i> Compartir propiedad</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <div class="modal-body" style="text-align:center">
            <div style="font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:6px">{{ $property->name }}</div>
            <div class="sub" style="margin-bottom:18px">{{ $property->price_formatted }}</div>

            <img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&bgcolor=141821&color=c9a84c&data={{ urlencode($property->landing_url) }}" alt="QR" style="margin:0 auto;border-radius:12px;border:1px solid var(--line)">

            <div style="margin-top:14px;padding:10px 12px;background:#ffffff;border-radius:10px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--gold);word-break:break-all">
                {{ $property->landing_url }}
            </div>

            <div class="row" style="margin-top:14px;justify-content:center;gap:8px">
                <button class="btn btn-sm" type="button" onclick="copyToClipboard('{{ $property->landing_url }}', this)"><i class="fa-solid fa-copy"></i>Copiar link</button>
                <a class="btn btn-sm btn-success" href="https://wa.me/?text={{ urlencode($property->name.' '.$property->price_formatted.' '.$property->landing_url) }}" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i>WhatsApp</a>
                <a class="btn btn-sm btn-info" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($property->landing_url) }}" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i>Facebook</a>
                {{-- Compartir por Email oculto a peticion --}}
            </div>

            <div class="row" style="margin-top:14px;justify-content:center;gap:8px">
                <a class="btn btn-sm btn-primary" href="{{ $property->landing_url }}" target="_blank" rel="noopener"><i class="fa-solid fa-globe"></i>Abrir landing</a>
                <a class="btn btn-sm btn-info" href="{{ route('properties.sheet', $property) }}" target="_blank"><i class="fa-solid fa-file-pdf"></i>Ficha PDF</a>
                <a class="btn btn-sm" href="{{ route('properties.qr', $property) }}" target="_blank"><i class="fa-solid fa-qrcode"></i>QR alta-res</a>
            </div>

            <div class="sub" style="margin-top:14px;font-size:11px">📊 {{ $property->landing_views }} visitas a esta landing</div>
        </div>
    </div>
</div>
@endforeach
@endsection