---
import Layout from '../layouts/Layout.astro';
import '../styles/executive-committee.scss';

import execomm_banner from '../assets/images/execomm/execomm_banner.png';
import pres from '../assets/images/execomm/pres.png';
import vp_acad from '../assets/images/execomm/vp_acad.png';
import vp_exte from '../assets/images/execomm/vp_exte.png';
import vp_inte from '../assets/images/execomm/vp_inte.png';
import vp_log from '../assets/images/execomm/vp_log.png';
import vp_marfin from '../assets/images/execomm/vp_marfin.png';
import vp_pub from '../assets/images/execomm/vp_pub.png';
import vp_sec from '../assets/images/execomm/vp_sec.png';

// Historical Execomm Data
const pastCommittees = [
  { year: "AY 2024-2025", members: [
    { role: "President", name: "Allysa Shaine Peñamante" },
    { role: "Vice President for Academic Affairs", name: "Daenniel John Estavillo" },
    { role: "Vice President for External Affairs", name: "Clarence Morales" },
    { role: "Vice President for Internal Affairs", name: "Celgie Asuncion" },
    { role: "Vice President for Logistics", name: "Jhafer Chrisnand Alday" },
    { role: "Vice President for Marketing and Finance", name: "Edmark Renz Manayoba" },
    { role: "Vice President for Publicity", name: "Charles Wincel Abello" },
    { role: "Vice President for Secretariat", name: "Vince Harvey Ty" }
  ]},
  { year: "AY 2023-2024", members: [
    { role: "President", name: "Patrick John Santisidad" },
    { role: "Vice President for Academic Affairs", name: "Wynne Angelo Arcilla" },
    { role: "Vice President for External Affairs", name: "Kier Quiambao" },
    { role: "Vice President for Internal Affairs", name: "Hannah Isabel Basbas" },
    { role: "Vice President for Logistics", name: "Vittorio Mercurio" },
    { role: "Vice President for Marketing and Finance", name: "Kimberly Claire Paynor" },
    { role: "Vice President for Publicity", name: "Angelica Cielo Doctor" },
    { role: "Vice President for Secretariat", name: "Vince Harvey Ty" }
  ]},
  { year: "AY 2022-2023", members: [
    { role: "President", name: "Rodney Golpe" },
    { role: "Vice President for Academic Affairs", name: "Andre Mikhail Serra" },
    { role: "Vice President for External Affairs", name: "Karl Clarence Camitan" },
    { role: "Vice President for Internal Affairs", name: "Andrea Zefaniah Timpug" },
    { role: "Vice President for Logistics", name: "Mikel Antonella Valeriano" },
    { role: "Vice President for Marketing and Finance", name: "Elyssa Nicole Pablo" },
    { role: "Vice President for Publicity", name: "Marc Andrei Salar" },
    { role: "Vice President for Secretariat", name: "Jessica Marie Rondaris" }
  ]},
  { year: "AY 2021-2022", members: [
    { role: "President", name: "Emil Tanciongco" },
    { role: "Vice President for Academic Affairs", name: "Michelle Anne Agpalza" },
    { role: "Vice President for External Affairs", name: "Jessica Marie Rondaris" },
    { role: "Vice President for Internal Affairs", name: "Allen Joshua Dalangin" },
    { role: "Vice President for Logistics", name: "Jomari Ganhinhin" },
    { role: "Vice President for Marketing and Finance", name: "Ginzy Javier" },
    { role: "Vice President for Publicity", name: "Mikel Antonella Valeriano" },
    { role: "Vice President for Secretariat", name: "Jobelle Garces" }
  ]},
  { year: "AY 2020-2021", members: [
    { role: "President", name: "Robert Allan Pesa" },
    { role: "Vice President for Academic Affairs", name: "Federico Jose Dino" },
    { role: "Vice President for External Affairs", name: "Emil Tanciongco" },
    { role: "Vice President for Internal Affairs", name: "Patrick Domantay" },
    { role: "Vice President for Logistics", name: "Jomari Ganhinhin" },
    { role: "Vice President for Marketing and Finance", name: "Melchizedek Fermill" },
    { role: "Vice President for Publicity", name: "Mikel Antonella Valeriano" },
    { role: "Vice President for Secretariat", name: "Jan Marvin Moyco" }
  ]},
  { year: "AY 2019-2020", members: [
    { role: "President", name: "Erwin Joshua Encisa" },
    { role: "Vice President for Academic Affairs", name: "Seth Kelvin Escobedo" },
    { role: "Vice President for External Affairs", name: "Moira Kelly Boloyos" },
    { role: "Vice President for Internal Affairs", name: "Pauline Patricia Cristal" },
    { role: "Vice President for Logistics", name: "Anne Nicole Peñaranda" },
    { role: "Vice President for Marketing and Finance", name: "Gervionne Azizah Ferreras" },
    { role: "Vice President for Publicity", name: "Anthony John Norona" },
    { role: "Vice President for Secretariat", name: "Pauline Joy Roa" }
  ]},
  { year: "AY 2018-2019", members: [
    { role: "President", name: "Pauline Patricia Cristal" },
    { role: "Vice President for Academic Affairs", name: "Seth Kelvin Escobedo" },
    { role: "Vice President for External Affairs", name: "Moira Kelly Boloyos" },
    { role: "Vice President for Internal Affairs", name: "Carlo Jimenez" },
    { role: "Vice President for Logistics", name: "Harvey John De Chavez" },
    { role: "Vice President for Marketing and Finance", name: "Mary Joshua Santos" },
    { role: "Vice President for Publicity", name: "Anthony John Norona" },
    { role: "Vice President for Secretariat", name: "Pauline Joy Roa" }
  ]},
  { year: "AY 2017-2018", members: [
    { role: "President", name: "Jason Patrick Hipolito" },
    { role: "Vice President for Academic Affairs and Logistics", name: "Jazmine Day Vallejos" },
    { role: "Vice President for External Affairs", name: "Pauline Patricia Cristal" },
    { role: "Vice President for Internal Affairs", name: "Belle Sermeno" },
    { role: "Vice President for Marketing and Finance", name: "Yna Ignacio" },
    { role: "Vice President for Publicity", name: "Rodrigo Rafael Cruz" },
    { role: "Vice President for Secretariat", name: "Ada Katrina Gascon" }
  ]},
  { year: "AY 2016-2017", members: [
    { role: "President", name: "Charlton Paul Dy" },
    { role: "Vice President for Academic Affairs and Logistics", name: "Jason Patrick Hipolito" },
    { role: "Vice President for External Affairs", name: "Carl Allen Lim" },
    { role: "Vice President for Internal Affairs", name: "Joshua Reginal Luzon" },
    { role: "Vice President for Marketing and Finance", name: "Karen Astrud Eliza Avanzado" },
    { role: "Vice President for Publicity", name: "Alvin Sanchez" },
    { role: "Vice President for Secretariat", name: "Dan Lemuel Salado" }
  ]},
  { year: "AY 2015-2016", members: [
    { role: "President", name: "Millianne Patriz Chaves" },
    { role: "Vice President for Academic Affairs and Logistics", name: "Rommel Joshua Ortega" },
    { role: "Vice President for External Affairs", name: "Carl Allen Lim" },
    { role: "Vice President for Internal Affairs", name: "Ma. Cristina Anne Astudillo" },
    { role: "Vice President for Marketing and Finance", name: "Francis Panganiban" },
    { role: "Vice President for Publicity", name: "Deniel Aiden Go" },
    { role: "Vice President for Secretariat", name: "Charlton Paul Dy" }
  ]},
  { year: "AY 2014-2015", members: [
    { role: "President", name: "Vanessa Tan" },
    { role: "Vice President for Academic and Logistics", name: "Joash Rodriguez" },
    { role: "Vice President for External Affairs", name: "Vergel Villanueva" },
    { role: "Vice President for Internal Affairs", name: "Gabriel dela Cruz" },
    { role: "Vice President for Marketing and Finance", name: "Anthony Gonzaga" },
    { role: "Vice President for Publicity", name: "Kevin Martin" },
    { role: "Vice President for Secretariat", name: "Janette Salvatus" }
  ]},
  { year: "AY 2013-2014", members: [
    { role: "President", name: "Rupert Calvin Sievert" },
    { role: "Vice President for Academic Affairs", name: "Steven Matthew Cheng" },
    { role: "Vice President for External Affairs", name: "Leur Labrador" },
    { role: "Vice President for Internal Affairs", name: "Bryan Edward Esteves" },
    { role: "Vice President for Marketing and Finance", name: "Mikhail Eñano" },
    { role: "Vice President for Publicity", name: "Leur Labrador" }, /* Adjusted based on data provided */
    { role: "Vice President for Secretariat", name: "Elaine Lee Ramos" }
  ]}
];
---

<Layout title="Executive Committee | UP IECEP">
  <section class="execomm-section">
    <h1>Executive Committee</h1>
    
    <!-- Banner Image -->
    <div class="banner-container">
      <img src={execomm_banner.src} alt="Executive Committee Banner" />
    </div>

    <!-- 4x2 Photo Grid -->
    <div class="photo-grid">
      <div class="photo-card"><img src={pres.src} alt="President" /></div>
      <div class="photo-card"><img src={vp_acad.src} alt="Vice President for Academic Affairs" /></div>
      <div class="photo-card"><img src={vp_exte.src} alt="Vice President for External Affairs" /></div>
      <div class="photo-card"><img src={vp_inte.src} alt="Vice President for Internal Affairs" /></div>
      <div class="photo-card"><img src={vp_log.src} alt="Vice President for Logistics" /></div>
      <div class="photo-card"><img src={vp_marfin.src} alt="Vice President for Marketing and Finance" /></div>
      <div class="photo-card"><img src={vp_pub.src} alt="Vice President for Publicity" /></div>
      <div class="photo-card"><img src={vp_sec.src} alt="Vice President for Secretariat" /></div>
    </div>

    <!-- Past Committees Section -->
    <div class="past-committees-wrapper">
      <h2>Past Executive Committees</h2>
      <div class="accordion-container">
        {pastCommittees.map((committee) => (
          <details class="committee-accordion">
            <summary>{committee.year}</summary>
            <div class="accordion-content">
              <ul>
                {committee.members.map((member) => (
                  <li>
                    <span class="role">{member.role}</span>
                    <span class="name">{member.name}</span>
                  </li>
                ))}
              </ul>
            </div>
          </details>
        ))}
      </div>
    </div>
  </section>

  <!-- Modal Script stays exactly the same down here -->
  <div id="image-modal" class="image-modal">
    <span class="close-modal">&times;</span>
    <img class="modal-content" id="full-image">
  </div>
</Layout>

<script>
  const modal = document.getElementById("image-modal");
  const modalImg = document.getElementById("full-image") as HTMLImageElement;
  const cards = document.querySelectorAll(".photo-card img");
  const closeBtn = document.querySelector(".close-modal");

  if (modal && closeBtn && modalImg) {
    cards.forEach(img => {
      img.addEventListener("click", () => {
        modal.style.display = "flex";
        modalImg.src = (img as HTMLImageElement).src;
        document.body.style.overflow = "hidden"; 
      });
    });

    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    });

    modal.addEventListener("click", (e) => {
      if (e.target === modal) {
        modal.style.display = "none";
        document.body.style.overflow = "auto";
      }
    });
  }
</script>