<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Badar Madeena" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>




    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <!-- Bootstrap CSS for modern UI -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- Add scroll effect to navbar -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const navbar = document.querySelector('.navbar');
        window.addEventListener('scroll', function() {
          if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
          } else {
            navbar.classList.remove('scrolled');
          }
        });
      });
    </script>

    <style>
body {
  margin: 0;
  color: #e0e0e0 !important;
background: linear-gradient(-45deg, #1e88e5, #43a047, #6a1b9a, #d81b60);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


      .bg-white {
      background-color: #181a1b !important;
        color: #e0e0e0 !important;
      }
      .navbar {
        background-color: rgba(35, 39, 43, 0.95) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
      }
      
      .footer {
        background-color: #23272b !important;
      }

      .navbar-brand, .footer, .text-muted {
        color: #e0e0e0 !important;
      }
      
      /* Add padding to body to prevent content from going under navbar */
      body {
        padding-top: 76px; /* Adjust this value based on your navbar height */
      }
      
      /* Make navbar more compact on scroll */
      .navbar.scrolled {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        background-color: rgba(35, 39, 43, 0.98) !important;
      }
      .alert-success {
        background-color: #1e2d24 !important;
        color: #b8e994 !important;
        border-color: #1e2d24 !important;
      }
      .alert-danger {
        background-color: #2d1e1e !important;
        color: #ff6f61 !important;
        border-color: #2d1e1e !important;
      }
      .form-label, label {
        color: #e0e0e0 !important;
      }
      input, textarea, select {
        background-color: #181a1b !important;
        color: #e0e0e0 !important;
        border: 1px solid #444 !important;
      }
      .btn-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
      }
      .btn {
        color: #e0e0e0 !important;
      }
      .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
        background-color: #2a3038 !important;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      }
      .dropdown-item {
        color: #e0e0e0 !important;
        padding: 8px 16px;
        transition: all 0.2s ease;
      }
      .dropdown-item:hover {
        background: rgba(30,136,229,0.2) !important;
        color: #fff !important;
      }
      .dropdown-divider {
        border-color: rgba(255,255,255,0.1);
      }
      .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      .nav-item.dropdown .dropdown-menu {
        margin-top: 0.5rem;
        min-width: 200px;
      }
      .navbar {
        position: fixed;
        top: 0;
        width: 100%;
      }

    </style>

    <%# Includes all stylesheet files in app/assets/stylesheets %>

  </head>

  <body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg glass-navbar shadow-sm">
  <div class="container-fluid">
    <!-- Logo & Brand -->
    <%= link_to root_path, class: "navbar-brand d-flex align-items-center" do %>
      <%= image_tag("unnamed.jpg", alt: "Logo", class: "nav-logo me-2") %>
      <span>Badar Madeena pullarikode</span>
    <% end %>

    <!-- Toggler (for mobile) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
      aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Nav Links -->
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <%= link_to "🏠 Home", root_path, class: "nav-link active" %>
        </li>
        <li class="nav-item">
          <%= link_to "🎓 Programs", programs_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "🕌 Ziyara", ziyaras_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
            <%= link_to "📚 All Students", students_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "💰 Income", incomes_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "📊 Expenses", expenses_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "🏫 Records", exclusive_traditional_records_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "📞 Contact", contact_path, class: "nav-link" %>
        </li>
        <% if user_signed_in? %>
          <%= button_to "Sign Out", destroy_user_session_path, method: :delete, class: "btn btn-danger" %>
        <% else %>
          <%= link_to "Sign In", new_user_session_path, class: "btn btn-primary" %>
        <% end %>

      </ul>
    </div>
  </div>
</nav>
<style>
/* ====== NAVBAR STYLING ====== */
.glass-navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(30, 136, 229, 0.2);
  font-family: "Poppins", sans-serif;
  padding: 10px 30px;
  transition: all 0.3s ease;
}

.glass-navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.9rem;
  color: #1e88e5;
  background: linear-gradient(90deg, #1e88e5, #43a047);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link {
  font-weight: 600;
  color: #91e59b !important;
  padding: 8px 18px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: linear-gradient(90deg, #1e88e5, #43a047);
  color: white !important;
  box-shadow: 0 3px 10px rgba(30, 136, 229, 0.2);
}

.navbar-toggler {
  border: none;
  background: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,136,229, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 992px) {
  .glass-navbar {
    padding: 8px 20px;
  }
  .navbar-nav .nav-link {
    text-align: center;
    margin-bottom: 5px;
  }
}
</style>

    <p class="text-success text-center"><%= notice %></p>

<% content_for :title, "Institutions & Programs" %>



    <% if flash.any? %>
      <% flash.each do |name, message| %>
        <% if name.to_s == 'notice' || name.to_s == 'alert' %>
          <div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
            <%= message %>
          </div>
        <% end %>
      <% end %>
    <% end %>

    <div class="container shadow rounded p-4 bg-white mt-4">
      <%= yield %>
        
    </div>
    <footer class="footer text-center mt-5 mb-3 text-muted">
      &copy; <%= Time.current.year %> Badar Madeena
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
