<x-app-layout>

    @hasanyrole('Admin|GuruBK')
        @include('siswa.create')
        @include('siswa.edit')
        @include('siswa.delete')
    @endhasanyrole

    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('DATA SISWA') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xlxl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 flex justify-between items-center">
                    @hasanyrole('Admin|GuruBK')
                        <div class="mb-3">
                            <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
                                data-bs-target="#tambahModal">TAMBAH DATA</button>
                            <a class="btn btn-outline-warning" href="{{ route('siswa.export') }}" target="_blank">
                                <span class="fa-solid fa-plus"></span>
                                {{ __(key: 'EXPORT') }}
                            </a>
                            <a class="btn btn-outline-warning" x-data=""
                                x-on:click.prevent="$dispatch('open-modal','import-siswa')">
                                <span class="fa-solid fa-plus"></span>
                                {{ __('IMPORT') }}
                            </a>
                        </div>
                    @endhasanyrole
                </div>
                <x-table :tableId="'myTable_' . uniqid()">
                    <x-slot name="header">
                        <tr class="bg-gray-400 text-center">
                            <th>NO.</th>
                            <th>NAMA</th>
                            <th>NIS</th>
                            <th>KELAS</th>
                            <th>TAHUN PELAJARAN</th>
                            <th>WALI KELAS</th>
                            <th>AKSI</th>
                        </tr>
                    </x-slot>

                    @php $num = 1; @endphp
                    @foreach ($siswas as $data)
                        <tr class="text-center">
                            <td>{{ $num++ }}</td>
                            <td>{{ $data->nama_siswa }}</td>
                            <td>{{ $data->nis }}</td>
                            <td>{{ $data->kelas }}</td>
                            <td>{{ $data->tahun_pelajaran }}</td>
                            <td>{{ $data->guru->nama_guru ?? null }}</td>
                            <td>
                                @hasanyrole('Admin|GuruBK')
                                    <button tag="a" type="button" class="btn btn-outline-warning"
                                        data-bs-toggle="modal" data-bs-target="#exampleModal_{{ $data->id_siswa }}"><i
                                            class="fa-solid fa-pen-to-square"></i></button>
                                    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                                        data-bs-target="#hapusModal_{{ $data->id_siswa }}"><i
                                            class="fa-solid fa-trash-can"></i></button>
                                @endhasanyrole
                                <button tag="a" type="button" class="btn btn-outline-success"
                                    data-bs-toggle="modal" data-bs-target="#openModel_{{ $data->id_siswa }}"><i
                                        class="fa-solid fa-folder"></i></button>
                                        @include('siswa.detail')
                            </td>
                        </tr>
                    @endforeach
                </x-table>

                <x-modal name="import-siswa" focusable maxWidth="xl">
                    <form method="post" action="{{ route('siswa.import') }}" class="p-6"
                        enctype="multipart/form-data">
                        @csrf
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ __('Import Data Siswa') }}
                        </h2>

                        <div class="max-w-xl">
                            <x-input-label for="cover" class="sr-only" value="File Import" />
                            <x-file-input id="cover" name="file" class="mt-1 block w-full" required />
                        </div>

                        <div class="mt-6 flex justify-end">
                            <x-secondary-button x-on:click="$dispatch('close')">
                                {{ __('Cancel') }}
                            </x-secondary-button>

                            <x-primary-button class="ml-3">
                                {{ __('Upload') }}
                            </x-primary-button>
                        </div>
                    </form>
                </x-modal>
            </div>
        </div>
    </div>

    <script>
        function submitFilterForm() {
            document.getElementById("filterForm").submit();
        }
    </script>
</x-app-layout>
