@extends('layouts.app')
@section('content')

    <!-- MAIN SECTION -->
    <article class="container mt-28">
      <h1
        class="text-xneutral-400 font-montserrat text-xl sm:text-2xl font-semibold"
      >
        Data Staf
      </h1>
      <p
        class="text-xneutral-200 font-montserrat text-sm sm:text-base font-semibold"
      >
        Staf berkompeten dibidangnya
      </p>
    @if ($stafs->isEmpty())
      <div class="text-center text-xneutral-300 font-montserrat font-medium text-sm sm:text-base">
         No data available
      </div>
    @else
      <div class="mt-10 space-y-11">
        @foreach ($stafs as $staf)
          
          <div class="flex flex-col items-center sm:flex-row gap-8 sm:gap-16">
            <img
              class="sm:col-span-2"
              src="{{ 'storage/' . $staf->Image }}"
              alt="{{ $staf->Nama_Lengkap }}"
            />
            <div class="sm:col-span-10 font-montserrat">
              <h3 class="text-base sm:text-lg font-semibold text-primary-200">
                {{ $staf->Nama_Lengkap }}
              </h3>
              <table
                class="table-auto sm:table-fixed font-medium text-xs sm:text-sm text-xneutral-300 mt-5"
              >
                <tbody>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">NIP</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $staf->NIP }}</td>
                  </tr>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">Jabatan</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $staf->Jabatan }}</td>
                  </tr>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">Email</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $staf->Email }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        @endforeach
      </div>
    @endif
      </article>

    <article class="container mt-[150px]">
      <h1
        class="text-xneutral-400 font-montserrat text-xl sm:text-2xl font-semibold"
      >
        Admin
      </h1>
      <p
        class="text-xneutral-200 font-montserrat text-sm sm:text-base font-semibold"
      >
        Admin Universitas Ichsan Sidrap
      </p>
    @if ($admins->isEmpty())
      <div class="text-center text-xneutral-300 font-montserrat font-medium text-sm sm:text-base">
         No data available
      </div>
    @else
      <div class="mt-10 space-y-11">
        @foreach ($admins as $admin)
          <div class="flex flex-col items-center sm:flex-row gap-8 sm:gap-16">
            <img
              class="sm:col-span-2"
              src="{{ 'storage/' . $admin->Image }}"
              alt="{{ $admin->Nama_Lengkap }}"
            />
            <div class="sm:col-span-10 font-montserrat">
              <h3 class="text-base sm:text-lg font-semibold text-primary-200">
                {{ $admin->Nama_Lengkap }}
              </h3>
              <table
                class="table-fixed w-full sm:table-fixed font-medium text-xs sm:text-sm text-xneutral-300 mt-5"
              >
                <tbody>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">NIP</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $admin->NIP }}</td>
                  </tr>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">Jabatan</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $admin->Jabatan }}</td>
                  </tr>
                  <tr>
                    <td class="w-24 sm:w-48 py-1">Email</td>
                    <td class="w-4 sm:w-12">:</td>
                    <td>{{ $admin->Email }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        @endforeach
      </div>
    @endif
    </article>
@endsection