<x-app-layout>

    @push('styles')
        @vite('resources/css/datatable.css')
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.3.2/css/fixedHeader.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.min.css">   
    @endpush

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

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

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

    
    <section class="w-full mt-8">
        <div class="flex flex-col gap-8">
            
            <div class="flex justify-center" x-data="{ currentPath: window.location.pathname }">
                <div class="bg-white shadow-sm rounded-lg ring-1 ring-gray-900/5 max-w-md w-full">
                    <ul class="flex flex-row w-full">
                        <li class="flex flex-col gap-y-1 w-full items-center">
                            <a href="{{ route('admin.judul.index') }}" 
                                class="w-full text-center rounded-l-lg px-3 py-2.5 outline-none transition duration-75 hover:bg-slate-300"
                                :class="{
                                    'bg-slate-900 text-white hover:!bg-slate-900 hover:text-white': currentPath.startsWith('{{ route('admin.judul.index', [], false) }}')
                                }">
                                <span class="fi-sidebar-item-label flex-1 truncate text-sm font-medium text-primary-600 ">
                                    Judul Proposal
                                </span>
                            </a>
                        </li>
                        <li class="flex flex-col gap-y-1 w-full items-center">
                            <a href="{{ route('mahasiswa.seminar.create') }}" 
                                class="w-full text-center rounded-r-lg px-3 py-2.5 outline-none transition duration-75 hover:bg-slate-300"
                                :class="{
                                    'bg-slate-900 text-white hover:bg-slate-900 hover:text-white': currentPath.startsWith('{{ route('mahasiswa.seminar.create', [], false) }}')
                                }">
                                <span class="fi-sidebar-item-label flex-1 text-sm font-medium text-primary-600 ">
                                    Seminar Proposal
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div x-data="multiUpdateDosen()" 
                x-init="initDataTable()" 
                class="grid grid-cols-4 gap-3">
                <div class="col-span-3 w-full overflow-x-auto bg-white p-6 rounded-lg shadow-sm ring-1 ring-gray-950/5">
                    <div class="min-w-full text-sm">
                        {!! $dataTable->table(['id' => 'judul-table', 'class' => 'stripe hover nowrap w-full']) !!}
                    </div>
                </div>
                <div 
                    class="w-64 h-fit text-sm bg-white border-l rounded-lg shadow-lg shadow-sm ring-1 ring-gray-950/5 p-4 transition-all duration-300"
                    x-show="showPanel"
                    x-transition
                >
                    <h3 class="font-medium mb-2">Penetapan Dosen Pembimbing</h3>

                    <form @submit.prevent="updateSelected()" class="flex flex-col gap-3">
                        <div>
                            <select x-model="form.dosen_pembimbing_1" class="border rounded w-full px-2 py-1">
                                @foreach ($dosen as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                               
                            </select>
                        </div>

                        <x-button 
                            class="bg-slate-900 hover:bg-slate-800 w-full flex justify-center items-center gap-2"
                            type="submit"
                        >
                            Kirim (<span x-text="selectedIds.length"></span>)
                        </x-button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/fixedheader/3.3.2/js/dataTables.fixedHeader.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.min.js"></script>
        {!! $dataTable->scripts() !!}
        <script>
            function multiUpdateDosen() {
                return {
                    selectedIds: [],
                    showPanel: false,
                    form: { dosen_pembimbing_1: '' },
                    table: null,

                    initDataTable() {
                        $(document).on('init.dt', (e, settings) => {
                            if (settings.nTable.id === 'judul-table') {
                                this.table = $('#judul-table').DataTable();
                            }
                        });

                        $(document).on('change', '.row-checkbox', (e) => {
                            const id = e.target.value;
                            if (e.target.checked) {
                                this.selectedIds.push(id);
                            } else {
                                this.selectedIds = this.selectedIds.filter(x => x !== id);
                            }
                            this.showPanel = this.selectedIds.length > 0;
                        });

                        $(document).on('change', '#select-all', (e) => {
                            const checked = e.target.checked;
                            $('.row-checkbox').prop('checked', checked).trigger('change');
                        });
                    },

                    updateSelected() {
                        if (!this.form.dosen_pembimbing_1) {
                            alert('Pilih dosen pembimbing terlebih dahulu.');
                            return;
                        }

                        if (this.selectedIds.length === 0) {
                            alert('Tidak ada yang dipilih.');
                            return;
                        }

                        if (!confirm(`Tetapkan ${this.form.dosen_pembimbing_1} ke ${this.selectedIds.length} mahasiswa?`)) return;

                        fetch("{{ route('admin.dosen-pembimbing-1.store') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                id: this.selectedIds,
                                dosen_pembimbing_1: this.form.dosen_pembimbing_1
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            alert(data.message);
                            this.table.ajax.reload();
                            this.selectedIds = [];
                            this.form.dosen_pembimbing_1 = '';
                            this.showPanel = false;
                        });
                    },
                }
            }
            </script>
    @endpush
</x-app-layout>