@include('includes.head')
@php
$queries = [
    "Retrieve all users and their referral percentages.",
    "List all forms submitted by users along with their status.",
    "Get user details along with the form types they submitted.",
    "Find all staff members and their corresponding emails.",
    "List all users who have received tickets and the details of those tickets.",
    "Retrieve all UPCs associated with submitted forms.",
    "Get release statuses of all albums referred by users.",
    "List users along with the creation dates of their payments.",
    "Retrieve all staff assigned to specific tickets.",
    "Get users along with the groups they belong to.",
    "List all forms with their submission dates.",
    "Retrieve details of users who referred others.",
    "Get a summary of tickets received by staff members.",
    "Find users who have submitted forms of a specific type.",
    "List all referral percentages for a specific user 86.",
    "Retrieve all unique groups from the group list.",
    "Get details of all tickets along with their assigned staff."
];
@endphp

<div class="max-[1171px]:px-0 px-96 py-4 pb-8 grid place-items-center space-y-3">
    <div class="select-none flex items-center gap-2 pb-4">
        <img src="https://smarthub.rn-test.com/images/favicon.png" class="h-12 w-12"/>
        <div>
            <h2 class="font-medium text-xl">Smarthub</h2>
            <span class="-mt-[8px] text-[#ff0000] font-bold text-[8px]">Powered by AI</span>
        </div>
    </div>
    <div class="w-4/5 h-max p-4 bg-white space-y-3 border-l-4 border-green-500 " style="box-shadow: 0px -1px 12px 3px #dddddd57;">
        <h1 class="text-2xl font-semibold text-center">👋 Welcome to Your Assistly AI Help Guide</h1>
        <p class="text-sm font-medium text-gray-700 ">Hi there! This assistant can help you manage support tickets and OTL forms. Use this guide to track requests, gather details, and streamline your process, so everything runs smoothly and you can focus on what matters most.</p>
        <div class="w-full h-max bg-gray-100 p-2 space-y-1">
            <h2 class="font-medium">Example Questions:</h2>
            <ul class="list-disc pl-8 text-[13px] font-medium text-gray-600 space-y-1">
                @foreach($queries as $query)
                <li>{{ $query }}</li>
                @endforeach
            </ul>
        </div>
        {{-- <p class="text-sm font-medium text-gray-700 ">Ask questions like these to dive into your music analytics!</p> --}}
    </div>
    {{-- <div class="w-4/5 h-max p-4 bg-white space-y-3 border-l-4 border-green-500" style="box-shadow: 0px -1px 12px 3px #dddddd57;">
        <h1 class="text-2xl font-semibold text-center">✨👋 Chart Creation Guide</h1>
        <p class="text-sm font-medium text-gray-700 ">Use this guide to transform your data into clear, visual insights. Just ask me to create a chart, and I’ll help you visualize your analytics. Invoking phrase "chart" for chart-building. Try these examples to get started:</p>
        <div class="w-full h-max bg-gray-100 p-2 space-y-1">
            <h2 class="font-medium">Example Questions:</h2>
            <ul class="list-disc pl-8 text-[13px] font-medium text-gray-600 space-y-1">
                <li>Q: "Create a bar chart of streams by source."</li>
                <li>Q: "Display a pie chart for track plays segmented by device type."</li>
                <li>Q: "Generate a ring pie chart showing listeners by age group."</li>
                <li>Q: "create chart or the access mode (shuffle vs. non-shuffle) distribution of plays in the past week."</li>
                <li>Q: "Create a pie chart for the age group distribution among users who access the discovery feature over the last 7 days."</li>
            </ul>
        </div>
        <div class="w-full h-max bg-gray-100 p-2 space-y-1">
            <h2 class="font-medium">Available Chart Types:</h2>
            <ul class="list-disc pl-8 text-[13px] font-medium text-gray-600 space-y-1">
                <li>Pie, Bar, Ring Pie.</li>
            </ul>
        </div>
        <div class="w-full h-max bg-gray-100 p-2 space-y-1">
            <h2 class="font-medium">Fields Available:</h2>
            <ul class="list-disc pl-8 text-[13px] font-medium text-gray-600 space-y-1">
                <li>Artist, Album Name, Access, Age Group, Country, Completion, Content Type, Discovery Type, Device Type, Gender, Source, Track Name, OS, Repeat Play, Canvas Viewed, Lyrics Viewed, Streams, Unique Tracks, Unique Listeners.</li>
            </ul>
        </div>
        <p class="text-sm font-medium text-gray-700 ">Let’s make your data come to life with visual insights!</p>
        <div class="w-full h-max bg-gray-100 p-2 space-y-1">
            <ul class="pl-8 text-[13px] font-medium text-gray-600 space-y-1">
                <li>Artist, Album Name, Access, Age Group, Country, Completion, Content Type, Discovery Type, Device Type, Gender, Source, Track Name, OS, Repeat Play, Canvas Viewed, Lyrics Viewed, Streams, Unique Tracks, Unique Listeners.</li>
            </ul>
        </div>
    </div> --}}
</div>