<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Store</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@shadcn/ui/dist/shadcn.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* CSS for the hero banner */
        .hero-banner {
            position: relative;
            width: 100%;
            height: 100vh; /* Full height of the viewport */
            overflow: hidden; /* Hide any overflow */
        }

        .hero-image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            object-fit: cover; /* Cover the entire area */
            transform: translate(-50%, -50%); /* Center the image */
        }

        .hero-content {
            position: relative; /* Position relative to the hero banner */
            z-index: 1; /* Ensure content is above the image */
            color: white; /* Change text color as needed */
            text-align: center; /* Center the text */
            padding: 20px; /* Add some padding */
        }
    </style>
</head>
<body class="flex flex-col min-h-screen pt-16 bg-gray-100">
    <!-- Header -->
    <header class="bg-black text-white p-4 fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="container mx-auto flex justify-between items-center">
            <div class="text-2xl font-bold">
                <a href="index.html">
                    <img src="logo.png" alt="Emprezario Logo" class="h-10">
                </a>
            </div>
            <nav class="hidden md:block">
                <ul class="flex space-x-4">
                    <li><a href="index.html" class="menu-item">HOME</a></li>
                    <li><a href="about.html" class="menu-item">ABOUT</a></li>
                    <li><a href="app-store.html" class="menu-item">APP STORE</a></li>
                    <li><a href="how-it-works.html" class="menu-item">HOW IT WORKS</a></li>
                    <li><a href="pricing.html" class="menu-item">PRICING</a></li>
                    <li><a href="contact.html" class="menu-item">CONTACT</a></li>
                </ul>
            </nav>
            <button id="mobile-menu-button" class="md:hidden">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-16">
        <div id="app-list" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- App cards will be dynamically inserted here -->
        </div>

        <!-- Pagination Controls -->
        <div id="pagination" class="flex justify-center mt-8">
            <button id="prev-page" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-l" disabled>Previous</button>
            <span id="page-info" class="mx-4"></span>
            <button id="next-page" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-r">Next</button>
        </div>
    </main>

    <!-- Modal for App Details -->
    <div id="app-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden justify-center items-center">
        <div class="bg-white rounded-lg p-6 max-w-lg w-full">
            <h2 id="modal-app-name" class="text-2xl font-bold mb-4"></h2>
            <img id="modal-app-icon" src="" alt="App Icon" class="mb-4 rounded-lg">
            <p id="modal-app-description" class="text-lg mb-4"></p>
            <button id="close-modal" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Close</button>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-black text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center md:text-left">
                    <a href="index.html" class="inline-block mb-4">
                        <img src="logo.png" alt="Emprezario Logo" class="h-8">
                    </a>
                    <p class="text-sm text-gray-400">Empowering businesses with innovative solutions.</p>
                </div>
                <div class="text-center md:text-left">
                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="hover:text-red-500 transition-colors duration-300">Home</a></li>
                        <li><a href="about.html" class="hover:text-red-500 transition-colors duration-300">About</a></li>
                        <li><a href="app-store.html" class="hover:text-red-500 transition-colors duration-300">App Store</a></li>
                        <li><a href="how-it-works.html" class="hover:text-red-500 transition-colors duration-300">How It Works</a></li>
                        <li><a href="pricing.html" class="hover:text-red-500 transition-colors duration-300">Pricing</a></li>
                        <li><a href="contact.html" class="hover:text-red-500 transition-colors duration-300">Contact</a></li>
                    </ul>
                </div>
                <div class="text-center md:text-left">
                    <h3 class="text-lg font-semibold mb-4">Legal</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-red-500 transition-colors duration-300">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-red-500 transition-colors duration-300">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-red-500 transition-colors duration-300">FAQ</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center">
                <p class="text-sm text-gray-400">&copy; 2024 Emprezario. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        const appsPerPage = 12; // Number of apps to display per page
        let currentPage = 1; // Current page number
        let totalApps = 0; // Total number of apps
        let totalPages = 0; // Total number of pages

        $(document).ready(function() {
            loadApps(currentPage); // Load apps for the current page

            // Load apps function
            function loadApps(page) {
                fetch(`https://app.nocodb.com/api/v2/tables/m842uknbq1mduo7/records?limit=${appsPerPage}&offset=${(page - 1) * appsPerPage}`, {
                    headers: {
                        'accept': 'application/json',
                        'xc-token': 'h1SeleSoYPrhmcqO7LadBzw7MUvT02ELv1CBCbAd'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log(data); // Log the data to check the structure
                    totalApps = data.count; // Use the total count from the response
                    totalPages = Math.ceil(totalApps / appsPerPage); // Calculate total pages based on total count
                    $('#app-list').empty(); // Clear previous apps

                    if (data.list.length === 0) {
                        $('#app-list').append('<p>No apps available.</p>');
                        return;
                    }

                    data.list.forEach(app => {
                        $('#app-list').append(`
                            <div class="app-card bg-white p-4 rounded-lg shadow-md cursor-pointer transition-transform transform hover:scale-105 flex flex-col items-center" data-id="${app.Id}">
                                <img src="${app.appicon[0].thumbnails.small.signedUrl}" alt="${app.appname} icon" class="mb-4 rounded w-32 h-32 object-cover">
                                <h3 class="text-lg font-semibold text-center">${app.appname}</h3>
                                <p class="text-gray-600 text-center">${app.des}</p>
                            </div>
                        `);
                    });

                    $('#page-info').text(`Page ${page} of ${totalPages}`);
                    $('#prev-page').prop('disabled', page === 1);
                    $('#next-page').prop('disabled', page === totalPages);
                })
                .catch(error => {
                    console.error('Error fetching apps:', error);
                    $('#app-list').append('<p>Error loading apps. Please try again later.</p>');
                });
            }

            // Pagination controls
            $('#prev-page').on('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    loadApps(currentPage);
                }
            });

            $('#next-page').on('click', function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    loadApps(currentPage);
                }
            });

            // App card click event
            $(document).on('click', '.app-card', function() {
                const appId = $(this).data('id');
                fetchAppDetails(appId);
            });

            // Function to fetch app details
            function fetchAppDetails(appId) {
                fetch(`https://app.nocodb.com/api/v2/tables/m842uknbq1mduo7/records/${appId}`, {
                    headers: {
                        'accept': 'application/json',
                        'xc-token': 'h1SeleSoYPrhmcqO7LadBzw7MUvT02ELv1CBCbAd'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    const app = data; // Assuming the response is the app object
                    $('#modal-app-name').text(app.appname);
                    $('#modal-app-icon').attr('src', app.appicon[0].url); // Use the main image URL for the modal
                    $('#modal-app-description').text(app.des); // Assuming 'des' contains the description
                    $('#app-modal').removeClass('hidden'); // Show the modal
                })
                .catch(error => console.error('Error fetching app details:', error));
            }

            // Close modal
            $('#close-modal').on('click', function() {
                $('#app-modal').addClass('hidden'); // Hide the modal
            });
        });
    </script>
</body>
</html>
