<style>
/* ---------------- Video Header ---------------- */
.video-header {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.video-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  color: white;
  text-align: center;
  padding-top: 30vh;
}

.video-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.video-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ---------------- Body & Layout ---------------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #0f1724, #1e293b);
  color: #e6eef6;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

.container {
  max-width: 1900px;
  margin: 0 auto;
  padding-top: 20px;
  flex: 1;
}

/* ---------------- Header ---------------- */
.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h2 {
  font-weight: 700;
  font-size: 2.9rem;
  background: linear-gradient(90deg, #1e88e5, #43a047, #fdd835, #fb8c00, #e53935);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-move 3s linear infinite;
}

@keyframes gradient-move {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.logo-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  margin-bottom: 15px;
}

.divider {
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, #1e88e5, #43a047);
  margin: 15px auto;
  border-radius: 3px;
}

/* ---------------- Stats Row ---------------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 35px;
}

.stat-card {
  flex: 0 0 auto;
  width: 140px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.stat-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #cfd8dc;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #7dd3fc;
}

/* ---------------- Glass Cards ---------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.05); /* Lowered opacity for more transparency */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 25px;
  width: 100%;
  transition: 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* ---------------- Section Titles ---------------- */
.section-title {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-align: center;
}

/* ---------------- Item Cards ---------------- */
.item-card {
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 12px 15px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.item-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.item-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e88e5;
  margin-bottom: 5px;
}

.item-desc {
  font-size: 0.9rem;
  color: #37474f;
}

.item-footer {
  text-align: right;
  margin-top: 8px;
}

/* ---------------- Buttons ---------------- */
.btn-custom {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  transition: 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary-custom { background: #1e88e5; color: #fff; }
.btn-primary-custom:hover { background: #1565c0; transform: translateY(-2px); }

.btn-success-custom { background: #43a047; color: #fff; }
.btn-success-custom:hover { background: #2e7d32; transform: translateY(-2px); }

/* ---------------- Expense & Income Cards ---------------- */
.expense-card, .income-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 25px;
  width: 100%;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expense-card:hover, .income-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.expense-card h1, .income-card h1 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #ffffff;
}

.expense-card .btn, .income-card .btn {
  width: 80%;
  margin: 0 auto;
  padding: 10px 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
  .stats-row { flex-direction: column; align-items: center; }
  .row.g-4 { flex-direction: column; }
  .col-lg-6, .col-lg-5 { max-width: 95%; margin: 0 auto; }
}
.finance-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.finance-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #facc15; /* golden color for finance numbers */
  margin: 10px 0;
  text-align: center;
}
.just {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin-left: 250px;
}

</style>

<div class="page-wrapper">
  <div class="container">


      <!-- Header -->
    <div class="page-header d-flex flex-column align-items-center">
      <%= image_tag("unnamed.jpg", alt: "Logo", class: "logo-img") %>
      <h2>BADAR MADEENA CULTURAL CENTER AND CHARITY TRUST</h2>
      <div class="divider"></div>
    </div>


  <div class="video-header">
  <video autoplay muted loop playsinline class="bg-video">
    <source src="<%= asset_path('just.mp4') %>" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <div class="video-overlay"></div>

<div class="video-content text-center">
  <h2 class="text-primary">From Him To Him</h2>
  <h1 class="text-white fw-bold">A Shelter for the destitute</h1>
  <h1 class="text-white fw-bold">EDUCATIONAL INSTITUTIONS</h1>
  <h1 class="text-white fw-bold">AND CHARITY TRUST</h1>
  <h1 class="text-white fw-bold">MANAGEMENT SYSTEM</h1>
  <h1 class="text-white fw-bold">GENERATION OF THOUGHTS</h1>

  <div class="just">
    <div class="glass-card p-4 w-50">
      <% if @institutions.present? %>
        <div class="mb-4">
          <label for="institution_select" class="form-label fw-bold">Study With Our College</label>
          <select id="institution_select" class="form-select" onchange="if(this.value){ window.location = '/institutions/' + this.value }">
            <option value="">-- Choose an institution --</option>
            <% @institutions.each do |institution| %>
              <option value="<%= institution.id %>"><%= institution.name %></option>
            <% end %>
          </select>
        </div>
      <% else %>
        <p class="item-desc text-center text-muted">No institutions added yet.</p>
      <% end %>
    </div>
  </div>
</div>
</div>




    <!-- Stats Row -->
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-label">INSTITUTIONS</div>
        <div class="stat-value"><%= @institution_count || 0 %></div>
      </div>
      <div class="stat-card">
        <div class="stat-label">PROGRAMS</div>
        <div class="stat-value"><%= @program_count || 0 %></div>
      </div>
      <div class="stat-card">
        <div class="stat-label">STUDENTS</div>
        <div class="stat-value"><%= @student_count || 0 %></div>
      </div>
      <div class="stat-card">
        <div class="stat-label">ZIYARAS</div>
        <div class="stat-value"><%= @ziyara_count || 0 %></div>
      </div>
      <div class="stat-card">
        <div class="stat-label">TRADITIONAL RECORDS</div>
        <div class="stat-value"><%= @exclusive_traditional_records_count || 0 %></div>
      </div>
    </div>

    <!-- Two-column sections -->
    <div class="row g-4">

      <!-- Institutions -->
      <div class="col-lg-6 d-flex justify-content-center">
        <div class="glass-card p-4 w-100">
          <h3 class="section-title text-primary mb-3">🏫 Institutions</h3>
          <% if @institutions.present? %>
            <div class="mb-4">
              <label for="institution_select" class="form-label fw-bold">Select Institution</label>
              <select id="institution_select" class="form-select" onchange="if(this.value){ window.location = '/institutions/' + this.value }">
                <option value="">-- Choose an institution --</option>
                <% @institutions.each do |institution| %>
                  <option value="<%= institution.id %>"><%= institution.name %></option>
                <% end %>
              </select>
            </div>
          <% else %>
            <p class="item-desc text-center text-muted">No institutions added yet.</p>
          <% end %>
          <div class="text-center mt-3">
            <%= link_to "➕ New Institution", new_institution_path, class: "btn btn-success-custom me-2" %>
            <%= link_to "📚 All Students", students_path, class: "btn btn-primary-custom" %>
          </div>
        </div>
      </div>



      <!-- Programs -->
      <div class="col-lg-6 d-flex justify-content-center">
        <div class="glass-card p-4 w-100">
          <h3 class="section-title text-success mb-3">🎓 Programs</h3>
          <% if @programs.present? %>
            <div class="mb-4">
              <label for="program_select" class="form-label fw-bold">Select Program</label>
              <select id="program_select" class="form-select" onchange="if(this.value){ window.location = '/programs/' + this.value }">
                <option value="">-- Choose a program --</option>
                <% @programs.each do |program| %>
                  <option value="<%= program.id %>"><%= program.name %></option>
                <% end %>
              </select>
            </div>
          <% else %>
            <p class="item-desc text-center text-muted">No programs available yet.</p>
          <% end %>
          <div class="text-center mt-3">
            <%= link_to "➕ New Program", new_program_path, class: "btn btn-success-custom me-2" %>
            <%= link_to "📚 All Programs", programs_path, class: "btn btn-primary-custom" %>
          </div>
        </div>
      </div>
    </div>

    <!-- Ziyara & Traditional Records -->
    <div class="row g-4 mt-4 justify-content-center">

      <!-- Ziyara -->
      <div class="col-lg-5 d-flex justify-content-center">
        <div class="glass-card p-4 w-100">
          <h3 class="section-title text-primary mb-3">🕌 Ziyara</h3>
          <% if @ziyaras.present? %>
            <div class="mb-4">
              <label for="ziyara_select" class="form-label fw-bold">Select Ziyara</label>
              <select id="ziyara_select" class="form-select" onchange="if(this.value){ window.location = '/ziyaras/' + this.value }">
                <option value="">-- Choose a Ziyara --</option>
                <% @ziyaras.each do |ziyara| %>
                  <option value="<%= ziyara.id %>"><%= ziyara.name %></option>
                <% end %>
              </select>
            </div>
          <% else %>
            <p class="item-desc text-center text-muted">No Ziyara records yet.</p>
          <% end %>
          <div class="text-center mt-3">
            <%= link_to "➕ New Ziyara", new_ziyara_path, class: "btn btn-success-custom me-2" %>
            <%= link_to "📚 All Ziyara", ziyaras_path, class: "btn btn-primary-custom" %>
          </div>
        </div>
      </div>

      <!-- Exclusive Traditional Records -->
      <div class="col-lg-5 d-flex justify-content-center">
        <div class="glass-card p-4 w-100">
          <h3 class="section-title text-secondary mb-3">📜 Exclusive Traditional Records</h3>
          <% if @exclusive_traditional_records.present? %>
            <div class="mb-4">
              <label for="record_select" class="form-label fw-bold">Select Record</label>
              <select id="record_select" class="form-select" onchange="if(this.value){ window.location = '/exclusive_traditional_records/' + this.value }">
                <option value="">-- Choose a Record --</option>
                <% @exclusive_traditional_records.each do |record| %>
                  <option value="<%= record.id %>"><%= record.name if record.respond_to?(:name) %></option>
                <% end %>
              </select>
            </div>
          <% else %>
            <p class="item-desc text-center text-muted">No exclusive traditional records yet.</p>
          <% end %>
          <div class="text-center mt-3">
            <%= link_to "➕ New Record", new_exclusive_traditional_record_path, class: "btn btn-success-custom me-2" %>
            <%= link_to "📚 All Records", exclusive_traditional_records_path, class: "btn btn-primary-custom" %>
          </div>
        </div>
      </div>
    </div>

<!-- Finance Card -->
<div class="row mt-4 justify-content-center">
  <div class="col-12 d-flex justify-content-center">
    <div class="finance-card p-4 w-100">
      <h2 class="section-title text-warning mb-4">💼 Finance Overview</h2>

      <div class="row g-4 justify-content-center">
        <!-- Expense Card -->
        <div class="col-lg-5 d-flex justify-content-center">
          <div class="expense-card w-100">
            <% if notice.present? %>
              <div class="flash-notice"><%= notice %></div>
            <% end %>
            <h3>📊 Expenses</h3>
            <p class="stat-value"><%= number_to_currency(@total_expense || 0) %></p>
            <%= link_to "Expenses List", expenses_path, class: "btn btn-primary-custom mt-2" %>
          </div>
        </div>

        <!-- Income Card -->
        <div class="col-lg-5 d-flex justify-content-center">
          <div class="income-card w-100">
            <% if notice.present? %>
              <div class="flash-notice"><%= notice %></div>
            <% end %>
            <h3>💰 Incomes</h3>
            <p class="stat-value"><%= number_to_currency(@total_income || 0) %></p>
            <%= link_to "Incomes List", incomes_path, class: "btn btn-primary-custom mt-2" %>
          </div>
        </div>
      </div>

      <!-- Profit Summary -->
      <div class="text-center mt-4">
        <h3>📈 BALANCE</h3>
        <p class="stat-value fs-3"><%= number_to_currency(@profit || 0) %></p>
      </div>
    </div>
  </div>
</div>



  </div> <!-- container -->
</div> <!-- page-wrapper -->
<!-- JavaScript to handle the text change effect -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    let h1Elements = document.querySelectorAll('h1');
    let currentIndex = 0;

    // Initially hide all h1 elements
    h1Elements.forEach((el, index) => {
      el.style.display = 'none';
    });

    // Show the first h1 element
    h1Elements[currentIndex].style.display = 'block';

    // Change text every 3 seconds
    setInterval(function() {
      h1Elements[currentIndex].style.display = 'none'; // Hide current
      currentIndex = (currentIndex + 1) % h1Elements.length; // Move to next h1
      h1Elements[currentIndex].style.display = 'block'; // Show next
    }, 3000); // 3 seconds
  });
</script>