<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}ICIS - نظام الرقابة والامتثال{% endblock %}</title>

  <!-- AdminLTE CSS (via CDN) -->

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- Google Font: Cairo -->
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
  <!-- DataTables CSS (للمحليات) -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Select2 CSS (الإصدار الأساسي) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Select2 Bootstrap 5 Theme (رابط بديل) -->
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css">
  <style>
    body {
      font-family: 'Cairo', sans-serif;
    }
    .content-wrapper {
      background-color: #f4f6f9;
    }

  </style>
  {% block extra_css %}{% endblock %}
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary ">
  <div class="app-wrapper">
    <!-- القائمة الجانبية -->
    <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
      <div class="sidebar-brand">نظام ICIS</div>
      <nav class="mt-2">
        <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu">
          <li class="nav-item">
            <a href="{% url 'home' %}" class="nav-link">
              <i class="nav-icon fa fa-tachometer-alt"></i>
              <p>لوحة التحكم</p>
            </a>
          </li>
          <li class="nav-header">الهيكل الجغرافي</li>
          <li class="nav-item">
            <a href="{% url 'states_page' %}" class="nav-link">
              <i class="nav-icon fa fa-map"></i>
              <p>الولايات</p>
            </a>
          </li>
          <li class="nav-item">
            <a href="{% url 'localities_page' %}" class="nav-link">
              <i class="nav-icon fa fa-city"></i>
              <p>المحليات</p>
            </a>
          </li>
            <li class="nav-item">
            <a href="{% url 'areas_page' %}" class="nav-link">
                <i class="nav-icon fa fa-map-signs"></i>
                <p>المناطق</p>
            </a>
        </li>
        <li class="nav-item">
            <a href="{% url 'locations_page' %}" class="nav-link">
                <i class="nav-icon fa fa-location-dot"></i>
                <p>المواقع</p>
            </a>
        </li>
            <li class="nav-item">
    <a href="{% url 'establishments_page' %}" class="nav-link">
        <i class="nav-icon fa fa-building"></i>
        <p>المنشآت</p>
    </a>
</li>
        </ul>
      </nav>
    </aside>

    <!-- الرأس والمحتوى -->
    <div class="app-main">
      <header class="app-header navbar">
        <button class="navbar-toggler" type="button" data-lte-toggle="sidebar" aria-label="Toggle navigation">
          <i class="fas fa-bars"></i>
        </button>
      </header>

      <div class="app-content">
        <div class="content-wrapper p-3">
          {% block content %}{% endblock %}
        </div>
      </div>
    </div>
  </div>
  <!-- Notification Container -->
<div id="notification-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 350px;">
</div>

<style>
    .notification {
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-bottom: 10px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-right: 4px solid;
        animation: slideIn 0.3s ease-out;
        direction: rtl;
        font-family: 'Cairo', sans-serif;
    }
    .notification-success {
        border-right-color: #28a745;
        background-color: #f8f9fa;
    }
    .notification-error {
        border-right-color: #dc3545;
        background-color: #f8f9fa;
    }
    .notification-warning {
        border-right-color: #ffc107;
        background-color: #f8f9fa;
    }
    .notification-info {
        border-right-color: #17a2b8;
        background-color: #f8f9fa;
    }
    .notification-message {
        flex: 1;
        margin-left: 10px;
    }
    .notification-close {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #6c757d;
        padding: 0 5px;
    }
    .notification-close:hover {
        color: #343a40;
    }
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
</style>

  <!-- JavaScript libraries -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Popper.js (مطلوب لـ Bootstrap) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE JS -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
{% block extra_js %}{% endblock %}

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  // تهيئة Select2 بشكل عام (اختياري)
  $(document).ready(function() {
    $('.select2-search').select2({
      theme: 'bootstrap-5',
      language: 'ar',
      dir: 'rtl',
      width: '100%',
      placeholder: 'ابحث...'
    });
  });
</script>
<script>
    function showNotification(message, type = 'success') {
        const container = document.getElementById('notification-container');
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;

        const messageSpan = document.createElement('span');
        messageSpan.className = 'notification-message';
        messageSpan.textContent = message;

        const closeBtn = document.createElement('button');
        closeBtn.innerHTML = '×';
        closeBtn.className = 'notification-close';
        closeBtn.onclick = function() {
            notification.remove();
        };

        notification.appendChild(messageSpan);
        notification.appendChild(closeBtn);
        container.appendChild(notification);

        // Auto remove after 5 seconds
        setTimeout(() => {
            if (notification.parentNode) {
                notification.style.animation = 'fadeOut 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }
        }, 5000);
    }
</script>
</body>
</html>