@if($property->floor_plan_image || $property->elevation_image || $property->google_map_image)
<!-- Plan Images Section -->
<div class="ul-project-details-block wow animate__fadeIn">
    <h3 class="ul-project-details-title">Plan</h3>
    
    <div class="plan-images-container">
        <!-- Tab Navigation -->
        <ul class="nav nav-tabs plan-tabs" id="planTabs" role="tablist">
            @if($property->floor_plan_image)
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="floor-plan-tab" data-bs-toggle="tab" data-bs-target="#floor-plan" type="button" role="tab" aria-controls="floor-plan" aria-selected="true">
                        <i class="fas fa-floor-plan"></i> Floor Plan
                    </button>
                </li>
            @endif
            
            @if($property->elevation_image)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ !$property->floor_plan_image ? 'active' : '' }}" id="elevation-tab" data-bs-toggle="tab" data-bs-target="#elevation" type="button" role="tab" aria-controls="elevation" aria-selected="{{ !$property->floor_plan_image ? 'true' : 'false' }}">
                        <i class="fas fa-building"></i> Elevation
                    </button>
                </li>
            @endif
            
            @if($property->google_map_image)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ !$property->floor_plan_image && !$property->elevation_image ? 'active' : '' }}" id="google-map-tab" data-bs-toggle="tab" data-bs-target="#google-map" type="button" role="tab" aria-controls="google-map" aria-selected="{{ !$property->floor_plan_image && !$property->elevation_image ? 'true' : 'false' }}">
                        <i class="fas fa-map-marked-alt"></i> Location Map
                    </button>
                </li>
            @endif
        </ul>
        
        <!-- Tab Content -->
        <div class="tab-content plan-tab-content" id="planTabContent">
            @if($property->floor_plan_image)
                <div class="tab-pane fade show active" id="floor-plan" role="tabpanel" aria-labelledby="floor-plan-tab">
                    <div class="plan-image-container">
                        @if(Str::startsWith($property->floor_plan_image, 'http'))
                            <img src="{{ $property->floor_plan_image }}" 
                                 alt="Floor Plan - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @elseif(Str::startsWith($property->floor_plan_image, 'assets/'))
                            <img src="{{ asset($property->floor_plan_image) }}" 
                                 alt="Floor Plan - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @else
                            <img src="{{ Storage::url($property->floor_plan_image) }}" 
                                 alt="Floor Plan - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @endif
                        <div class="plan-image-caption">
                            <h5>Floor Plan</h5>
                            <p>Detailed floor plan layout for {{ $property->title }}</p>
                        </div>
                    </div>
                </div>
            @endif
            
            @if($property->elevation_image)
                <div class="tab-pane fade {{ !$property->floor_plan_image ? 'show active' : '' }}" id="elevation" role="tabpanel" aria-labelledby="elevation-tab">
                    <div class="plan-image-container">
                        @if(Str::startsWith($property->elevation_image, 'http'))
                            <img src="{{ $property->elevation_image }}" 
                                 alt="Elevation - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @elseif(Str::startsWith($property->elevation_image, 'assets/'))
                            <img src="{{ asset($property->elevation_image) }}" 
                                 alt="Elevation - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @else
                            <img src="{{ Storage::url($property->elevation_image) }}" 
                                 alt="Elevation - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @endif
                        <div class="plan-image-caption">
                            <h5>Elevation</h5>
                            <p>Building elevation design for {{ $property->title }}</p>
                        </div>
                    </div>
                </div>
            @endif
            
            @if($property->google_map_image)
                <div class="tab-pane fade {{ !$property->floor_plan_image && !$property->elevation_image ? 'show active' : '' }}" id="google-map" role="tabpanel" aria-labelledby="google-map-tab">
                    <div class="plan-image-container">
                        @if(Str::startsWith($property->google_map_image, 'http'))
                            <img src="{{ $property->google_map_image }}" 
                                 alt="Location Map - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @elseif(Str::startsWith($property->google_map_image, 'assets/'))
                            <img src="{{ asset($property->google_map_image) }}" 
                                 alt="Location Map - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @else
                            <img src="{{ Storage::url($property->google_map_image) }}" 
                                 alt="Location Map - {{ $property->title }}" 
                                 class="img-fluid plan-image"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @endif
                        <div class="plan-image-caption">
                            <h5>Google Map</h5>
                            <p>Location map for {{ $property->title }}</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.plan-tabs {
    background: transparent;
    border: none;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 30px;
    padding: 0;
}

.plan-tabs .nav {
    border: none;
    gap: 0;
}

.plan-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #6c757d;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-tabs .nav-link:hover {
    color: #2c3e50;
    border-bottom-color: #dee2e6;
    background: transparent;
}

.plan-tabs .nav-link.active {
    background: transparent;
    color: #007bff;
    border-bottom-color: #007bff;
    border-radius: 0;
}

.plan-tabs .nav-link i {
    margin-right: 10px;
    font-size: 18px;
}

.plan-tab-content {
    background: white;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.plan-image-container {
    text-align: center;
    position: relative;
}

.plan-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.plan-image-caption {
    margin-top: 25px;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
}

.plan-image-caption h5 {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.4rem;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.plan-image-caption p {
    margin: 0;
    color: #6c757d;
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .plan-tabs .nav-link {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .plan-tabs .nav-link i {
        margin-right: 8px;
        font-size: 16px;
    }
    
    .plan-tab-content {
        padding: 25px;
    }
}

@media (max-width: 576px) {
    .plan-tabs .nav-link {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .plan-tabs .nav-link i {
        display: none;
    }
}
</style>
@endif