@extends('user.layouts.user')

@push('styles')
    {{-- AOS CSS for scroll animations --}}
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .btn-detail {
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .btn-detail:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
    </style>
@endpush

@section('content')
    @include('user.partials.navbar')

    <div class="container mt-5">
        <h2 class="mb-5 text-center" data-aos="fade-down" data-aos-duration="1000">Pilihan Jurusan</h2>
        <div class="row g-4">
            @foreach ($jurusan as $j)
                <div class="col-sm-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                    <div class="card h-100 shadow-sm border-0 card-hover">
                        <div class="card-header bg-primary text-white text-center py-3">
                            <h5 class="card-title mb-0">{{ $j->nama }}</h5>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="card-text flex-grow-1">{{ Str::limit($j->deskripsi, 100) }}</p>
                            <button type="button" class="btn btn-detail btn-outline-primary mt-auto mx-auto px-4 py-2"
                                data-bs-toggle="modal" data-bs-target="#detailModal" data-nama="{{ $j->nama }}"
                                data-preview="{{ e(Str::limit($j->deskripsi, 100)) }}" data-full="{{ e($j->deskripsi) }}">
                                Lihat Detail
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Modal Detail Jurusan --}}
    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content card-hover">
                <div class="modal-header bg-secondary text-white">
                    <h5 class="modal-title fs-4" id="detailModalLabel">Detail Jurusan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body" data-aos="zoom-in" data-aos-duration="500">
                    <h6>Ringkasan Deskripsi</h6>
                    <p id="modalPreview"></p>
                    <h6 class="mt-4">Deskripsi Lengkap</h6>
                    <p id="modalFull"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-detail btn-secondary btn-lg" data-bs-dismiss="modal">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Menampilkan data kecerdasan -->
    <div class="container mt-5">
        <hr><br><br>
        <h2 class="mb-5 text-center" data-aos="fade-down" data-aos-duration="1000">Jenis Kecerdasan</h2>
        <div class="row g-4">
            <!-- melakukan perulangan sebanyak data di variabel kecerdasan -->
            @foreach ($kecerdasan as $k) 
                <div class="col-sm-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                    <div class="card h-100 shadow-sm border-0 card-hover">
                        <div class="card-header bg-primary text-white text-center py-3">
                            <h5 class="card-title mb-0">{{ $k->nama }}</h5>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="card-text flex-grow-1">{{ Str::limit($k->deskripsi, 100) }}</p>
                            <button type="button" class="btn btn-detail btn-outline-primary mt-auto mx-auto px-4 py-2"
                                data-bs-toggle="modal" data-bs-target="#kecerdasanModal" kecerdasan-nama="{{ $k->nama }}"
                                kecerdasan-id="{{ e($k->id) }}" kecerdasan-full="{{ e($k->deskripsi) }}">
                                Lihat Detail
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- modal popup dari daftar kecerdasan -->
    {{-- Modal Jenis Kecerdasan --}}
    <div class="modal fade" id="kecerdasanModal" tabindex="-1" aria-labelledby="kecerdasanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content card-hover">
                <div class="modal-header bg-secondary text-white">
                    <h5 class="modal-title fs-4" id="kecerdasanModalLabel">Detail Kecerdasan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body" data-aos="zoom-in" data-aos-duration="500">
                    <h6>ID Kecerdasan</h6>
                    <p id="kecerdasanPreview"></p>
                    <h6 class="mt-4">Deskripsi Lengkap</h6>
                    <p id="kecerdasanFull"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-detail btn-secondary btn-lg" data-bs-dismiss="modal">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            AOS.init();

            const detailModal = document.getElementById('detailModal');
            detailModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const name = button.getAttribute('data-nama');
                const preview = button.getAttribute('data-preview');
                const full = button.getAttribute('data-full');

                // Set modal title
                document.getElementById('detailModalLabel').textContent = name;
                // Set preview and full description
                document.getElementById('modalPreview').textContent = preview;
                document.getElementById('modalFull').textContent = full;
            });

            const kecerdasanModal = document.getElementById('kecerdasanModal');
            kecerdasanModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const name = button.getAttribute('kecerdasan-nama');
                const preview = button.getAttribute('kecerdasan-id');
                const full = button.getAttribute('kecerdasan-full');

                // Set modal title
                document.getElementById('kecerdasanModalLabel').textContent = name;
                // Set preview and full description
                document.getElementById('kecerdasanPreview').textContent = preview;
                document.getElementById('kecerdasanFull').innerHTML = full.replace(/\n/g, '<br>'); // mengganti isi element dengan deskripsi kecerdasan dan mengubah format enter \n menjadi br agar sesuai dengan format html
            });
        });
    </script>