@extends('layouts.app')

@section('title', 'Projects - SREENIVAS Housing')

@section('content')
<div class="preloader" id="preloader">
    <div class="loader"></div>
</div>

<!-- PAGE BANNER SECTION START -->
<section class="ul-page-banner">
    <div class="ul-page-banner-container">
        <div class="ul-page-banner-txt">
            <h1 class="ul-page-banner-title">Projects</h1>
            <nav class="ul-breadcrumb">
                <a href="{{ url('/') }}" class="ul-breadcrumb-item">Home</a>
                <span class="ul-breadcrumb-item active">Projects</span>
            </nav>
        </div>
    </div>
</section>
<!-- PAGE BANNER SECTION END -->

<!-- PROJECTS TABS SECTION START -->
<section class="ul-projects-page ul-section-spacing">
    <div class="ul-container">
        <div class="ul-section-heading wow animate__fadeInUp">
            <div class="left">
                <span class="ul-section-sub-title">Our Projects</span>
                <h2 class="ul-section-title">Explore Our Portfolio</h2>
                <p class="ul-section-descr">Discover our range of live, ongoing, and future projects</p>
            </div>
        </div>

        <!-- Project Tabs -->
        <div class="ul-projects-tabs-wrapper wow animate__fadeInUp">
            <ul class="ul-projects-tabs" id="projectsTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="ul-projects-tab active" id="live-tab" data-bs-toggle="tab" data-bs-target="#live" type="button" role="tab" aria-controls="live" aria-selected="true">
                        <i class="fas fa-home"></i> Live Projects
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="ul-projects-tab" id="ongoing-tab" data-bs-toggle="tab" data-bs-target="#ongoing" type="button" role="tab" aria-controls="ongoing" aria-selected="false">
                        <i class="fas fa-hammer"></i> Ongoing Projects
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="ul-projects-tab" id="future-tab" data-bs-toggle="tab" data-bs-target="#future" type="button" role="tab" aria-controls="future" aria-selected="false">
                        <i class="fas fa-rocket"></i> Future Projects
                    </button>
                </li>
            </ul>
        </div>

        <!-- Tab Content -->
        <div class="ul-projects-tab-content" id="projectsTabContent">
            <!-- Live Projects Tab -->
            <div class="tab-pane fade show active" id="live" role="tabpanel" aria-labelledby="live-tab">
                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4 ul-projects-grid">
                    @forelse($liveProjects = App\Models\Property::live()->available()->get() as $property)
                    <div class="col ul-project-item" data-category="{{ $property->property_type ?? 'apartment' }}">
                        <div class="ul-project wow animate__fadeInUp">
                            <div class="ul-project-img">
                                @if($property->main_image)
                                    @if(Str::startsWith($property->main_image, 'http'))
                                        <img src="{{ $property->main_image }}" alt="{{ $property->title }}">
                                    @else
                                        <img src="{{ asset($property->main_image) }}" alt="{{ $property->title }}">
                                    @endif
                                @else
                                    <img src="{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}" alt="{{ $property->title }}">
                                @endif
                                <span class="ul-project-tag">{{ ucfirst($property->status) }}</span>
                            </div>
                            <div class="ul-project-txt">
                                <div class="top">
                                    <div class="left">
                                        <span class="ul-project-price"><span class="number">${{ number_format($property->price, 0) }}</span>/Month</span>
                                        <a href="{{ route('properties.show', $property->slug) }}" class="ul-project-title">{{ $property->title }}</a>
                                        <p class="ul-project-location">{{ $property->location ?? '2821 Lake Sevilla, Palm Harbor, TX' }}</p>
                                    </div>
                                    <div class="right">
                                        <button class="ul-project-add-to-favorites-btn"><i class="flaticon-heart"></i></button>
                                    </div>
                                </div>
                                <div class="ul-project-infos ul-featured-property-infos">
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bed-color"></i></span>
                                        <span class="text">{{ $property->bedrooms ?? 3 }} Beds</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bath"></i></span>
                                        <span class="text">{{ $property->bathrooms ?? 2 }} Bathrooms</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-scale"></i></span>
                                        <span class="text">{{ $property->square_feet ? ($property->square_feet/100) . 'x' . ($property->square_feet/80) : '6x7.5' }} m²</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <i class="fas fa-home fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No Live Projects Available</h4>
                            <p class="text-muted">Check back later for new live project listings.</p>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Ongoing Projects Tab -->
            <div class="tab-pane fade" id="ongoing" role="tabpanel" aria-labelledby="ongoing-tab">
                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4 ul-projects-grid">
                    @forelse($ongoingProjects = App\Models\Property::ongoing()->get() as $property)
                    <div class="col ul-project-item" data-category="{{ $property->property_type ?? 'apartment' }}">
                        <div class="ul-project wow animate__fadeInUp">
                            <div class="ul-project-img">
                                @if($property->main_image)
                                    @if(Str::startsWith($property->main_image, 'http'))
                                        <img src="{{ $property->main_image }}" alt="{{ $property->title }}">
                                    @else
                                        <img src="{{ asset($property->main_image) }}" alt="{{ $property->title }}">
                                    @endif
                                @else
                                    <img src="{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}" alt="{{ $property->title }}">
                                @endif
                                <span class="ul-project-tag ongoing-badge">Ongoing</span>
                            </div>
                            <div class="ul-project-txt">
                                <div class="top">
                                    <div class="left">
                                        <span class="ul-project-price"><span class="number">${{ number_format($property->price, 0) }}</span>/Month</span>
                                        <a href="{{ route('properties.show', $property->slug) }}" class="ul-project-title">{{ $property->title }}</a>
                                        <p class="ul-project-location">{{ $property->location ?? '2821 Lake Sevilla, Palm Harbor, TX' }}</p>
                                    </div>
                                    <div class="right">
                                        <button class="ul-project-add-to-favorites-btn"><i class="flaticon-heart"></i></button>
                                    </div>
                                </div>
                                <div class="ul-project-infos ul-featured-property-infos">
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bed-color"></i></span>
                                        <span class="text">{{ $property->bedrooms ?? 3 }} Beds</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bath"></i></span>
                                        <span class="text">{{ $property->bathrooms ?? 2 }} Bathrooms</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-scale"></i></span>
                                        <span class="text">{{ $property->square_feet ? ($property->square_feet/100) . 'x' . ($property->square_feet/80) : '6x7.5' }} m²</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <i class="fas fa-hammer fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No Ongoing Projects Available</h4>
                            <p class="text-muted">Check back later for ongoing project updates.</p>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Future Projects Tab -->
            <div class="tab-pane fade" id="future" role="tabpanel" aria-labelledby="future-tab">
                <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4 ul-projects-grid">
                    @forelse($futureProjects = App\Models\Property::future()->get() as $property)
                    <div class="col ul-project-item" data-category="{{ $property->property_type ?? 'apartment' }}">
                        <div class="ul-project wow animate__fadeInUp">
                            <div class="ul-project-img">
                                @if($property->main_image)
                                    @if(Str::startsWith($property->main_image, 'http'))
                                        <img src="{{ $property->main_image }}" alt="{{ $property->title }}">
                                    @else
                                        <img src="{{ asset($property->main_image) }}" alt="{{ $property->title }}">
                                    @endif
                                @else
                                    <img src="{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}" alt="{{ $property->title }}">
                                @endif
                                <span class="ul-project-tag future-badge">Future</span>
                            </div>
                            <div class="ul-project-txt">
                                <div class="top">
                                    <div class="left">
                                        <span class="ul-project-price"><span class="number">${{ number_format($property->price, 0) }}</span>/Month</span>
                                        <a href="{{ route('properties.show', $property->slug) }}" class="ul-project-title">{{ $property->title }}</a>
                                        <p class="ul-project-location">{{ $property->location ?? '2821 Lake Sevilla, Palm Harbor, TX' }}</p>
                                    </div>
                                    <div class="right">
                                        <button class="ul-project-add-to-favorites-btn"><i class="flaticon-heart"></i></button>
                                    </div>
                                </div>
                                <div class="ul-project-infos ul-featured-property-infos">
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bed-color"></i></span>
                                        <span class="text">{{ $property->bedrooms ?? 3 }} Beds</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-bath"></i></span>
                                        <span class="text">{{ $property->bathrooms ?? 2 }} Bathrooms</span>
                                    </div>
                                    <div class="ul-project-info ul-featured-property-info">
                                        <span class="icon"><i class="flaticon-scale"></i></span>
                                        <span class="text">{{ $property->square_feet ? ($property->square_feet/100) . 'x' . ($property->square_feet/80) : '6x7.5' }} m²</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <i class="fas fa-rocket fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No Future Projects Available</h4>
                            <p class="text-muted">Check back later for upcoming project announcements.</p>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
<!-- PROJECTS TABS SECTION END -->

<style>
.ul-projects-tabs-wrapper {
    margin-bottom: 40px;
}

.ul-projects-tabs {
    display: flex;
    border-bottom: 2px solid var(--brand-color, #F58731);
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.ul-projects-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    font-weight: 600;
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ul-projects-tab:hover {
    border-bottom-color: var(--brand-color, #F58731);
    color: var(--brand-color, #F58731);
}

.ul-projects-tab.active {
    border-bottom-color: var(--brand-color, #F58731);
    color: var(--brand-color, #F58731);
    background: transparent;
}

.ul-projects-tab i {
    font-size: 16px;
}

.ul-projects-tab-content {
    background: white;
    border-radius: 0 0 8px 8px;
    padding: 0;
}

.ongoing-badge {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.future-badge {
    background-color: #17a2b8 !important;
    color: white !important;
}

@media (max-width: 768px) {
    .ul-projects-tab {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .ul-projects-tab i {
        font-size: 14px;
    }
}
</style>
@endsection