{% extends "_base.html" %} {% block content %}
<div
  class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-grey-300"
>
  <div class="mb-4 col-span-full xl:mb-2">
    <h1 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
      User settings
    </h1>
    <h3 class="mb-4 text-xl font-semibold dark:text-white">
      User type: {{ user_profile.user_type }}
    </h3>
  </div>
  <!-- Right Content -->
  
  <div class="col-span-full xl:col-auto">
    <div class="p-4 mb-4 bg-white border boder-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
      <h3 class="mb-4 text-xl font-semibold dark:text-white">Tokens:</h3>
      <p class="mb-4 text-xl font-semibold dark:text-white">{{ token_count }}</p>
    </div>
    <div class="p-4 mb-4 bg-white border boder-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
      <h3 class="mb-4 text-xl font-semibold dark:text-white">Change your password</h3>
      <a href="{% url 'password_change' %}" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Change Password</a>
    </div>
    
    
    {% if user_profile.user_type == 3 %}
    <div
      class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
    >
    
      <h3 class="mb-4 text-xl font-semibold dark:text-white">
        Generate Financial Statement
      </h3>
      <form
        action="/generate-statement"
        method="post"
        class="flex flex-col space-y-4"
      >
        <div class="flex flex-col">
          <label
            for="startDate"
            class="text-sm font-medium text-gray-600 dark:text-gray-300"
            >From Date</label
          >
          <input
            type="date"
            id="startDate"
            name="startDate"
            class="p-2 border rounded-md"
            required
          />
        </div>
        <div class="flex flex-col">
          <label
            for="endDate"
            class="text-sm font-medium text-gray-600 dark:text-gray-300"
            >To Date</label
          >
          <input
            type="date"
            id="endDate"
            name="endDate"
            class="p-2 border rounded-md"
            required
          />
        </div>
        <a href="{% url 'generate_pdf' %}"
        <button
          type="submit"
          class="p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
        >
          Download Financial Statement
        </button>
        </a>
      </form>
      {% comment %} REPLACE WITH LOGIC TO CHECK PROPER USER {% endcomment %}
    </div>
    {% endif %}
    {% if 1 %}

    <div
      class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
    >
      <h3 class="mb-4 text-xl font-semibold dark:text-white">
        Upload Machine Learning Model
      </h3>
      <form
        action="/upload-model"
        method="post"
        enctype="multipart/form-data"
        class="flex flex-col space-y-4"
      >
        <div class="flex flex-col">
          <label
            for="modelFile"
            class="text-sm font-medium text-gray-600 dark:text-gray-300"
            >Select Model File</label
          >
          <input
            type="file"
            id="modelFile"
            name="modelFile"
            accept=".h5, .hdf5, .pkl"
            class="p-2 border rounded-md"
            required
          />
        </div>
        <button
          type="submit"
          class="p-2 bg-green-500 text-white rounded-md hover:bg-green-600"
        >
          Upload File
        </button>
      </form>
    </div>
    {% comment %} AI content {% endcomment %} {% endif%}
  </div>

  <div class="col-span-2">
    <div
      class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
    >
      <h3 class="mb-4 text-xl font-semibold dark:text-white">
        General information
      </h3>
      <div class="grid grid-cols-6 gap-6">
        <div class="col-span-6 sm:col-span-3">
          <label
            for="first-name"
            class="block mb-2 text-sm font-medium text-grey-300 dark:text-white"
            >Email Address</label
          >
          <span
            type="text"
            name="first-name"
            id="first-name"
            class="shadow-sm bg-gray-50 border border-gray-300 text-grey-300 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="example@gmail.com"
            required
            >{{ user.email }}</span
          >
        </div>
        <div class="col-span-6 sm:col-span-3">
          <label
            for="last-name"
            class="block mb-2 text-sm font-medium text-grey-300 dark:text-white"
            >Login</label
          >
          <span
            type="text"
            name="last-name"
            id="last-name"
            class="shadow-sm bg-gray-50 border border-gray-300 text-grey-300 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="Green"
            required
            >{{ user.username }}</span
          >
        </div>
      </div>
    </div>
    <div
      class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
    >
      <h3 class="mb-4 text-xl font-semibold dark:text-white">User History</h3>
      <table
        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
      >
        <thead
          class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
        >
          <tr>
            <th scope="col" class="px-6 py-3">Date</th>
            <th scope="col" class="px-6 py-3">Action</th>
            <th scope="col" class="px-6 py-3">Details</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in user_data %}

          <tr
            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
          >
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
            >
{{entry.date}}            </th>
            <td class="px-6 py-4">{{entry.action}}</td>
            <td class="px-6 py-4">
              <a
                href="#"
                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                >{{entry.file}}</a
              >
            </td>
          </tr>
          {%endfor%}
        </tbody>
      </table>
    </div>
    {% if 1 %} {% comment %} REPLACE WITH LOGIC TO CHECK PROPER USER
    {%endcomment %}
    {% if user_profile.user_type == 2 %}
    <div
      class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
    >
      <h3 class="mb-4 text-xl font-semibold dark:text-white">
        Application Logs
      </h3>
      <table
        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
      >
        <thead
          class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
        >
          <tr>
            <th scope="col" class="px-6 py-3">Date</th>
            <th scope="col" class="px-6 py-3">Action</th>
            <th scope="col" class="px-6 py-3">User ID</th>
            <th scope="col" class="px-6 py-3">status</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in admin_data %}
          <tr
            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
          >
            <td
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
            >
{{entry.date}}          </td>
            <td class="px-6 py-4">
              <a
                href="#"
                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                >{{entry.action}}</a
              >
            </td>
            <td class="px-6 py-4">{{entry.user}}</td>
            <td class="px-6 py-4">
            {{entry.status}}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
    {% endif %} {% comment %} Admin page functionality end {% endcomment %}
  </div>
</div>
{% endblock content %}