
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thugil Creations</title>

  <!-- Bootstrap CSS (via CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
   
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(0, 0, 0);
  border: none;
  font-size: 10px;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
.navbar .nav-link {
  margin-right: 15px; /* Adjust space between icons */
}

.navbar .nav-link i {
  transition: color 0.3s ease;
}

.navbar .nav-link:hover i {
  color: #000000;  /* Change this to your preferred hover color */
}
/* Default text styling for larger screens */
.upper-nav .text-slider .text-item {
  font-size: 20px; /* Default font size for larger screens */
  white-space: nowrap; /* Prevent text from wrapping by default */
  overflow: hidden; /* Hide text that overflows the container */
  text-overflow: ellipsis; /* Optional: Show ellipsis when text overflows */
}

/* Adjust text size and enable wrapping for mobile view */
@media (max-width: 767px) {
  .upper-nav .text-slider .text-item {
    font-size: 14px; /* Reduce the font size on mobile */
    white-space: normal; /* Allow text to wrap on small screens */
    word-wrap: break-word; /* Ensure words break onto the next line */
    overflow-wrap: break-word; /* Ensure long words break if necessary */
  }
}

/* Custom Navbar Styling */
.navbar {
  background-color: #FFF3E2 !important;
}

/* Company Name with Gradient and Animation */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  background: linear-gradient(90deg, #000000, #000000);
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-animation 3s ease infinite;
}

/* Animation for gradient */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Navbar link color */
.navbar-nav .nav-link {
  color: #000000; /* Set the color of the links */
}

.navbar-nav .nav-link:hover {
  color: #E74646; /* Set the hover color of the links */
}

/* Positioning the user and cart icons outside the collapsible navbar */
.navbar-icons {
  display: flex;
  align-items: center;
  position: absolute;
  right: 15px; /* Align the icons to the right */
  top: 50%;  /* Vertically center the icons */
  transform: translateY(-50%);
  z-index: 10; /* Ensure they stay above other content */
}

/* Mobile View Adjustments */
@media (max-width: 991px) {
  .navbar .container-fluid {
    position: relative; /* Required for absolute positioning of the icons */
  }

  .navbar-toggler {
    position: absolute;
    left: 10px; /* Position toggle button to the left */
    z-index: 20; /* Ensure the toggle button is above other elements */
  }

  .navbar-nav {
    margin-left: auto;
  }

  /* Ensure the icons don't move when the menu is toggled */
  .navbar-icons {
    position: absolute;
    right: 15px; /* Keep them aligned to the right */
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Custom CSS for Mobile View */
@media (max-width: 991px) {
  /* Make navbar content take up full space */
  .navbar .container-fluid {
    position: relative; /* Required for absolute positioning */
  }

  /* Make sure the logo and toggle button stay in place */
  .navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Position the toggle button absolutely so it doesn't move */
  .navbar-toggler {
    position: absolute;
    left: 5px; /* Adjust to your desired space from the left */
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    margin-left: 50px; /* Adjust the margin to create space between toggle and logo */
    font-size: 16px;
  }

  .navbar-nav {
    margin-left: auto; /* Align navbar items to the right */
  }

  /* Right Side: User and Cart Icons */
  .d-flex {
    display: flex;
    align-items: center;
    position: absolute;
    right: 15px; /* Adjust to position on the right side */
    top: 50%;
    transform: translateY(-50%);
  }
}

.error-message {
            color: red;
            font-size: 14px;
            background-color: #ffcccb;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }
        .spinner-container {
            display: none;
            text-align: center;
        }

.footer {
    height: auto;  /* Remove fixed height for flexibility */
    background-color: #000000;
    color: #fefefe;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the footer content horizontally */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;
    gap: 30px;  /* Space between columns */
}

.footer-column {
    flex: 1;
    padding: 0 15px;
    text-align: left;  /* Ensure text aligns left */
}

.footer-column h3 {
    color: #f6ffb6;
    margin-bottom: 20px;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column p, .footer-column ul {
    color: #ffffff;
    font-size: 1rem;  /* Make text size consistent */
    line-height: 1.6;
}

.footer-column ul {
    list-style-type: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;  /* Added padding to align bullets better */
}

.footer-column ul li::before {
    content: '•';
    color: #ffffff;
    position: absolute;
    left: 0;
    font-size: 1.5rem;  /* Adjust bullet size */
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-links a {
    color: #a9b7c6;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #4ecdc4;
}

.footer-bottom {
    background-color: #060606;
    color: #a9b7c6;
    text-align: center;
    padding: 15px 0;
    width: 100%;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
        text-align: center;  /* Center text in columns for mobile */
    }

    .footer-column ul {
        display: flex;  /* Use flexbox to center the list */
        flex-direction: column;
        align-items: center;  /* Center the list items */
        padding: 0;
    }

    .footer-column ul li {
        margin-bottom: 10px;
        padding-left: 0;  /* Remove padding for mobile */
        text-align: center; /* Ensure list items are centered */
    }

    .footer-column ul li::before {
        display: none; /* Remove bullet points on mobile */
    }

    .social-links {
        justify-content: center;
    }

    .footer-column p {
        font-size: 0.9rem;  /* Smaller text for mobile */
    }
}
  </style>
</head>
<body>
  
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <!-- Wrapper for Logo and Toggle Button -->
          <div class="navbar-header">
            <!-- Navbar Toggler for mobile responsiveness -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" id="navbar-toggler">
              <i class="fa-solid fa-bars fa-fade"></i>
            </button>
      
            <!-- Company Logo and Name on the left -->
            <a class="navbar-brand" href="#">
              <img src="icons/logo.png" alt="Thugil Creation Logo" style="width: 40px; height: auto; margin-right: 10px;">
              Thugil Creation
            </a>
          </div>
      
          <!-- Navbar Links -->
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
            
              
              <!-- New Design Link -->
              <li class="nav-item">
                <a class="nav-link" href="#">New Design</a>
              </li>

              <!-- New Design Link -->
            <li class="nav-item">
              <a class='nav-link' href='thugilcreationphotos.html'>Images</a>
            </li>
              
            </ul>
          </div>

        </div>
      </nav>
      
      <div class="container mt-4">
        <h3 class="text-center">Manage Emails</h3>
        
        <!-- Email Input -->
        <div class="row g-3">
            <div class="col-md-8">
                <label for="emailInput" class="form-label">Add Email</label>
                <input type="email" class="form-control" id="emailInput" placeholder="Enter email address" required>
            </div>
            <div class="col-md-4 align-self-end">
                <button id="saveEmailBtn" class="btn btn-primary w-100">Save Email</button>
            </div>
        </div>
    </div>
    
    <div class="container mt-5" id="new-designs">
      <h2 class="text-center">Create New Design</h2>
  
      <!-- Error Message Box -->
      <div class="error-message" id="error-message"></div>
  
      <!-- Spinner for Loading State -->
      <div class="spinner-container" id="spinner">
          <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Loading...</span>
          </div>
          <p>Saving your design...</p>
      </div>
  
     <!-- Form for Design Information -->
<form id="designForm" class="row g-3">
  <!-- Design Image URL -->
  <div class="col-md-6">
      <label for="designImage" class="form-label">Design Image URL</label>
      <input type="text" class="form-control" id="designImage" required>
  </div>

  <!-- Design Name -->
  <div class="col-md-6">
      <label for="designName" class="form-label">Design Name</label>
      <input type="text" class="form-control" id="designName" required>
  </div>

  <!-- Hooks -->
  <div class="col-md-6">
      <label for="hooks" class="form-label">Hooks</label>
      <input type="text" class="form-control" id="hooks" required>
  </div>

  <!-- Cards -->
  <div class="col-md-6">
      <label for="cards" class="form-label">Cards</label>
      <input type="text" class="form-control" id="cards" required>
  </div>

  <!-- Image Type -->
  <div class="col-md-6">
      <label for="imageType" class="form-label">Image Type</label>
      <select class="form-select" id="imageType" required>
          <option value="jpg">JPG</option>
          <option value="png">PNG</option>
          <option value="BMP">BMP</option>
      </select>
  </div>

  <!-- EPI and PPI -->
  <div class="col-md-6">
      <label for="epi" class="form-label">EPI (Reed Count)</label>
      <input type="number" class="form-control" id="epi" required>
  </div>
  <div class="col-md-6">
      <label for="ppi" class="form-label">PPI (Pixel Per Inch)</label>
      <input type="number" class="form-control" id="ppi" required>
  </div>
  <div class="col-md-6">
      <label for="harnessbuild" class="form-label">Harnessbuild</label>
      <input type="text" class="form-control" id="harnessbuild" required>
  </div>

  <!-- Listing Rate and Final Price -->
  <div class="col-md-6">
      <label for="listingRate" class="form-label">Listing Rate</label>
      <input type="number" class="form-control" id="listingRate" required>
  </div>
  <div class="col-md-6">
      <label for="finalPrice" class="form-label">Final Price</label>
      <input type="number" class="form-control" id="finalPrice" required>
  </div>

  <!-- Label -->
  <div class="col-md-6">
      <label for="label" class="form-label">Label</label>
      <select class="form-select" id="label" required>
          <option value="new">New</option>
          <option value="sale">Sale</option>
          <option value="featured">Featured</option>
      </select>
  </div>

  <!-- Email Dropdown -->
  <div class="col-md-6">
      <label for="emailDropdown" class="form-label">Select Email</label>
      <select class="form-select" id="emailDropdown" required>
          <option value="" disabled selected>Select an email</option>
      </select>
  </div>

  <!-- Original Image URL -->
  <div class="col-6">
      <label for="originalImage" class="form-label">Original Image URL</label>
      <input type="text" class="form-control" id="originalImage" required>
  </div>

  <!-- Saree Style -->
  <div class="col-6">
      <label for="sareeStyle" class="form-label">Saree Style</label>
      <select class="form-select" id="sareeStyle" required>
          <option value="butta">Butta</option>
          <option value="pallu">Pallu</option>
          <option value="border">Border</option>
          <option value="embose">Embose</option>
          <option value="brocade">Brocade</option>
          <option value="Pattern">Pattern</option>
          <option value="full set">Full Set</option>
          <option value="free-images">Free Images</option>
      </select>
  </div>

  <!-- Redirect URL (Hidden Initially) -->
  <div class="col-6" id="redirectUrlContainer" style="display:none;">
      <label for="redirectUrl" class="form-label">Redirect URL</label>
      <input type="text" class="form-control" id="redirectUrl">
  </div>

  <!-- Submit Button -->
  <div class="col-12 mb-2">
      <button type="submit" class="btn btn-success w-100">Save Design</button>
  </div>
</form>

  <!-- Bootstrap JS and Popper -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gybBfDZZf2pWZhlz6wYil6zLs5J6T5g5zFZ5z3aP/hU4X9j2zN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-pzjw8f+ua7Kw1TIq0FfDOMt4LTtQn7cFLO5zQbf7Yz8l5wE0F5zYb2hFumD6gmYd" crossorigin="anonymous"></script>
  
  <!-- Firebase Script -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js';
    import { getDatabase, ref, set, push, get, child } from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-database.js';
  
    const firebaseConfig = {
      apiKey: "AIzaSyAC2Ah9i9_FqZ5PC41uI4WPVupduYkgS4g",
  authDomain: "thugilcreation-256ef.firebaseapp.com",
  databaseURL: "https://thugilcreation-256ef-default-rtdb.firebaseio.com",
  projectId: "thugilcreation-256ef",
  storageBucket: "thugilcreation-256ef.firebasestorage.app",
  messagingSenderId: "107585634231",
  appId: "1:107585634231:web:b00a117b1ec6d9a1833232"
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const database = getDatabase(app);
  
    // Handle form submission
    document.getElementById('designForm').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent page reload on form submit
  
        // Get form values, including new fields
        const designImage = document.getElementById('designImage').value;
        const designName = document.getElementById('designName').value;
        const hooks = document.getElementById('hooks').value;
        const cards = document.getElementById('cards').value;
        const imageType = document.getElementById('imageType').value;
        const epi = document.getElementById('epi').value;
        const ppi = document.getElementById('ppi').value;
        const harnessbuild = document.getElementById('harnessbuild').value;
        const listingRate = document.getElementById('listingRate').value;
        const finalPrice = document.getElementById('finalPrice').value;
        const label = document.getElementById('label').value;
  
        // New fields
        const originalImage = document.getElementById('originalImage').value;
        const sareeStyle = document.getElementById('sareeStyle').value;
        const selectedEmail = document.getElementById('emailDropdown').value;
        const redirectUrl = sareeStyle === 'free-images' ? document.getElementById('redirectUrl').value : null;
  
        const createdAt = new Date().toISOString();
  
        // Validate the selected email
        if (!selectedEmail) {
            alert('Please select an email before submitting.');
            return;
        }
  
        // Generate a unique product ID using push() to create a new entry
        const designRef = ref(database, 'designs/' + sareeStyle);
        const newDesignRef = push(designRef);
  
        // Create the design object including the email, image URLs, saree style, redirect URL (if applicable), and now the productId
        const newDesign = {
            productId: newDesignRef.key,
            name: designName,
            hooks: hooks,
            cards: cards,
            imageUrl: designImage,
            originalImageUrl: originalImage,
            imageType: imageType,
            epi: parseInt(epi),
            ppi: parseInt(ppi),
            harnessbuild:harnessbuild,
            listingRate: parseInt(listingRate),
            finalPrice: parseInt(finalPrice),
            label: label,
            sareeStyle: sareeStyle,
            email: selectedEmail,
            redirectUrl: redirectUrl,
            createdAt: createdAt
        };
  
        // Save the new design to Firebase
        set(newDesignRef, newDesign)
            .then(() => {
                alert('Design saved successfully!');
                document.getElementById('designForm').reset();  // Optionally reset form after submission
                document.getElementById('redirectUrlContainer').style.display = 'none'; // Hide redirect URL input after submit
            })
            .catch((error) => {
                console.error('Error saving design:', error);
                alert('Error saving design');
            });
    });
  
    // Show or hide the redirect URL input based on Saree Style selection
    document.getElementById('sareeStyle').addEventListener('change', function () {
        const redirectUrlContainer = document.getElementById('redirectUrlContainer');
        if (this.value === 'free-images') {
            redirectUrlContainer.style.display = 'block'; // Show redirect URL input
        } else {
            redirectUrlContainer.style.display = 'none'; // Hide redirect URL input
        }
    });
  
    // Fetch emails from Firebase and populate the dropdown
const emailDropdown = document.getElementById('emailDropdown');

function fetchEmails() {
  const emailRef = ref(database, 'emails'); // Reference to the emails data
  get(emailRef)
    .then(snapshot => {
      if (snapshot.exists()) {
        const emails = snapshot.val();
        
        // Clear existing options before adding new ones
        emailDropdown.innerHTML = '<option value="" disabled selected>Select an email</option>';
        
        // Loop through the emails and populate the dropdown
        for (let key in emails) {
          const email = emails[key].email; // Access the 'email' property for each entry
          const option = document.createElement('option');
          option.value = email; // Set the email as the value
          option.textContent = email; // Set the email as the visible text
          emailDropdown.appendChild(option); // Add the option to the dropdown
        }
      } else {
        console.log('No emails available.');
      }
    })
    .catch(error => {
      console.error('Error fetching emails: ', error);
    });
}

// Call fetchEmails when page loads
fetchEmails();
    // Save email functionality
  document.getElementById('saveEmailBtn').addEventListener('click', function() {
    // Get email from input field
    const email = document.getElementById('emailInput').value;

    // Ensure the email is not empty
    if (email) {
      // Save email to Firebase under "emails"
      const emailRef = ref(database, 'emails');
      const newEmailRef = push(emailRef);
      set(newEmailRef, {
        email: email
      }).then(() => {
        alert("Email saved successfully!");
        document.getElementById('emailInput').value = ''; // Clear input field
      }).catch((error) => {
        console.error("Error saving email:", error);
        alert("Failed to save email.");
      });
    } else {
      alert("Please enter a valid email.");
    }
  });

  </script>

</body>
</html>
