<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resco Trial Information - Intro Page</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="/WebResources/ClientGlobalContext.js.aspx"></script>
    <script>
      function navigateToWebResource(webresource) {
        var pageInput = {
          pageType: "webresource",
          webresourceName: webresource,
        };
        Xrm.Navigation.navigateTo(pageInput);
      }

      function navigateToEntityList(entityName) {
        var pageInput = {
          pageType: "entitylist",
          entityName: entityName,
        };
        Xrm.Navigation.navigateTo(pageInput);
      }

        var context = GetGlobalContext();
        var userId = context.userSettings.userId.replace("{", "").replace("}", "");

        Xrm.WebApi.retrieveRecord("systemuser", userId, "?$select=fullname").then(
            function (result) {
                console.log("User name:", result.fullname);
                // napríklad zobraz do HTML elementu
                document.getElementById("userName").innerText = "Hello, " + result.fullname;
            },
            function (error) {
                console.log(error.message);
            }
        );

    </script>
</head>
<body>
    <main>
        <section class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <h1 id="userName">Hello, John Smith.</h1>
                    <h3>Welcome to Resco Forms</h3>
                    <p>Equip your frontline teams with a robust digital solution to simplify data collection and reporting. Handle inspections and audits effortlessly, even in remote locations, and create comprehensive reports on the spot.</p>
                    <div class="button video-card" data-video-id="ButT3at_QiA">
                        See How It Helps →
                    </div>
                </div>
                <div class="hero-image">
                    <img src="images/intro_image.png" alt="Resco Inspections for Field Technicians and Sales">
                </div>
            </div>
        </section>

        <section class="section"  style="display: none;">
            <div class="container">
                <h2>Introduction to Resco Forms</h2>
                <div class="card-grid">
                    <div class="card video-card" data-video-id="ButT3at_QiA">
                        <h3>Benefits</h3>
                        <p>Unlock the potential of Resco Inspections to streamline your workflow and enhance productivity.</p>
                        <span class="learn-more">Play Video →</span>
                    </div>
                    <div class="card video-card" data-video-id="yR7NsvQK37U">
                        <h3>Top 5 features</h3>
                        <p>The modernized Questionnaire Player introduces five new features designed to streamline the process of creating, sharing, and completing forms, making it faster and easier.</p>
                        <span class="learn-more">Play Video →</span>
                    </div>
                    <div class="card video-card" data-video-id="q00vmbmIQm0">
                        <h3>How it works in 3 steps</h3>
                        <p>Collecting data on the go is tough. Resco Inspections makes it easier for you and your mobile team.</p>
                        <span class="learn-more">Play Video →</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="container">
                <h2>Product list</h2>
                <div class="card-grid">
                    <a href="#" class="card" onclick="navigateToWebResource('resco_MobileCRM/Surveys/index.html')">
                        <h3>Questionnaire Designer</h3>
                        <p>A flexible tool for creating smart digital forms and surveys. Design questionnaires with conditional logic, custom layouts, and dynamic data to streamline data collection in the field.</p>
                        <span class="learn-more">Open →</span>
                    </a>
                    <a href="#" class="card" onclick="navigateToWebResource('resco_MobileCRM/MobileReports/index.html')">
                        <h3>Report Designer</h3>
                        <p>A powerful tool for building custom PDF or Word reports. Easily transform collected data into professional, branded documents with full control over layout, style, and logic.</p>
                        <span class="learn-more">Open →</span>
                    </a>
                    <a href="#" class="card" onclick="navigateToEntityList('resco_questionnaire')">
                        <h3>Templates</h3>
                        <p>A list of published questionnaires ready for use. Open any template to start collecting data instantly in the app.</p>
                        <span class="learn-more">Open →</span>
                    </a>
                    <a href="#" class="card" onclick="navigateToEntityList('resco_questionnaireanswer')">
                        <h3>Answers</h3>
                        <p>A list of questionnaires that are completed or in progress. Easily review, edit, or continue filling out saved responses.</p>
                        <span class="learn-more">Open →</span>
                    </a>
                    <a href="#" class="card" onclick="navigateToWebResource('resco_MobileCRM/Surveys/index.html?data=results%3D1')">
                        <h3>Result Viewer</h3>
                        <p>Displays all completed and in-progress questionnaires. You can filter results by various criteria, export them to .csv, and view individual forms or aggregated summaries over a selected period.</p>
                        <span class="learn-more">Open →</span>
                    </a>
                </div>
            </div>
        </section>


        <section class="section highlight-section">
            <div class="container demo">
                <div class="demo-image"><img src="images/powerpage_image.png" alt="Demo: Questionnnaire on Power Page "></div>
                <div class="demo-text">
                   <h3>Accelerate Power Pages Creation with Our Questionnaire Solution</h3>
                    <p>Build Power Pages faster with our lightweight Dynamics 365 solution, built on top of the Resco Suite. Beyond the Questionnaire component, it includes the required settings and essential tools for metadata-driven features such as data mapping, helping you simplify configuration, speed up implementation, and support testing and prototyping.</p>
                    <p>Key Highlights:</p>
                    <ul>
                        <li>Pre-configured Questionnaire component for immediate use</li>
                        <li>Required settings and tools for metadata-driven features such as data mapping</li>
                        <li>Seamless integration with Power Pages and Dynamics 365</li>
                        <li>Optimized for implementation, testing, and prototyping</li>
                    </ul>
                    <div>
                    <a href="https://woodfordsolutions.blob.core.windows.net/dynamics/RescoFormsPowerPage.zip" class="button">↓ &nbsp;Download the solution files</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="container">
                <h2>Resources</h2>
                <div class="card-grid">
                    <a href="https://docs.resco.net/wiki/Questionnaire_Player_Gen_2" target="_blank" class="card">
                        <h3>Modernized Questionnaire Player</h3>
                        <p>Discover the next generation of the Player — redesigned with a modern user interface, improved performance, and built-in accessibility.</p>
                        <span class="learn-more">Learn more →</span>
                    </a>
                    <a href="https://docs.resco.net/wiki/Questionnaire_Designer" target="_blank" class="card">
                        <h3>Questionnaire Designer</h3>
                        <p>Questionnaire Designer is a web application that runs in a web browser. It is one of the main components of Resco Forms that allows users to build questionnaires in a data-driven user interface.</p>
                        <span class="learn-more">Learn more →</span>
                    </a>
                    <a href="https://docs.resco.net/wiki/Questionnaire_Designer_examples" target="_blank" class="card">
                        <h3>Questionnaire Designer examples</h3>
                        <p>Unlock the potential of Resco Forms to streamline your workflow and enhance productivity. Experience real-time data capture, improved accuracy, and seamless integration with your existing systems.</p>
                        <span class="learn-more">Learn more →</span>
                    </a>
                    <a href="https://docs.resco.net/wiki/Best_practices_for_deploying_Inspections" target="_blank" class="card">
                        <h3>Best practices for deploying Forms</h3>
                        <p>Deploying Forms in large projects without considering performance can degrade user experience. Learn potential issues and configure questionnaires properly to avoid risks.</p>
                        <span class="learn-more">Learn more →</span>
                    </a>
                    <a href="https://docs.resco.net/wiki/Mobile_reports_for_Resco_Inspections" target="_blank" class="card">
                        <h3>Create professional inspection reports instantly on your device</h3>
                        <p>Resco Forms lets you create and share polished reports without paperwork, using built-in templates or fully customized designs via the Report Designer.</p>
                        <span class="learn-more">Learn more →</span>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <!-- Modálne okno pre video -->
    <div id="videoModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <div class="video-container">
                <!-- Tu bude vložené YouTube video pomocou JavaScriptu -->
            </div>
        </div>
    </div>

    <script src="script.js" defer></script>


</body>
</html>