@extends('layouts.app')

@section('content')
<div class="bg-gray-100 py-10">
    <div class="max-w-5xl mx-auto px-4">
        <h1 class="text-3xl font-bold text-center mb-6">
            {{ $property->name ?? $property->code }} - {{ $property->propertyType->name }}
        </h1>

        <div class="relative border rounded overflow-hidden shadow-lg">
            <img src="{{ asset('storage/' . $property->fractional->image) }}" alt="Plano" class="w-full">

            <div class="absolute inset-0 pointer-events-none">
                <svg viewBox="0 0 1000 1200" class="w-full h-full" preserveAspectRatio="xMidYMid meet">
                    <polygon
                        points="{{ $property->svg_code }}"
                        fill="{{ $property->status === 'available' ? '#49b678' : ($property->status === 'reserved' ? '#cec93b' : '#c40e0e') }}"
                        opacity="0.7"
                        stroke="#000"
                        stroke-width="2"
                    ></polygon>
                </svg>
            </div>
        </div>

        <div class="mt-8 bg-white p-6 rounded shadow">
            <ul class="text-lg space-y-2">
                <li><strong>Tipo:</strong> {{ $property->propertyType->name }}</li>
                <li><strong>Código:</strong> {{ $property->code }}</li>
                <li><strong>Área:</strong> {{ $property->area }} m²</li>
                <li><strong>Precio:</strong> ${{ number_format($property->price, 2) }} MXN</li>
                <li><strong>Estado:</strong> 
                    <span class="font-bold text-{{ $property->status === 'available' ? 'green' : ($property->status === 'reserved' ? 'yellow' : 'red') }}-600">
                        {{ ucfirst($property->status) }}
                    </span>
                </li>
            </ul>

            <div class="mt-6 text-center">
                <a href="{{ route('contact') }}" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition">
                    Cotizar esta propiedad
                </a>
            </div>
        </div>
    </div>
</div>
@endsection