@extends('layouts.admin')

@section('title', 'Data Kelas')
@section('content')

<style>
    .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        margin-top: 20px;
    }

    .card-header {
        background: #2563eb;
        color: white;
        padding: 16px 24px;
        font-size: 20px;
        font-weight: 600;
        border-radius: 12px 12px 0 0;
        display: flex;
        align-items: center;
    }

    .card-header i {
        margin-right: 10px;
    }

    .table th {
        background-color: #dbeafe;
        color: #1e3a8a;
    }

    .btn-sm {
        font-size: 13px;
        padding: 5px 10px;
        border-radius: 6px;
    }

    .btn-primary {
        background-color: #3b82f6;
        border: none;
    }

    .btn-danger {
        background-color: #ef4444;
        border: none;
    }

    .btn-secondary {
        background-color: #6b7280;
        border: none;
    }

    .btn i {
        margin-right: 4px;
    }

    .modal-content {
        border-radius: 16px;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
        background-color: #2563eb;
        color: white;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom: none;
    }

    .modal-header.bg-danger {
        background-color: #dc2626 !important;
    }

    .modal-title i {
        margin-right: 6px;
    }

    .modal-footer .btn {
        font-weight: 500;
    }

    .modal.fade .modal-dialog {
        transform: translateY(20px);
        transition: all 0.3s ease-out;
        opacity: 0;
    }

    .modal.fade.show .modal-dialog {
        transform: translateY(0);
        opacity: 1;
    }

    .success-icon, .error-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }

    .success-icon {
        background-color: #d1fae5;
    }

    .error-icon {
        background-color: #fee2e2;
    }

    .success-icon svg,
    .error-icon svg {
        animation: popIn 0.4s ease-out forwards;
        transform: scale(0.8);
        opacity: 0;
    }

    @keyframes popIn {
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>

<div class="card">
    <div class="card-header">
        <i class="fas fa-chalkboard"></i> Data Kelas
    </div>
    <div class="card-body">
        <table class="table table-bordered text-center">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Kelas</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($kelases as $index => $kelas)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $kelas->nama }}</td>
                        <td>
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editModal{{ $kelas->id }}">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal{{ $kelas->id }}">
                                <i class="fas fa-trash-alt"></i> Hapus
                            </button>
                        </td>
                    </tr>

                    <div class="modal fade" id="editModal{{ $kelas->id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <form action="{{ route('kelas.update', $kelas->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title"><i class="fas fa-edit"></i> Edit Kelas</h5>
                                        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label>Nama Kelas</label>
                                            <input type="text" name="nama" class="form-control" value="{{ $kelas->nama }}" required>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="modal fade" id="deleteModal{{ $kelas->id }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <form action="{{ route('kelas.destroy', $kelas->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <div class="modal-content">
                                    <div class="modal-header bg-danger">
                                        <h5 class="modal-title"><i class="fas fa-exclamation-circle"></i> Hapus Kelas</h5>
                                        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body text-center">
                                        <p>Yakin ingin menghapus <strong>{{ $kelas->nama }}</strong>?</p>
                                    </div>
                                    <div class="modal-footer justify-content-center">
                                        <button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i> Ya, Hapus</button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                @endforeach
            </tbody>
        </table>

        <div class="text-center mt-4">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tambahModal">
                <i class="fas fa-plus-circle"></i> Tambah Kelas
            </button>
        </div>
    </div>
</div>

<div class="modal fade" id="tambahModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <form action="{{ route('kelas.store') }}" method="POST">
      @csrf
      <div class="modal-content animate__animated animate__fadeInDown" style="border-radius: 12px;">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">
            <i class="fas fa-plus-circle me-1"></i> Tambah Kelas
          </h5>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="nama">Nama Kelas</label>
            <input type="text" name="nama" id="nama" class="form-control" placeholder="Masukkan nama kelas..." required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Simpan
          </button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            <i class="fas fa-times"></i> Batal
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

@if (session('success'))
<div class="modal fade show" id="successModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
      <div class="modal-body">
        <div class="d-flex justify-content-center mb-3 success-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <h5 class="text-success font-weight-bold">{{ session('success') }}</h5>
      </div>
    </div>
  </div>
</div>
<script>
  setTimeout(() => {
    document.getElementById("successModal").style.display = "none";
  }, 2500);
</script>
@endif

@if (session('error'))
<div class="modal fade show" id="errorModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
      <div class="modal-body">
        <div class="d-flex justify-content-center mb-3 error-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </div>
        <h5 class="text-danger font-weight-bold">{{ session('error') }}</h5>
      </div>
    </div>
  </div>
</div>
<script>
  setTimeout(() => {
    document.getElementById("errorModal").style.display = "none";
  }, 3000);
</script>
@endif

@endsection