@extends('frontend.master.master')

@section('content')
    <!-- Testimoni Header Section with Pattern Background -->
    <section class="layout7-header">
        <div class="container">
            <h1 class="layout7-title">Testimoni</h1>
            <p class="layout7-subtitle">Ceritakan pengalaman dan tantangan Anda saat bekerja atau magang di MSJ</p>
        </div>
    </section>

    <!-- Content Section with Pattern Body Background -->
    <section class="layout7-content">
        <div class="container">
            <div class="row g-4">
                <!-- Left Column - Testimonial Slider -->
                <div class="col-lg-5" data-aos="fade-right" data-aos-delay="100">
                    <div class="layout7-testimonials-box">
                        <div class="layout7-box-header">
                            <i class="bi bi-chat-quote-fill"></i>
                            <h3>Apa Kata Mereka?</h3>
                        </div>

                        @if ($testi && count($testi) > 0)
                            <div class="testimonials-slider swiper init-swiper">
                                <script type="application/json" class="swiper-config">
                            {
                                "slidesPerView": 1,
                                "loop": true,
                                "speed": 600,
                                "autoplay": {
                                    "delay": 5000
                                },
                                "navigation": {
                                    "nextEl": ".swiper-button-next",
                                    "prevEl": ".swiper-button-prev"
                                }
                            }
                            </script>

                                <div class="swiper-wrapper">
                                    @foreach ($testi as $item)
                                        <div class="swiper-slide">
                                            <div class="layout7-testi-item">
                                                <div class="layout7-testi-quote">
                                                    <i class="bi bi-quote"></i>
                                                </div>
                                                <p class="layout7-testi-text">{{ $item->description }}</p>
                                                <div class="layout7-testi-stars">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i
                                                            class="bi bi-star-fill {{ $i <= $item->star_rating ? 'active' : '' }}"></i>
                                                    @endfor
                                                </div>
                                                <div class="layout7-testi-author">
                                                    <img src="{{ asset('storage/' . $item->picture) }}"
                                                        alt="{{ $item->title }}">
                                                    <div class="layout7-testi-info">
                                                        <h5>{{ $item->title }}</h5>
                                                        <span>{{ ucfirst($item->position) }}</span>
                                                        @if ($item->departemen)
                                                            <small
                                                                style="display: block; color: #555; font-size: 0.8rem;"><i
                                                                    class="bi bi-building me-1"></i>{{ $item->departemen_nama }}</small>
                                                        @endif
                                                        @if ($item->universitas)
                                                            <small
                                                                style="display: block; color: #186D85; font-size: 0.8rem;"><i
                                                                    class="bi bi-mortarboard me-1"></i>{{ $item->universitas_nama }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="layout7-swiper-nav">
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>
                                </div>
                            </div>
                        @else
                            <div class="layout7-empty-testi">
                                <i class="bi bi-chat-square-text"></i>
                                <p>Belum ada testimoni.<br>Jadilah yang pertama!</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Right Column - Form -->
                <div class="col-lg-7" data-aos="fade-left" data-aos-delay="200">
                    <div class="layout7-form-box">
                        <div class="layout7-box-header">
                            <i class="bi bi-pencil-square"></i>
                            <h3>Bagikan Pengalaman Anda</h3>
                        </div>
                        <p class="layout7-form-desc">Kritik dan saran Anda akan membantu kami berkembang dan meningkatkan
                            lingkungan kerja di masa depan</p>

                        {{-- @if (session('flash_message'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ session('flash_message') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif --}}

                        <form action="{{ route('testimoni.store') }}" method="post" class="layout7-form"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <!-- Nama -->
                                <div class="col-md-6">
                                    <div class="layout7-field">
                                        <label><i class="bi bi-person-fill"></i> Nama Anda</label>
                                        <input type="text" name="title" placeholder="Masukkan nama lengkap" required>
                                    </div>
                                </div>

                                <!-- Posisi -->
                                <div class="col-md-6">
                                    <div class="layout7-field">
                                        <label><i class="bi bi-briefcase-fill"></i> Posisi Anda</label>
                                        <div class="layout7-position-btns">
                                            <label class="layout7-pos-btn">
                                                <input type="radio" name="position" value="pegawai" checked>
                                                <span><i class="bi bi-person-badge"></i> Pegawai</span>
                                            </label>
                                            <label class="layout7-pos-btn">
                                                <input type="radio" name="position" value="magang">
                                                <span><i class="bi bi-mortarboard"></i> Magang</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Departemen for Pegawai (Select) -->
                            <div class="row" id="deptPegawaiRow">
                                <div class="col-md-6">
                                    <div class="layout7-field">
                                        <label><i class="bi bi-building"></i> Departemen</label>
                                        <select name="departemen" id="departemenSelect" class="layout7-select">
                                            <option value="">-- Pilih Departemen --</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->id }}">{{ $dept->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Universitas & Departemen for Magang (Free text) -->
                            <div class="row" id="univDeptMagangRow" style="display: none;">
                                <div class="col-md-6">
                                    <div class="layout7-field">
                                        <label><i class="bi bi-mortarboard-fill"></i> Universitas</label>
                                        {{-- <input type="text" name="universitas" id="universitasInput"
                                            placeholder="Nama universitas Anda"> --}}
                                        <select name="universitas" id="univSelect" class="layout7-select">
                                            <option value="">-- Pilih Universitas --</option>
                                            @foreach ($univ as $u)
                                                <option value="{{ $u->id }}">{{ $u->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="layout7-field">
                                        <label><i class="bi bi-building"></i> Departemen</label>
                                        {{-- <input type="text" name="departemen_magang" id="departemenMagangInput"
                                            placeholder="Departemen magang Anda"> --}}
                                        <select name="departemen_magang" id="departemenMagangSelect" class="layout7-select">
                                            <option value="">-- Pilih Departemen --</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->id }}">{{ $dept->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Kesan dan Pesan -->
                            <div class="layout7-field">
                                <label><i class="bi bi-chat-left-text-fill"></i> Kesan dan Pesan</label>
                                <textarea name="description" id="description" rows="3"
                                    placeholder="Ceritakan pengalaman Anda bekerja/magang di MSJ..." required></textarea>
                                <div class="layout7-char-info">
                                    <span id="charCountDisplay">0</span>/200 karakter (Min. 20)
                                </div>
                            </div>

                            <!-- Rating Bintang - Full Width -->
                            <div class="layout7-field">
                                <label><i class="bi bi-star-fill"></i> Rating Bintang</label>
                                @if (isset($indikatorsByJenis) && $indikatorsByJenis->isNotEmpty())
                                    @foreach ($indikatorsByJenis as $jenis => $indikators)
                                        <div class="layout7-indicators-grid layout7-indicators-{{ $jenis }}"
                                            data-jenis="{{ $jenis }}"
                                            style="{{ $jenis !== 'pegawai' ? 'display:none;' : '' }}">
                                            @foreach ($indikators as $ind)
                                                <div class="layout7-indicator-item">
                                                    <span class="layout7-indicator-name">{{ $ind->indikator }}</span>
                                                    <div class="layout7-indicator-stars" data-id="{{ $ind->id }}">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <i class="bi bi-star-fill" data-value="{{ $i }}"></i>
                                                        @endfor
                                                    </div>
                                                    <input type="hidden" name="rating[{{ $ind->id }}]"
                                                        value="5" class="indicator-rating-input">
                                                </div>
                                            @endforeach
                                        </div>
                                    @endforeach
                                @else
                                    <div class="layout7-stars" id="starRating">
                                        <i class="bi bi-star-fill" data-value="1"></i>
                                        <i class="bi bi-star-fill" data-value="2"></i>
                                        <i class="bi bi-star-fill" data-value="3"></i>
                                        <i class="bi bi-star-fill" data-value="4"></i>
                                        <i class="bi bi-star-fill" data-value="5"></i>
                                    </div>
                                    <input type="hidden" name="star_rating" id="starRatingInput"
                                        value="5">
                                @endif
                            </div>

                            <!-- Foto Diri - Full Width -->
                            <div class="layout7-field">
                                <label><i class="bi bi-image-fill"></i> Foto Diri</label>
                                <div class="layout7-foto-btns">
                                    <label class="layout7-pos-btn layout7-pos-btn-auto">
                                        <input type="radio" name="foto_option" value="upload" checked>
                                        <span><i class="bi bi-upload"></i> Upload</span>
                                    </label>
                                    <label class="layout7-pos-btn layout7-pos-btn-auto">
                                        <input type="radio" name="foto_option" value="avatar">
                                        <span><i class="bi bi-person-circle"></i> Avatar</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Upload Container -->
                            <div id="uploadContainer" class="layout7-upload-box">
                                <input type="file" id="foto" name="picture" accept="image/*">
                                <div class="layout7-upload-info">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                    <span>Pilih file atau drag & drop</span>
                                    <small>Max: 3 MB | Format: JPG, PNG</small>
                                </div>
                                <div id="file-error" class="text-danger mt-2"></div>
                            </div>

                            <!-- Avatar Container -->
                            <div id="avatarContainer" class="layout7-avatar-box" style="display: none;">
                                @php
                                    $avatars = [
                                        'avatar1.webp',
                                        'avatar2.webp',
                                        'avatar3.webp',
                                        'avatar4.webp',
                                        'avatar5.webp',
                                        'avatar6.webp',
                                        'avatar7.webp',
                                        'avatar8.webp',
                                    ];
                                @endphp
                                @foreach ($avatars as $avatar)
                                    <label class="layout7-avatar-opt">
                                        <input type="radio" name="avatar" value="{{ $avatar }}">
                                        <img src="{{ asset('storage/testimoni/' . $avatar) }}" alt="Avatar">
                                    </label>
                                @endforeach
                                <input type="hidden" id="selectedAvatar" name="selectedAvatar">
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="layout7-submit">
                                <i class="bi bi-send-fill"></i> Kirim Testimoni
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        /* ========== Layout7 Testimoni Styles ========== */
        .layout7-header {
            background: url('{{ asset('assets_career/img/pattern.png') }}') no-repeat center center;
            background-size: cover;
            padding: 120px 0 40px;
            color: #fff;
        }

        .layout7-title {
            font-size: 2.5rem;
            font-weight: 700;
            font-style: italic;
            margin-bottom: 10px;
        }

        .layout7-subtitle {
            font-size: 1rem;
            opacity: 0.9;
            margin: 0;
        }

        .layout7-content {
            background: url('{{ asset('assets_career/img/patternbody.png') }}') repeat center center;
            padding: 50px 0 80px;
        }

        /* Box Styles */
        .layout7-testimonials-box,
        .layout7-form-box {
            background: #fff;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            height: 100%;
        }

        .layout7-box-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .layout7-box-header i {
            font-size: 1.8rem;
            color: #186D85;
        }

        .layout7-box-header h3 {
            font-size: 1.4rem;
            font-weight: 600;
            color: #333;
            margin: 0;
        }

        /* Testimonial Item */
        .layout7-testi-item {
            padding: 10px 0;
        }

        .layout7-testi-quote {
            margin-bottom: 15px;
        }

        .layout7-testi-quote i {
            font-size: 3rem;
            color: #186D85;
            opacity: 0.3;
        }

        .layout7-testi-text {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
            margin-bottom: 20px;
            font-style: italic;
        }

        .layout7-testi-stars {
            margin-bottom: 20px;
        }

        .layout7-testi-stars i {
            font-size: 1.1rem;
            color: #ddd;
            margin-right: 3px;
        }

        .layout7-testi-stars i.active {
            color: #ffc107;
        }

        .layout7-testi-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .layout7-testi-author img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #186D85;
        }

        .layout7-testi-info h5 {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }

        .layout7-testi-info span {
            font-size: 0.85rem;
            color: #186D85;
            font-weight: 500;
        }

        .layout7-swiper-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
        }

        .layout7-swiper-nav .swiper-button-prev,
        .layout7-swiper-nav .swiper-button-next {
            position: static;
            width: 40px;
            height: 40px;
            background: #186D85;
            border-radius: 50%;
            color: #fff;
        }

        .layout7-swiper-nav .swiper-button-prev:after,
        .layout7-swiper-nav .swiper-button-next:after {
            font-size: 14px;
            color: #fff;
            font-weight: 700;
        }

        .layout7-empty-testi {
            text-align: center;
            padding: 50px 20px;
            color: #999;
        }

        .layout7-empty-testi i {
            font-size: 3.5rem;
            display: block;
            margin-bottom: 15px;
        }

        /* Form Styles */
        .layout7-form-desc {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 25px;
        }

        .layout7-field {
            margin-bottom: 20px;
        }

        .layout7-field label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }

        .layout7-field label i {
            color: #186D85;
        }

        .layout7-field input[type="text"],
        .layout7-field textarea,
        .layout7-field select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e5e5;
            border-radius: 10px;
            font-size: 0.95rem;
            transition: all 0.3s;
            background: #fafafa;
        }

        .layout7-field input[type="text"]:focus,
        .layout7-field textarea:focus,
        .layout7-field select:focus {
            outline: none;
            border-color: #186D85;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(24, 109, 133, 0.1);
        }

        .layout7-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
            cursor: pointer;
        }

        .layout7-char-info {
            text-align: right;
            font-size: 0.8rem;
            color: #999;
            margin-top: 8px;
        }

        /* Position Buttons - Berdempet */
        .layout7-position-btns {
            display: flex;
            gap: 0;
        }

        .layout7-pos-btn {
            flex: 1;
            cursor: pointer;
        }

        .layout7-pos-btn input {
            display: none;
        }

        .layout7-pos-btn span {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 15px;
            border: 2px solid #e5e5e5;
            border-radius: 0;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s;
            background: #fafafa;
        }

        .layout7-pos-btn:first-child span {
            border-radius: 10px 0 0 10px;
            border-right: 1px solid #e5e5e5;
        }

        .layout7-pos-btn:last-child span {
            border-radius: 0 10px 10px 0;
            border-left: 1px solid #e5e5e5;
        }

        .layout7-pos-btn input:checked+span {
            background: linear-gradient(135deg, #186D85, #0d4a5a);
            border-color: #186D85;
            color: #fff;
        }

        .layout7-pos-btn input:checked+span i {
            color: #fff;
        }

        /* Star Rating */
        .layout7-stars {
            display: flex;
            gap: 8px;
        }

        .layout7-stars i {
            font-size: 1.8rem;
            color: #ffc107;
            cursor: pointer;
            transition: all 0.2s;
        }

        .layout7-stars i:hover {
            transform: scale(1.15);
        }

        .layout7-stars i.inactive {
            color: #ddd;
        }

        /* Indicator Rating Grid - 2 columns on desktop */
        .layout7-indicators-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .layout7-indicator-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            background: #f8f9fa;
            border-radius: 10px;
            border: 1px solid #e5e5e5;
            transition: all 0.2s;
        }

        .layout7-indicator-item:hover {
            border-color: #186D85;
            background: #f0f7f9;
        }

        .layout7-indicator-name {
            font-weight: 500;
            color: #333;
            font-size: 0.85rem;
            white-space: nowrap;
            margin-right: 10px;
        }

        .layout7-indicator-stars {
            display: flex;
            gap: 4px;
        }

        .layout7-indicator-stars i {
            font-size: 1.1rem;
            color: #ffc107;
            cursor: pointer;
            transition: all 0.2s;
        }

        .layout7-indicator-stars i:hover {
            transform: scale(1.2);
        }

        .layout7-indicator-stars i.inactive {
            color: #ddd;
        }

        /* Foto Diri Buttons - Berdempet */
        .layout7-foto-btns {
            display: flex;
            gap: 0;
            max-width: 280px;
        }

        .layout7-pos-btn-auto {
            flex: 0 1 auto;
            min-width: 120px;
        }

        .layout7-foto-btns .layout7-pos-btn-auto:first-child span {
            border-radius: 10px 0 0 10px;
            border-right: 1px solid #e5e5e5;
        }

        .layout7-foto-btns .layout7-pos-btn-auto:last-child span {
            border-radius: 0 10px 10px 0;
            border-left: 1px solid #e5e5e5;
        }

        .layout7-foto-btns .layout7-pos-btn-auto span {
            border-radius: 0;
        }

        /* Foto Toggle */
        .layout7-foto-toggle {
            display: flex;
            gap: 10px;
        }

        .layout7-foto-opt {
            cursor: pointer;
        }

        .layout7-foto-opt input {
            display: none;
        }

        .layout7-foto-opt span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 10px 16px;
            border: 2px solid #e5e5e5;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.3s;
            background: #fafafa;
            color: #333;
        }

        .layout7-foto-opt span i {
            color: #186D85;
        }

        .layout7-foto-opt input:checked+span {
            background: #186D85;
            border-color: #186D85;
            color: #fff;
        }

        .layout7-foto-opt input:checked+span i {
            color: #fff;
        }

        /* Upload Box */
        .layout7-upload-box {
            position: relative;
            border: 2px dashed #d0d0d0;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            background: #fafafa;
            margin-bottom: 20px;
            transition: all 0.3s;
        }

        .layout7-upload-box:hover {
            border-color: #186D85;
            background: #f5f9fa;
        }

        .layout7-upload-box input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .layout7-upload-info {
            pointer-events: none;
        }

        .layout7-upload-info i {
            font-size: 2.5rem;
            color: #186D85;
            display: block;
            margin-bottom: 10px;
        }

        .layout7-upload-info span {
            display: block;
            font-weight: 500;
            color: #555;
            margin-bottom: 5px;
        }

        .layout7-upload-info small {
            color: #999;
            font-size: 0.8rem;
        }

        /* Avatar Box */
        .layout7-avatar-box {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 2px solid #e5e5e5;
        }

        .layout7-avatar-opt {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .layout7-avatar-opt input {
            display: none;
        }

        .layout7-avatar-opt img {
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: contain;
            border-radius: 10px;
            border: 3px solid transparent;
            transition: all 0.3s;
            background: #fff;
            padding: 5px;
        }

        .layout7-avatar-opt img:hover,
        .layout7-avatar-opt input:checked+img {
            border-color: #186D85;
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(24, 109, 133, 0.2);
        }

        /* Submit Button */
        .layout7-submit {
            width: 100%;
            padding: 15px 30px;
            background: linear-gradient(135deg, #186D85, #0d4a5a);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .layout7-submit:hover {
            background: linear-gradient(135deg, #0d4a5a, #083642);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(24, 109, 133, 0.3);
        }

        /* Responsive */
        @media (max-width: 991px) {
            .layout7-header {
                padding: 110px 0 30px;
            }

            .layout7-title {
                font-size: 2rem;
            }

            .layout7-content {
                padding: 40px 0 60px;
            }

            .layout7-testimonials-box,
            .layout7-form-box {
                padding: 25px;
            }
        }

        @media (max-width: 767px) {
            .layout7-header {
                padding: 100px 0 25px;
            }

            .layout7-title {
                font-size: 1.5rem;
            }

            .layout7-subtitle {
                font-size: 0.85rem;
            }

            .layout7-content {
                padding: 30px 0 50px;
            }

            .layout7-testimonials-box,
            .layout7-form-box {
                padding: 20px;
            }

            .layout7-box-header i {
                font-size: 1.4rem;
            }

            .layout7-box-header h3 {
                font-size: 1.15rem;
            }

            .layout7-indicators-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .layout7-header {
                padding: 90px 0 20px;
            }

            .layout7-position-btns {
                flex-direction: row;
            }

            .layout7-indicators-grid {
                grid-template-columns: 1fr;
            }

            .layout7-foto-btns {
                max-width: 100%;
            }

            .layout7-avatar-box {
                grid-template-columns: repeat(4, 1fr);
                gap: 8px;
                padding: 10px;
            }

            .layout7-avatar-opt img {
                padding: 3px;
            }

            .layout7-foto-toggle {
                flex-direction: column;
                gap: 8px;
            }

            .layout7-testimonials-box,
            .layout7-form-box {
                padding: 15px;
            }

            .layout7-stars i {
                font-size: 1.5rem;
            }

            .layout7-submit {
                padding: 12px 20px;
                font-size: 0.9rem;
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @stack('scripts')

    @push('scripts')
        @if (session('flash_message'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: @js(session('flash_message')),
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#186D85'
                    });
                });
            </script>
        @endif
    @endpush

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Position toggle - show/hide universitas & departemen fields
            const positionRadios = document.querySelectorAll('input[name="position"]');
            const deptPegawaiRow = document.getElementById('deptPegawaiRow');
            const univDeptMagangRow = document.getElementById('univDeptMagangRow');
            const universitasInput = document.getElementById('universitasInput');
            const departemenSelect = document.getElementById('departemenSelect');
            const departemenMagangInput = document.getElementById('departemenMagangInput');
            const univSelect = document.getElementById('univSelect'); // Magang - Universitas
            const departemenMagangSelect = document.getElementById('departemenMagangSelect');

            function setReq(el, yes) {
                if (!el) return;
                if (yes) el.setAttribute('required', 'required');
                else el.removeAttribute('required');
            }

            function setDis(el, yes) {
                if (!el) return;
                el.disabled = !!yes;
                if (yes) el.value = '';
            }

            function showRow(el, show) {
                if (!el) return;
                el.style.display = show ? '' : 'none';
            }

            function togglePositionFields(position) {
                // Toggle indicator grids based on position/jenis
                document.querySelectorAll('.layout7-indicators-grid[data-jenis]').forEach(grid => {
                    const isMatch = grid.dataset.jenis === position;
                    grid.style.display = isMatch ? '' : 'none';
                    grid.querySelectorAll('.indicator-rating-input').forEach(inp => {
                        inp.disabled = !isMatch;
                    });
                });

                if (position === 'magang') {
                    // show magang fields
                    showRow(deptPegawaiRow, false);
                    showRow(univDeptMagangRow, true);

                    // disable pegawai departemen
                    setDis(departemenSelect, true);
                    setReq(departemenSelect, false);

                    // enable magang fields
                    setDis(univSelect, false);
                    setReq(univSelect, true);

                    setDis(departemenMagangSelect, false);
                    setReq(departemenMagangSelect, true);

                } else {
                    // show pegawai fields
                    showRow(deptPegawaiRow, true);
                    showRow(univDeptMagangRow, false);

                    // enable pegawai departemen
                    setDis(departemenSelect, false);
                    setReq(departemenSelect, true);

                    // disable magang fields
                    setDis(univSelect, true);
                    setReq(univSelect, false);

                    setDis(departemenMagangSelect, true);
                    setReq(departemenMagangSelect, false);
                }
            }

            // Initialize with currently checked position
            const checkedPosition = document.querySelector('input[name="position"]:checked');
            if (checkedPosition) {
                togglePositionFields(checkedPosition.value);
            }

            positionRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    togglePositionFields(this.value);
                });
            });

            // Character counter
            const descInput = document.getElementById('description');
            const charDisplay = document.getElementById('charCountDisplay');

            descInput.addEventListener('input', function() {
                const count = this.value.length;
                charDisplay.textContent = count;
                charDisplay.style.color = (count < 20 || count > 200) ? '#dc3545' : '#28a745';
            });

            // Star Rating - Per Indicator (all grids, including hidden ones)
            const indicatorContainers = document.querySelectorAll('.layout7-indicator-stars');
            
            if (indicatorContainers.length > 0) {
                indicatorContainers.forEach(container => {
                    const stars = container.querySelectorAll('i');
                    const hiddenInput = container.parentElement.querySelector('.indicator-rating-input');
                    
                    updateIndicatorStars(stars, 5);
                    
                    stars.forEach(star => {
                        star.addEventListener('click', function() {
                            const value = parseInt(this.dataset.value);
                            hiddenInput.value = value;
                            updateIndicatorStars(stars, value);
                        });
                        
                        star.addEventListener('mouseenter', function() {
                            updateIndicatorStars(stars, parseInt(this.dataset.value));
                        });
                    });
                    
                    container.addEventListener('mouseleave', function() {
                        updateIndicatorStars(stars, parseInt(hiddenInput.value));
                    });
                });
            } else {
                // Fallback: single star rating mode
                const starContainer = document.getElementById('starRating');
                if (starContainer) {
                    const starInput = document.getElementById('starRatingInput');
                    const stars = starContainer.querySelectorAll('i');
                    
                    updateIndicatorStars(stars, 5);
                    
                    stars.forEach(star => {
                        star.addEventListener('click', function() {
                            const value = parseInt(this.dataset.value);
                            starInput.value = value;
                            updateIndicatorStars(stars, value);
                        });
                        
                        star.addEventListener('mouseenter', function() {
                            updateIndicatorStars(stars, parseInt(this.dataset.value));
                        });
                    });
                    
                    starContainer.addEventListener('mouseleave', function() {
                        updateIndicatorStars(stars, parseInt(starInput.value));
                    });
                }
            }
            
            function updateIndicatorStars(stars, rating) {
                stars.forEach(star => {
                    const val = parseInt(star.dataset.value);
                    star.classList.toggle('inactive', val > rating);
                });
            }

            // Foto option toggle
            const fotoOptions = document.querySelectorAll('input[name="foto_option"]');
            const uploadContainer = document.getElementById('uploadContainer');
            const avatarContainer = document.getElementById('avatarContainer');

            fotoOptions.forEach(opt => {
                opt.addEventListener('change', function() {
                    if (this.value === 'upload') {
                        uploadContainer.style.display = 'block';
                        avatarContainer.style.display = 'none';
                    } else {
                        uploadContainer.style.display = 'none';
                        avatarContainer.style.display = 'grid';
                    }
                });
            });

            // Avatar selection
            const avatarOpts = document.querySelectorAll('.layout7-avatar-opt input');
            const selectedAvatarInput = document.getElementById('selectedAvatar');

            avatarOpts.forEach(opt => {
                opt.addEventListener('change', function() {
                    selectedAvatarInput.value = this.value;
                });
            });

            // File validation
            const fileInput = document.getElementById('foto');
            const fileError = document.getElementById('file-error');

            fileInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    if (file.size > 3 * 1024 * 1024) {
                        fileError.textContent = 'Ukuran file terlalu besar. Maksimal 3MB.';
                        this.value = '';
                    } else if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
                        fileError.textContent = 'Format file tidak didukung. Gunakan JPG atau PNG.';
                        this.value = '';
                    } else {
                        fileError.textContent = '';
                    }
                }
            });
        });
    </script>
@endsection