@extends('layouts.main', ['title' => 'Data Siswa'])
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
@endpush

@push('scripts')
    <script>
        const dataTable = new simpleDatatables.DataTable("#myTable",{
            perPageSelect: [10, 25, 50, 100, -1]
        });

        document.querySelector(".datatable-selector option[value='-1']").textContent = "All";

        //check-data-all
        const checkDataAll = document.getElementById('check-data-all');
        checkDataAll.addEventListener('change', function() {
            const checkData = document.querySelectorAll('.check-data');
            checkData.forEach((item) => {
                item.querySelector('input').checked = checkDataAll.checked;
            });
            getMultiId();
        });

        const checkData = document.querySelectorAll('.check-data');
        checkData.forEach((item) => {
            item.addEventListener('change', function() {
                getMultiId();
            });
        });

        function getMultiId() {
            let ids = [];
            const checkData = document.querySelectorAll('.check-data');
            checkData.forEach((item) => {
                if (item.querySelector('input').checked) {
                    ids.push(item.getAttribute('data-id'));
                }
            });

            document.getElementById('ids').value = ids.join(',');
            document.getElementById('ids_akun').value = ids.join(',');
        }

        //check ids_akun before submit buat-akun-form
        document.getElementById('buat-akun-form').addEventListener('submit', function(e) {
            if (document.getElementById('ids_akun').value == '') {
                e.preventDefault();
                alert('Pilih data siswa terlebih dahulu untuk dibuatkan akun loginnya!');
            }
        });

        //filter by jenjang
        function filterJenjang(e) {
            const jenjang = e.value;
            if (jenjang) {
                dataTable.search(jenjang,[3]);
            } else {
                dataTable.search("", undefined)
            }
        }
            
    </script>
@endpush

@section('content')
    <section class="section main-section">



        <div class="card ">
            <header class="card-header">
                <div class="card-header-title">
                    <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
                    Siswa

                </div>
                <div class="p-4 flex gap-2">
                    <button type="button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded "
                        onclick="document.getElementById('form-download').submit();"><i class="mdi mdi-file-excel"></i>
                        Download Format</button>
                    <button type="button"
                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded --modal"
                        data-target="modal-import"><i class="mdi mdi-file-excel"></i> Import Excel</button>
                    <a href="{{ route('siswa.create') }}"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"><i
                            class="mdi mdi-plus"></i> Tambah Data</a>
                </div>
            </header>
            <div class="card-content">
                <div class="flex">
                    <div class="w-full md:w-1/2">
                        <div class="field">
                            <label class="label">Jenjang</label>
                            <div class="control">
                                <div class="select">
                                    <select name="jenis_kelamin" onchange="filterJenjang(this)">
                                        <option value="">Pilih Jenjang</option>
                                        @foreach ($jenjangs as $jenjang)
                                            <option value="{{ $jenjang->nama_jenjang }}"
                                                {{ request()->get('nama_jenjang') == $jenjang->nama_jenjang ? 'selected' : '' }}>
                                                {{ $jenjang->nama_jenjang }}</option>
                                        @endforeach
                
                                    </select>
                                </div>
                                
                
                            </div>
                            @error('jenis_kelamin')
                                <p class="help is-danger text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                <table id="myTable">
                    <thead>
                        <tr>
                            <th class="checkbox-cell" data-sortable="false">
                                <label class="checkbox">
                                    <input type="checkbox" id="check-data-all">
                                    <span class="check"></span>
                                </label>
                            </th>
                            <th>NIS</th>
                            <th>Nama</th>
                            <th>Jenjang</th>
                            <th>Kelas</th>
                            <th>Dibuat Pada</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>
                                <td class="checkbox-cell">
                                    <label class="checkbox check-data" data-id="{{ $data->id }}">
                                        <input type="checkbox">
                                        <span class="check"></span>
                                    </label>
                                </td>
                                <td data-label="NIS">
                                    <b>{{ $data->nis }}</b>
                                </td>
                                <td data-label="Name">
                                    {{ $data->nama_siswa }}
                                </td>
                                <td data-label="Jenjang">
                                    {{ @$data->kelas->jenjang->nama_jenjang ?? '-'}}
                                </td>
                                <td data-label="nama_kelas">
                                    {{ @$data->kelas->nama_kelas ?? '-'}}
                                </td>

                                <td data-label="Created">
                                    {{ $data->created_at ? $data->created_at->format('d-m-Y') : '-' }}
                                    <br>
                                    <small>({{ $data->created_at ? $data->created_at->diffForHumans() : '-' }})</small>
                                </td>
                                <td class="actions-cell">
                                    <div class="buttons right nowrap">
                                        <a href="{{ route('siswa.edit', $data->id) }}" class="button small bg-orange-500"
                                            data-target="sample-modal-2" type="button">
                                            <span class="icon"><i class="mdi mdi-pencil text-white"></i></span>
                                        </a>
                                        <button type="button" onclick="deleteModal(this)"
                                            class="button small red --modal-delete"
                                            data-form="delete-data-{{ $data->id }}" data-target="modal-delete"
                                            type="button">
                                            <span class="icon"><i class="mdi mdi-trash-can"></i></span>
                                        </button>
                                        <form action="{{ route('siswa.destroy', $data->id) }}" method="POST"
                                            id="delete-data-{{ $data->id }}">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>

                </table>
                <hr>
                <form action="{{ route('siswa.multi-delete') }}" method="POST" id="multi-delete-data">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="ids" id="ids">
                </form>
                <form action="{{ route('siswa.download-format-import') }}" method="POST" id="form-download">
                    @csrf

                </form>
                <div class="flex justify-between">
                    <div class="flex gap-2">
                        <button type="button"
                            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-2 rounded --modal-delete"
                            data-target="modal-delete" data-form="multi-delete-data"><i class="mdi mdi-trash-can"></i>
                            Hapus</button>
                        <form action="{{ route('siswa.buat-akun') }}" method="POST" id="buat-akun-form">
                            @csrf
                            <input type="hidden" name="ids" id="ids_akun">
                            <button type="submit"
                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded "><i
                                    class="mdi mdi-login"></i> Buat Akun</button>
                        </form>
                    </div>
                    
                </div>
            </div>

        </div>
    </section>
@endsection

@push('modal')
    <div id="modal-import" class="modal" data-form="">
        <div class="modal-background --modal-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Ingin Mengimport Data?</p>
            </header>
            <section class="modal-card-body">
                <form action="{{ route('siswa.import-excel') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="field">
                        <label class="label">File Excel</label>
                        <div class="field-body">
                            <div class="control">
                                <input class="input" name="file" type="file" placeholder="File Excel">

                            </div>
                            @error('file')
                                <p class="help is-danger text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <button class="button bg-blue-500 text-white">Import</button>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>

            </footer>
        </div>
    </div>
@endpush