@extends('layouts.app')
@section('ibams', 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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

<style>

    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: 0;
    }

    .container-jumlah {
        margin: 20px auto 0 auto;
        width: 100%;
        max-width: 1200px;
        background-color: #f8f9fa;
        padding: 10px 15px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .small {
        background: transparent;
        text-align: center;
        flex: 1;
        padding: 5px 10px;
        border-right: 1px solidrgb(255, 255, 255);
    }

    .small:last-child {
        border-right: none;
    }

    .small h1{
        margin: 0;
        font-size: 20px;
        color: #056B66;
    }

    .small i {
        display: block;
        margin-top: 4px;
        font-size: 14px;
        color:rgb(0, 0, 0);
    }


/* container */
    .table-chart-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

    /* Table */
    .table-wrapper {
        flex: 1;
  min-width: 400px;
  max-width: 650px;
  height: 450px;
  width: 640px;
  overflow-y: hidden;
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 20 0 ;


}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
}

.styled-table thead th {
  border-bottom: 1px solid #ccc;
  padding: 8px;
  font-weight: 600;
}

.styled-table tbody td {
  padding: 6px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.kategori-cell {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.styled-table tfoot td {
  padding-top: 8px;
  font-weight: bold;
  color: #00a1ab;
  border-top: 1px solid #e0e0e0;
}

.text-red {
  color: red;
}

.bold {
  font-weight: 600;
  color: #056B66;
}

.btn-green {
  background-color: #bafac7;
  color: #004400;
  border: none;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: default;
  min-width: 120px;
  text-align: center;
}
/*chart*/
.chart-container {
    flex: 1;
        min-width: 300px;
        max-width: 570px;
      width: 639px;
      height: 450px;
      margin: 20 0;
      padding: 15px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: 'Segoe UI', sans-serif;
      position: relative;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      padding: 0 10px;
    }

    .chart-header h3 {
      font-size: 16px;
      font-weight: 600;
      color: #222;
      border-left: 4px solid #056B66;
      padding-left: 8px;
    }

    .chart-header span {
      font-size: 12px;
      color: gray;
    }

    /* dashboard */


    /* .card-group {

  /* background:; *
  color: black;
  width: 1250px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
} */
 .card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Boleh tukar kepada space-between atau space-evenly */
  align-items: stretch; /* Pastikan semua kad ikut tinggi paling tinggi */
  gap: 20px;
  max-width: 1250px;
  margin: -20px auto 0 auto;
  padding: 20px;
}

/* .card-v2 {
  background: white;
  color: black;
  width: 300px;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  border: 1px solid #eee;
} */

.card-v2 {
  flex: 1 1 280px;
  max-width: 300px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  color: black;
  padding: 20px;
  border: 1px solid #eee;
  box-shadow: 0 1px 8px rgba(0,0,0,0.03);
  overflow: visible;
}

.card-header-v2 {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  margin-bottom: 0px;
  min-height: 100px;
}

.label-section {
  flex-grow: 1;  
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* .card-header-v2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
} */
.icon-img {
  width: 100px;
  height: 100px;
}
/* .label-section {
  flex-grow: 1;
} */
.title {
  font-weight: bold;
  font-size: 14px;
  margin: 0;
}
.label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 2px 0;
}
.number {
  font-weight: bold;
}
.unit-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 14px;
}
.unit-table td {
  padding: 4px 6px;
}
.unit-table .type {
  font-weight: bold;
  vertical-align: top;
  width: 25%;
}
.button-wrapper {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 1px 8px rgba(0,0,0,0.03);
      margin-bottom: 30px;
    }

    .btn-custom {
      background-color: #0B6477;
      color: #fff;
      padding: 8px 16px;
      border: none;
      border-radius: 7px;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 10px;
      font-weight: 600;
      line-height: 150%;
      letter-spacing: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      text-decoration: none;
      transition: background-color 0.3s ease;
      width: 198px;
      height: 34px;
      box-sizing: border-box;
    }

    .btn-custom:hover {
      background-color: #095766;
    }

    .btn-custom .icon {
      font-size: 16px;
      margin: 0 8px;
    }

    .btn-left .icon {
      margin-right: 8px;
    }

    .btn-right .icon {
      margin-left: 8px;
    }

    .container {
      max-width: 100%;
      overflow-x: auto;
      padding: 20px;
      box-sizing: border-box;
    }

    .summary-chart {
      display: flex;
      align-items: center;
      gap: 40px;
      width: 1116px;
      height: 409px;
      padding: 40px;
      box-sizing: border-box;
    }

    .summary-header {
      flex: 0 0 300px;
      text-align: left;
    }

    .summary-header p {
      font-size: 14px;
      color: #111;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin: 0 0 10px;
    }

    .summary-header h1 {
      font-size: 100px;
      font-weight: bold;
      margin: 0;
      color: #000;
      line-height: 1;
    }

    canvas {
      flex: 1 1 auto;
      max-width: 100%;
      height: auto;
    }

  /* body */

    .page-content {
        margin: 0 20px;
        margin-top: 107px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        padding-bottom: 30px;
    }
</style>

<div class="page-content">

    <div class='container-jumlah'>
        <div class="small">
            <h3>{{ $totalCount }}</h3>
            <i>Jumlah Fail</i>
        </div>
        <div class="small">
            <h3>{{ $lulusResult }}</h3>
            <i>Lulus</i>
        </div>
        <div class="small">
            <h3>{{ $lulusResult }}</h3>
            <i>Lulus/CC</i>
        </div>
        <div class="small">
            <h3>{{ $processResult }}</h3>
            <i>Sedang Diproses</i>
        </div>
        <div class="small">
            <h3>{{ $batalResult }}</h3>
            <i>Batal</i>
        </div>
        <div class="small">
            <h3>{{ $tolakResult }}</h3>
            <i>Tolak</i>
        </div>
    </div>

  <div style="padding: 15px 20px; border-radius: 10px; margin-top: 20px;">
    <form method="GET" action="{{ route('maindashboard') }}" id="date-filter-form">
        <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
            <label style="font-weight: bold;">TARIKH :</label>
            <input type="date" name="start_date" id="start_date" value="{{ request('start_date') }}" style="padding: 6px; border: 1px solid #ccc; border-radius: 4px;">
            <span><strong>hingga</strong></span>
            <input type="date" name="end_date" id="end_date" value="{{ request('end_date') }}" style="padding: 6px; border: 1px solid #ccc; border-radius: 4px;">
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    const form = document.getElementById('date-filter-form');
    
    function submitForm() {
        // Only submit if both dates are selected
        if (startDateInput.value && endDateInput.value) {
            form.submit();
        }
    }
    
    // Add event listeners for real-time updates
    startDateInput.addEventListener('change', function() {
        // Clear end date when start date is selected
        endDateInput.value = '';
        // Set minimum date for end date to be after start date
        if (this.value) {
            endDateInput.min = this.value;
        }
    });
    
    endDateInput.addEventListener('change', function() {
        if (this.value && startDateInput.value) {
            submitForm();
        }
    });
});
</script>


    <div class="table-chart-container">
    <!-- table -->
    <div class="table-wrapper">
  <table class="styled-table">
    <thead>
      <tr>
        <th>No.</th>
        <th>Kategori Fail</th>
        <th class="text-red">Lulus/CCC</th>
        <th>Lulus</th>
        <th>Sedang Diproses</th>
        <th>Batal</th>
        <th>Tolak</th>
        <th>Jumlah</th>
      </tr>
    </thead>
      <tbody>
          @foreach($data as $index => $row)
              <tr>
                  <td>{{ $index + 1 }}.</td>
                  <td class="kategori-cell">
                      @php
                          $classification = '';
                          if (in_array($row->kategori_fail, ['LBT/600-6/3', 'LB1/600-5/1', 'LB2/600-5/2', 'LB3/600-5/3', 'LB4/600-5/4'])) {
                              $classification = 'A';
                          } elseif (in_array($row->kategori_fail, ['LB5/600-5/5', 'LB5X/600-5/6', 'LB6/600-5/7', 'LB6X/600-5/8', 'LB7/600-5/9', 'LB8/600-5/10', 'LB9/600-5/11'])) {
                              $classification = 'B';
                          }
                      @endphp
                      <button class="btn-green">{{ $row->kategori_fail ?? '-' }}</button>
                      @if($classification)
                          <span style="font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; color: #000000;">{{ $classification }}</span>
                      @endif
                  </td>
                  <td>{{ $row->jumlah_lulusccc  ?? 0 }}</td>
                  <td>{{ $row->jumlah_lulus ?? 0 }}</td>
                  <td>{{ $row->sedang_proses ?? 0 }}</td>
                  <td>{{ $row->jumlah_tolak ?? 0 }}</td>
                  <td>{{ $row->jumlah_batal ?? 0 }}</td>
                  <td class="bold">{{ $row->total ?? 0 }}</td>
              </tr>
          @endforeach
      </tbody>
  </table>
</div>

<!-- chart -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart-container">
  <div class="chart-header">
    <h3>Jumlah Fail Bulanan</h3>
    <span>Monthly</span>
  </div>
  <canvas id="barChart" width="567" height="380"></canvas>
</div>
{{-- data: [69, 17, 32, 20, 41, 11, 57, 15, 57, 52, 92, 42], --}}
<!-- Chart data stored in hidden elements -->
<div id="monthly-counts-data" style="display: none;">{{ implode(',', $monthlyCounts) }}</div>
<div id="monthly-counts-lulus-data" style="display: none;">{{ implode(',', $monthlyCountsLulus) }}</div>

<script type="text/javascript">
  // Define chart data variables from DOM elements
  window.chartData = {
    monthlyCounts: document.getElementById('monthly-counts-data').textContent.split(',').map(Number),
    monthlyCountsLulus: document.getElementById('monthly-counts-lulus-data').textContent.split(',').map(Number)
  };
</script>
<script>
  const ctx1 = document.getElementById('barChart').getContext('2d');
  const barChart = new Chart(ctx1, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Jumlah Fail',

        data: window.chartData.monthlyCounts,
        backgroundColor: '#056B66',
        borderRadius: 6,
        barPercentage: 0.6,
      }]
    },
    options: {
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => `${ctx.dataset.label}: ${ctx.raw}`
          }
        },
        datalabels: {
          anchor: 'end',
          align: 'end',
          color: '#333'
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 100,
          ticks: {
            stepSize: 20,
            color: '#aaa'
          },
          grid: {
            color: '#eaeaea'
          }
        },
        x: {
          ticks: {
            color: '#333'
          },
          grid: {
            display: false
          }
        }
      }
    }
  });
</script>
</div>

</div>

<div class="card-group">

  <!-- CARD 1 - HOUSE -->
  <div class="card-v2">
    <div class="card-header-v2">
      <img src="{{ asset('/images/all/SPAH.png') }}" alt="House Icon" class="icon-img" />
      <div class="label-section">
        <p class="title">KEDIAMAN</p>
        <p class="title">SPAH</p>
        <p class="label">BERKEMBAR <span class="number">{{ $spahSummary->total_berkembar }}</span></p>
        <p class="label">SESEBUAH <span class="number">{{ $spahSummary->total_sesebuah }}</span></p>
      </div>
    </div>
    <table class="unit-table">
      <tr><td class="type">TERES</td><td>1 TINGKAT</td><td>{{ $spahSummary->teres_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummary->teres_2t }}</td></tr>

      <tr><td class="type">KLUSTER</td><td>1 TINGKAT</td><td>{{ $spahSummary->kluster_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummary->kluster_2t }}</td></tr>

      <tr><td class="type">BERKEMBAR</td><td>1 TINGKAT</td><td>{{ $spahSummary->berkembar_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummary->berkembar_2t }}</td></tr>

      <tr><td class="type">SESEBUAH</td><td>1 TINGKAT</td><td>{{ $spahSummary->sesebuah_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummary->sesebuah_2t }}</td></tr>

      <tr><td class="type">APARTMENT (UNIT)</td><td></td><td>{{ $spahSummary->apartment }}</td></tr>
    </table>
  </div>

  <!-- CARD 2 - STORE -->
  <div class="card-v2">
    <div class="card-header-v2">
      <img src="{{ asset('/images/all/store.png') }}" alt="Store Icon" class="icon-img" />
      <div class="label-section">
        <p class="title">KORMESIAL</p>
        <p class="title">SPAH</p>
        <p class="label">BERKEMBAR <span class="number">{{ $spahSummaryKormesial->total_berkembar }}</span></p>
        <p class="label">SESEBUAH <span class="number">{{ $spahSummaryKormesial->total_sesebuah }}</span></p>
        <p class="label">OKU <span class="number">{{ $spahSummaryKormesial->total_oku }}</span></p>
      </div>
    </div>
    <table class="unit-table">
      <tr><td class="type">TERES</td><td>1 TINGKAT</td><td>{{ $spahSummaryKormesial->teres_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryKormesial->teres_2t }}</td></tr>

      <tr><td class="type">KLUSTER</td><td>1 TINGKAT</td><td>{{ $spahSummaryKormesial->kluster_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryKormesial->kluster_2t }}</td></tr>

      <tr><td class="type">BERKEMBAR</td><td>1 TINGKAT</td><td>{{ $spahSummaryKormesial->berkembar_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryKormesial->berkembar_2t }}</td></tr>

      <tr><td class="type">SESEBUAH</td><td>1 TINGKAT</td><td>{{ $spahSummaryKormesial->sesebuah_1t ?? 0 }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryKormesial->sesebuah_2t ?? 0 }}</td></tr>
    </table>
  </div>

  <!-- CARD 3 - FACTORY -->
  <div class="card-v2">
    <div class="card-header-v2">
      <img src="{{ asset('/images/all/kilang.png') }}" alt="Factory Icon" class="icon-img" />
      <div class="label-section">
        <p class="title">INDUSTRI</p>
        <p class="title">SPAH</p>
        <p class="label">BERKEMBAR <span class="number">{{ $spahSummaryIndustri->total_berkembar }}</span></p>
        <p class="label">SESEBUAH <span class="number">{{ $spahSummaryIndustri->total_sesebuah }}</span></p>
        <p class="label">OKU <span class="number">{{ $spahSummaryIndustri->total_oku }}</span></p>
      </div>
    </div>
    <table class="unit-table">
      <tr><td class="type">TERES</td><td>1 TINGKAT</td><td>{{ $spahSummaryIndustri->teres_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryIndustri->teres_2t }}</td></tr>

      <tr><td class="type">KLUSTER</td><td>1 TINGKAT</td><td>{{ $spahSummaryIndustri->kluster_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryIndustri->kluster_2t }}</td></tr>

      <tr><td class="type">BERKEMBAR</td><td>1 TINGKAT</td><td>{{ $spahSummaryIndustri->berkembar_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryIndustri->berkembar_2t }}</td></tr>

      <tr><td class="type">SESEBUAH</td><td>1 TINGKAT</td><td>{{ $spahSummaryIndustri->sesebuah_1t ?? 0 }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryIndustri->sesebuah_2t ?? 0 }}</td></tr>
    </table>
  </div>

  <!-- CARD 4 - BUILDING -->
  <div class="card-v2">
    <div class="card-header-v2">
      <img src="{{ asset('/images/all/building.png') }}" alt="Building Icon" class="icon-img" />
      <div class="label-section">
        <p class="title">INSTITUSI</p>
        <p class="title">SPAH</p>
        <p class="label">BERKEMBAR <span class="number">{{ $spahSummaryInstitusi->total_berkembar }}</span></p>
        <p class="label">SESEBUAH <span class="number">{{ $spahSummaryInstitusi->total_sesebuah }}</span></p>
        <p class="label">OKU <span class="number">{{ $spahSummaryInstitusi->total_oku }}</span></p>
      </div>
    </div>
    <table class="unit-table">
      <tr><td class="type">TERES</td><td>1 TINGKAT</td><td>{{ $spahSummaryInstitusi->teres_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryInstitusi->teres_2t }}</td></tr>

      <tr><td class="type">KLUSTER</td><td>1 TINGKAT</td><td>{{ $spahSummaryInstitusi->kluster_1t }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryInstitusi->kluster_2t }}</td></tr>

      <tr><td class="type">BERKEMBAR</td><td>1 TINGKAT</td><td>{{ $spahSummaryInstitusi->berkembar_1t ?? 0 }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryInstitusi->berkembar_2t ?? 0 }}</td></tr>

      <tr><td class="type">SESEBUAH</td><td>1 TINGKAT</td><td>{{ $spahSummaryInstitusi->sesebuah_1t ?? 0 }}</td></tr>
      <tr><td></td><td>2 TINGKAT KE ATAS</td><td>{{ $spahSummaryInstitusi->sesebuah_2t ?? 0 }}</td></tr>
    </table>
  </div>


  <!-- chart -->

  <div class="summary-chart">
  <!-- Left side: text block -->
  <div class="summary-header" style="text-align: center;">
    <p>Jumlah Lulus</p>
    {{-- <h1>{{ $lulusResult }}</h1> --}}
    <h1>{{ $totalLulusInDateRange }}</h1>
    @if(request('start_date') && request('end_date') && isset($totalLulusInDateRange))
    <p style="white-space: nowrap;">
        (dari <strong>{{ request('start_date') }}</strong> hingga <strong>{{ request('end_date') }}</strong>)
    </p>
    @endif

  </div>

  <!-- Right side: Chart -->z
  <canvas id="totalbarChart" width="567" height="380"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<script>
  const ctx2 = document.getElementById('totalbarChart').getContext('2d');

  // Create a vertical gradient
  const gradient = ctx2.createLinearGradient(0, 0, 0, 400);
  gradient.addColorStop(0, '#089B94');
  gradient.addColorStop(1, '#056B66');

  const totalbarChart = new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Jumlah Fail',
        data: window.chartData.monthlyCountsLulus,
        backgroundColor: gradient,
        borderRadius: 4,
        barPercentage: 0.6,
        datalabels: {
          color: '#000',
          anchor: 'end',
          align: 'end',
          font: {
            weight: 'bold'
          }
        }
      }]
    },
    options: {
      plugins: {
        legend: { display: false },
        datalabels: {
          formatter: value => value
        },
        tooltip: {
          callbacks: {
            label: ctx => `${ctx.dataset.label}: ${ctx.raw}`
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 100,
          ticks: {
            stepSize: 20,
            color: '#888'
          },
          grid: {
            color: '#e0e0e0'
          }
        },
        x: {
          ticks: {
            color: '#000'
          },
          grid: {
            display: false
          }
        }
      }
    },
    plugins: [ChartDataLabels]
  });
</script>

</div>

</div>
<br><br><br>
<div class="button-wrapper">
    <a href="{{ route('dashboard') }}" class="btn-custom btn-left">
      <span class="icon">←</span> Kembali
    </a>

    <a href="{{ route('ibuildingYears') }}" class="btn-custom btn-right">
      Senarai Permohonan <span class="icon">→</span>
    </a>
  </div>
<br><br><br><br>

@endsection