@extends('frontend.layouts.app') 

@section('content')

<div class="container" style="padding-top:160px; padding-bottom:40px;">

    
    <div class="row g-4">

       
        <div class="col-md-7">
            <div class="card shadow-sm" 
                 style="border-radius:15px; overflow:hidden; height:600px;">
                
                <div class="project-slider" 
                     style="position:relative; background:#000; height:100%;">

                    <img id="sliderImage"
                         src="{{ asset('frontend/assets/images/project/3.jpg') }}"
                         alt="Project Image"
                         style="width:100%; height:100%; object-fit:cover; display:block;">

                    <button id="prevBtn"
                            type="button"
                            style="position:absolute; left:12px; top:50%; transform:translateY(-50%);
                                   width:46px; height:46px; border:none; border-radius:50%;
                                   background:rgba(0,0,0,.55); color:#fff; font-size:26px;
                                   display:flex; align-items:center; justify-content:center; cursor:pointer;">
                        ‹
                    </button>

                    <button id="nextBtn"
                            type="button"
                            style="position:absolute; right:12px; top:50%; transform:translateY(-50%);
                                   width:46px; height:46px; border:none; border-radius:50%;
                                   background:rgba(0,0,0,.55); color:#fff; font-size:26px;
                                   display:flex; align-items:center; justify-content:center; cursor:pointer;">
                        ›
                    </button>

                    <div id="sliderCounter"
                         style="position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
                                padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.55);
                                color:#fff; font-size:14px;">
                        1 / 4
                    </div>

                </div>
            </div>
        </div>

        
        <div class="col-md-5">
            <div class="card shadow-sm" style="border-radius:15px; height:600px; overflow:auto; padding:25px;">

                <div style="display:flex; gap:10px; margin-bottom:20px;">
                    <a href="{{ route('project') }}"
                    style="padding:8px 18px; background:#f0f0f0; color:#333; font-weight:600;
                            border-radius:8px; text-decoration:none; font-size:14px;">
                        Projects
                    </a>

                    <a href="{{ route('ongoing') }}"
                    style="padding:8px 16px; background:#cf6f01; color:#fff; font-weight:600;
                            border-radius:8px; text-decoration:none; font-size:14px;">
                        Ongoing
                    </a>
                </div>

                <h1 style="font-weight:800; font-size:28px; margin-bottom:5px;">Hikma Iconic Tower</h1>
                <p style="font-size:16px; color:#555; margin-bottom:15px;">Luxury Apartment in Barisal</p>
                <hr>

                <p style="font-size:15px; color:#333; line-height:1.6; margin-bottom:15px;">
                    Banglabazar, Barishal Sadar, Barisal-8200.
                </p>
                <hr>

                <h4 style="font-weight:700; margin-bottom:10px;">Overview</h4>

                <p style="font-size:15px; color:#444; line-height:1.7;">
                    A lively structure, full of exclusivity...
                </p>

                <p style="margin-bottom:5px;">
                    <a href="#" style="text-decoration:underline; font-weight:600;">
                        For Apartment Tour – click here
                    </a>
                </p>
                <p>
                    <a href="#" style="text-decoration:underline; font-weight:600;">
                        For Penthouse Tour – click here
                    </a>
                </p>

                <hr>

                <h4 style="font-weight:700; margin-bottom:10px;">Project Progress</h4>

                <div style="display:flex; justify-content:space-between; font-size:15px; font-weight:500;">
                    <span>Work Progress</span>
                    <span style="font-weight:700;">60%</span>
                </div>

                <div style="width:100%; height:16px; background:#e5e5e5; border-radius:20px; overflow:hidden;">
                    <div style="width:60%; height:100%;
                                background:linear-gradient(90deg,#bb6400,#c55901);
                                transition:width 1s ease-in-out;">
                    </div>
                </div>

            </div>
        </div>


    </div>



   
  
    <div class="row mt-5" style="display:flex; justify-content:center; align-items:center; min-height:200px;">
    <div class="col-md-8 col-lg-6">
        <div class="card shadow-sm" style="border-radius:15px; padding:25px;">

            <h4 style="font-weight:700; margin-bottom:22px; text-align:center;">
                Specifications
            </h4>

            <div style="font-size:15px; color:#333; line-height:1.6;">

                <p><strong>Orientation:</strong> North Facing</p>
                <p><strong>Front Road:</strong> 50 Feet</p>
                <p><strong>Land Size:</strong> 40 katha</p>
                <p><strong>Apt Size:</strong> 2705 - 3475 SQFT</p>
                <p><strong>Total Apartments:</strong> 66</p>
                <p><strong>Parking:</strong> 132</p>
                <p><strong>Floors:</strong> B2+B1+G+14</p>
                <p><strong>Handover:</strong> Feb 2027</p>

            </div>

        </div>
    </div>
</div>



</div>

@endsection
<script>
document.addEventListener("DOMContentLoaded", function () {

    const images = [
        "{{ asset('frontend/assets/images/project/3.jpg') }}",
        "{{ asset('frontend/assets/images/project/p2.jpg') }}",
        "{{ asset('frontend/assets/images/project/p3.jpg') }}",
        "{{ asset('frontend/assets/images/project/p1.jpg') }}"
    ];

    let index = 0;

    const sliderImage = document.getElementById("sliderImage");
    const counter = document.getElementById("sliderCounter");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");

    function updateSlider() {
        sliderImage.src = images[index];
        counter.textContent = (index + 1) + " / " + images.length;
    }

    nextBtn.addEventListener("click", function () {
        index = (index + 1) % images.length;
        updateSlider();
    });

    prevBtn.addEventListener("click", function () {
        index = (index - 1 + images.length) % images.length;
        updateSlider();
    });

   
    setInterval(() => {
        index = (index + 1) % images.length;
        updateSlider();
    }, 3000);

    updateSlider();
});
</script>