@extends('pages.index')
@section('admin_content')


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
        .container {
            padding: 2rem 0;
        }

        .grade-title {
            color: rgb(87, 87, 87);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 2rem;
            text-shadow: none;
        }

        .class-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            color: #334155;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            height: 280px;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px rgba(54, 92, 245, 0.08);
        }

        .class-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(54, 92, 245, 0.15);
            border-color: #365CF5;
        }

        .class-card.tkj {
            background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
            color: white;
        }

        .class-card.tav {
            background: linear-gradient(135deg, #059669 0%, #34d399 100%);
            color: white;
        }

        .class-card.multimedia {
            background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
            color: white;
        }

        .class-card.akuntansi {
            background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
            color: white;
        }

        .class-card.grade-10 {
            background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
            color: white;
        }
        .class-card.grade-11 {
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            color: white;
        }
        .class-card.grade-12 {
            background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
            color: white;
        }

        .class-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            z-index: 1;
        }

        .class-card::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -30%;
            width: 60%;
            height: 60%;
            background: rgba(255,255,255,0.03);
            border-radius: 50%;
            z-index: 1;
        }

        .card-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .class-icon {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.2);
        }

        .class-icon i {
            font-size: 2rem;
            color: white;
        }

        .class-number {
            font-size: 3rem;
            font-weight: 900;
            margin-bottom: 0.5rem;
            text-shadow: none;
        }

        .class-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            opacity: 0.95;
        }

        .major-name {
            font-size: 0.9rem;
            font-weight: 500;
            background: rgba(255,255,255,0.15);
            padding: 0.3rem 1rem;
            border-radius: 20px;
            display: inline-block;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .status-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255,255,255,0.9);
            color: #365CF5;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 3;
        }

        .status-badge.active {
            background: rgba(255,255,255,0.95);
            color: #365CF5;
        }

        .decorative-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        .circle-1 {
            position: absolute;
            top: 10%;
            right: 10%;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 50%;
        }

        .circle-2 {
            position: absolute;
            bottom: 20%;
            left: 10%;
            width: 15px;
            height: 15px;
            background: rgba(255,255,255,0.15);
            border-radius: 50%;
        }

        .square {
            position: absolute;
            top: 60%;
            right: 15%;
            width: 12px;
            height: 12px;
            background: rgba(255,255,255,0.15);
            border-radius: 3px;
            transform: rotate(45deg);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        .section-divider {
            margin: 3rem 0;
        }
</style>
<div class="container-fluid">
    <!-- ========== title-wrapper start ========== -->
    <div class="title-wrapper pt-30">
        <div class="row align-items-start">
            <div class="col-md-6">
                <div class="title">
                    <h2 style="font-weight: 500;">Kelas Mapel</h2> <!-- Kurangi ketebalan judul -->
                </div>
            </div>
            <div class="col-md-6">
                <div class="breadcrumb-wrapper">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard.index') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">
                                Kelas
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== title-wrapper end ========== -->

    <!-- Button Tambah Kelas -->
    <div class="mb-3 text-end">
        <button class="btn btn-primary btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalTambahKelas">
            <i class="fas fa-plus text-white me-2"></i>
            Tambah Kelas
        </button>
    </div>
    <hr class="my-4"> <!-- Garis horizontal pembatas kelas 10, 11, 12 -->

    <!-- Notifikasi Sukses -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
            <i class="fas fa-check-circle me-2"></i>
            <strong>Berhasil!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <script>
            setTimeout(function() {
                const alert = document.getElementById('successAlert');
                if (alert) {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 5000);
        </script>
    @endif

    <!-- Modal Tambah Kelas -->
    <div class="modal fade" id="modalTambahKelas" tabindex="-1" aria-labelledby="modalTambahKelasLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <div class="modal-header bg-primary text-white border-0 rounded-top-4">
                    <h5 class="modal-title fw-bold text-whi" id="modalTambahKelasLabel">
                        <i class="fas fa-plus me-2"></i>Tambah Kelas
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('kelas.store') }}">
                    @csrf
                    <div class="modal-body bg-light">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Nama Kelas</label>
                            <input type="text" name="name" class="form-control" placeholder="Contoh: 10 TKJ 1" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Jurusan</label>
                            <input type="text" name="major" class="form-control" placeholder="Contoh: Teknik Komputer dan Jaringan" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Tingkat</label>
                            <input type="number" id="addGrade" name="grade" class="form-control" placeholder="Contoh: 10" min="10" max="12" required>
                            <small class="text-muted">Hanya boleh: 10, 11, atau 12</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Kode Kelas</label>
                            <input type="text" name="code" class="form-control" placeholder="Contoh: TKJ" required>
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 p-3">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Batal
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @php
        $kelas10 = $classes->where('grade', 10);
        $kelas11 = $classes->where('grade', 11);
        $kelas12 = $classes->where('grade', 12);
    @endphp

    <div class="container">
        <!-- Kelas 10 -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="grade-title">
                    <i class="fas fa-graduation-cap me-3"></i>
                    KELAS 10
                </h2>
            </div>
            @foreach($kelas10 as $kelas)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="class-card grade-10 floating position-relative">
                    <a href="{{ route('absensi.absensi_mapel', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
                    <div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
                                    data-kelas-id="{{ $kelas->id }}"
                                    data-kelas-name="{{ $kelas->name }}"
                                    data-kelas-major="{{ $kelas->major }}"
                                    data-kelas-grade="{{ $kelas->grade }}"
                                    data-kelas-code="{{ $kelas->code }}">
                                    <i class="fas fa-edit me-2"></i>Edit Kelas
                                </button>
                            </li>
                            <li>
                                <button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
                                    <i class="fas fa-trash me-2"></i>Hapus Kelas
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="decorative-elements">
                        <div class="circle-1"></div>
                        <div class="circle-2"></div>
                        <div class="square"></div>
                    </div>
                    <div class="card-content">
                        <div>
                            <div class="class-number">{{ $kelas->name }}</div> <!-- Ganti dari $kelas->grade ke $kelas->name -->
                            <!-- Hapus/komentari baris class-name jika tidak ingin duplikat -->
                            <!-- <div class="class-name">{{ $kelas->name }}</div> -->
                        </div>
                        <div class="major-name">{{ $kelas->major }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="section-divider"></div>

        <!-- Kelas 11 -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="grade-title">
                    <i class="fas fa-graduation-cap me-3"></i>
                    KELAS 11
                </h2>
            </div>
            @foreach($kelas11 as $kelas)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="class-card grade-11 floating position-relative">
                    <a href="{{ route('absensi.absensi_mapel', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
                    <div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
                                    data-kelas-id="{{ $kelas->id }}"
                                    data-kelas-name="{{ $kelas->name }}"
                                    data-kelas-major="{{ $kelas->major }}"
                                    data-kelas-grade="{{ $kelas->grade }}"
                                    data-kelas-code="{{ $kelas->code }}">
                                    <i class="fas fa-edit me-2"></i>Edit Kelas
                                </button>
                            </li>
                            <li>
                                <button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
                                    <i class="fas fa-trash me-2"></i>Hapus Kelas
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="decorative-elements">
                        <div class="circle-1"></div>
                        <div class="circle-2"></div>
                        <div class="square"></div>
                    </div>
                    <div class="card-content">
                        <div>
                            <div class="class-number">{{ $kelas->name }}</div> <!-- Ganti dari $kelas->grade ke $kelas->name -->
                            <!-- Hapus/komentari baris class-name jika tidak ingin duplikat -->
                            <!-- <div class="class-name">{{ $kelas->name }}</div> -->
                        </div>
                        <div class="major-name">{{ $kelas->major }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="section-divider"></div>

        <!-- Kelas 12 -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="grade-title">
                    <i class="fas fa-graduation-cap me-3"></i>
                    KELAS 12
                </h2>
            </div>
            @foreach($kelas12 as $kelas)
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="class-card grade-12 floating position-relative">
                    <a href="{{ route('absensi.absensi_mapel', ['classId' => $kelas->id]) }}" class="stretched-link" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;"></a>
                    <div class="dropdown position-absolute" style="top: 1rem; right: 1rem; z-index: 10;">
                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="background:transparent;border:none;padding:0;">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalEditKelas"
                                    data-kelas-id="{{ $kelas->id }}"
                                    data-kelas-name="{{ $kelas->name }}"
                                    data-kelas-major="{{ $kelas->major }}"
                                    data-kelas-grade="{{ $kelas->grade }}"
                                    data-kelas-code="{{ $kelas->code }}">
                                    <i class="fas fa-edit me-2"></i>Edit Kelas
                                </button>
                            </li>
                            <li>
                                <button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#modalHapusKelas" data-kelas-id="{{ $kelas->id }}" data-kelas-name="{{ $kelas->name }}">
                                    <i class="fas fa-trash me-2"></i>Hapus Kelas
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="decorative-elements">
                        <div class="circle-1"></div>
                        <div class="circle-2"></div>
                        <div class="square"></div>
                    </div>
                    <div class="card-content">
                        <div>
                            <div class="class-number">{{ $kelas->name }}</div>
                            {{ $kelas->name }}
                        </div>
                        <div class="major-name">{{ $kelas->major }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal Edit Kelas -->
<div class="modal fade" id="modalEditKelas" tabindex="-1" aria-labelledby="modalEditKelasLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content shadow-lg border-0 rounded-4">
            <div class="modal-header bg-warning text-white border-0 rounded-top-4">
                <h5 class="modal-title fw-bold" id="modalEditKelasLabel">
                    <i class="fas fa-edit me-2"></i>Edit Kelas
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditKelas" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body bg-light">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nama Kelas</label>
                        <input type="text" id="editNamaKelas" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Jurusan</label>
                        <input type="text" id="editJurusanKelas" name="major" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Tingkat</label>
                        <input type="number" id="editTingkatKelas" name="grade" class="form-control" min="10" max="12" required>
                        <small class="text-muted">Hanya boleh: 10, 11, atau 12</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Kode Kelas</label>
                        <input type="text" id="editKodeKelas" name="code" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer bg-white border-0 p-3">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Batal
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save me-1"></i>Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Hapus Kelas -->
<div class="modal fade" id="modalHapusKelas" tabindex="-1" aria-labelledby="modalHapusKelasLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content shadow-lg border-0 rounded-4">
            <div class="modal-header bg-danger text-white border-0 rounded-top-4">
                <h5 class="modal-title fw-bold" id="modalHapusKelasLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Hapus Kelas
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-light">
                <p class="mb-2">Apakah Anda yakin ingin menghapus kelas berikut?</p>
                <div class="alert alert-warning" role="alert">
                    <strong id="kelasNameDisplay"></strong>
                </div>
                <p class="text-muted small">Tindakan ini tidak dapat dibatalkan. Semua data terkait dengan kelas ini juga akan dihapus.</p>
            </div>
            <div class="modal-footer bg-white border-0 p-3">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Batal
                </button>
                <form id="formHapusKelas" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Hapus Sekarang
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Validasi Tingkat pada form Tambah
        const addGradeInput = document.getElementById('addGrade');
        if (addGradeInput) {
            addGradeInput.addEventListener('change', function() {
                validateGrade(this);
            });
            addGradeInput.addEventListener('invalid', function(e) {
                e.preventDefault();
                const grade = this.value;
                if (grade && ![10, 11, 12].includes(parseInt(grade))) {
                    this.setCustomValidity('Tingkat kelas hanya boleh 10, 11, atau 12');
                } else if (!grade) {
                    this.setCustomValidity('Tingkat kelas harus diisi');
                }
            });
            addGradeInput.addEventListener('input', function() {
                this.setCustomValidity('');
            });
        }

        // Validasi Tingkat pada form Edit
        const editGradeInput = document.getElementById('editTingkatKelas');
        if (editGradeInput) {
            editGradeInput.addEventListener('change', function() {
                validateGrade(this);
            });
            editGradeInput.addEventListener('invalid', function(e) {
                e.preventDefault();
                const grade = this.value;
                if (grade && ![10, 11, 12].includes(parseInt(grade))) {
                    this.setCustomValidity('Tingkat kelas hanya boleh 10, 11, atau 12');
                } else if (!grade) {
                    this.setCustomValidity('Tingkat kelas harus diisi');
                }
            });
            editGradeInput.addEventListener('input', function() {
                this.setCustomValidity('');
            });
        }

        function validateGrade(input) {
            const grade = parseInt(input.value);
            if (input.value && ![10, 11, 12].includes(grade)) {
                input.classList.add('is-invalid');
                input.classList.remove('is-valid');
            } else if (input.value) {
                input.classList.remove('is-invalid');
                input.classList.add('is-valid');
            } else {
                input.classList.remove('is-invalid', 'is-valid');
            }
        }

        // Modal Edit
        const modalEdit = document.getElementById('modalEditKelas');
        modalEdit.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const kelasId = button.getAttribute('data-kelas-id');
            const kelasName = button.getAttribute('data-kelas-name');
            const kelasMajor = button.getAttribute('data-kelas-major');
            const kelasGrade = button.getAttribute('data-kelas-grade');
            const kelasCode = button.getAttribute('data-kelas-code');

            document.getElementById('editNamaKelas').value = kelasName;
            document.getElementById('editJurusanKelas').value = kelasMajor;
            document.getElementById('editTingkatKelas').value = kelasGrade;
            document.getElementById('editKodeKelas').value = kelasCode;
            document.getElementById('formEditKelas').action = '{{ route("kelas.update", ":id") }}'.replace(':id', kelasId);
        });

        // Modal Hapus
        const modalHapus = document.getElementById('modalHapusKelas');
        modalHapus.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const kelasId = button.getAttribute('data-kelas-id');
            const kelasName = button.getAttribute('data-kelas-name');

            document.getElementById('kelasNameDisplay').textContent = kelasName;
            document.getElementById('formHapusKelas').action = '{{ route("kelas.destroy", ":id") }}'.replace(':id', kelasId);
        });
    });
</script>

@endsection