<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Report an Issue - Inscipe</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore-compat.js"></script>
</head>
<link rel="stylesheet" href="reportissu.css">
<body class="bg-gray-50 font-sans">
  
  <header>
    <h1>
      <span class="In">Ins</span><span class="scipe">cipe</span>
    </h1>
  </header>


  
  <div class="flex items-center justify-center min-h-screen">
    <div class="bg-white rounded-xl shadow-lg w-full container border border-gray-100">
      
      <div class="sidebar hidden lg:block">
        <h2 class="font-bold text-white">Need Help?</h2>
        <p>We're here to assist you. If your issue is urgent, you can also reach out to our support team directly for faster assistance.</p>
        <a href="mailto:inscipe@gmail.com" class="support-link">Contact Support</a>
      </div>

      
      <div class="form-section">
        <h1 class="text-xl sm:text-2xl lg:text-3xl xl:text-3xl font-bold mb-4 sm:mb-6 text-center text-gray-900 tracking-tight">Report an Issue</h1>
        <div id="loading" class="hidden text-center text-gray-600 text-sm sm:text-base lg:text-lg">Loading...</div>
        <div id="form-container" class="hidden">
          <div class="mb-4 sm:mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">User Info</label>
            <p id="user-info" class="text-gray-600 text-sm sm:text-base lg:text-lg bg-gray-50 p-3 rounded-lg border border-gray-200">Loading user info...</p>
          </div>
          <form id="issue-form" class="mb-4">
            <div class="mb-4 sm:mb-6">
              <label for="problem-type" class="block text-sm font-medium text-gray-700 mb-1">Problem Type</label>
              <select id="problem-type" aria-label="Problem type" class="mt-1 p-3 w-full border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base lg:text-lg bg-white shadow-sm" required>
                <option value="" disabled selected>Select a problem type</option>
                <option value="Technical">Technical</option>
                <option value="Delivery">Delivery</option>
                <option value="Refund">Refund</option>
                <option value="Return">Return</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div id="other-problem-heading-container" class="mb-4 sm:mb-6 hidden">
              <label for="other-problem-heading" class="block text-sm font-medium text-gray-700 mb-1">Other Problem Heading</label>
              <input type="text" id="other-problem-heading" aria-label="Other problem heading" class="mt-1 p-3 w-full border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base lg:text-lg shadow-sm" placeholder="Enter the problem heading">
            </div>
            <label for="issue" class="block text-sm font-medium text-gray-700 mb-1">Issue Description</label>
            <textarea id="issue" rows="4" aria-label="Issue description" class="mt-1 p-3 w-full border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base lg:text-lg shadow-sm resize-y" placeholder="Describe your issue in detail..." required></textarea>
            <button type="submit" id="submit-btn" class="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition text-sm sm:text-base lg:text-lg mt-4 sm:mt-6 font-medium">Submit</button>
          </form>
        </div>
        <div id="login-message" class="text-center">
          <p class="text-gray-600 text-sm sm:text-base lg:text-lg mb-2">Please log in to report an issue.</p>
          <a href="login" class="text-blue-500 hover:underline text-sm sm:text-base lg:text-lg font-medium">Go to Login</a>
        </div>
        <div id="success-message" aria-live="polite" class="hidden text-green-600 text-center mt-4 text-sm sm:text-base lg:text-lg bg-green-50 p-2 rounded-lg">Issue reported successfully!</div>
        <div id="error-message" aria-live="polite" class="hidden text-red-600 text-center mt-4 text-sm sm:text-base lg:text-lg bg-red-50 p-2 rounded-lg">Failed to report issue.</div>
      </div>
    </div>
  </div>

  
  <div class="bottom-navigation">
    <a href="/" class="nav-item" aria-label="Home">
      <i class="fas fa-home"></i>
      <span>Home</span>
    </a>
    <a href="account" class="nav-item" aria-label="Your Account">
      <i class="fas fa-user"></i>
      <span>You</span>
    </a>
    <a href="my-orders" class="nav-item" aria-label="My Orders">
      <i class="fas fa-shopping-bag"></i>
      <span>My Orders</span>
    </a>
    <a href="inscipecoins" class="nav-item" aria-label="Redeem">
      <i class="fas fa-gift"></i>
      <span>Redeem</span>
    </a>
    <a href="bot" class="nav-item active" aria-label="Nova">
      <i class="fas fa-headset"></i>
      <span>Nova</span>
    </a>
  </div>

  
  <footer>
    <div class="footer-container">
      <p>&copy; 2025 Inscipe. All rights reserved.</p>
    </div>
  </footer>
  <script src="reportissu.js"></script>
</body>
</html>
    <script>
      console.clear();
    </script>