@extends('frontend.master.master')

@section('content')
    <!-- Page Header Section -->
    <section class="all-testimoni-header">
        <div class="container">
            <h1 class="all-testimoni-title">Testimoni</h1>
            <nav class="all-testimoni-breadcrumb">
                <a href="{{ route('home') }}"><i class="bi bi-chevron-left"></i> Beranda</a>
            </nav>
        </div>
    </section>

    <!-- Testimoni Content Section -->
    <section class="all-testimoni-content py-5">
        <div class="container">
            <!-- Filter Tabs -->
            <div class="all-testimoni-tabs" data-aos="fade-up">
                <a href="{{ url('/all-testimoni?position=pegawai') }}"
                    class="all-testimoni-tab {{ $currentPosition == 'pegawai' ? 'active' : '' }}">
                    Karyawan
                </a>
                <a href="{{ url('/all-testimoni?position=magang') }}"
                    class="all-testimoni-tab {{ $currentPosition == 'magang' ? 'active' : '' }}">
                    Magang
                </a>
            </div>

            <!-- Testimoni Grid - New Design with Image Left and Description Right -->
            <div class="all-testimoni-grid-new" data-aos="fade-up" data-aos-delay="100">
                @if ($testi && $testi->count() > 0)
                    @foreach ($testi as $item)
                        <div class="all-testi-card-new"
                            onclick="showTestimoniModal(
                      @js($item->title ?? 'Nama'),
                      @js($item->description ?? ''),
                      @js(ucfirst($item->position == 'pegawai' ? 'Karyawan' : $item->position)),
                      {{ (int) ($item->star_rating ?? 0) }},
                      @js($item->picture ? asset('storage/' . $item->picture) : asset('assets_career/img/default-avatar.png')),
                      @js($item->universitas_nama ?? ''),
                      @js($item->departemen_nama ?? '')
                    )"
                            style="cursor:pointer;">

                            <!-- Left Side - Image with Union Background -->
                            <div class="all-testi-image-section">
                                <div class="all-testi-image-wrapper">
                                    @if ($item->picture)
                                        <img src="{{ asset('storage/' . $item->picture) }}" alt="{{ $item->title }}"
                                            class="all-testi-person-img">
                                    @else
                                        <img src="{{ asset('assets_career/img/default-avatar.png') }}" alt="Default"
                                            class="all-testi-person-img">
                                    @endif
                                </div>
                            </div>
                            <!-- Right Side - Description -->
                            <div class="all-testi-content-section">
                                <p class="all-testi-text-new">{{ $item->description }}</p>
                                <div class="all-testi-author-section">
                                    <div class="all-testi-author-info">
                                        <span class="all-testi-author-name">{{ $item->title ?? 'Nama' }}</span>
                                        <span
                                            class="all-testi-author-position">{{ ucfirst($item->position == 'pegawai' ? 'Karyawan' : $item->position) }}</span>
                                        @if ($item->universitas)
                                            <span class="all-testi-author-univ"
                                                style="font-size: 0.8rem; color: #186D85;"><i
                                                    class="bi bi-mortarboard me-1"></i>{{ $item->universitas_nama }}</span>
                                        @endif
                                        {{-- @if ($item->departemen)
                                            <span class="all-testi-author-dept" style="font-size: 0.8rem; color: #888;"><i
                                                    class="bi bi-building me-1"></i>{{ $item->departemen_nama }}</span>
                                        @endif --}}
                                    </div>
                                    <span class="all-testi-star-rating">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <i class="bi bi-star{{ $i <= ($item->star_rating ?? 0) ? '-fill' : '' }}"></i>
                                        @endfor
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center py-5">
                        <p class="text-muted">Belum ada testimoni untuk kategori ini</p>
                    </div>
                @endif
            </div>

            <!-- Pagination -->
            @if ($testi && $testi->hasPages())
                <div class="all-testimoni-pagination" data-aos="fade-up" data-aos-delay="200">
                    {{ $testi->appends(['position' => $currentPosition])->links('frontend.partials.pagination') }}
                </div>
            @endif
        </div>
    </section>

    <!-- Testimoni Detail Modal -->
    <div class="modal fade" id="testimoniModal" tabindex="-1" aria-labelledby="testimoniModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content testimoni-modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="testimoni-modal-wrapper">
                        <div class="testimoni-modal-image">
                            <img id="modalTestiImage" src="" alt="Testimoni">
                        </div>
                        <div class="testimoni-modal-info">
                            <div class="testimoni-modal-header-info">
                                <h5 id="modalTestiName" class="testimoni-modal-name"></h5>
                                <div id="modalTestiStars" class="testimoni-modal-stars"></div>
                            </div>
                            <span id="modalTestiPosition" class="testimoni-modal-position"></span>
                            <span id="modalTestiUniv" class="testimoni-modal-univ"
                                style="display:none; font-size: 0.85rem; color: #186D85; margin-bottom: 10px;"></span>
                            <span id="modalTestiDept" class="testimoni-modal-dept"
                                style="display:none; font-size: 0.85rem; color: #666; margin-bottom: 15px;"></span>
                            <p id="modalTestiDesc" class="testimoni-modal-desc"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let testiModalInstance;

        document.addEventListener('DOMContentLoaded', () => {
            const el = document.getElementById('testimoniModal');
            if (el) testiModalInstance = new bootstrap.Modal(el);
        });

        function setWithIcon(el, iconClass, text) {
            if (text && text.trim() !== '') {
                el.innerHTML = ''; // bersihkan dulu
                const icon = document.createElement('i');
                icon.className = iconClass + ' me-1';
                el.appendChild(icon);
                el.appendChild(document.createTextNode(text));
                el.style.display = 'block';
            } else {
                el.style.display = 'none';
            }
        }

        function showTestimoniModal(name, description, position, starRating, imageUrl, universitas_nama, departemen_nama) {
            document.getElementById('modalTestiName').textContent = name || '';
            document.getElementById('modalTestiDesc').textContent = description || '';
            document.getElementById('modalTestiPosition').textContent = position || '';
            document.getElementById('modalTestiImage').src = imageUrl || '';

            setWithIcon(document.getElementById('modalTestiUniv'), 'bi bi-mortarboard', universitas_nama || '');
            setWithIcon(document.getElementById('modalTestiDept'), 'bi bi-building', departemen_nama || '');

            starRating = parseInt(starRating || 0, 10);
            let starsHtml = '';
            for (let i = 1; i <= 5; i++) {
                starsHtml += (i <= starRating) ? '<i class="bi bi-star-fill"></i>' : '<i class="bi bi-star"></i>';
            }
            document.getElementById('modalTestiStars').innerHTML = starsHtml;

            if (testiModalInstance) testiModalInstance.show();
            else new bootstrap.Modal(document.getElementById('testimoniModal')).show();
        }
    </script>
@endpush