@if($property->floorPlans && $property->floorPlans->count() > 0)
<!-- Floor Plans Section -->
<div class="ul-project-details-block wow animate__fadeIn">
    <h3 class="ul-project-details-title">Floor Plan</h3>
    
    <div class="floor-plans-container">
        <div class="table-responsive">
            <table class="table table-bordered floor-plans-table">
                <thead class="table-dark">
                    <tr>
                        <th>Floor</th>
                        <th>Flat details</th>
                        <th>Flat no</th>
                        <th>Salable area</th>
                        <th>Uds-sqft</th>
                        <th>Available/Soldout</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($property->floorPlans->groupBy('floor_name') as $floorName => $floorPlans)
                        @foreach($floorPlans as $floorPlan)
                        <tr>
                            <td>{{ $floorPlan->floor_name }}</td>
                            <td>{{ $floorPlan->flat_details }}</td>
                            <td>{{ $floorPlan->flat_number }}</td>
                            <td>{{ $floorPlan->formatted_area }}</td>
                            <td>{{ $floorPlan->formatted_uds }}</td>
                            <td>
                                <span class="badge {{ $floorPlan->availability_badge_class }}">
                                    {{ $floorPlan->availability_status }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
        
        @if($property->floorPlans->where('availability_status', 'Available')->count() > 0)
        <div class="available-flats-info mt-3">
            <div class="alert alert-success">
                <i class="fas fa-info-circle"></i>
                <strong>{{ $property->floorPlans->where('availability_status', 'Available')->count() }} flats available</strong> in this property. 
                Contact us for more details and booking.
            </div>
        </div>
        @endif
        
        @if($property->floorPlans->where('floor_plan_image', '!=', '')->count() > 0)
        <div class="floor-plan-images mt-4">
            <h4 class="mb-3">Floor Plan Images</h4>
            <div class="row">
                @foreach($property->floorPlans->where('floor_plan_image', '!=', '')->unique('floor_name') as $floorPlan)
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="floor-plan-image-card">
                        @if(Str::startsWith($floorPlan->floor_plan_image, 'http'))
                            <img src="{{ $floorPlan->floor_plan_image }}" 
                                 alt="{{ $floorPlan->floor_name }} Floor Plan" 
                                 class="img-fluid rounded shadow-sm"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @elseif(Str::startsWith($floorPlan->floor_plan_image, 'assets/'))
                            <img src="{{ asset($floorPlan->floor_plan_image) }}" 
                                 alt="{{ $floorPlan->floor_name }} Floor Plan" 
                                 class="img-fluid rounded shadow-sm"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @else
                            <img src="{{ Storage::url($floorPlan->floor_plan_image) }}" 
                                 alt="{{ $floorPlan->floor_name }} Floor Plan" 
                                 class="img-fluid rounded shadow-sm"
                                 onerror="this.src='{{ asset('assets/img/sai-ganesh-elelist-img.jpg') }}';">
                        @endif
                        <div class="text-center mt-2">
                            <small class="text-muted">{{ $floorPlan->floor_name }} Floor</small>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<style>
.floor-plans-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.floor-plans-table th {
    background: var(--brand-color, #F58731) !important;
    border-color: var(--brand-color, #F58731) !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.floor-plans-table td {
    vertical-align: middle;
    padding: 12px 15px;
}

.floor-plans-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.floor-plans-table tbody tr:hover {
    background-color: #e9ecef;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

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

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.floor-plan-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.floor-plan-image-card img {
    transition: transform 0.3s ease;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.floor-plan-image-card:hover img {
    transform: scale(1.05);
}

.available-flats-info .alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .floor-plans-table {
        font-size: 0.85rem;
    }
    
    .floor-plans-table th,
    .floor-plans-table td {
        padding: 8px 10px;
    }
}
</style>
@endif