@extends('user_layout.app')

@section('content')
<div class="container py-5" style="margin-top: 42px;">

    <!-- PROPERTY TITLE -->
    <h1 class="mb-3">{{ $property->title }}</h1>

    <p class="text-muted mb-4">
        {{ $property->location }} |
        <strong>₹ {{ number_format($property->price) }}</strong>
    </p>

    <!-- IMAGE SLIDER -->
    @if($property->images && count($property->images) > 0)
    <div id="propertyCarousel" class="carousel slide mb-4" data-bs-ride="carousel">

        <div class="carousel-inner">
            @foreach($property->images as $key => $img)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    <img src="{{ asset('uploads/properties/'.$img) }}"
                         class="d-block w-100"
                         style="height:450px; object-fit:cover;">
                </div>
            @endforeach
        </div>

        <button class="carousel-control-prev" type="button"
                data-bs-target="#propertyCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>

        <button class="carousel-control-next" type="button"
                data-bs-target="#propertyCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    @endif

    <!-- DESCRIPTION -->
    <div class="mb-4">
        <h4>Description</h4>
        {!! $property->description !!}
    </div>

    <!-- INQUIRY BUTTON -->
    <div class="mt-4">
        <a href="{{ url('/contact') }}"
           class="btn btn-gold btn-lg">
            Enquire Now
        </a>
    </div>

</div>
@endsection