@extends('layouts.apoteker') {{-- Sesuaikan ini jika pakai layouts.user atau lainnya --}}

@section('title', 'Edit Profil Profesional')

@push('head')
    {{-- Pastikan Font Awesome CSS terhubung di layout utama kamu untuk ikon --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    {{-- Pastikan Alpine.js sudah diimport di layout utama kamu, contoh: --}}
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endpush

@section('content')
<div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 md:p-8 lg:p-10">

        {{-- Header Section --}}
        <div class="flex flex-col sm:flex-row justify-between items-center mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-3 sm:mb-0 flex items-center">
                <i class="fas fa-user-edit text-blue-500 mr-3"></i> Edit Profil Profesional
            </h1>

            @if($profile->slug)
                <a href="{{ route('profile.public', $profile->slug) }}" target="_blank"
                   class="inline-flex items-center px-5 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ease-in-out duration-150">
                    <i class="fas fa-globe-americas mr-2"></i> Lihat Profil Publik
                </a>
            @endif
        </div>

        {{-- Flash Messages (from full form submission) --}}
        @if(session('success'))
            <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-200 p-4 mb-6 rounded-md" role="alert">
                <p class="font-bold">Berhasil!</p>
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-200 p-4 mb-6 rounded-md" role="alert">
                <p class="font-bold">Oops! Ada kesalahan:</p>
                <ul class="mt-2 list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- GLOBAL FORM for Basic Info & Social Links (if you still want a single submit for these) --}}
        {{-- You might want to break these down further, or keep them as one main form.
             For this example, I'll assume you keep Basic Info & Social as one main form. --}}
{{-- Hapus atau pastikan tidak ada form lain yang membungkus ini --}}
{{-- Atau pastikan ini adalah satu-satunya tag <form> di halaman kecuali untuk form repeater yang sudah di-AJAX --}}

<form action="{{ route('profile.update', ['section' => 'basic_info']) }}" method="POST" enctype="multipart/form-data" class="space-y-8 mb-8" id="basicInfoForm">
    {{-- Ini adalah baris penting untuk keamanan CSRF --}}
    @csrf

    {{-- Ini adalah baris PENTING untuk spoofing PUT method --}}
    {{-- Laravel akan menambahkan input hidden <input type="hidden" name="_method" value="PUT"> --}}
    @method('PUT')

    {{-- Basic Information Section --}}
    <section class="space-y-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4">
            <i class="fas fa-id-card-alt mr-2 text-blue-500"></i> Informasi Dasar
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                    <i class="fas fa-link mr-1"></i> Slug (URL Profil)
                </label>
                <div class="mt-1 flex rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm">
                        {{ url('/profil') }}/
                    </span>
                    <input type="text" name="slug" id="slug" value="{{ old('slug', $profile->slug) }}"
                           class="flex-1 block w-full rounded-none rounded-r-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white
                                   focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('slug') border-red-500 @enderror"
                           placeholder="contoh: nama-saya-123">
                </div>
                @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Slug yang unik untuk profil publik Anda. Gunakan huruf kecil, angka, dan tanda hubung.</p>
            </div>

            <div>
                <label for="headline" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                    <i class="fas fa-heading mr-1"></i> Headline
                </label>
                <input type="text" name="headline" id="headline" value="{{ old('headline', $profile->headline) }}"
                       class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                               focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('headline') border-red-500 @enderror"
                       placeholder="Mis: Web Developer | Open to Remote Work">
                @error('headline')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Deskripsi singkat tentang diri Anda atau pekerjaan Anda.</p>
            </div>

<div class="col-span-1 md:col-span-2"> 
    <label for="about" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
        <i class="fas fa-info-circle mr-1"></i> Tentang Saya (About)
    </label>

    <textarea name="about" id="about" rows="10"
              class="mt-1 block w-full border-gray-300 dark:border-gray-600 bg-white text-black rounded-md shadow-sm
                     focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('about') border-red-500 @enderror"
              placeholder="Ceritakan tentang diri Anda, pengalaman, dan minat Anda.">{{ old('about', $profile->about) }}</textarea>

    @error('about')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
</div>



            <div>
                <label for="status_interest" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                    <i class="fas fa-briefcase mr-1"></i> Status Ketersediaan
                </label>
                <select name="status_interest" id="status_interest"
                        class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                                focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('status_interest') border-red-500 @enderror">
                    <option value="open_job" {{ old('status_interest', $profile->status_interest) == 'open_job' ? 'selected' : '' }}>🔎 Open to Work</option>
                    <option value="open_collab" {{ old('status_interest', $profile->status_interest) == 'open_collab' ? 'selected' : '' }}>🤝 Open for Collaboration</option>
                    <option value="not_available" {{ old('status_interest', $profile->status_interest) == 'not_available' ? 'selected' : '' }}>🚫 Not Available</option>
                </select>
                @error('status_interest')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="photo_profile" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                    <i class="fas fa-camera mr-1"></i> Foto Profil
                </label>
                <input type="file" name="photo_profile" id="photo_profile"
                       class="block w-full text-sm text-gray-500
                               file:mr-4 file:py-2 file:px-4
                               file:rounded-full file:border-0
                               file:text-sm file:font-semibold
                               file:bg-blue-50 file:text-blue-700
                               hover:file:bg-blue-100 @error('photo_profile') border-red-500 @enderror">
                @error('photo_profile')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                @if($profile->photo_profile)
                    <div class="mt-4 flex items-center space-x-4">
                        <img src="{{ asset('storage/' . $profile->photo_profile) }}" alt="Foto Profil Saat Ini"
                             class="w-24 h-24 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600 shadow-sm">
                        <button type="button" onclick="document.getElementById('photo_profile_clear').value = '1'; this.closest('div').style.display='none';"
                                class="text-red-600 hover:text-red-800 text-sm font-medium flex items-center gap-1">
                            <i class="fas fa-times-circle"></i> Hapus Foto
                        </button>
                    </div>
                    <input type="hidden" name="photo_profile_clear" id="photo_profile_clear" value="0">
                @else
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Belum ada foto profil. Unggah satu!</p>
                @endif
            </div>
        </div>
    </section>

    ---

    {{-- Social Links Section --}}
    <section class="space-y-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4">
            <i class="fas fa-share-alt mr-2 text-cyan-500"></i> Tautan Sosial & Web
        </h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    {{-- LinkedIn --}}
    <div>
        <label for="linkedin" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-linkedin mr-1 text-blue-700"></i> LinkedIn
        </label>
        <input type="url" name="linkedin" id="linkedin" value="{{ old('linkedin', $profile->linkedin) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('linkedin') border-red-500 @enderror"
               placeholder="https://linkedin.com/in/yourprofile">
        @error('linkedin')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- GitHub --}}
    <div>
        <label for="github" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-github mr-1 text-gray-700 dark:text-white"></i> GitHub
        </label>
        <input type="url" name="github" id="github" value="{{ old('github', $profile->github) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('github') border-red-500 @enderror"
               placeholder="https://github.com/yourusername">
        @error('github')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- WhatsApp --}}
    <div>
        <label for="whatsapp" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-whatsapp mr-1 text-green-500"></i> WhatsApp (Nomor Telepon)
        </label>
        <input type="tel" name="whatsapp" id="whatsapp" value="{{ old('whatsapp', $profile->whatsapp) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('whatsapp') border-red-500 @enderror"
               placeholder="e.g., 6281234567890 (tanpa +)">
        @error('whatsapp')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Website --}}
    <div>
        <label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fas fa-globe mr-1 text-purple-500"></i> Website Pribadi
        </label>
        <input type="url" name="website" id="website" value="{{ old('website', $profile->website) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('website') border-red-500 @enderror"
               placeholder="https://yourwebsite.com">
        @error('website')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- ORCID --}}
    <div>
        <label for="orcid" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fas fa-id-card-alt mr-1 text-green-700"></i> ORCID
        </label>
        <input type="url" name="orcid" id="orcid" value="{{ old('orcid', $profile->orcid) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('orcid') border-red-500 @enderror"
               placeholder="https://orcid.org/0000-0000-0000-0000">
        @error('orcid')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- YouTube --}}
    <div>
        <label for="youtube" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-youtube mr-1 text-red-600"></i> YouTube
        </label>
        <input type="url" name="youtube" id="youtube" value="{{ old('youtube', $profile->youtube) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('youtube') border-red-500 @enderror"
               placeholder="https://youtube.com/channel/...">
        @error('youtube')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- TikTok --}}
    <div>
        <label for="tiktok" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-tiktok mr-1 text-black dark:text-white"></i> TikTok
        </label>
        <input type="url" name="tiktok" id="tiktok" value="{{ old('tiktok', $profile->tiktok) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('tiktok') border-red-500 @enderror"
               placeholder="https://www.tiktok.com/@yourusername">
        @error('tiktok')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Facebook --}}
    <div>
        <label for="facebook" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-facebook mr-1 text-blue-600"></i> Facebook
        </label>
        <input type="url" name="facebook" id="facebook" value="{{ old('facebook', $profile->facebook) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('facebook') border-red-500 @enderror"
               placeholder="https://facebook.com/yourprofile">
        @error('facebook')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Instagram --}}
    <div>
        <label for="instagram" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            <i class="fab fa-instagram mr-1 text-pink-500"></i> Instagram
        </label>
        <input type="url" name="instagram" id="instagram" value="{{ old('instagram', $profile->instagram) }}"
               class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                      focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('instagram') border-red-500 @enderror"
               placeholder="https://instagram.com/yourusername">
        @error('instagram')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>
</div>

    </section>

    ---

    {{-- Admin Only Settings (Is Verified) --}}
    @if(Auth::user()->hasRole('admin')) {{-- pakai role check kalau kamu pakai spatie/roles --}}
        <section class="space-y-6">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4">
                <i class="fas fa-user-shield mr-2 text-gray-600 dark:text-gray-400"></i> Pengaturan Admin
            </h2>
            <label for="is_verified" class="inline-flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" name="is_verified" id="is_verified" value="1" {{ old('is_verified', $profile->is_verified) ? 'checked' : '' }}
                       class="rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm focus:ring-blue-500">
                <span class="text-gray-700 dark:text-gray-200 font-medium">✔️ Tandai sebagai Terverifikasi</span>
            </label>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Centang untuk menandai profil ini sebagai terverifikasi.</p>
        </section>
    @endif

    ---
    {{-- Tampilkan di Direktori --}}
    <div>
        <label class="flex items-center space-x-2 mt-4">
            <input type="checkbox" name="is_visible" value="1" {{ $profile->is_visible ? 'checked' : '' }}>
            <span class="text-gray-700 dark:text-gray-200">👁️ Tampilkan di Direktori Publik</span>
        </label>
        <small class="text-sm text-gray-500 dark:text-gray-400 block mt-1">
            Jika dinonaktifkan, profil Anda tidak akan tampil di direktori publik.
        </small>
    </div>

    {{-- Submit Button for Basic Info & Social Links --}}
    <div class="pt-8 flex justify-end">
        <button type="submit"
                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150">
            <i class="fas fa-save mr-2"></i> Simpan Informasi Dasar & Sosial
        </button>
    </div>
</form>

        ---

        {{-- Dynamic Sections (Skills, Experience, Education, Portfolio) --}}
        <section class="space-y-8">
            {{-- SKILLS SECTION (NEW FORM) --}}
            <form action="{{ route('profile.update', ['section' => 'skills']) }}" method="POST" class="space-y-4" x-data="repeater({ items: @json(old('skills', $user_profile->skills ?? [])), type: 'string' })" @submit.prevent="submitSectionForm">
                @csrf
                @method('PUT') {{-- Gunakan PUT/PATCH jika ingin lebih RESTful --}}
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4 flex justify-between items-center">
                    <span><i class="fas fa-brain mr-2 text-purple-500"></i> Skills</span>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ease-in-out duration-150">
                        <i class="fas fa-save mr-2"></i> Update Skills
                    </button>
                </h2>
                <template x-for="(item, index) in items" :key="index">
                    <div class="flex items-center space-x-3 group mb-2">
                        <input type="text"
                               class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm
                                       focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
                               x-model="items[index]"
                               :name="'skills[' + index + ']'"
                               placeholder="Nama Skill (e.g., Laravel, JavaScript)">
                        <button type="button" class="text-red-500 hover:text-red-700 transition-colors duration-200" @click="remove(index)">
                            <i class="fas fa-trash-alt text-lg"></i>
                        </button>
                    </div>
                </template>
                <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition ease-in-out duration-150" @click="add()">
                    <i class="fas fa-plus mr-2"></i> Tambah Skill
                </button>
                {{-- Error messages for skills if any (from AJAX response) --}}
                <div x-show="errors.skills" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors.skills" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['skills.*']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['skills.*']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>

                {{-- PREVIEW SECTION UNTUK SKILLS --}}
                <div class="mt-6 p-4 border border-purple-200 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 rounded-md">
                    <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
                        <i class="fas fa-eye mr-2"></i> Pratinjau Skills
                    </h3>
                    <div x-show="items.filter(i => i.trim() !== '').length > 0">
                        <ul class="flex flex-wrap gap-2">
                            <template x-for="(skill, idx) in items.filter(i => i.trim() !== '')" :key="idx">
                                <li class="px-3 py-1 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-100 rounded-full text-sm">
                                    <span x-text="skill"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <p x-show="items.filter(i => i.trim() !== '').length === 0" class="text-sm text-purple-700 dark:text-purple-300 italic">
                        Belum ada skills yang ditambahkan.
                    </p>
                </div>
                {{-- AKHIR PREVIEW SECTION --}}
            </form>

            ---

            {{-- EXPERIENCE SECTION (NEW FORM) --}}
            <form action="{{ route('profile.update', ['section' => 'experience']) }}" method="POST" class="space-y-4" x-data="repeater({ items: @json(old('experience', $user_profile->experience ?? [])), type: 'object', defaultItem: { title: '', year: '' } })" @submit.prevent="submitSectionForm">
                @csrf
                @method('PUT')
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4 flex justify-between items-center">
                    <span><i class="fas fa-briefcase mr-2 text-indigo-500"></i> Experience</span>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ease-in-out duration-150">
                        <i class="fas fa-save mr-2"></i> Update Experience
                    </button>
                </h2>
                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-center group bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-100 dark:border-gray-600">
                        <div class="md:col-span-2">
                            <label :for="'experience-title-' + index" class="sr-only">Posisi/Perusahaan</label>
                            <input type="text"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                   x-model="items[index].title"
                                   :name="'experience[' + index + '][title]'"
                                   :id="'experience-title-' + index"
                                   placeholder="Posisi / Nama Perusahaan">
                        </div>
                        <div class="flex items-center space-x-3">
                            <label :for="'experience-year-' + index" class="sr-only">Tahun</label>
                            <input type="text"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                   x-model="items[index].year"
                                   :name="'experience[' + index + '][year]'"
                                   :id="'experience-year-' + index"
                                   placeholder="Tahun (e.g., 2020-2023)">
                            <button type="button" class="text-red-500 hover:text-red-700 transition-colors duration-200" @click="remove(index)">
                                <i class="fas fa-trash-alt text-lg"></i>
                            </button>
                        </div>
                    </div>
                </template>
                <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150" @click="add()">
                    <i class="fas fa-plus mr-2"></i> Tambah Pengalaman
                </button>
                {{-- Error messages for experience --}}
                <div x-show="errors.experience" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors.experience" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['experience.*.title']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['experience.*.title']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['experience.*.year']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['experience.*.year']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>

                {{-- PREVIEW SECTION UNTUK EXPERIENCE --}}
                <div class="mt-6 p-4 border border-indigo-200 dark:border-indigo-700 bg-indigo-50 dark:bg-indigo-900/20 rounded-md">
                    <h3 class="text-lg font-semibold text-indigo-800 dark:text-indigo-200 mb-2">
                        <i class="fas fa-eye mr-2"></i> Pratinjau Experience
                    </h3>
                    <div x-show="items.filter(i => i.title.trim() !== '' || i.year.trim() !== '').length > 0" class="space-y-2">
                        <template x-for="(exp, idx) in items.filter(i => i.title.trim() !== '' || i.year.trim() !== '')" :key="idx">
                            <div class="bg-indigo-100 dark:bg-indigo-800 p-2 rounded flex items-center">
                                <span x-text="exp.title" class="font-medium text-indigo-900 dark:text-indigo-100"></span>
                                <span x-show="exp.year" class="ml-2 text-indigo-700 dark:text-indigo-300 text-sm"> (<span x-text="exp.year"></span>)</span>
                            </div>
                        </template>
                    </div>
                    <p x-show="items.filter(i => i.title.trim() !== '' || i.year.trim() !== '').length === 0" class="text-sm text-indigo-700 dark:text-indigo-300 italic">
                        Belum ada pengalaman yang ditambahkan.
                    </p>
                </div>
                {{-- AKHIR PREVIEW SECTION --}}
            </form>

            ---

            {{-- EDUCATION SECTION (NEW FORM) --}}
            <form action="{{ route('profile.update', ['section' => 'education']) }}" method="POST" class="space-y-4" x-data="repeater({ items: @json(old('education', $user_profile->education ?? [])), type: 'object', defaultItem: { degree: '', year: '' } })" @submit.prevent="submitSectionForm">
                @csrf
                @method('PUT')
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4 flex justify-between items-center">
                    <span><i class="fas fa-graduation-cap mr-2 text-teal-500"></i> Education</span>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ease-in-out duration-150">
                        <i class="fas fa-save mr-2"></i> Update Education
                    </button>
                </h2>
                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-center group bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-100 dark:border-gray-600">
                        <div class="md:col-span-2">
                            <label :for="'education-degree-' + index" class="sr-only">Gelar/Institusi</label>
                            <input type="text"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
                                   x-model="items[index].degree"
                                   :name="'education[' + index + '][degree]'"
                                   :id="'education-degree-' + index"
                                   placeholder="Gelar / Nama Institusi">
                        </div>
                        <div class="flex items-center space-x-3">
                            <label :for="'education-year-' + index" class="sr-only">Tahun</label>
                            <input type="text"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
                                   x-model="items[index].year"
                                   :name="'education[' + index + '][year]'"
                                   :id="'education-year-' + index"
                                   placeholder="Tahun (e.g., 2019)">
                            <button type="button" class="text-red-500 hover:text-red-700 transition-colors duration-200" @click="remove(index)">
                                <i class="fas fa-trash-alt text-lg"></i>
                            </button>
                        </div>
                    </div>
                </template>
                <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition ease-in-out duration-150" @click="add()">
                    <i class="fas fa-plus mr-2"></i> Tambah Pendidikan
                </button>
                {{-- Error messages for education --}}
                <div x-show="errors.education" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors.education" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['education.*.degree']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['education.*.degree']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['education.*.year']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['education.*.year']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>

                {{-- PREVIEW SECTION UNTUK EDUCATION --}}
                <div class="mt-6 p-4 border border-teal-200 dark:border-teal-700 bg-teal-50 dark:bg-teal-900/20 rounded-md">
                    <h3 class="text-lg font-semibold text-teal-800 dark:text-teal-200 mb-2">
                        <i class="fas fa-eye mr-2"></i> Pratinjau Education
                    </h3>
                    <div x-show="items.filter(i => i.degree.trim() !== '' || i.year.trim() !== '').length > 0" class="space-y-2">
                        <template x-for="(edu, idx) in items.filter(i => i.degree.trim() !== '' || i.year.trim() !== '')" :key="idx">
                            <div class="bg-teal-100 dark:bg-teal-800 p-2 rounded flex items-center">
                                <span x-text="edu.degree" class="font-medium text-teal-900 dark:text-teal-100"></span>
                                <span x-show="edu.year" class="ml-2 text-teal-700 dark:text-teal-300 text-sm"> (<span x-text="edu.year"></span>)</span>
                            </div>
                        </template>
                    </div>
                    <p x-show="items.filter(i => i.degree.trim() !== '' || i.year.trim() !== '').length === 0" class="text-sm text-teal-700 dark:text-teal-300 italic">
                        Belum ada pendidikan yang ditambahkan.
                    </p>
                </div>
                {{-- AKHIR PREVIEW SECTION --}}
            </form>

            ---

            {{-- PORTFOLIO SECTION (NEW FORM) --}}
            <form action="{{ route('profile.update', ['section' => 'portfolio']) }}" method="POST" class="space-y-4" x-data="repeater({ items: @json(old('portfolio', $user_profile->portfolio ?? [])), type: 'object', defaultItem: { title: '', url: '' } })" @submit.prevent="submitSectionForm">
                @csrf
                @method('PUT')
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4 flex justify-between items-center">
                    <span><i class="fas fa-project-diagram mr-2 text-orange-500"></i> Portfolio</span>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ease-in-out duration-150">
                        <i class="fas fa-save mr-2"></i> Update Portfolio
                    </button>
                </h2>
                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-center group bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-100 dark:border-gray-600">
                        <div>
                            <label :for="'portfolio-title-' + index" class="sr-only">Judul Proyek</label>
                            <input type="text"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
                                   x-model="items[index].title"
                                   :name="'portfolio[' + index + '][title]'"
                                   :id="'portfolio-title-' + index"
                                   placeholder="Judul Proyek">
                        </div>
                        <div>
                            <label :for="'portfolio-url-' + index" class="sr-only">URL Proyek</label>
                            <input type="url"
                                   class="block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md shadow-sm
                                           focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
                                   x-model="items[index].url"
                                   :name="'portfolio[' + index + '][url]'"
                                   :id="'portfolio-url-' + index"
                                   placeholder="URL (e.g., GitHub, Behance)">
                        </div>
                        <div class="flex items-center space-x-3">
                            <button type="button" class="text-red-500 hover:text-red-700 transition-colors duration-200" @click="remove(index)">
                                <i class="fas fa-trash-alt text-lg"></i>
                            </button>
                        </div>
                    </div>
                </template>
                <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition ease-in-out duration-150" @click="add()">
                    <i class="fas fa-plus mr-2"></i> Tambah Portfolio
                </button>
                {{-- Error messages for portfolio --}}
                <div x-show="errors.portfolio" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors.portfolio" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['portfolio.*.title']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['portfolio.*.title']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>
                <div x-show="errors['portfolio.*.url']" class="mt-1 text-xs text-red-600">
                    <template x-for="error in errors['portfolio.*.url']" :key="error">
                        <p x-text="error"></p>
                    </template>
                </div>

                {{-- PREVIEW SECTION UNTUK PORTFOLIO --}}
                <div class="mt-6 p-4 border border-orange-200 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/20 rounded-md">
                    <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-200 mb-2">
                        <i class="fas fa-eye mr-2"></i> Pratinjau Portfolio
                    </h3>
                    <div x-show="items.filter(i => i.title.trim() !== '' || i.url.trim() !== '').length > 0" class="space-y-2">
                        <template x-for="(port, idx) in items.filter(i => i.title.trim() !== '' || i.url.trim() !== '')" :key="idx">
                            <div class="bg-orange-100 dark:bg-orange-800 p-2 rounded flex flex-col sm:flex-row sm:items-center">
                                <span x-text="port.title" class="font-medium text-orange-900 dark:text-orange-100"></span>
                                <template x-if="port.url">
                                    <a :href="port.url" target="_blank" class="ml-0 sm:ml-2 text-orange-700 dark:text-orange-300 text-sm hover:underline flex items-center gap-1">
                                        <i class="fas fa-external-link-alt text-xs"></i> <span x-text="port.url"></span>
                                    </a>
                                </template>
                            </div>
                        </template>
                    </div>
                    <p x-show="items.filter(i => i.title.trim() !== '' || i.url.trim() !== '').length === 0" class="text-sm text-orange-700 dark:text-orange-300 italic">
                        Belum ada proyek portfolio yang ditambahkan.
                    </p>
                </div>
                {{-- AKHIR PREVIEW SECTION --}}
            </form>
        </section>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        tinymce.init({
            selector: '#about',
            menubar: false,
            plugins: 'link lists',
            toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image link media | code',
            height: 350,
            branding: false
        });
    });
</script>
<script>

    function repeater(config) {
        return {
            items: config.items && Array.isArray(config.items) ? config.items : [],
            type: config.type || 'string', // 'string' atau 'object'
            defaultItem: config.defaultItem || '', // Default string kosong atau objek kosong
            errors: {}, // Tambahkan properti untuk menyimpan error validasi

            init() {
                // Pastikan items adalah array dan jika kosong, tambahkan satu item default
                if (!Array.isArray(this.items) || this.items.length === 0) {
                    this.items = []; // Pastikan array kosong
                    this.add(); // Tambahkan satu item default jika items kosong
                } else {
                    // Jika ada data lama, pastikan formatnya benar
                    this.items = this.items.map(item => {
                        if (this.type === 'object' && (typeof item !== 'object' || item === null)) {
                            return JSON.parse(JSON.stringify(this.defaultItem)); // Pastikan objek baru, bukan referensi
                        } else if (this.type === 'string' && typeof item !== 'string') {
                            return '';
                        }
                        return item; // Item sudah dalam format yang benar
                    });
                    // Filter entri yang mungkin jadi `null` atau `undefined` dari data lama
                    this.items = this.items.filter(item => item !== null && item !== undefined);

                    // Jika setelah filter jadi kosong, tambahkan satu item
                    if (this.items.length === 0) {
                        this.add();
                    }
                }
            },

            add() {
                // Tambahkan item baru berdasarkan type
                if (this.type === 'string') {
                    this.items.push('');
                } else {
                    this.items.push(JSON.parse(JSON.stringify(this.defaultItem))); // Pastikan objek baru, bukan referensi
                }
                this.$nextTick(() => {
                    // Scroll ke item yang baru ditambahkan
                    const lastItem = this.$el.querySelector('.group:last-child input');
                    if (lastItem) {
                        lastItem.focus();
                    }
                });
            },

            remove(index) {
                this.items.splice(index, 1);
                // Jika semua item dihapus, tambahkan satu item default agar form tidak kosong
                if (this.items.length === 0) {
                    this.add();
                }
            },

            // Fungsi baru untuk submit form per section
            async submitSectionForm(event) {
                this.errors = {}; // Reset errors
                const form = event.target;
                const formData = new FormData(form);
                const actionUrl = form.action;

                // Tambahkan CSRF token
                formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
                // Tambahkan method spoofing untuk PUT/PATCH
                formData.append('_method', 'PUT'); // Atau 'PATCH' tergantung route Anda

                try {
                    const response = await fetch(actionUrl, {
                        method: 'POST', // Kirim sebagai POST, tapi Laravel akan menginterpretasikan PUT/PATCH
                        body: formData,
                        headers: {
                            'Accept': 'application/json', // Penting untuk menerima respons JSON dari Laravel
                        }
                    });

                    const data = await response.json();

                    if (response.ok) {
                        // Success: tampilkan pesan sukses
                        console.log('Update successful:', data.message);
                        alert(data.message || 'Data berhasil diperbarui!');
                        // Opsional: perbarui data items jika server mengembalikan data terbaru
                        // if (data.updated_items) {
                        //     this.items = data.updated_items;
                        // }
                    } else if (response.status === 422) {
                        // Validation error: tampilkan error
                        this.errors = data.errors;
                        console.error('Validation errors:', this.errors);
                        alert('Ada kesalahan validasi. Periksa input Anda.');
                    } else {
                        // Other errors
                        console.error('Server error:', data.message);
                        alert(data.message || 'Terjadi kesalahan saat memperbarui.');
                    }
                } catch (error) {
                    console.error('Network or unexpected error:', error);
                    alert('Terjadi kesalahan jaringan atau tak terduga.');
                }
            }
        }
    }
</script>

{{-- Tambahkan meta tag CSRF token jika belum ada di layout utama --}}
<meta name="csrf-token" content="{{ csrf_token() }}">

@endpush