<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User & Account Manager</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">
</head>
<body class="bg-gray-50 text-gray-900">

  <div class="max-w-6xl mx-auto p-6">
    <!-- HEADER -->
    <header class="mb-8 text-center">
      <h1 class="text-4xl font-bold text-indigo-700">User & Account Manager</h1>
      <p class="text-gray-600 text-lg">Easily manage your users and their accounts.</p>
    </header>

    <!-- CREATE MAIN USER -->
    <section class="mb-8 bg-white p-6 rounded-2xl shadow-md overflow-hidden">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">Create a Main User</h2>
      <div class="flex flex-col md:flex-row gap-3">
        <input id="userName" type="text" placeholder="Enter main user name..."
          class="input-field flex-1" />
        <button id="addUserBtn" class="btn-primary">Add User</button>
        <!--<button id="exportBtn" class="btn-dark">Export JSON</button>-->
        <!--<label class="btn-secondary cursor-pointer">-->
        <!--  Import JSON-->
        <!--  <input id="importInput" type="file" accept="application/json" class="hidden" />-->
        <!--</label>-->
      </div>
    </section>

    <!-- USERS LIST -->
    <section class="bg-white p-6 rounded-2xl shadow-md overflow-hidden">
<div class="flex flex-col sm:flex-row justify-between items-center mb-4 gap-3">
  <div class="flex items-center gap-3">
    <h2 class="text-xl font-semibold text-gray-800">All Users</h2>

    <!-- Week Selector -->
<div class="flex items-center gap-2">
  <button id="weekSelectorBtn" 
          class="rounded-lg bg-indigo-600 text-white px-3 py-1.5 text-sm hover:bg-indigo-700 transition">
    Week ...
  </button>
  <!-- Hidden input for selecting a custom Monday -->
  <input type="date" id="weekPicker" class="hidden" />
<!-- SessionID Checker -->
<button id="checkSessionBtn" 
        class="rounded-lg bg-purple-600 text-white px-3 py-1.5 text-sm hover:bg-purple-700 transition">
  Check Session
</button>
<span id="sessionStatus" class="ml-2 text-sm font-medium"></span>
  <!-- Country Select -->
  <!--<select id="countrySelect" class="rounded-lg border border-gray-300 px-2 py-1 text-sm">-->
  <!--  <option value="Nigeria">Nigeria</option>-->
  <!--  <option value="Romania">Romania</option>-->
  <!--  <option value="USA">USA</option>-->
  <!--  <option value="UK">UK</option>-->
  <!--  <option value="India">India</option>-->
  <!--  <option value="Thailand">Thailand</option>-->
  <!--  <option value="Egypt">Egypt</option>-->
  <!--  <option value="UAE">UAE</option>-->
  <!--</select>-->
</div>

  </div>

  <!-- Search Box -->
  <input id="searchBox" type="text" placeholder="Search users or accounts..."
         class="input-field w-full sm:w-72" />
</div>

      <!-- Users will render here -->
      <div id="usersContainer" class="space-y-4"></div>
    </section>
  </div>

  <!-- USER TEMPLATE -->
  <template id="userRowTpl">
    <div class="user-card border border-gray-200 rounded-xl overflow-hidden">
      <!-- Header -->
      <div class="bg-gray-100 px-4 py-3 flex justify-between items-center">
        <div class="flex items-center gap-3">
          <button class="toggleBtn text-gray-600 hover:text-indigo-600 transition text-lg">▸</button>
          <span class="userName font-semibold text-lg"></span>
          <span class="text-sm text-gray-500 accountsCount"></span>
        </div>
        <div class="flex items-center gap-2">
          <input type="text" class="accountInput hidden md:block input-field-sm"
            placeholder="New account name" />
          <button class="addAccountBtn btn-green" title="Add Account">+</button>
          <button class="renameUserBtn btn-sky" title="Rename User">✏️</button>
          <button class="deleteUserBtn btn-red" title="Delete User">🗑</button>
        </div>
      </div>

      <!-- Accounts -->
      <div class="accounts hidden bg-white px-4 py-3">
        <ul class="space-y-2"></ul>
      </div>
    </div>
  </template>

  <!-- ACCOUNT TEMPLATE -->
<template id="accountItemTpl">
  <li class="account-item">
    <div class="flex items-center gap-2">
      <span class="text-slate-500">↳</span>
      <span class="accountName font-medium"></span>
    </div>

    <!-- Right side: 7 boxes + buttons -->
    <div class="flex items-center gap-3">
      <!-- 7 boxes -->
      <div class="flex gap-1">
        <div class="day-box" data-day="1"></div>
        <div class="day-box" data-day="2"></div>
        <div class="day-box" data-day="3"></div>
        <div class="day-box" data-day="4"></div>
        <div class="day-box" data-day="5"></div>
        <div class="day-box" data-day="6"></div>
        <div class="day-box" data-day="7"></div>
      </div>

      <!-- Account actions -->
    </div>
  </li>
</template>

<!-- Settings Modal -->
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center hidden z-50">
  <div class="bg-white rounded-lg p-6 shadow-lg relative w-96">
    <button id="closeSettingsModal" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-2xl font-bold">×</button>
    
    <h2 id="modalAccountTitle" class="text-xl font-semibold mb-4">Settings for "AccountName"</h2>

    <!-- Target Posts -->
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700">Target Posts Daily</label>
      <input id="targetPostsInput" 
             type="number" 
             min="0" 
             class="mt-1 w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" 
             placeholder="0">
    </div>

    <!-- VA Charge -->
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700">VA Charge Weekly</label>
      <div class="dollar-input-wrapper">
  <span class="dollar-symbol">$</span>
      <input id="vaChargeInput" 
             type="number" 
             min="0" 
             step="0.01" 
             class="mt-1 w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" 
             placeholder="0">
             </div>
    </div>
    
    <button id="modalInsertCaptionsBtn" 
        class="bg-yellow-500 text-white font-bold px-4 py-2 mt-2 rounded w-full">
  📄 Insert Empty Captions
</button>
<button id="modalCheckAccountBtn" 
  class="w-full bg-blue-500 text-white py-2 rounded mt-2 flex items-center justify-center gap-2 hover:bg-blue-600">
  🔍 Check Account
</button>

    <!-- Buttons -->
    <button id="modalRenameBtn" class="w-full bg-blue-500 text-white py-2 rounded mt-2 flex items-center justify-center gap-2 hover:bg-blue-600">
      ✏️ Rename Account
    </button>

    <button id="modalDeleteBtn" class="w-full bg-red-500 text-white py-2 rounded mt-2 flex items-center justify-center gap-2 hover:bg-red-600">
      🗑️ Delete Account
    </button>

  </div>
</div>



<script src="script.js?v=<?php echo time(); ?>"></script>
<!-- Account Settings Modal -->

</body>
</html>
