<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تطبيق الحجوزات</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(async function(OneSignal) {
      await OneSignal.init({
        appId: "2fcd1d7c-21f0-43a1-9076-0fe41a46ece2",
        safari_web_id: "web.onesignal.auto.48cecb45-b9e1-42c4-afaa-e45f7f034833",
        notifyButton: {
          enable: true,
        },
      });
    });
  </script>
  <style>
    body {
      font-family: 'Rubik', sans-serif;
      background-color: #CAF0F8;
      padding-bottom: 70px;
    }
  .days-remaining-badge {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 5px 15px;
    border-radius: 0px 0px 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  .don {
    background-color: green !important;
  }
  .bay {
    background-color: darkred !important;
  }
  .god {
    background-color: yellow !important;
    color: black;
  }
    /* إخفاء زر الإشعارات */
    #onesignal-bell-container.onesignal-reset {
      display: none !important;
    }
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #eee;
      border-top: 1px solid #ddd;
      z-index: 1000;
    }
    .bottom-nav .nav-item {
      flex: 1;
      text-align: center;
    }
    .bottom-nav .nav-link {
      padding: 10px 0;
      font-size: 14px;
    }
    .bottom-nav .nav-link.active {
      color: #03045E;
    }
    .bottom-nav .nav-link i {
      display: block;
      font-size: 20px;
    }
    button.fab {
      position: fixed;
      bottom: 80px;
      right: 20px;
      background-color: #007bff;
      color: white;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 1050;
    }
    .search-box {
      margin-bottom: 20px;
    }
  </style>
</head>
<body dir="rtl">

  <!-- واجهة تسجيل الدخول -->
  <div id="loginScreen" class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card shadow-sm">
          <div class="card-body">
            <h3 class="card-title text-center">تسجيل الدخول</h3>
            <form id="loginForm">
              <div class="mb-3">
                <label for="email" class="form-label">البريد الإلكتروني</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">كلمة المرور</label>
                <input type="password" class="form-control" id="password" required>
              </div>
              <button type="submit" class="btn btn-primary w-100">تسجيل الدخول</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- واجهة التطبيق الرئيسية -->
  <div id="appScreen" style="display: none;">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
      <div class="container">
        <a class="navbar-brand" href="#">
          <i class="fas fa-calendar-alt me-2"></i>إدارة الحجوزات
        </a>
        <button class="btn btn-outline-danger" onclick="logout()">تسجيل الخروج</button>
      </div>
    </nav>

    <!-- الحاوية الرئيسية -->
    <div id="mainContent" class="container mt-4"></div>

    <!-- Bottom Navigation Bar -->
    <nav class="bottom-nav d-flex">
      <a class="nav-item nav-link active" id="homeTab">
        <i class="fas fa-home"></i>
        الرئيسية
      </a>
      <a class="nav-item nav-link" id="reservationsTab">
        <i class="fas fa-calendar-alt"></i>
        الحجوزات
      </a>
      <a class="nav-item nav-link" id="debtsTab">
        <i class="fas fa-money-bill-wave"></i>
        المديونية
      </a>
      <a class="nav-item nav-link" id="archivedTab">
        <i class="fas fa-archive"></i>
        الحجوزات المنتهية
      </a>
      <a class="nav-item nav-link" id="aboutTab">
        <i class="fas fa-info-circle"></i>
        عن البرنامج
      </a>
    </nav>

    <!-- زر عائم -->
    <button id="fab" class="fab" data-bs-toggle="modal" data-bs-target="#reservationModal" style="display: none;">
      <i class="fas fa-plus"></i>
    </button>

    <!-- نافذة إدخال حجز جديد -->
    <div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="reservationModalLabel">إضافة حجز جديد</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="reservationForm">
              <div class="mb-3">
                <label for="name" class="form-label">اسم الحجز</label>
                <input type="text" class="form-control" id="name" required>
              </div>
              <div class="mb-3">
                <label for="phone" class="form-label">رقم الهاتف</label>
                <input type="text" class="form-control" id="phone" required>
              </div>
              <div class="mb-3">
                <label for="date" class="form-label">التاريخ</label>
                <input type="date" class="form-control" id="date" required>
              </div>
              <div class="mb-3">
                <label for="totalAmount" class="form-label">مبلغ الحجز</label>
                <input type="number" class="form-control" id="totalAmount" required>
              </div>
              <div class="mb-3">
                <label for="paidAmount" class="form-label">المبلغ المدفوع</label>
                <input type="number" class="form-control" id="paidAmount" required>
              </div>
              <div class="mb-3">
                <label for="notes" class="form-label">الملاحظات</label>
                <textarea class="form-control" id="notes" rows="3"></textarea>
              </div>
              <button type="submit" class="btn btn-primary w-100">إضافة</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- نافذة تعديل الحجز -->
    <div class="modal fade" id="editReservationModal" tabindex="-1" aria-labelledby="editReservationModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editReservationModalLabel">تعديل الحجز</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="editReservationForm">
              <div class="mb-3">
                <label for="editName" class="form-label">اسم الحجز</label>
                <input type="text" class="form-control" id="editName" required>
              </div>
              <div class="mb-3">
                <label for="editPhone" class="form-label">رقم الهاتف</label>
                <input type="text" class="form-control" id="editPhone" required>
              </div>
              <div class="mb-3">
                <label for="editDate" class="form-label">التاريخ</label>
                <input type="date" class="form-control" id="editDate" required>
              </div>
              <div class="mb-3">
                <label for="editTotalAmount" class="form-label">مبلغ الحجز</label>
                <input type="number" class="form-control" id="editTotalAmount" required>
              </div>
              <div class="mb-3">
                <label for="editPaidAmount" class="form-label">المبلغ المدفوع</label>
                <input type="number" class="form-control" id="editPaidAmount" required>
              </div>
              <div class="mb-3">
                <label for="editNotes" class="form-label">الملاحظات</label>
                <textarea class="form-control" id="editNotes" rows="3"></textarea>
              </div>
              <button type="submit" class="btn btn-primary w-100">حفظ التعديلات</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- نافذة تسديد المديونية -->
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="paymentModalLabel">تسديد المديونية</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="paymentForm">
              <div class="mb-3">
                <label for="paymentAmount" class="form-label">مبلغ التسديد</label>
                <input type="number" class="form-control" id="paymentAmount" required>
              </div>
              <button type="submit" class="btn btn-primary w-100">تسديد</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>