<x-app-layout>

    <x-slot:sidebar>
        <x-sidebar />
    </x-slot:sidebar>

    <x-slot:nav>
        <x-navbar />    
    </x-slot:nav>

    <x-header>
        <x-slot:title>Kolokium</x-slot:title>
    </x-header>

    <section class="mt-8 w-full ">
        <div class="flex flex-col gap-5" x-data="{ activeTab: 'berkas'}">

            <div class="flex">
                <button 
                    class="flex gap-2 items-center flex-1 w-1/2 px-6 py-2.5 rounded-l-full shadow-sm" 
                    :class="activeTab === 'berkas' ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-gray-950/5'"
                    @click="activeTab = 'berkas'">
                    <div 
                        class="p-2 w-3 h-3 flex justify-center items-center rounded-full text-xs" 
                        :class="activeTab === 'berkas' ? 'bg-white text-slate-900 font-semibold' : 'bg-slate-900 text-white'">
                        1
                    </div>
                    <h6 class="text-sm font-medium">Berkas</h6>
                </button>
                <div class="border-2 border-l-white"></div>
                <button 
                    class="flex gap-2 items-center flex-1 w-1/2 px-6 py-2.5 rounded-r-full shadow-sm" 
                    :class="activeTab === 'skp' ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-gray-950/5'"
                    @click="activeTab = 'skp'">
                    <div 
                        class="p-2 w-3 h-3 flex justify-center items-center rounded-full text-xs" 
                        :class="activeTab === 'skp' ? 'bg-white text-slate-900 font-semibold' : 'bg-slate-900 text-white'">
                        2
                    </div>
                    <h6 class="text-sm font-medium">SKP</h6>
                </button>
            </div>
            
            <form autocomplete="off" class="flex flex-col gap-5" action="" method="POST">
                @csrf
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5" x-show="activeTab === 'berkas'">
                    <div class="px-6 py-4 flex flex-col gap-3">
                        <div class="flex flex-col gap-5">
                            <div class="flex-1">
                                <x-input-label class="!text-black" for="judul_indo" :value="__('Judul Skripsi (Bahasa Indonesia)')" />
                                <x-text-input value="{{ old('judul_indo') }}" id="judul_indo" class="block mt-1 w-full !p-2" type="text" name="judul_indo" required />
                                <x-input-error :messages="$errors->get('judul_indo')" class="mt-1" />
                                <div class="mt-1 text-sm text-gray-500 ">Penulisan judul sesuai dengan PUEBI - Contoh : Aplikasi Penghitung Kepopuleran Kata Crocodilo dan Bombardino Berbasis Web (Studi Kasus: Netizen yang Sangat Benar dengan Segala Komentarnya)</div>
                            </div>
    
                            <div class="flex-1">
                                <x-input-label class="!text-black" for="judul_inggris" :value="__('Judul Skripsi (Bahasa Inggris)')" />
                                <x-text-input value="{{ old('judul_inggris') }}" id="judul_inggris" class="block mt-1 w-full !p-2" type="text" name="judul_inggris" required />
                                <x-input-error :messages="$errors->get('judul_inggris')" class="mt-1" />
                                <div class="mt-1 text-sm text-gray-500 ">Penulisan judul sesuai dengan Rules for Capitalization seperti Associated Press Stylebook atau Chicago Manual of Style - Contoh : Web-Based Application of the Popularity Counters of the Words Tuman and Ahsyiap (Case Study: Highly Correct Netizens with All of Their Comments)</div>
                            </div>
    
                            <div class="flex-1">    
                                <x-input-label class="!text-black" for="dosen_pembimbing_1" :value="__('Dosen Pembimbing 1')" />
                                <select class="block mt-1 w-full text-sm border border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm p-2.5" value="{{ old('dosen_pembimbing_1') }}" id="dosen_pembimbing_1" name="dosen_pembimbing_1">          
                                @foreach ($dosen as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>    
                                @endforeach   
                                </select>
                            </div>
    
                            <div class="flex-1">                   
                                <x-input-label class="!text-black" for="dosen_pembimbing_2" :value="__('Dosen Pembimbing 2')" />
                                <select class="block mt-1 w-full text-sm border border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm p-2.5" value="{{ old('dosen_pembimbing_2') }}" id="dosen_pembimbing_2" name="dosen_pembimbing_2">          
                                    @foreach ($dosen as $d)
                                        <option value="{{ $d->nama }}">{{ $d->nama }}</option>    
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="flex-1">
                                    <label class="block mb-2 text-sm font-medium text-black " for="user_avatar">File Skripsi</label>
                                    <input class="block w-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-white  focus:outline-none    p-2.5 rounded-md" id="skripsi" type="file">
                                    <div class="mt-1 text-sm text-gray-500 " id="user_avatar_help">Lengkap Cover - Lampiran</div>
                            </div>
                            <div class="flex-1">    
                                <label class="block mb-2 text-sm font-medium text-black " for="user_avatar">Bukti Cek Plagiarisme</label>
                                <input class="block w-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-white  focus:outline-none    p-2.5 rounded-md" id="plagiarisme" type="file">
                                <div class="mt-1 text-sm text-gray-500 " id="user_avatar_help">BAB 1-5 max 30%</div>
                            </div>
                            <div class="flex-1">    
                                <label class="block mb-2 text-sm font-medium text-black " for="user_avatar">Bukti Upload Laporan Magang</label>
                                <input class="block w-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-white  focus:outline-none    p-2.5 rounded-md" id="magang" type="file">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- SKP -->
                <div class="flex flex-col gap-5" 
                    x-show="activeTab === 'skp'" 
                    x-data="{ 
                        skpSum: @js(old('skpSum', [ [] ])),
                        kategoriSkp: @js($kategoriSkp),
                        kegiatanFiltered(kategoriId) {
                            if (!kategoriId) return [];
                            return this.kategoriSkp.find(k => k.id == kategoriId)?.kegiatan_skp ?? [];
                        }
                    }">
                    <template x-for="(skp, index) in skpSum" :key="index">
                        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5">
                            <div class="px-4 py-3 flex justify-between items-center">
                                <div>
                                    <select 
                                        class="text-sm text-slate-900 font-semibold rounded-md p-1.5" 
                                        x-model="skp.kategori_skp"
                                        x-bind:name="`skpSum[${index}][kategori_skp]`"
                                    >          
                                        <option>Pilih Kategori SKP</option>
                                        <template x-for="kategori in kategoriSkp" :key="kategori.id">
                                            <option :value="kategori.id" x-text="kategori.nama"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="text-sm font-medium text-slate-600">
                                    <p>Poin: </p>
                                </div>
                            </div>
                            
                            <div class="border-t border-gray-200">
                                <div class="p-6 flex flex-col gap-3">
                                    <div class="flex flex-col gap-3">
                                        <div class="flex-1">
                                            <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_kegiatan`" :value="__('Kegiatan')" />
                                            <select 
                                                class="mt-1 w-full border border-gray-300 rounded-md shadow-sm p-2 text-gray-700 text-sm" 
                                                x-model="skp.kegiatan" 
                                                x-bind:id="`skpSum_${index}_kegiatan`"
                                                x-bind:name="`skpSum[${index}][kegiatan]`" 
                                                required 
                                            >          
                                                <template x-for="kegiatan in kegiatanFiltered(skp.kategori_skp)" :key="kegiatan.id">
                                                    <option :value="kegiatan.id" x-text="kegiatan.nama"></option>
                                                </template>
                                            </select>
                                            <x-input-error :messages="$errors->get('skpSum.*.kegiatan ')" class="mt-1" />
                                        </div>
                                        <div class="flex-1">
                                            <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_judul`" :value="__('Judul Kegiatan')" />
                                            <x-text-input x-model="skp.judul" x-bind:id="`skpSum_${index}_judul`" class="block mt-1 w-full !p-2" type="text" x-bind:name="`skpSum[${index}][judul]`" required />
                                            <x-input-error :messages="$errors->get('skpSum.*.judul ')" class="mt-1" />
                                        </div>
                                        <div class="flex-1">
                                            <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_nomor_sertifikat`" :value="__('Nomor Sertifikat')" />
                                            <x-text-input x-model="skp.nomor_sertifikat" x-bind:id="`skpSum_${index}_nomor_sertifikat`" class="block mt-1 w-full !p-2" type="text" x-bind:name="`skpSum[${index}][nomor_sertifikat]`" required />
                                            <x-input-error :messages="$errors->get('skpSum.*.nomor_sertifikat ')" class="mt-1" />
                                        </div>
                                        <div class="flex-1">
                                            <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_lokasi`" :value="__('Lokasi Kegiatan')" />
                                            <x-text-input x-model="skp.lokasi" x-bind:id="`skpSum_${index}_lokasi`" class="block mt-1 w-full !p-2" type="text" x-bind:name="`skpSum[${index}][lokasi]`" required />
                                            <x-input-error :messages="$errors->get('skpSum.*.lokasi ')" class="mt-1" />
                                        </div>
                                        <div class="flex gap-3">
                                            <div class="flex-1">
                                                <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_tanggal_mulai`" :value="__('Tanggal Mulai')" />
                                                <x-text-input x-model="skp.tanggal_mulai" x-bind:id="`skpSum_${index}_tanggal_mulai`" class="block mt-1 w-full !p-2" type="date" x-bind:name="`skpSum[${index}][tanggal_mulai]`" required />
                                                <x-input-error :messages="$errors->get('skpSum.*.tanggal_mulai ')" class="mt-1" />
                                            </div>
                                            <div class="flex-1">
                                                <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_tanggal_akhir`" :value="__('Tanggal Akhir')" />
                                                <x-text-input x-model="skp.tanggal_akhir" x-bind:id="`skpSum_${index}_tanggal_akhir`" class="block mt-1 w-full !p-2" type="date" x-bind:name="`skpSum[${index}][tanggal_akhir]`" required />
                                                <x-input-error :messages="$errors->get('skpSum.*.tanggal_akhir ')" class="mt-1" />
                                            </div>
                                        </div>
                                        <div class="flex-1">
                                            <x-input-label class="!text-black" x-bind:for="`skpSum_${index}_sertifikat`" :value="__('Sertifikat')" />
                                            <x-text-input x-model="skp.sertifikat" x-bind:id="`skpSum_${index}_sertifikat`" class="block mt-1 w-full !p-2" type="file" x-bind:name="`skpSum[${index}][sertifikat]`" required />
                                            <x-input-error :messages="$errors->get('skpSum.*.sertifikat ')" class="mt-1" />
                                        </div>

                                        <div class="flex justify-end mt-2">
                                            <button type="button" class="bg-red-600 p-2 shadow-md rounded-md text-white font-medium hover:opacity-75" @click="skpSum.splice(index, 1)" x-show="skpSum.length > 1">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </template>
                    <div>
                        <button 
                            type="button" 
                            class="bg-white p-2 shadow-md ring-1 ring-gray-950/5 rounded-md text-slate-900 font-medium hover:bg-gray-100 hover:ring-1 hover:ring-slate-700"
                            @click="skpSum.push({})"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                            </svg>
                        </button>
                    </div>
                </div>
                        
                <x-button type="submit" class="bg-slate-900">Kirim</x-button>
            </form>
        </div>
    </section>
</x-app-layout>