@extends('layouts.main', ['title' => 'Laporan 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");

        // catch detail-btn click and prevent default, get url from href, encode to base64
        
        document.querySelectorAll('.detail-btn').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const url = btoa(this.href);
                window.open(`{{url('cetak-preview')}}/${url}`, '_blank');
            });
        });
        
    </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>
                    Laporan 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 --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">
                <table id="myTable">
                    <thead>
                        <tr>
                            <th data-sortable="false">
                                Detail
                            </th>
                            <th>NIS</th>
                            <th>Nama</th>
                            <th>Jenjang</th>
                            <th>Kelas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datas as $data)
                            <tr>
                                <td >
                                    <a href="{{ route('laporan.siswa.pdf', $data->id) }}" class="button small bg-blue-500 detail-btn"
                                        data-target="sample-modal-2" type="button">
                                        <span class="icon"><i class="mdi mdi-eye text-white"></i></span>
                                    </a>
                                </td>
                                <td data-label="NIS">
                                    {{ $data->nis }}
                                </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>
                              
                            </tr>
                        @endforeach

                    </tbody>
                   
                </table>
            </div>
           
        </div>
    </section>

    
@endsection