@extends('layouts.app')
@section('idesign', true)
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #F4FFFF;
        padding-top: 0;
    }

    .decade-card {
        width: 270px;
        height: 150px;
        background: linear-gradient(120deg, #2EE6C5 0%, #1B7B8A 100%);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(27,123,138,0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 3px solid #fff;
        position: relative;
        transition: box-shadow 0.2s, transform 0.2s;
        cursor: pointer;
    }
    .decade-card:hover {
        box-shadow: 0 12px 32px rgba(27,123,138,0.25);
        transform: translateY(-8px) scale(1.03);
    }
</style>

<div class="container-fluid p-0" style="background: #F4FFFF; min-height: 100vh; position: relative;">
    <div style="position: absolute; top: 152px; left: 1129px; width: 261px; height: 31px; z-index: 10;">
        @include('layouts.date-clock')
    </div>
    <div class="d-flex align-items-center justify-content-between" style= "height: 90px; padding: 0 40px 0 0;"></div>
    <div class="container" style="max-width: 1400px; margin-top: 32px;">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 14px;">
                    <li class="breadcrumb-item"><i class="fa fa-home"></i></li>
                    <li class="breadcrumb-item">Fail Projek</li>
                </ol>
            </nav>
        </div>
        <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 0.5rem;">Fail Projek</h2>
        <hr style="margin-top: 0; margin-bottom: 32px; border-color: #D9D9D9;">

<div class="center-box-wrapper">
<div class="box-wrapper">

<!-- Box for 2000s -->
  <div class="dropdown-container " data-decade="2000">
    <div class="dropdown-btn">Permohonan<br>2000</div>
    <div class="dropdown-border"  onclick="toggleDropdown(this)">
    <div class="dropdown-content">
      <h3>Permohonan<br>2000</h3>
      <div class="years-grid">
        <div onclick="selectYear(this, 2000)">2000</div>
        <div onclick="selectYear(this, 2001)">2001</div>
        <div onclick="selectYear(this, 2002)">2002</div>
        <div onclick="selectYear(this, 2003)">2003</div>
        <div onclick="selectYear(this, 2004)">2004</div>
        <div onclick="selectYear(this, 2005)">2005</div>
        <div onclick="selectYear(this, 2006)">2006</div>
        <div onclick="selectYear(this, 2007)">2007</div>
        <div onclick="selectYear(this, 2008)">2008</div>
        <div style="grid-column: 2" onclick="selectYear(this, 2009)">2009</div>
      </div>
    </div>
    </div>
  </div>

  <!-- Box for 2010s -->
  <div class="dropdown-container" data-decade="2010">
    <div class="dropdown-btn">Permohonan<br>2010</div>
         <div class="dropdown-border"  onclick="toggleDropdown(this)">
            <div class="dropdown-content">
            <h3>Permohonan<br>2010</h3>
            <div class="years-grid">
                <div onclick="selectYear(this, 2010)">2010</div>
                <div onclick="selectYear(this, 2011)">2011</div>
                <div onclick="selectYear(this, 2012)">2012</div>
                <div onclick="selectYear(this, 2013)">2013</div>
                <div onclick="selectYear(this, 2014)">2014</div>
                <div onclick="selectYear(this, 2015)">2015</div>
                <div onclick="selectYear(this, 2016)">2016</div>
                <div onclick="selectYear(this, 2017)">2017</div>
                <div onclick="selectYear(this, 2018)">2018</div>
                <div style="grid-column: 2" onclick="selectYear(this, 2019)">2019</div>
            </div>
            </div>
        </div>
    </div>


  <!-- Box for 2020s -->
  <div class="dropdown-container" data-decade="2020">
    <div class="dropdown-btn">Permohonan<br>2020</div>
     <div class="dropdown-border"  onclick="toggleDropdown(this)">
    <div class="dropdown-content">
      <h3>Permohonan<br>2020</h3>
      <div class="years-grid">
        <div onclick="selectYear(this, 2020)">2020</div>
        <div onclick="selectYear(this, 2021)">2021</div>
        <div onclick="selectYear(this, 2022)">2022</div>
        <div onclick="selectYear(this, 2023)">2023</div>
        <div onclick="selectYear(this, 2024)">2024</div>
        <div onclick="selectYear(this, 2025)">2025</div>
        <div onclick="selectYear(this, 2026)">2026</div>
        <div onclick="selectYear(this, 2027)">2027</div>
        <div onclick="selectYear(this, 2028)">2028</div>
        <div style="grid-column: 2" onclick="selectYear(this, 2029)">2029</div>
      </div>
    </div>
    </div>
  </div>

  <!-- Box for 2030s -->
  <div class="dropdown-container" data-decade="2030">
    <div class="dropdown-btn">Permohonan<br>2030</div>
    <div class="dropdown-border"  onclick="toggleDropdown(this)">
    <div class="dropdown-content">
      <h3>Permohonan<br>2030</h3>
      <div class="years-grid">
        <div onclick="selectYear(this, 2030)">2030</div>
        <div onclick="selectYear(this, 2031)">2031</div>
        <div onclick="selectYear(this, 2032)">2032</div>
        <div onclick="selectYear(this, 2033)">2033</div>
        <div onclick="selectYear(this, 2034)">2034</div>
        <div onclick="selectYear(this, 2035)">2035</div>
        <div onclick="selectYear(this, 2036)">2036</div>
        <div onclick="selectYear(this, 2037)">2037</div>
        <div onclick="selectYear(this, 2038)">2038</div>
        <div style="grid-column: 2" onclick="selectYear(this, 2039)">2039</div>
      </div>
    </div>
    </div>
  </div>

  <!-- Box for 2040s -->
  <div class="dropdown-container" data-decade="2040">
    <div class="dropdown-btn">Permohonan<br>2040</div>
    <div class="dropdown-border"  onclick="toggleDropdown(this)">
    <div class="dropdown-content">
      <h3>Permohonan<br>2040</h3>
      <div class="years-grid">
        <div onclick="selectYear(this, 2040)">2040</div>
        <div onclick="selectYear(this, 2041)">2041</div>
        <div onclick="selectYear(this, 2042)">2042</div>
        <div onclick="selectYear(this, 2043)">2043</div>
        <div onclick="selectYear(this, 2044)">2044</div>
        <div onclick="selectYear(this, 2045)">2045</div>
        <div onclick="selectYear(this, 2046)">2046</div>
        <div onclick="selectYear(this, 2047)">2047</div>
        <div onclick="selectYear(this, 2048)">2048</div>
        <div style="grid-column: 2" onclick="selectYear(this, 2049)">2049</div>
      </div>
</div>
    </div>
  </div>

  <!-- Box for 2050s -->
  <div class="dropdown-container" data-decade="2050">
    <div class="dropdown-btn">Permohonan<br>2050</div>
    <div class="dropdown-border"  onclick="toggleDropdown(this)">
    <div class="dropdown-content">
      <h3>Permohonan<br>2050</h3>
      <div class="years-grid">
        <div onclick="selectYear(this, 2050)">2050</div>
        <div onclick="selectYear(this, 2051)">2051</div>
        <div onclick="selectYear(this, 2052)">2052</div>
        <div onclick="selectYear(this, 2053)">2053</div>
        <div onclick="selectYear(this, 2054)">2054</div>
        <div onclick="selectYear(this, 2055)">2055</div>
        <div onclick="selectYear(this, 2056)">2056</div>
        <div onclick="selectYear(this, 2057)">2057</div>
        <div onclick="selectYear(this, 2058)">2058</div>
        <div style="grid-column: 2" onclick="selectYear(this, 2059)">2059</div>
      </div>
    </div>
    </div>
  </div>

  <!-- Box for 2060s -->
  <div class="dropdown-container" data-decade="2060">
        <div class="dropdown-btn">Permohonan<br>2060</div>
        <div class="dropdown-border"  onclick="toggleDropdown(this)">
        <div class="dropdown-content">
        <h3>Permohonan<br>2060</h3>
        <div>
        <div class="years-grid">
            <div onclick="selectYear(this, 2060)">2060</div>
            <div onclick="selectYear(this, 2061)">2061</div>
            <div onclick="selectYear(this, 2062)">2062</div>
            <div onclick="selectYear(this, 2063)">2063</div>
            <div onclick="selectYear(this, 2064)">2064</div>
            <div onclick="selectYear(this, 2065)">2065</div>
            <div onclick="selectYear(this, 2066)">2066</div>
            <div onclick="selectYear(this, 2067)">2067</div>
            <div onclick="selectYear(this, 2068)">2068</div>
            <div style="grid-column: 2" onclick="selectYear(this, 2069)">2069</div>
        </div>
        </div>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(btn) {
    const current = btn.parentElement;
    const allDropdowns = document.querySelectorAll('.dropdown-container');
    allDropdowns.forEach(drop => {
      if (drop !== current) drop.classList.remove('active');
    });
    current.classList.toggle('active');
  }

  function selectYear(el, year) {
    const container = el.closest('.dropdown-container');
    const btn = container.querySelector('.dropdown-btn');
    const h3 = container.querySelector('.dropdown-content h3');
    btn.innerHTML = `Permohonan<br>${year}`;
    h3.innerHTML = `Permohonan<br>${year}`;
    container.classList.remove('active');
    
    // Redirect to iDesignList with year parameter
    window.location.href = `/idesignlist/${year}`;
  }

  window.onclick = function(e) {
    if (!e.target.closest('.dropdown-container')) {
      document.querySelectorAll('.dropdown-container').forEach(d => d.classList.remove('active'));
    }
  };
</script>
</div>


@endsection
<style>
    .icon {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon:hover {
  transform: scale(1.1);
}

      .breadcrumb {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 24px;
  color: #13536d;
}
.breadcrumb-text{
    font-size:18px;
}

.icon {
  width: 32px;
  height: 32px;
  stroke: #39424e;
  fill: none;
}
    body {
        font-family: Arial, sans-serif;
        background-color: #f8fafa;
        margin: 0;
        padding: 0;
    }
    .content{
        margin: 20 60 0 60;
    }

    .center-box-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 60vh; /* adjust as needed */
    }


    .box-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
      max-width: 1300px;
      align-items:center;
    }

    .dropdown-container {
      position: relative;
      width: 260px;
      height: 160px;
    
    }
    .dropdown-border{
        border: 1.5px solid #fff;
        position: absolute;
        top: 13px;
        left: 12px;
        border-radius: 5px;
        box-sizing: border-box;
        width: 254px;
        height: 111px;
        cursor: pointer;
    }
    .dropdown-btn {
      background: linear-gradient(to left, #213A57, #0B6477,#14919B,#0AD1C8,#45DFB1);
      color: white;
      font-size: 24px; /* lebih besar */
      padding: 30px 20px; /* lebih tinggi */
      border-radius: 5px;
      text-align: center;
      width: 279px;
      height: 136px;
      
      border: 1.5px solid #fff;
      
    }

    .dropdown-content {
      position: absolute;
      top: -15;
      left: -30;
      width: 260px; /* ikut saiz btn / container */    
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.3);
      padding: 20px;
      display: none;
      z-index: 999;
      
    }

    .dropdown-content h3 {
      background: linear-gradient(to right, #1fe4a0, #04729f);
      color: white;
      padding: 10px;
      margin: 0;
      border-radius: 5px;
      text-align: center;
    }

    .years-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      text-align: center;
      margin-top: 10px;
    }

    .years-grid div {
      cursor: pointer;
      color: #04729f;
      font-weight: bold;
    }

    .dropdown-container.active .dropdown-content {
      display: block;
    }

</style>