<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display JSON Data</title>
    <style>
        .building {
            border: 2px solid #ddd;
            padding: 15px;
            margin: 15px 0;
            border-radius: 8px;
        }
        .company {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .company img {
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div id="buildings-info"></div>

    <script>
        // Sample JSON data with multiple buildings
        const data = [
            {
                "building_id": 456121,
                "building_logo": "https://image-logo.com/building1.png",
                "building_name": "Business Bay - Jito Complex",
                "building_coordinates": [72.8333, 18.9298],
                "companies": [
                    {
                        "name": "Autropic Cloud Technologies",
                        "logo": "https://www.infomanav.com/logo.png",
                        "address": "#20, 2nd floor, Business Bay - JITO, Shree Hari Narayan Kute Marg",
                        "email": "enquiry@infomanav.com",
                        "contact": "0253 294 4744"
                    },
                    {
                        "name": "TouchWood Bliss",
                        "logo": "https://www.touchwoodbliss.com/logo.png",
                        "address": "#23, 2nd floor, Business Bay - JITO, Shree Hari Narayan Kute Marg",
                        "email": "enquiry@tb.com",
                        "contact": "0253 234 4274"
                    }
                ]
            },
            {
                "building_id": 789456,
                "building_logo": "https://image-logo.com/building2.png",
                "building_name": "Downtown Tower",
                "building_coordinates": [73.0000, 19.0000],
                "companies": [
                    {
                        "name": "TechGen Solutions",
                        "logo": "https://www.techgen.com/logo.png",
                        "address": "#15, 3rd floor, Downtown Tower, Tech Street",
                        "email": "info@techgen.com",
                        "contact": "0274 123 4567"
                    },
                    {
                        "name": "GreenTech Innovations",
                        "logo": "https://www.greentech.com/logo.png",
                        "address": "#10, 4th floor, Downtown Tower, Green Lane",
                        "email": "contact@greentech.com",
                        "contact": "0274 765 4321"
                    }
                ]
            },
            {
                "building_id": 123789,
                "building_logo": "https://image-logo.com/building3.png",
                "building_name": "Tech Park - Alpha Building",
                "building_coordinates": [74.1234, 20.1234],
                "companies": [
                    {
                        "name": "InnovateX",
                        "logo": "https://www.innovatex.com/logo.png",
                        "address": "#5, 1st floor, Tech Park - Alpha, Innovation Road",
                        "email": "hello@innovatex.com",
                        "contact": "0285 987 6543"
                    },
                    {
                        "name": "Quantum Solutions",
                        "logo": "https://www.quantum.com/logo.png",
                        "address": "#7, 2nd floor, Tech Park - Alpha, Quantum Avenue",
                        "email": "support@quantum.com",
                        "contact": "0285 654 3210"
                    }
                ]
            }
        ];

        // Function to display all buildings information
        function displayBuildingsInfo(buildings) {
            const buildingsInfoDiv = document.getElementById('buildings-info');
            let html = '';

            // Loop through each building
            buildings.forEach(building => {
                html += `
                    <div class="building">
                        <h1>${building.building_name}</h1>
                        <img src="${building.building_logo}" alt="${building.building_name} Logo">
                        <h2>Companies</h2>
                        <ul>
                `;

                // Loop through each company in the building
                building.companies.forEach(company => {
                    html += `
                        <li class="company">
                            <img src="${company.logo}" alt="${company.name} Logo">
                            <h3>${company.name}</h3>
                            <p>Address: ${company.address}</p>
                            <p>Email: <a href="mailto:${company.email}">${company.email}</a></p>
                            <p>Contact: ${company.contact}</p>
                        </li>
                    `;
                });

                html += '</ul></div>';
            });

            // Insert HTML into the page
            buildingsInfoDiv.innerHTML = html;
        }

        // Display all buildings
        displayBuildingsInfo(data);
    </script>
</body>
</html>
