<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Installer</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <main class="bg-gray-100 mb-28 text-gray-900 flex justify-center items-center min-h-screen">
      <!--Toast container -->
      <div class="my-72 rounded-lg shadow-xl"></div>

      <!-- Main container for side-by-side cards -->
      <div class="my-28 gap-6 w-full max-w-screen-xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-4">
        <!-- Left Card (Checkboxes for steps) -->
        <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-xl h-full">
          <h1 class="text-2xl font-bold text-center mb-6">Password-Based Filter Installer</h1>

          <!-- Selection checkboxes for each step -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-8">
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="filter-apk" checked class="mr-4" />
                Install the Filter App
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="device-profile" checked class="mr-4" />
                Set the Filter App as the Device Owner
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="permission-grant" checked class="mr-4" />
                Grant the Filter Accessibility Settings
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="keyboard-apk" checked class="mr-4" />
                Install Non-GIF Keyboard
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="disable-google-input" checked class="mr-4" />
                Disable Gboard (GIF Keyboard)
              </label>
            </div>
          </div>

          <button
            id="installBtn"
            onclick="installApp()"
            class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 focus:outline-none"
          >
            Install
          </button>
        </div>
        <!-- Right Card (Status and Steps Feed) -->
        <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-xl h-full">
          <h1 class="text-2xl font-bold text-center my-6">Status</h1>
          <div id="statusMessage" class="mt-4 text-center text-lg font-medium">Nothing is Running</div>
          <div id="loadingSpinner" class="hidden text-center text-2xl">⏳ Installation in progress...</div>

          <!-- Feed component for showing steps -->
          <div id="stepsContainer" class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6"></div>

          <!-- Clear Status Button -->
          <button onclick="clearStatus()" class="mt-6 w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-400 focus:outline-none">
            Clear Status
          </button>
        </div>

        <!-- Left Card (Checkboxes for steps) -->
        <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-xl h-full">
          <h1 class="text-2xl font-bold text-center mb-6">App Installer/Updater (Not Recommended to Use)</h1>

          <!-- Selection checkboxes for each step -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-8">
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="com.google.android.gms" checked class="mr-4" />
                Google Play Services
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="com.android.vending" checked class="mr-4" />
                Google Play Store
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="com.google.android.apps.messaging" checked class="mr-4" />
                Google Messages
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="com.google.android.projection.gearhead" checked class="mr-4" />
                Android Auto
              </label>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
              <label class="flex items-center">
                <input type="checkbox" id="org.futo.inputmethod.latin.playstore" checked class="mr-4" />
                FUTO Keyboard
              </label>
            </div>
          </div>

          <button
            id="installSelectedBtn"
            onclick="installSelectedApps()"
            class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 focus:outline-none"
          >
            Install Selected Apps
          </button>
        </div>
      </div>
    </main>
    <footer class="bg-gray-900 px-12" style="margin-top: -120px">
      <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
        <p class="mt-8 text-center text-sm/6 text-gray-400 md:order-1 md:mt-0">
          &copy; 2024 Mesnan Filter Solutions - All rights reserved.<br />Contact us at mesnan.com or info@mesnan.com
        </p>
      </div>
    </footer>
    <script src="app.js"></script>
  </body>
</html>
