@extends('user_layout.app')

@section('title', $project->title)

@section('content')

<style>
/* ================= PROPERTY PAGE ================= */
.property-page {
    max-width: 1200px;
    margin: 160px auto 60px;
    padding: 0 15px;
    background: #fff;
}

/* ===== TITLE ===== */
.property-title {
    text-align: center;
    margin-bottom: 25px;
}
.property-title h1 {
    color: #d4af37;
    font-weight: 800;
}
.property-title p {
    color: #555;
    font-size: 15px;
}

/* ===== QUICK SUMMARY TABLE ===== */
.summary-title {
    text-align: center;
    color: #d4af37;
    font-weight: 700;
    margin: 30px 0 10px;
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}
.summary-table th {
    background: #d4af37;
    color: #000;
    padding: 10px;
    width: 35%;
}
.summary-table td {
    background: #fff;
    padding: 10px 10px 10px 400px;
    border: 1px solid #eee;
}

.property-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.property-slider img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: none;
    position: relative;
    z-index: 1;
}

.property-slider img.active {
    display: block;
}

.property-slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 26px;
    padding: 10px 16px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10; /* ✅ FIX */
}

.property-slider .prev { left: 15px; }
.property-slider .next { right: 15px; }
.property-slider button {
    z-index: 10;
}

.property-slider img {
    position: relative;
    z-index: 1;
}


/* ===== EMI ===== */
.emi-box {
    max-width: 360px;
    margin: 40px auto;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0,0,0,0.08);
}
.emi-box h4 {
    text-align: center;
    color: #d4af37;
    margin-bottom: 15px;
}
.emi-box input {
    margin-bottom: 10px;
}
.emi-box button {
    background: #d4af37;
    color: #000;
    font-weight: 600;
}

/* ===== CONTENT ===== */
.section-title {
    color: #d4af37;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 6px;
    margin: 40px 0 15px;
}
.property-content p,
.property-content ul {
    line-height: 1.9;
    font-size: 15px;
}

/* ===== MAP ===== */
.property-map iframe {
    width: 100%;
    height: 420px;
    border-radius: 12px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .property-slider img { height: 260px; }
}
</style>

<div class="property-page">

    <!-- 🔶 TITLE -->
    <div class="property-title">
        <h1>{{ $project->title }}</h1>
        <p>
            Location: {{ $project->location }}
            @if($project->rera)
                | RERA: {{ $project->rera }}
            @endif
        </p>
    </div>

    <!-- 🔶 QUICK SUMMARY -->
    <h4 class="summary-title">Quick Summary</h4>
    <table class="summary-table">
        <tr><th>Property Category</th><td>{{ $project->category }}</td></tr>
        <tr><th>Builder Name</th><td>{{ $project->builder }}</td></tr>
        <tr><th>Typology</th><td>{{ $project->typology }}</td></tr>
        <tr><th>Property Type</th><td>{{ $project->property_type }}</td></tr>
        <tr><th>Possession</th><td>{{ $project->possession }}</td></tr>
    </table>

    <!-- 🔶 IMAGE SLIDER -->
    @if($project->images->count())
    <div class="property-slider">
        @foreach($project->images as $k => $img)
            <img src="{{ asset('storage/'.$img->image) }}"
                 class="{{ $k==0?'active':'' }}">
        @endforeach
        <button class="prev">&#10094;</button>
        <button class="next">&#10095;</button>
    </div>
    @endif

    <!-- 🔶 EMI -->
    <div class="emi-box">
        <h4>EMI Calculator</h4>

        <input type="number" id="price" class="form-control" placeholder="Property Price">
        <input type="number" id="down" class="form-control" placeholder="Down Payment">
        <input type="number" id="rate" class="form-control" value="7.5" placeholder="Interest Rate">
        <input type="number" id="tenure" class="form-control" value="10" placeholder="Tenure (Years)">

        <button onclick="calculateEMI()" class="btn w-100 mt-2">Calculate</button>
        <p class="text-center mt-2" id="emiResult">EMI: ₹0</p>
    </div>

    <!-- 🔶 CONTENT -->
    <div class="property-content">

        @if($project->overview)
            <h4 class="section-title">Project Description</h4>
            {!! $project->overview !!}
        @endif

        @if($project->highlights)
            <h4 class="section-title">Project Highlights at a Glance</h4>
            {!! $project->highlights !!}
        @endif

        @if($project->amenities)
            <h4 class="section-title">Amenities</h4>
            {!! $project->amenities !!}
        @endif

        @if($project->location_advantage)
            <h4 class="section-title">Prime Location Advantage</h4>
            {!! $project->location_advantage !!}
        @endif
    </div>

    <!-- 🔶 MAP -->
    @if($project->map_embed)
        <h4 class="section-title text-center">📍 Project Location</h4>
        <div class="property-map">
            {!! $project->map_embed !!}
        </div>
    @endif

</div>



@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const slides = document.querySelectorAll('.property-slider img');
    const nextBtn = document.querySelector('.property-slider .next');
    const prevBtn = document.querySelector('.property-slider .prev');

    if (!slides.length) return; // safety check

    let index = 0;

    function showSlide(i) {
        slides.forEach(slide => slide.classList.remove('active'));
        slides[i].classList.add('active');
    }

    // NEXT
    nextBtn?.addEventListener('click', () => {
        index = (index + 1) % slides.length;
        showSlide(index);
        resetAutoSlide();
    });

    // PREVIOUS
    prevBtn?.addEventListener('click', () => {
        index = (index - 1 + slides.length) % slides.length;
        showSlide(index);
        resetAutoSlide();
    });

    // 🔄 AUTO SLIDE EVERY 5 SECONDS
    let autoSlide = setInterval(() => {
        index = (index + 1) % slides.length;
        showSlide(index);
    }, 5000);

    function resetAutoSlide() {
        clearInterval(autoSlide);
        autoSlide = setInterval(() => {
            index = (index + 1) % slides.length;
            showSlide(index);
        }, 5000);
    }

});
</script>

@endsection