@extends('layouts.app')

@push('styles')
    <!-- DataTables -->
    <link
        href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <link
        href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
        <style>
            body {
                font-family: Arial, sans-serif;
            }

            .modal {
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(0,0,0);
                background-color: rgba(0,0,0,0.4);
            }

            .modal-content {
                background-color: #fefefe;
                margin: 15% auto;
                padding: 20px;
                border: 1px solid #888;
                width: 80%;
                max-width: 500px;
            }

            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }

        </style>
@endpush

@section('content')
<!-- Start Page-content-Wrapper -->
<div class="page-content-wrapper">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <!-- This column takes half of the width -->
                            <h4 class="card-title">{{ $title }} Siswa</h4>
                        </div>
                    </div>

                    <table id="datatable" class="table table-bordered dt-responsive nowrap"
                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>No Identitas</th>
                                <th>Jenis Kelamin</th>
                                <th>No Whatsapp</th>
                                <th>Tempat / Tanggal Lahir</th>
                                <th>Pendidikan Terakhir</th>
                                <th>Alamat</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($siswa as $data)
                                <tr>
                                    <td> {{ $loop->iteration }} </td>
                                    <td> {{ $data->siswa->nama_siswa }} </td>
                                    <td> {{ $data->email }} </td>
                                    <td> {{ $data->siswa->no_identitas }} </td>
                                    <td> {{ $data->siswa->jenis_kelamin }} </td>
                                    <td> {{ $data->siswa->no_hp_siswa }} </td>
                                    <td> {{ $data->siswa->tempat_lahir }} / {{ $data->siswa->tanggal_lahir }} </td>
                                    <td> {{ $data->siswa->tingkatan_sekolah }} </td>
                                    <td> {{ $data->siswa->alamat_siswa }} </td>
                                    <td>
                                        @can('view '.$menu)
                                            <a href="{{ url("/laporan") }}/{{$data->id}}"
                                                class="btn btn-sm btn-primary"><i class="fa fa-eye"> </i> Show</a>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
</div>
<!-- End Page-content -->
@endsection

@push('scripts')
    <!-- Required datatable js -->
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}">
    </script>
    <!-- Buttons examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}">
    </script>
    <!-- Responsive examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
    </script>

    <!-- Datatable init js -->
    <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.openModal').click(function() {
                $('#hasilForm').attr('action', "{{url('/sub_jadwal_kegiatan_mingguan')}}/"+ $(this).data('id') );
                $('#peran').val($(this).data('peran'));
                $('#tindakan').val($(this).data('tindakan'));
                @php
                    $day = ['Senin','Selasa','Rabu','Kamis','Jumat','Sabtu','Minggu'];
                @endphp
                @foreach ($day as $days)
                    @php
                        $kegiatan_hari = 'kegiatan_'.strtolower($days);
                    @endphp
                    $('#{{$kegiatan_hari}}').val($(this).data('{{$kegiatan_hari}}'));

                @endforeach

                $('#target').val($(this).data('target'));
                $('#hasil').val($(this).data('hasil'));
                $('#myModal').fadeIn();
            });

            // Close the modal when the close button is clicked
            $('#closeModal').click(function() {
                $('#myModal').fadeOut();
            });

            // Close the modal when clicking outside of the modal content
            $(window).click(function(event) {
                if ($(event.target).is('#myModal')) {
                    $('#myModal').fadeOut();
                }
            });

            // Confirm button action
            $('#confirm').click(function() {
                alert('Confirmed!');
                $('#myModal').fadeOut();
            });
        });
    </script>
@endpush