@section('title', 'Tracer Study')

@extends('Frontend.Layouts.app2')

@section('content')
<br><br>
<x-header-section-page title="Tracer Study {{ $settings['nama kampus'] ?? 'Alumni Tracer Study' }}" breadcrumb-home="Home" breadcrumb-current="Tracer Study" />

<div data-aos="fade-up" class="py-10 bg-gray-50 w-full">
    <div class="container mx-auto px-4 lg:px-20 max-w-screen-lg">
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="bg-primary p-6 text-center" style="color: #fff">
                <h2 class="text-2xl font-poppins font-semibold">Formulir Tracer Study</h2>
                <p class="text-sm mt-2 font-dmsans">Isi data Anda untuk membantu kami meningkatkan kualitas pendidikan</p>
            </div>
            
            <div class="p-8">
                @if(session('success'))
                    <div class="p-4 bg-green-100 border-l-4 border-green-500 text-green-700 rounded-lg mb-6">
                        <p class="text-sm font-dmsans">{{ session('success') }}</p>
                    </div>
                @endif
                
                @if($errors->any())
                    <div class="p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-lg mb-6">
                        <p class="text-sm font-dmsans font-medium"><strong>Terjadi Kesalahan!</strong></p>
                        <ul class="list-disc pl-6 text-sm font-dmsans">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                
                <form method="POST" action="{{ route('tracer-study.store') }}" id="tracerForm" enctype="multipart/form-data">
                    @csrf
                    
                    <!-- Data Pribadi -->
                    <h3 class="text-lg font-poppins font-semibold text-primary mb-4 border-b pb-2">Data Pribadi</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Lengkap</label>
                            <input type="text" name="nama" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('nama') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Jenis Kelamin</label>
                            <div class="flex gap-6 mt-2">
                                <label><input type="radio" name="jenis_kelamin" value="L" {{ old('jenis_kelamin') == 'L' ? 'checked' : '' }} required> Laki-laki</label>
                                <label><input type="radio" name="jenis_kelamin" value="P" {{ old('jenis_kelamin') == 'P' ? 'checked' : '' }} required> Perempuan</label>
                            </div>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Alamat Domisili</label>
                            <textarea name="alamat_domisili" rows="2" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" required>{{ old('alamat_domisili') }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Jurusan</label>
                            <select name="jurusan" id="jurusan" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" required>
                                <option value="">-- Pilih Jurusan --</option>
                                @foreach($biayas as $kategori => $items)
                                    <optgroup label="{{ $kategori }}">
                                        @foreach($items as $jurusan)
                                            <option value="{{ $jurusan->jurusan }}" {{ old('jurusan') == $jurusan->jurusan ? 'selected' : '' }}>
                                                {{ $jurusan->jurusan }}
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nomor HP/WA</label>
                            <input type="tel" name="no_hp" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('no_hp') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Email Pribadi</label>
                            <input type="email" name="email_pribadi" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('email_pribadi') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Tanggal Kelulusan</label>
                            <input type="date" name="tanggal_kelulusan" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('tanggal_kelulusan') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Memiliki Sertifikat Kompetensi?</label>
                            <select name="memiliki_sertifikat" id="memiliki_sertifikat" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" required>
                                <option value="">-- Pilih --</option>
                                <option value="Ya" {{ old('memiliki_sertifikat') == 'Ya' ? 'selected' : '' }}>Ya</option>
                                <option value="Tidak" {{ old('memiliki_sertifikat') == 'Tidak' ? 'selected' : '' }}>Tidak</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- Dynamic Fields untuk Sertifikat -->
                    <div id="sertifikat_fields" style="display: none;" class="mt-6">
                        <h3 class="text-md font-poppins font-semibold text-gray-700 mb-4">Data Sertifikat Kompetensi</h3>
                        <div id="sertifikat_container">
                            <div class="sertifikat_item border border-gray-200 rounded-lg p-4 mb-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Sertifikat</label>
                                        <input type="text" name="sertifikat_nama[]" class="sertifikat_nama mt-1 p-3 border border-gray-300 rounded-lg w-full" placeholder="Contoh: Sertifikat Kompetensi BNSP">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">File Sertifikat (PDF/Image Max 2MB)</label>
                                        <input type="file" name="sertifikat_file[]" class="sertifikat_file mt-1 p-3 border border-gray-300 rounded-lg w-full" accept=".pdf,.jpg,.jpeg,.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" id="tambah_sertifikat" class="mt-2 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition">
                            + Tambah Sertifikat
                        </button>
                    </div>
                    
                    <!-- Data Pekerjaan -->
                    <h3 class="text-lg font-poppins font-semibold text-primary mb-4 mt-8 border-b pb-2">Data Pekerjaan</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Instansi/Perusahaan</label>
                            <input type="text" name="nama_instansi" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('nama_instansi') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Mulai Bekerja (Tanggal)</label>
                            <input type="date" name="mulai_bekerja" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" value="{{ old('mulai_bekerja') }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Waktu Menunggu Mendapat Pekerjaan</label>
                            <input type="text" name="waktu_menunggu" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" placeholder="Contoh: 3 bulan" value="{{ old('waktu_menunggu') }}" required>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Alamat Perusahaan</label>
                            <textarea name="alamat_perusahaan" rows="2" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" required>{{ old('alamat_perusahaan') }}</textarea>
                        </div>
                    </div>
                    
                    <!-- Kesan dan Saran -->
                    <h3 class="text-lg font-poppins font-semibold text-primary mb-4 mt-8 border-b pb-2">Kesan, Saran & Sosial Media</h3>
                    
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Sosial Media (IG/TikTok/Facebook/LinkedIn)</label>
                            <input type="text" name="sosial_media" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" placeholder="Contoh: @username" value="{{ old('sosial_media') }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Kesan Selama Kuliah</label>
                            <textarea name="kesan" rows="3" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" placeholder="Tuliskan kesan Anda selama kuliah di {{ $settings['nama kampus'] ?? 'kampus kami' }}">{{ old('kesan') }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Saran untuk Pengembangan Kampus</label>
                            <textarea name="saran" rows="3" class="mt-1 p-4 border border-gray-300 rounded-lg w-full" placeholder="Tuliskan saran Anda untuk kemajuan kampus">{{ old('saran') }}</textarea>
                        </div>
                    </div>
                    
                    <div class="mt-8 text-center">
                        <button type="submit" style="color:#fff;" class="w-full md:w-1/2 bg-primary py-4 rounded-lg hover:bg-accent transition text-base font-semibold">
                            KIRIM TRACER STUDY
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('addon-script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const memilikiSertifikat = document.getElementById('memiliki_sertifikat');
        const sertifikatFields = document.getElementById('sertifikat_fields');
        
        // Toggle Sertifikat Fields
        function toggleSertifikatFields() {
            if (memilikiSertifikat && memilikiSertifikat.value === 'Ya') {
                sertifikatFields.style.display = 'block';
                // Required untuk sertifikat pertama
                const firstNama = document.querySelector('.sertifikat_nama');
                const firstFile = document.querySelector('.sertifikat_file');
                if (firstNama) firstNama.setAttribute('required', 'required');
                if (firstFile) firstFile.setAttribute('required', 'required');
            } else {
                sertifikatFields.style.display = 'none';
                // Hapus required semua sertifikat
                document.querySelectorAll('.sertifikat_nama, .sertifikat_file').forEach(el => {
                    el.removeAttribute('required');
                });
            }
        }
        
        // Tambah Sertifikat
        const tambahSertifikat = document.getElementById('tambah_sertifikat');
        const sertifikatContainer = document.getElementById('sertifikat_container');
        
        function addSertifikatItem() {
            const newItem = document.createElement('div');
            newItem.className = 'sertifikat_item border border-gray-200 rounded-lg p-4 mb-4';
            newItem.innerHTML = `
                <div class="flex justify-end mb-2">
                    <button type="button" class="hapus_sertifikat bg-red-500 text-white px-3 py-1 rounded-lg hover:bg-red-600 transition text-sm">Hapus</button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">Nama Sertifikat</label>
                        <input type="text" name="sertifikat_nama[]" class="sertifikat_nama mt-1 p-3 border border-gray-300 rounded-lg w-full" placeholder="Contoh: Sertifikat Kompetensi BNSP">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 font-poppins mb-2">File Sertifikat (PDF/Image Max 2MB)</label>
                        <input type="file" name="sertifikat_file[]" class="sertifikat_file mt-1 p-3 border border-gray-300 rounded-lg w-full" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                </div>
            `;
            
            // Event hapus
            const hapusBtn = newItem.querySelector('.hapus_sertifikat');
            hapusBtn.addEventListener('click', function() {
                newItem.remove();
                updateRequiredAttributes();
            });
            
            sertifikatContainer.appendChild(newItem);
        }
        
        function updateRequiredAttributes() {
            const isYa = memilikiSertifikat && memilikiSertifikat.value === 'Ya';
            if (isYa) {
                const allNama = document.querySelectorAll('.sertifikat_nama');
                const allFile = document.querySelectorAll('.sertifikat_file');
                allNama.forEach(el => el.setAttribute('required', 'required'));
                allFile.forEach(el => el.setAttribute('required', 'required'));
            }
        }
        
        if (tambahSertifikat) {
            tambahSertifikat.addEventListener('click', addSertifikatItem);
        }
        
        // Event listeners
        if (memilikiSertifikat) {
            memilikiSertifikat.addEventListener('change', toggleSertifikatFields);
            toggleSertifikatFields();
        }
        
        // Update required saat ada perubahan di sertifikat fields
        const observer = new MutationObserver(function() {
            updateRequiredAttributes();
        });
        
        if (sertifikatContainer) {
            observer.observe(sertifikatContainer, { childList: true, subtree: true });
        }
    });
</script>
@endpush