<html><head><base href="." />
<title>Ù†Ø¸Ø§Ù… Ø¥Ø¯Ø§Ø±Ø© Ø·Ù„Ø¨Ø§Øª Ø§Ù„Ø´Ù‡Ø§Ø¯Ø§Øª Ø§Ù„Ù…Ø¯Ø±Ø³ÙŠØ©</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
function generateYearOptions() {
  const startYear = 1996;
  const endYear = 2030;
  let options = '';
  for(let year = startYear; year <= endYear; year++) {
    options += `<option value="${year}/${year+1}">${year}/${year+1}</option>`;
  }
  return options;
}
window.generateYearOptions = generateYearOptions; // Make it globally available
</script>

<!-- Firebase SDK -->
<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
  import { getFirestore, collection, addDoc, getDocs, query, onSnapshot, deleteDoc, doc, updateDoc } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-firestore.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-analytics.js";
  
  const firebaseConfig = {
    apiKey: "AIzaSyD_wkPvGpoWchCyTK1TsZR1QU-bQp1faGo",
    authDomain: "educ-5ac33.firebaseapp.com", 
    projectId: "educ-5ac33",
    storageBucket: "educ-5ac33.appspot.com",
    messagingSenderId: "682054124957",
    appId: "1:682054124957:web:1418c0ef7e2b7968415b74",
    measurementId: "G-BC7XVTENTD"
  };

  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const db = getFirestore(app);

  window.db = db;
  window.collection = collection;
  window.addDoc = addDoc;
  window.getDocs = getDocs;
  window.query = query;
  window.onSnapshot = onSnapshot;
  window.deleteDoc = deleteDoc;
  window.doc = doc;
  window.updateDoc = updateDoc;
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
body {
  font-family: Arial, sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  direction: rtl;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.flag-img {
  width: 300px;
  height: 200px;
  margin: 0 auto 20px auto;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header h1, .header h2, .header h3, .header h4 {
  margin: 10px 0;
  color: #003366;
}

.user-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 20px 0;
}

.form-group {
  margin: 15px 0;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #444;
}

.form-group select,
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  background-color: #004d99;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin: 10px;
}

button:hover {
  background-color: #003366;
}

.admin-panel {
  display: none;
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-search {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-search input,
.admin-search select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin: 0 5px;
}

.action-btn.edit {
  color: #004d99;
}

.action-btn.delete {
  color: #ff0000;
}

.action-btn:hover {
  opacity: 0.8;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.data-table th,
.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: right;
}

.data-table th {
  background-color: #004d99;
  color: white;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}

.footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.footer p {
  margin: 0;
  color: #003366;
  font-weight: bold;
}
</style>
</head>
<body>

<div class="header">
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Flag_of_Algeria.svg" alt="Ø¹Ù„Ù… Ø§Ù„Ø¬Ø²Ø§Ø¦Ø±" class="flag-img">
  <h1>Ø§Ù„Ø¬Ù…Ù‡ÙˆØ±ÙŠØ© Ø§Ù„Ø¬Ø²Ø§Ø¦Ø±ÙŠØ© Ø§Ù„Ø¯ÙŠÙ…Ù‚Ø±Ø§Ø·ÙŠØ© Ø§Ù„Ø´Ø¹Ø¨ÙŠØ©</h1>
  <h2>ÙˆØ²Ø§Ø±Ø© Ø§Ù„ØªØ±Ø¨ÙŠØ© Ø§Ù„ÙˆØ·Ù†ÙŠØ©</h2>
  <h3>Ù…Ø¯ÙŠØ±ÙŠØ© Ø§Ù„ØªØ±Ø¨ÙŠØ© Ù„ÙˆÙ„Ø§ÙŠØ© Ø§Ù„Ø¨Ù„ÙŠØ¯Ø©</h3>
  <h4>Ù…ØªÙˆØ³Ø·Ø© Ø§Ù„Ø¥Ø®ÙˆØ© Ø¨ÙˆØ­Ø³Ø§Ù†</h4>
</div>

<div class="user-form">
  <h2>Ø·Ù„Ø¨ Ø§Ù„Ø´Ù‡Ø§Ø¯Ø§Øª Ø§Ù„Ù…Ø¯Ø±Ø³ÙŠØ©</h2>
  <div class="form-group">
    <label for="firstName">Ø§Ù„Ø¥Ø³Ù…:</label>
    <input type="text" id="firstName" required>
  </div>
  <div class="form-group">
    <label for="lastName">Ø§Ù„Ù„Ù‚Ø¨:</label>
    <input type="text" id="lastName" required>
  </div>
  <div class="form-group">
    <label for="age">Ø§Ù„Ø¹Ù…Ø±:</label>
    <input type="number" id="age" required>
  </div>
  <div class="form-group">
    <label for="schoolYear">Ø§Ù„Ø³Ù†Ø© Ø§Ù„Ø¯Ø±Ø§Ø³ÙŠØ©:</label>
    <select id="schoolYear" required>
      <script>document.write(generateYearOptions());</script>
    </select>
  </div>
  <button onclick="saveUserData()">Ø­ÙØ¸ Ø§Ù„Ø¨ÙŠØ§Ù†Ø§Øª</button>
  <button onclick="showAdminLogin()">
    <i class="fas fa-user-tie"></i>
    Ø¯Ø®ÙˆÙ„ Ø§Ù„Ù…Ø³Ø¤ÙˆÙ„ Ø§Ù„Ø¥Ø¯Ø§Ø±ÙŠ
  </button>
</div>

<div id="adminLoginModal" class="modal">
  <div class="modal-content">
    <h2>ØªØ³Ø¬ÙŠÙ„ Ø¯Ø®ÙˆÙ„ Ø§Ù„Ù…Ø³Ø¤ÙˆÙ„</h2>
    <div class="form-group">
      <label for="adminPassword">ÙƒÙ„Ù…Ø© Ø§Ù„Ù…Ø±ÙˆØ±:</label>
      <input type="password" id="adminPassword">
    </div>
    <button onclick="checkAdminPassword()">Ø¯Ø®ÙˆÙ„</button>
    <button onclick="closeAdminModal()">Ø¥Ù„ØºØ§Ø¡</button>
  </div>
</div>

<div id="adminPanel" class="admin-panel">
  <h2>Ù„ÙˆØ­Ø© ØªØ­ÙƒÙ… Ø§Ù„Ù…Ø³Ø¤ÙˆÙ„ Ø§Ù„Ø¥Ø¯Ø§Ø±ÙŠ</h2>
  <div class="admin-search">
    <input type="text" id="searchName" placeholder="Ø§Ù„Ø¨Ø­Ø« Ø¨Ø§Ù„Ø¥Ø³Ù…" onkeyup="filterData()">
    <input type="text" id="searchLastName" placeholder="Ø§Ù„Ø¨Ø­Ø« Ø¨Ø§Ù„Ù„Ù‚Ø¨" onkeyup="filterData()">
    <select id="searchYear" onchange="filterData()">
      <option value="">ÙƒÙ„ Ø§Ù„Ø³Ù†ÙˆØ§Øª Ø§Ù„Ø¯Ø±Ø§Ø³ÙŠØ©</option>
      <script>document.write(generateYearOptions());</script>
    </select>
  </div>
  <button onclick="logout()">Ø®Ø±ÙˆØ¬</button>
  <table class="data-table">
    <thead>
      <tr>
        <th>Ø§Ù„Ø§Ø³Ù…</th>
        <th>Ø§Ù„Ù„Ù‚Ø¨</th>
        <th>Ø§Ù„Ø¹Ù…Ø±</th>
        <th>Ø§Ù„Ø³Ù†Ø© Ø§Ù„Ø¯Ø±Ø§Ø³ÙŠØ©</th>
        <th>ØªØ§Ø±ÙŠØ® Ø§Ù„ØªØ³Ø¬ÙŠÙ„</th>
        <th>Ø§Ù„Ø¥Ø¬Ø±Ø§Ø¡Ø§Øª</th>
      </tr>
    </thead>
    <tbody id="adminTableBody"></tbody>
  </table>
</div>

<div class="footer">
  <p>ØªÙ… Ø§Ù„ØªØ·ÙˆÙŠØ± Ù…Ù† Ø·Ø±Ù : Ù‚Ø±ÙŠØ´ÙŠ Ø¹Ø¨Ø¯Ø§Ù„Ù†ÙˆØ±</p>
  <p>ÙƒÙ„ Ø§Ù„Ø­Ù‚ÙˆÙ‚ Ù…Ø­ÙÙˆØ¸Ø© &copy; 2023</p>
</div>

<script>
let allRequests = [];

async function saveUserData() {
  const firstName = document.getElementById('firstName').value;
  const lastName = document.getElementById('lastName').value;
  const age = document.getElementById('age').value;
  const schoolYear = document.getElementById('schoolYear').value;

  if (!firstName || !lastName || !age || !schoolYear) {
    alert('Ø§Ù„Ø±Ø¬Ø§Ø¡ Ù…Ù„Ø¡ Ø¬Ù…ÙŠØ¹ Ø§Ù„Ø­Ù‚ÙˆÙ„');
    return;
  }

  try {
    const newRequest = {
      firstName,
      lastName,
      age: parseInt(age),
      schoolYear,
      timestamp: new Date().toISOString()
    };

    await addDoc(collection(db, "certificateRequests"), newRequest);
    alert('ØªÙ… Ø­ÙØ¸ Ø§Ù„Ø¨ÙŠØ§Ù†Ø§Øª Ø¨Ù†Ø¬Ø§Ø­!');
    
    document.getElementById('firstName').value = '';
    document.getElementById('lastName').value = '';
    document.getElementById('age').value = '';
    document.getElementById('schoolYear').value = '';
    
  } catch (error) {
    console.error('Error saving data:', error);
    alert('Ø­Ø¯Ø« Ø®Ø·Ø£ Ø£Ø«Ù†Ø§Ø¡ Ø­ÙØ¸ Ø§Ù„Ø¨ÙŠØ§Ù†Ø§Øª');
  }
}

function showAdminLogin() {
  document.getElementById('adminLoginModal').style.display = 'flex';
}

function closeAdminModal() {
  document.getElementById('adminLoginModal').style.display = 'none';
  document.getElementById('adminPassword').value = '';
}

async function checkAdminPassword() {
  const password = document.getElementById('adminPassword').value;
  if (password === '10012') {
    document.getElementById('adminLoginModal').style.display = 'none';
    document.getElementById('adminPanel').style.display = 'block';
    loadAdminData();
  } else {
    alert('ÙƒÙ„Ù…Ø© Ø§Ù„Ù…Ø±ÙˆØ± ØºÙŠØ± ØµØ­ÙŠØ­Ø©');
  }
}

function logout() {
  document.getElementById('adminPanel').style.display = 'none';
  document.getElementById('adminPassword').value = '';
}

async function deleteRequest(docId) {
  if (confirm('Ù‡Ù„ Ø£Ù†Øª Ù…ØªØ£ÙƒØ¯ Ù…Ù† Ø­Ø°Ù Ù‡Ø°Ø§ Ø§Ù„Ø·Ù„Ø¨ØŸ')) {
    try {
      await deleteDoc(doc(db, "certificateRequests", docId));
      alert('ØªÙ… Ø­Ø°Ù Ø§Ù„Ø·Ù„Ø¨ Ø¨Ù†Ø¬Ø§Ø­');
    } catch (error) {
      console.error('Error deleting document:', error);
      alert('Ø­Ø¯Ø« Ø®Ø·Ø£ Ø£Ø«Ù†Ø§Ø¡ Ø­Ø°Ù Ø§Ù„Ø·Ù„Ø¨');
    }
  }
}

async function editRequest(docId, currentData) {
  const newFirstName = prompt('Ø§Ù„Ø¥Ø³Ù… Ø§Ù„Ø¬Ø¯ÙŠØ¯:', currentData.firstName);
  const newLastName = prompt('Ø§Ù„Ù„Ù‚Ø¨ Ø§Ù„Ø¬Ø¯ÙŠØ¯:', currentData.lastName);
  const newAge = prompt('Ø§Ù„Ø¹Ù…Ø± Ø§Ù„Ø¬Ø¯ÙŠØ¯:', currentData.age);
  const newSchoolYear = prompt('Ø§Ù„Ø³Ù†Ø© Ø§Ù„Ø¯Ø±Ø§Ø³ÙŠØ© Ø§Ù„Ø¬Ø¯ÙŠØ¯Ø©:', currentData.schoolYear);

  if (newFirstName && newLastName && newAge && newSchoolYear) {
    try {
      await updateDoc(doc(db, "certificateRequests", docId), {
        firstName: newFirstName,
        lastName: newLastName,
        age: parseInt(newAge),
        schoolYear: newSchoolYear
      });
      alert('ØªÙ… ØªØ­Ø¯ÙŠØ« Ø§Ù„Ø¨ÙŠØ§Ù†Ø§Øª Ø¨Ù†Ø¬Ø§Ø­');
    } catch (error) {
      console.error('Error updating document:', error);
      alert('Ø­Ø¯Ø« Ø®Ø·Ø£ Ø£Ø«Ù†Ø§Ø¡ ØªØ­Ø¯ÙŠØ« Ø§Ù„Ø¨ÙŠØ§Ù†Ø§Øª');
    }
  }
}

function filterData() {
  const searchName = document.getElementById('searchName').value.toLowerCase();
  const searchLastName = document.getElementById('searchLastName').value.toLowerCase();
  const searchYear = document.getElementById('searchYear').value;

  const filteredRequests = allRequests.filter(request => {
    return (!searchName || request.data.firstName.toLowerCase().includes(searchName)) &&
           (!searchLastName || request.data.lastName.toLowerCase().includes(searchLastName)) &&
           (!searchYear || request.data.schoolYear === searchYear);
  });

  updateTable(filteredRequests);
}

function updateTable(requests) {
  const tableBody = document.getElementById('adminTableBody');
  tableBody.innerHTML = '';
  
  requests.forEach(({id, data}) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${data.firstName}</td>
      <td>${data.lastName}</td>
      <td>${data.age}</td>
      <td>${data.schoolYear}</td>
      <td>${new Date(data.timestamp).toLocaleString('ar-DZ')}</td>
      <td>
        <button class="action-btn edit" onclick="editRequest('${id}', ${JSON.stringify(data)})">
          <i class="fas fa-edit"></i>
        </button>
        <button class="action-btn delete" onclick="deleteRequest('${id}')">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    `;
    tableBody.appendChild(row);
  });
}

async function loadAdminData() {
  const q = query(collection(db, "certificateRequests"));
  onSnapshot(q, (snapshot) => {
    allRequests = snapshot.docs.map(doc => ({
      id: doc.id,
      data: doc.data()
    }));
    filterData();
  });
}

window.onclick = function(event) {
  const modal = document.getElementById('adminLoginModal');
  if (event.target == modal) {
    closeAdminModal();
  }
}
</script>
<script>
(function() {
  const _0x4f9e=['log','error','table','info','trace','exception','warn'];
  (function(_0x37f76d,_0x4f9e91){const _0x56475f=function(_0x1386a3){while(--_0x1386a3){_0x37f76d['push'](_0x37f76d['shift']());}};_0x56475f(++_0x4f9e91);}(_0x4f9e,0x1d3));
  const _0x5647=function(_0x37f76d,_0x4f9e91){_0x37f76d=_0x37f76d-0x0;let _0x56475f=_0x4f9e[_0x37f76d];return _0x56475f;};
  
  // Disable console logging in production
  if(window.location.hostname !== 'localhost') {
    const noop = () => {};
    const methods = ['log', 'debug', 'info', 'warn', 'error'];
    methods.forEach(method => {
      console[method] = noop;
    });
  }
  
  // Add additional security measures
  document.addEventListener('contextmenu', (e) => e.preventDefault());
  document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && (e.keyCode === 85 || e.keyCode === 83)) {
      e.preventDefault();
      return false;
    }
  });
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(() => {
    const styles = document.getElementsByTagName('style');
    for(let style of styles) {
      style.innerHTML = style.innerHTML.replace(/\s+/g, ' ').trim();
    }
  }, 100);
});
</script>

</body>
</html>