@extends('layouts.main')

@section('css')
<style>
    .tapel-card {
        border-radius: 16px !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -4px rgba(0, 0, 0, 0.03) !important;
    }
    .table thead th {
        border-top: none !important;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.8px;
        padding: 14px 16px !important;
    }
    .table tbody td {
        padding: 14px 16px !important;
        vertical-align: middle !important;
    }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2 align-items-center">
      <div class="col-sm-6">
        <h4 class="m-0 font-weight-bold text-dark d-flex align-items-center">
          <span class="p-2 mr-2 rounded-lg shadow-sm text-white d-inline-flex align-items-center justify-content-center" style="width: 38px; height: 38px; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);">
            <i class="fas fa-calendar-alt fa-sm"></i>
          </span>
          Data Tahun Pelajaran
        </h4>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card tapel-card">
          <!-- /.card-header -->
          <div class="card-body p-0">
            @if ($tapel->count() < 1)
              <div class="text-center py-5 text-muted">
                <i class="fas fa-folder-open fa-3x mb-3 text-secondary opacity-50"></i>
                <p class="mb-0 font-weight-medium">Data masih kosong!</p>
              </div>
            @else
              <div class="table-responsive">
                <table id="myTable" class="table table-hover mb-0 text-sm">
                  <thead>
                    {{-- Header Tabel dengan Gradien Biru-Indigo Terang & Berwarna --}}
                    <tr class="text-white header-table {{ Auth::user()->dark_mode == '1' ? 'text-white' : '' }}" style="background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 50%, #6366f1 100%);">
                      <th scope="col" class="text-center" width="6%">No.</th>
                      <th scope="col"><i class="fas fa-graduation-cap mr-1"></i> Tahun Pelajaran</th>
                      <th scope="col"><i class="fas fa-layer-group mr-1"></i> Semester</th>
                      <th scope="col"><i class="fas fa-map-marker-alt mr-1"></i> Tempat Pembagian Raport</th>
                      <th scope="col"><i class="fas fa-calendar-day mr-1"></i> Tanggal Pembagian Raport</th>
                      <th scope="col" class="text-center" width="12%">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($tapel as $item)
                      <tr>
                        <td class="text-center font-weight-bold text-muted">{{ $loop->iteration }}</td>
                        <td>
                          <span class="font-weight-bold" style="color: #4f46e5;">
                            {{ $item->tahun_pelajaran }}
                          </span>
                        </td>
                        <td>
                          <span class="badge px-2.5 py-1.5 shadow-sm" style="background: rgba(79, 70, 229, 0.12); color: #4f46e5; font-size: 0.8rem; font-weight: 700;">
                            {{ $item->semester() }}
                          </span>
                        </td>
                        <td>
                          <span class="text-secondary font-weight-medium">
                            {{ $item->tempat ?? '-' }}
                          </span>
                        </td>
                        <td>
                          <span class="text-dark font-weight-semibold">
                            {{ $item->tanggal() }}
                          </span>
                        </td>
                        <td class="text-center">
                          <div class="btn-group">
                            <a href="{{ route('tapel.edit', $item) }}" class="edit-button btn btn-warning btn-sm mx-1 px-3 shadow-sm d-inline-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: none; color: #fff; border-radius: 8px;">
                                <i class="fas fa-pencil-alt mr-1"></i> Edit
                            </a>
                          </div>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
  </div>
</section>

{{-- @include('pages.tapel._show') --}}
{{-- @include('pages.tapel._delete') --}}

@endsection

@section('js')
  <script>
    $(document).ready(function(){
      $('#myTable').dataTable({
        paginate: false,
        searching: false,
        ordering: false,
      });
    });
  </script>
@endsection