<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>Labkom | SMKN 1 BONDOWOSO</title>
  <meta name="title" content="Labkom">
  <meta name="description" content="This is a business agency html template made by codewithsadee">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap" rel="stylesheet">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="{{ asset('css/style.css') }}">

  <!-- 
    - preload images
  -->
  <link rel="preload" as="image" href="{{ asset('images/hero-bg.jpg') }}">
  <link rel="preload" as="image" href="{{ asset('images/hero-slide-1.jpg') }}">
  <link rel="preload" as="image" href="{{ asset('images/hero-slide-2.jpg') }}">
  <link rel="preload" as="image" href="{{ asset('images/hero-slide-3.jpg') }}">

</head>

<body>

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <a href="#" class="logo">
        <img src="{{ asset('images/logo-light.svg') }}" width="120" height="50" alt="Labkom home" class="logo-light">

        <img src="{{ asset('images/logo-dark.svg') }}" width="120" height="50" alt="Labkom home" class="logo-dark">
      </a>

      <nav class="navbar" data-navbar>

        <div class="navbar-top">
          <a href="#" class="logo">
            <img src="{{ asset('images/logo-light.svg') }}" width="74" height="24" alt="Labkom home">
          </a>

          <button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>
        </div>

        <ul class="navbar-list">

          <li>
            <a href="#home" class="navbar-link">Beranda</a>
          </li>

          <li>
            <a href="#about" class="navbar-link">Tentang</a>
          </li>

          <li>
            <a href="#guide" class="navbar-link">Panduan</a>
          </li>

          <li>
            <a href="#contact" class="navbar-link">Hubungi Kami</a>
          </li>

        </ul>

        <div class="wrapper">
          <a href="mailto:smkn1_bws@yahoo.com" class="contact-link">smkn1_bws@yahoo.com</a>

          <a href="tel:0332431201" class="contact-link">0332 - 431201</a>
        </div>

        <ul class="social-list">

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-youtube"></ion-icon>
            </a>
          </li>

        </ul>

      </nav>

      <a href="{{ route('filament.siswa.auth.login') }}" class="btn btn-primary">Login</a>

      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
      </button>

      <div class="overlay" data-nav-toggler data-overlay></div>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section id="home" class="section hero has-bg-image" aria-label="home"
        style="background-image: url('{{ asset('images/hero-bg.jpg') }}')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title">Smart M-One Lab System: Catat Kehadiran Guru Lab Secara Digital</h1>

            <p class="hero-text">
              Memudahkan pencatatan kehadiran guru lab komputer secara digital, mengurangi beban administrasi, dan memastikan data presensi selalu akurat.
            </p>

            <div class="btn-wrapper">

              <a href="{{ route('filament.siswa.auth.login') }}" class="btn btn-primary">Akses Aplikasi</a>

              <a href="#contact" class="btn btn-outline">Hubungi Kami</a>

            </div>

          </div>

          <div class="hero-slider" data-slider>

            <div class="slider-inner">
              <ul class="slider-container" data-slider-container>

                <li class="slider-item">

                  <figure class="img-holder" style="--width: 575; --height: 550;">
                    <img src="{{ asset('images/hero-slide-1.jpg') }}" width="575" height="550" alt="" class="img-cover">
                  </figure>

                </li>

                <li class="slider-item">

                  <div class="hero-card">
                    <figure class="img-holder" style="--width: 575; --height: 550;">
                      <img src="{{ asset('images/hero-slide-2.jpg') }}" width="575" height="550" alt="hero banner"
                        class="img-cover">
                    </figure>
                  </div>

                </li>

                <li class="slider-item">

                  <figure class="img-holder" style="--width: 575; --height: 550;">
                    <img src="{{ asset('images/hero-slide-3.jpg') }}" width="575" height="550" alt="" class="img-cover">
                  </figure>

                </li>

              </ul>
            </div>

            <button class="slider-btn prev" aria-label="slide to previous" data-slider-prev>
              <ion-icon name="arrow-back"></ion-icon>
            </button>

            <button class="slider-btn next" aria-label="slide to next" data-slider-next>
              <ion-icon name="arrow-forward"></ion-icon>
            </button>

          </div>

        </div>
      </section>






      <!-- 
        - #SESSION
      -->

      <section class="section session" aria-labelledby="session-label">
          <div class="container">
              <p class="section-subtitle" id="session-label">Sesi Berjalan</p>
              
              <h2 class="h2 section-title">
                  Jadwal Pelajaran pada {{ now()->isoFormat('D MMMM Y') }}
              </h2>

              @php
                $now = now();
                $currentTime = $now->format('H:i:s');
                $currentDay = strtolower($now->isoFormat('dddd'));

                $jadwalHariIni = App\Models\Jadwal::with(['guru', 'mapel', 'kelas'])
                    ->where('hari', $currentDay)
                    ->where('waktu_selesai', '>', $currentTime)
                    ->orderBy('waktu_mulai')
                    ->get();
                
                $sedangBerlangsung = $jadwalHariIni->filter(function($jadwal) use ($currentTime) {
                    return $currentTime >= $jadwal->waktu_mulai && 
                          $currentTime <= $jadwal->waktu_selesai;
                });
                
                $akanDatang = $jadwalHariIni->filter(function($jadwal) use ($currentTime) {
                    return $currentTime < $jadwal->waktu_mulai;
                })->take(4);
            @endphp

              @if($sedangBerlangsung->isEmpty() && $akanDatang->isEmpty())

                  <div class="session-card">

                      <div class="card-icon">
                          <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
                      </div>

                      <h3 class="card-title">Tidak Ada Jadwal Hari Ini</h3>

                      <p class="card-text">
                          @php
                              $nextDay = \Carbon\Carbon::tomorrow();
                              $nextDayName = $nextDay->isoFormat('dddd');
                              $nextDayDate = $nextDay->isoFormat('D MMMM Y');
                          @endphp
                          
                          @if(App\Models\Jadwal::where('hari', strtolower($nextDayName))->exists())
                              Jadwal akan dilanjutkan besok ({{ $nextDayDate }})
                          @else
                              Tidak ada jadwal tersisa untuk minggu ini
                          @endif
                      </p>

                  </div>

              @else
                  @if($sedangBerlangsung->isNotEmpty())

                      <ul class="grid-list">

                          @foreach($sedangBerlangsung as $jadwal)

                              <li>

                                  <div class="session-card active">

                                      <div class="card-icon">
                                          <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
                                      </div>

                                      <h3 class="h4 card-title">{{ $jadwal->guru->nama }}</h3>

                                      <p class="card-text">
                                          <strong>Sedang Berlangsung</strong><br>
                                          Jam ke-{{ $jadwal->jam_ke }} 
                                          ({{ \Carbon\Carbon::parse($jadwal->waktu_mulai)->format('H:i') }} - 
                                          {{ \Carbon\Carbon::parse($jadwal->waktu_selesai)->format('H:i') }})
                                      </p>

                                      <p class="card-text">
                                          {{ $jadwal->mapel->nama_mapel }} - {{ $jadwal->kelas->nama_kelas }}
                                      </p>

                                      <p class="card-text text-muted">
                                          @php
                                              $startTime = \Carbon\Carbon::parse($jadwal->waktu_mulai);
                                              $diff = round($startTime->diffInMinutes(now()));
                                              echo "Sudah berjalan $diff menit";
                                          @endphp
                                      </p>
                                  </div>

                              </li>

                          @endforeach

                      </ul>

                  @endif

                  @if($akanDatang->isNotEmpty())

                      <ul class="grid-list">

                          @foreach($akanDatang as $jadwal)

                              <li>

                                  <div class="session-card">

                                      <div class="card-icon">
                                          <ion-icon name="alarm-outline" aria-hidden="true"></ion-icon>
                                      </div>

                                      <h3 class="h4 card-title">{{ $jadwal->guru->nama }}</h3>

                                      <p class="card-text">
                                          Jam ke-{{ $jadwal->jam_ke }} 
                                          ({{ \Carbon\Carbon::parse($jadwal->waktu_mulai)->format('H:i') }} - 
                                          {{ \Carbon\Carbon::parse($jadwal->waktu_selesai)->format('H:i') }})
                                      </p>

                                      <p class="card-text">
                                          {{ $jadwal->mapel->nama_mapel }} - {{ $jadwal->kelas->nama_kelas }}
                                      </p>

                                      <p class="card-text text-muted">
                                          @php
                                              $now = now();
                                              $startTime = \Carbon\Carbon::parse($jadwal->waktu_mulai);
                                              
                                              if ($now > $startTime) {
                                                  $diff = round($startTime->diffInMinutes($now));
                                                  echo "Sudah dimulai $diff menit yang lalu";
                                              } else {
                                                  echo "Akan dimulai " . $startTime->diffForHumans();
                                              }
                                          @endphp
                                      </p>

                                  </div>

                              </li>

                          @endforeach

                      </ul>

                  @endif
              @endif
          </div>
      </section>





      <!-- 
        - #SCHEDULE
      -->

      <section class="section schedule" aria-labelledby="schedule-label">
          <div class="container">
              <p class="section-subtitle" id="schedule-label">Jadwal</p>
              <h2 class="h2 section-title">Jadwal Akuntansi</h2>

              <div class="filter-schedule-wrapper">
                  <div class="custom-filter-schedule">
                      <div class="filter-schedule-selected">
                          <span>Akuntansi</span>
                          <ion-icon name="chevron-down-outline"></ion-icon>
                      </div>
                      <ul class="filter-schedule-options">
                          <li data-value="akuntansi" class="active">Akuntansi</li>
                          <li data-value="manajemen_perkantoran">Manajemen Perkantoran</li>
                      </ul>
                  </div>
              </div>
              
              @if(count($jadwalAkuntansi) > 0 || count($jadwalManajemen) > 0)

                  <table class="schedule-table">

                      <thead>
                          <tr>
                              <th rowspan="2">No</th>
                              <th rowspan="2">Hari</th>
                              <th rowspan="2">Jam Ke-</th>
                              <th rowspan="2">Kelas</th>
                              <th colspan="2">Jam</th>
                              <th rowspan="2">Instruktur</th>
                              <th rowspan="2">Mapel</th>
                          </tr>
                          <tr>
                              <th>Mulai</th>
                              <th>Berakhir</th>
                          </tr>
                      </thead>

                      <tbody>
                        @php
                            function calculateRowspans($data) {
                                $rowspanCounts = [];
                                foreach ($data as $item) {
                                    $key = $item['no'] . '|' . $item['hari'];
                                    if (!isset($rowspanCounts[$key])) {
                                        $rowspanCounts[$key] = 0;
                                    }
                                    $rowspanCounts[$key]++;
                                }
                                return $rowspanCounts;
                            }
                            
                            $rowspanAkuntansi = calculateRowspans($jadwalAkuntansi);
                            $rowspanManajemen = calculateRowspans($jadwalManajemen);
                        @endphp

                        @foreach($jadwalAkuntansi as $index => $item)
                            @php
                                $key = $item['no'] . '|' . $item['hari'];
                                $rowspan = $rowspanAkuntansi[$key] ?? 1;
                            @endphp
                            <tr data-type="akuntansi">
                                @if($item['is_first'])
                                    <td rowspan="{{ $rowspan }}">{{ $item['no'] }}</td>
                                    <td rowspan="{{ $rowspan }}">{{ $item['hari'] }}</td>
                                @endif
                                <td>{{ $item['jam_ke'] }}</td>
                                <td>{{ $item['kelas'] }}</td>
                                <td>{{ \Carbon\Carbon::parse($item['waktu_mulai'])->format('H:i') }}</td>
                                <td>{{ \Carbon\Carbon::parse($item['waktu_selesai'])->format('H:i') }}</td>
                                <td>{{ $item['instruktur'] }}</td>
                                <td>{{ $item['mapel'] }}</td>
                            </tr>
                        @endforeach

                        @foreach($jadwalManajemen as $index => $item)
                            @php
                                $key = $item['no'] . '|' . $item['hari'];
                                $rowspan = $rowspanManajemen[$key] ?? 1;
                            @endphp
                            <tr data-type="manajemen_perkantoran" style="display: none;">
                                @if($item['is_first'])
                                    <td rowspan="{{ $rowspan }}">{{ $item['no'] }}</td>
                                    <td rowspan="{{ $rowspan }}">{{ $item['hari'] }}</td>
                                @endif
                                <td>{{ $item['jam_ke'] }}</td>
                                <td>{{ $item['kelas'] }}</td>
                                <td>{{ \Carbon\Carbon::parse($item['waktu_mulai'])->format('H:i') }}</td>
                                <td>{{ \Carbon\Carbon::parse($item['waktu_selesai'])->format('H:i') }}</td>
                                <td>{{ $item['instruktur'] }}</td>
                                <td>{{ $item['mapel'] }}</td>
                            </tr>
                        @endforeach
                      </tbody>

                  </table>

                  <div class="empty-schedule-card" style="display: none;">

                      <div class="check-card">

                          <div class="card-icon">
                              <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
                          </div>

                          <h3 class="empty-schedule-title h4 card-title">Tidak Ada Jadwal Hari Ini</h3>

                          <p class="empty-schedule-text card-text">
                              Tidak ada jadwal pengecekan untuk saat ini
                          </p>

                      </div>
                      
                  </div>

              @else
              
                  <div class="check-card">

                      <div class="card-icon">
                          <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
                      </div>

                      <h3 class="card-title">Data Kosong</h3>

                      <p class="card-text">
                          Tidak ada data yang tersedia untuk saat ini
                      </p>

                  </div>

              @endif
          </div>
      </section>





      <!-- 
        - #CHECK
      -->

      <section class="section check" aria-labelledby="check-label">
          <div class="container">
              <p class="section-subtitle" id="check-label">Pengecekan Hardware & Software</p>
              <h2 class="h2 section-title">Jadwal Pengecekan Bulanan Tahun {{ $tahun }}</h2>

              <div class="filter-check-wrapper">
                  <div class="custom-filter-check">
                      <div class="filter-check-selected">
                          <span>Semua</span>
                          <ion-icon name="chevron-down-outline"></ion-icon>
                      </div>
                      <ul class="filter-check-options">
                          <li data-value="all" class="active">Semua</li>
                          <li data-value="hardware">Hardware</li>
                          <li data-value="software">Software</li>
                      </ul>
                  </div>

                  <div class="custom-filter-semester">
                      <div class="filter-semester-selected">
                          <span>Semua Semester</span>
                          <ion-icon name="chevron-down-outline"></ion-icon>
                      </div>
                      <ul class="filter-semester-options">
                          <li data-semester="all" class="active">Semua Semester</li>
                          <li data-semester="1">Semester 1</li>
                          <li data-semester="2">Semester 2</li>
                      </ul>
                  </div>
              </div>

              @if(count($jadwalPerawatan) > 0)

                  <table class="check-table">

                      <thead>
                          <tr>
                              <th rowspan="3">No</th>
                              <th rowspan="3">Jenis Pengecekan</th>
                              <th colspan="4">Januari<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Februari<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Maret<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">April<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Mei<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Juni<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Juli<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Agustus<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">September<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Oktober<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">November<br><span class="week-label">Minggu Ke-</span></th>
                              <th colspan="4">Desember<br><span class="week-label">Minggu Ke-</span></th>
                          </tr>
                          <tr class="week-numbers">
                              @for ($i = 1; $i <= 12; $i++)
                                  @for ($j = 1; $j <= 4; $j++)
                                      <th>{{ $j }}</th>
                                  @endfor
                              @endfor
                          </tr>
                      </thead>

                      <tbody>
                          @foreach($jadwalPerawatan as $index => $jadwal)
                          <tr data-type="{{ $jadwal->jenisPerawatan->kategori }}">
                              <td>{{ $index + 1 }}</td>
                              <td>{{ $jadwal->jenisPerawatan->nama }}</td>
                              
                              @foreach(['januari', 'februari', 'maret', 'april', 'mei', 'juni', 'juli', 'agustus', 'september', 'oktober', 'november', 'desember'] as $bulan)
                                  @for ($minggu = 1; $minggu <= 4; $minggu++)
                                      @php 
                                          $mingguField = 'minggu_'.$bulan;
                                          $checked = in_array($minggu, $jadwal->$mingguField ?? []) ? 'checked' : '';
                                      @endphp
                                      <td class="{{ $checked }}"></td>
                                  @endfor
                              @endforeach
                          </tr>
                          @endforeach
                      </tbody>

                  </table>

                  <div class="empty-check-card" style="display: none;">

                      <div class="check-card">

                          <div class="card-icon">
                              <ion-icon name="laptop-outline" aria-hidden="true"></ion-icon>
                          </div>

                          <h3 class="empty-check-title h4 card-title">Tidak Ada Jadwal Pengecekan Hari Ini</h3>

                          <p class="empty-check-text card-text">
                              Tidak ada jadwal pengecekan untuk saat ini
                          </p>

                      </div>
                      
                  </div>

              @else

                <div class="check-card">

                      <div class="card-icon">
                          <ion-icon name="laptop-outline" aria-hidden="true"></ion-icon>
                      </div>

                      <h3 class="card-title">Data Kosong</h3>

                      <p class="card-text">
                          Tidak ada data yang tersedia untuk saat ini
                      </p>

                </div>

              @endif
          </div>
      </section>





      <!-- 
        - #ABOUT
      -->

      <section id="about" class="section about" aria-labelledby="about-label">
        <div class="container">

          <figure class="about-banner">
            <img src="{{ asset('images/about-banner2.png') }}" width="800" height="580" loading="lazy" alt="about banner"
              class="w-100">
          </figure>

          <div class="about-content">

            <p class="section-subtitle" id="about-label">Apa Saja Tata Tertib Penggunaan</p>

            <h2 class="h2 section-title">
              Laboratorium Komputer Akuntansi & Manajemen Perkantoran?
            </h2>

            <ul>

              <li class="about-item">
                <div class="accordion-card expanded" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Larangan</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Dilarang masuk ruangan laboratorium tanpa seijin guru, Koordinator Lab / Laboran.
                    <br>
                    • Tidak makan, minum dan bermain game selama menggunakan laboratorium komputer.
                    <br>
                    • Dilarang melepas sumber arus listrik (stopkontak) tanpa seijin petugas.
                    <br>
                    • Dilarang memindah dan mengganti peralatan, barang didalam laboratorium.
                  </p>

                </div>
              </li>

              <li class="about-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Kewajiban</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Menjaga, merawat dan merapikan kebersihan laboratorium komputer sebelum dan sesudah pemakaian.
                    <br>
                    • Merawat dan menjaga hardware dan software perangkat komputer.
                    <br>
                    • Melaporkan kepada petugas apabila ada ketidaksesuaian peralatan dan barang yang akan digunakan.
                    <br>
                    • Menjadikan laboratorium komputer sebagai sarana peningkatan kualitas SDM warga sekolah khususnya dalam pembelajaran sekolah.
                  </p>

                </div>
              </li>

              <li class="about-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Tanggung Jawab</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Semua yang menggunakan Laboratorium Komputer bertanggung jawab penuh terhadap semua peralatan dan barang yang ada didalam ruangan laboratorium.
                    <br>
                    • Wajib mengganti baru apabila terbukti menghilangkan atau merusak peralatan dan barang didalam laboratorium.
                  </p>

                </div>
              </li>

            </ul>

          </div>

        </div>
      </section>





      <!-- 
        - #FEATURE
      -->

      <section id="guide" class="section guide" aria-labelledby="guide-label">
        <div class="container">

          <figure class="guide-banner">
            <img src="{{ asset('images/guide-banner2.png') }}" width="800" height="531" loading="lazy" alt="guide banner"
              class="w-100">
          </figure>

          <div class="guide-content">

            <p class="section-subtitle" id="feautre-label">Apa Saja Uraian Tugas</p>

            <h2 class="h2 section-title">
              Laboran Lab Komputer Akuntansi & Manajmen Perkantoran?
            </h2>

            <p class="section-text">
              Berikut panduan singkat untuk memaksimalkan penggunaan aplikasi absensi GuruLab di lab komputer sekolah Anda.
            </p>

            {{-- <ul class="guide-list">

              <li>
                <div class="guide-card">

                  <div class="card-icon">
                    <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
                  </div>

                  <span class="span">
                    Guru dapat melakukan rekap kehadiran mengajar disetiap jadwalnya.
                  </span>

                </div>
              </li>

              <li>
                <div class="guide-card">

                  <div class="card-icon">
                    <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
                  </div>

                  <span class="span">
                    Siswa dapat melakukan rekap kehadiran pengajar disetiap jadwalnya.
                  </span>

                </div>
              </li>

              <li>
                <div class="guide-card">

                  <div class="card-icon">
                    <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
                  </div>

                  <span class="span">
                    Guru dapat melihat hasil rekapan selama mengajar.
                  </span>

                </div>
              </li>

              <li>
                <div class="guide-card">

                  <div class="card-icon">
                    <ion-icon name="checkmark" aria-hidden="true"></ion-icon>
                  </div>

                  <span class="span">
                    Siswa dapat melihat hasil rekapan selama diajar.
                  </span>

                </div>
              </li>

            </ul> --}}

            <ul>

              <li class="guide-item">
                <div class="accordion-card expanded" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Kewajiban Perawatan Dan Pemeliharaan</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Menjaga, merawat dan merapikan kebersihan laboratorium komputer sebelum dan sesudah pemakaian.
                    <br>
                    • Merawat dan menjaga hardware dan software perangkat komputer.
                    <br>
                    • Melakukan perbaikan atau pelaporan kerusakan peralatan ke Kepala Laboratorium secara berkala.
                    <br>
                    • Wajib mem-backup data, cek data, update software/OS, update antivirus, menginstall software dan instal ulang komputer atau laptop secara berkala.
                  </p>

                </div>
              </li>

              <li class="guide-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Pengelolaan Peralatan</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Menyediakan dan melayani kebutuhan peralatan dan bahan praktek bagi guru serta siswa selama pembelajaran disekolah.
                    <br>
                    • Tersedianya peralatan cadangan dan bahan praktek cadangan.
                    <br>
                    • Menginventaris peralatan dan barang didalam laboratorium.
                    <br>
                    • Mengganti peralatan, barang atau bahan yang rusak atau habis penggunaan.
                  </p>

                </div>
              </li>

              <li class="guide-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Tanggung Jawab Dan Laporan</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Melaporkan kepada Kepala Laboratorium apabila ada ketidaksesuaian penggunaan Laboratorium sesuai dengan jadwal yang ada.
                    <br>
                    • Bertanggung jawab penuh terhadap semua peralatan dan barang didalam ruangan laboratorium.
                  </p>

                </div>
              </li>

              <li class="guide-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Administrasi Dan Keamanan</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Pemegang kunci Laboratorium komputer adalah Laboran, Ketua Paket Keahlian dan Wakil Kepala Sekolah bidang Sarana dan Prasarana.
                  </p>

                </div>
              </li>

              <li class="guide-item">
                <div class="accordion-card" data-accordion>

                  <h3 class="card-title">
                    <button class="accordion-btn" data-accordion-btn>
                      <ion-icon name="chevron-down-outline" aria-hidden="true" class="down"></ion-icon>

                      <spna class="span h5">Tujuan Dan Fungsi Laboratorium</spna>
                    </button>
                  </h3>

                  <p class="accordion-content">
                    • Menjadikan laboratorium komputer sebagai sarana peningkatan kualitas SDM warga sekolah khususnya dalam pembelajaran sekolah.
                  </p>

                </div>
              </li>

            </ul>

          </div>

        </div>
      </section>





      <!-- 
        - #STATS
      -->

      <section class="section stats" aria-label="our stats">
        <div class="container">

          <ul class="stats-card has-bg-image" style="background-image: url('{{ asset('images/stats-bg.jpg') }}">

            <li>
              <p class="card-text">
                <span class="h1">{{ $totalPengguna }}</span>

                <spna class="span">Pengguna</spna>
              </p>
            </li>

            <li>
              <p class="card-text">
                <span class="h1">{{ $totalJadwal }}</span>

                <spna class="span">Jadwal</spna>
              </p>
            </li>

            <li>
              <p class="card-text">
                <span class="h1">{{ $totalMapel }}</span>

                <spna class="span">Mata Pelajaran</spna>
              </p>
            </li>

            <li>
              <p class="card-text">
                <span class="h1">{{ $totalKelas }}</span>

                <spna class="span">Kelas</spna>
              </p>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #CTA
      -->

      <section id="contact" class="cta" aria-label="call to action">
        <div class="container">

          <h2 class="h2 section-title">
            Mulai Gunakan Sistem Presensi Digital untuk Lab Komputer Anda.
          </h2>

          <a href="#contact" class="btn btn-primary">Hubungi Kami</a>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer">
    <div class="container grid-list">

      <div class="footer-brand">

        <a href="#" class="logo">
          <img src="{{ asset('images/logo-light.svg') }}" width="120" height="50" alt="Adex home">
        </a>

        <p class="footer-text">
          &copy; 2025 SMKN 1 Bondowoso. <br> All rights reserved.
        </p>

        <ul class="social-list">

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li>
            <a href="#" class="social-link">
              <ion-icon name="logo-youtube"></ion-icon>
            </a>
          </li>

        </ul>

      </div>

      <ul class="footer-list">

        <li>
          <p class="h4 footer-list-title">Hubungi Kami</p>
        </li>

        <li>
          <address class="footer-text">
            HOS. Cokroaminoto No. 110 Bondowoso
          </address>
        </li>

        <li>
          <a href="mailto:smkn1_bws@yahoo.com" class="footer-link">smkn1_bws@yahoo.com</a>
        </li>

        <li>
          <a href="tel:0332431201" class="footer-link">0332 - 431201</a>
        </li>

      </ul>

      <ul class="footer-list">

        <li>
          <p class="h4 footer-list-title">Link</p>
        </li>

        <li>
          <a href="#" class="footer-link">Beranda</a>
        </li>

        <li>
          <a href="#" class="footer-link">Tentang</a>
        </li>

        <li>
          <a href="#" class="footer-link">Panduan</a>
        </li>

        <li>
          <a href="#" class="footer-link">Hubungi Kami</a>
        </li>

      </ul>

      <div class="footer-list">

        <p class="h4 footer-list-title">Informasi Terkini</p>

        <p class="footer-text">
          Dapatkan pembaruan fitur dan panduan penggunaan aplikasi langsung ke email Anda.
        </p>

        <form action="" class="input-wrapper">
          <input type="email" name="email_address" placeholder="Alamat Email" required class="input-field">

          <button type="submit" class="submit-btn">Kirim</button>
        </form>

      </div>

    </div>
  </footer>





  <!-- 
    - custom js link
  -->
  <script src="{{ asset('js/script.js') }}"></script>

  <!-- 
    - ionicon
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>