@extends('layouts.admin')
@section('content')
<section class="content-header">
    <label>
        Data Siswa
    </label>
    <ol class="breadcrumb">
        <li>
            <a href="{{ url('admin/dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
        </li>
        <li class="active">Siswa</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <button class="btn btn-info btn-sm" onclick="reload()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#md-import">
                        <i class="fa fa-upload"></i> Import Data
                    </button>
                    <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#md-fadd">
                        <i class="fa fa-plus"></i> Tambah
                    </button>
                    <button class="btn btn-danger btn-sm" id="btn-delete-selected" disabled data-toggle="modal" data-target="#md-delete-selected">
                        <i class="fa fa-trash"></i> Hapus Terpilih (<span id="selected-count">0</span>)
                    </button>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Nama Siswa</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-user"></li></span>
                                    <input type="text" class="form-control" placeholder="Nama Menu" id="src_name" name="src_name">
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Jenis Kelamin</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-male"></li></span>
                                    <select class="form-control select2 inp-fadd" id="src_gender" name="src_gender" style="width: 100%;" required>
                                        <option value="">- Pilih -</option>
                                        <option value="Laki-laki">Laki-laki </option>
                                        <option value="Perempuan">Perempuan</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Tingkat</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-graduation-cap"></li></span>
                                    <select class="form-control select2 inp-fadd" id="src_grade" name="src_grade" style="width: 100%;" required>
                                        <option value="">- Pilih -</option>
                                        <option value="X">X </option>
                                        <option value="XI">XI</option>
                                        <option value="XII">XII</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Program Keahlian</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-home"></li></span>
                                    <select class="form-control select2 inp-fadd" id="src_classroom" name="src_classroom" style="width: 100%;" required>
                                        <option value="">- Pilih -</option>
                                        <option value="Layanan Kesehatan">Layanan Kesehatan </option>
                                        <option value="Teknik Laboratorium Medik">Teknik Laboratorium Medik</option>
                                        <option value="Teknologi Farmasi">Teknologi Farmasi</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Konsentrasi Keahlian</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-building"></li></span>
                                    <select class="form-control select2 inp-fadd" id="src_major" name="src_major" style="width: 100%;" required>
                                        <option value="">- Pilih -</option>
                                        <option value="Layanan Penunjang Kefarmasian Klinis dan Komunitas">Layanan Penunjang Kefarmasian Klinis dan Komunitas </option>
                                        <option value="Layanan Penunjang Keperawatan dan Caregiving">Layanan Penunjang Keperawatan dan Caregiving</option>
                                        <option value="Layanan Penunjang Laboratorium Medik">Layanan Penunjang Laboratorium Medik</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>                
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="box box-success">
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table id="ajax-datatables" class="table table-bordered table-hover table-striped" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th width="3%"><input type="checkbox" id="select-all"></th>
                                        <th width="5%">#</th>
                                        <th>Nama Siswa</th>
                                        <th>Jenis Kelami</th>
                                        <th>Tingkat</th>
                                        <th>Program Keahlian</th>
                                        <th>Konsentrasi Keahlian</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="md-fadd">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Tambah Siswa</h4>
            </div>
            <form id="fadd" action="javascript:submitForm('fadd', 'reset', 'dt')" url="{{ route('createStudent') }}">
                @csrf()
                <div class="modal-body">
                    <div class="row">
                        <!--end col-->
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label>Nama Siswa <span class="require"></span></label>
                                <input type="text" id="fullname" name="fullname" class="form-control inp-fadd" required/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <div class="form-group">
                                <label >Jenis Kelamin<span class="require"></span></label>
                                <select class="form-control select2 inp-fadd" id="gender" name="gender" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="Laki-laki">Laki-laki </option>
                                    <option value="Perempuan">Perempuan</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <div class="form-group">
                                <label >Tingkat<span class="require"></span></label>
                                <select class="form-control select2 inp-fadd" id="grade" name="grade" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="X">X </option>
                                    <option value="XI">XI</option>
                                    <option value="XII">XII</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label >Program Keahlian<span class="require"></span></label>
                                <select class="form-control select2 inp-fadd" id="classroom" name="classroom" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="Layanan Kesehatan">Layanan Kesehatan </option>
                                    <option value="Teknik Laboratorium Medik">Teknik Laboratorium Medik</option>
                                    <option value="Teknologi Farmasi">Teknologi Farmasi</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label >Konsentrasi Keahlian<span class="require"></span></label>
                                <select class="form-control select2 inp-fadd" id="major" name="major" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="Layanan Penunjang Kefarmasian Klinis dan Komunitas">Layanan Penunjang Kefarmasian Klinis dan Komunitas </option>
                                    <option value="Layanan Penunjang Keperawatan dan Caregiving">Layanan Penunjang Keperawatan dan Caregiving</option>
                                    <option value="Layanan Penunjang Laboratorium Medik">Layanan Penunjang Laboratorium Medik</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-fadd">
                        <li class="fa fa-save"></li> Simpan
                    </button>
                </div>
            </form>

        </div>
        <!-- /.modal-content -->
    </div>
</div>

<div class="modal fade" id="md-fedit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Siswa</h4>
            </div>
            <form id="fedit" action="javascript:submitForm('fedit', 'reset', 'dt')" url="{{ route('updateStudent') }}">
                @csrf()
                <input type="hidden" id="student_id" name="student_id">
                <div class="modal-body">
                    <div class="row">
                        <!--end col-->
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label>Nama Siswa <span class="require"></span></label>
                                <input type="text" id="efullname" name="fullname" class="form-control inp-fedit" required/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <div class="form-group">
                                <label >Jenis Kelamin<span class="require"></span></label>
                                <select class="form-control select2 inp-fedit" id="egender" name="gender" style="width: 100%;"  required>
                                    <option value="">- Pilih -</option>
                                    <option value="Laki-laki">Laki-laki </option>
                                    <option value="Perempuan">Perempuan</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <div class="form-group">
                                <label >Tingkat<span class="require"></span></label>
                                <select class="form-control select2 inp-fedit" id="egrade" name="grade" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="X">X </option>
                                    <option value="XI">XI</option>
                                    <option value="XII">XII</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label >Program Keahlian<span class="require"></span></label>
                                <select class="form-control select2 inp-fedit" id="eclassroom" name="classroom" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="Layanan Kesehatan">Layanan Kesehatan </option>
                                    <option value="Teknik Laboratorium Medik">Teknik Laboratorium Medik</option>
                                    <option value="Teknologi Farmasi">Teknologi Farmasi</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-3">
                            <div class="form-group">
                                <label >Konsentrasi Keahlian<span class="require"></span></label>
                                <select class="form-control select2 inp-fedit" id="emajor" name="major" style="width: 100%;" required>
                                    <option value="">- Pilih -</option>
                                    <option value="Layanan Penunjang Kefarmasian Klinis dan Komunitas">Layanan Penunjang Kefarmasian Klinis dan Komunitas </option>
                                    <option value="Layanan Penunjang Keperawatan dan Caregiving">Layanan Penunjang Keperawatan dan Caregiving</option>
                                    <option value="Layanan Penunjang Laboratorium Medik">Layanan Penunjang Laboratorium Medik</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-fedit">
                        <li class="fa fa-save"></li> Simpan
                    </button>
                </div>
            </form>

        </div>
        <!-- /.modal-content -->
    </div>
</div>
<div class="modal fade" id="md-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hapus Siswa</h4>
            </div>
            <div class="modal-body">
                <p style="text-align: center">
                    <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44" ></i>&nbsp
                    <label style="font-size: 35px;"> Apakah anda yakin ? </label>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">                            
                    <li class="fa fa-times"></li> Close                   
                </button>
                <button type="submit" class="btn btn-danger" id="btn-del"  onclick="del()"><li class="fa fa-trash"></li> Proses</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="md-import" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Import Siswa</h4>
            </div>
            <form id="import" action="javascript:submitForm('import', 'reset', 'dt')" url="{{ route('importStudent') }}">
                @csrf()
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <a href="{{asset('assets/admin/file/formart_import_siswa.xlsx')}}" target="_blank" class="btn btn-default btn-sm"><li class="fa fa-file-excel-o"></li> Format Import Siswa</a>
                            </div>
                        </div><br>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>File Siswa<span class="require"></span></label>
                                <input type="file" id="source" name="source" class="form-control inp-import" />
                            </div>
                        </div>
                    </div>
                    <!-- Danger Alert -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-import">
                        <li class="fa fa-save"></li> Simpan
                    </button>
                </div>
            </form>

        </div>
        <!-- /.modal-content -->
    </div>
</div>

<!-- new modal for bulk delete -->
<div class="modal fade" id="md-delete-selected" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hapus Siswa Terpilih</h4>
            </div>
            <div class="modal-body">
                <p style="text-align: center">
                    <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44" ></i>&nbsp
                    <label style="font-size: 20px;"> Apakah anda yakin akan menghapus <span id="confirm-count">0</span> data terpilih? </label>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">                            
                    <li class="fa fa-times"></li> Batal                   
                </button>
                <button type="button" class="btn btn-danger" id="btn-del-selected" onclick="delSelected()"><li class="fa fa-trash"></li> Proses</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="getId">
<script>
    var table;
    var selectedIds = []; // store selected across pages

    $(document).ready(function() {
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        $('#md-fadd').on('shown.bs.modal', function() {
            $("#fullname").focus();
        });

        $("#src_name").keypress(function(e) {
            if (e.which == 13) {
                table.ajax.reload(null, false);
            }
        });

        $("#src_gender").change(function() {
            table.ajax.reload(null, false);
        });

        $("#src_grade").change(function() {
            table.ajax.reload(null, false);
        });

        $("#src_classroom").change(function() {
            table.ajax.reload(null, false);
        });

        $("#src_major").change(function() {
            table.ajax.reload(null, false);
        });

        table = $('#ajax-datatables').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            responsive: true,
            ajax: {
                url: "{{ route('getStudent') }}",
                data: function(d) {
                    d.src_name = $('#src_name').val(),
                    d.src_gender = $('#src_gender').val(),
                    d.src_grade = $('#src_grade').val(),
                    d.src_classroom = $('#src_classroom').val(),
                    d.src_major = $('#src_major').val()
                }
            },
            columns: [
                {
                    data: 'id',
                    name: 'id',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return '<input type="checkbox" class="row-select" value="'+data+'">';
                    }
                },
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'fullname',
                    name: 'fullname'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'grade',
                    name: 'grade'
                },
                {
                    data: 'classroom',
                    name: 'classroom'
                },
                {
                    data: 'major',
                    name: 'major'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            drawCallback: function(settings) {
                // restore checkbox state after draw
                $('#ajax-datatables .row-select').each(function(){
                    var val = $(this).val();
                    if (selectedIds.indexOf(val) !== -1) {
                        $(this).prop('checked', true);
                    }
                });
                toggleDeleteSelectedButton();
            }
        });

        // select all on page
        $('#select-all').on('change', function() {
            var checked = $(this).is(':checked');
            $('#ajax-datatables .row-select').each(function() {
                $(this).prop('checked', checked).trigger('change');
            });
        });

        // handle per-row selection
        $(document).on('change', '.row-select', function() {
            var id = $(this).val();
            if ($(this).is(':checked')) {
                if (selectedIds.indexOf(id) === -1) selectedIds.push(id);
            } else {
                var idx = selectedIds.indexOf(id);
                if (idx !== -1) selectedIds.splice(idx, 1);
            }
            $('#selected-count').text(selectedIds.length);
            $('#confirm-count').text(selectedIds.length);
            // ensure select-all reflects current page
            var totalOnPage = $('#ajax-datatables .row-select').length;
            var checkedOnPage = $('#ajax-datatables .row-select:checked').length;
            $('#select-all').prop('checked', totalOnPage > 0 && totalOnPage === checkedOnPage);
            toggleDeleteSelectedButton();
        });
    });

    function toggleDeleteSelectedButton() {
        if (selectedIds.length > 0) {
            $('#btn-delete-selected').removeAttr('disabled');
        } else {
            $('#btn-delete-selected').attr('disabled', 'disabled');
        }
    }

    function edit(id) {
        $('#student_id').val(id);
        $.ajax({
            url: "{{ route('getbyStudent') }}",
            type: "GET",
            data: {
                id
            },
            daraType: "json",
            cache: false,
            beforeSend: function() {
                $(".inp").attr("disabled", "disabled");
            },
            success: function(data) {
                $("#efullname").val(data.fullname);
                $("#egender").val(data.gender).trigger('change');
                $("#egrade").val(data.grade).trigger('change');
                $("#eclassroom").val(data.classroom).trigger('change');
                $("#emajor").val(data.major).trigger('change');
            },
            complete: function() {
                $(".inp").removeAttr("disabled");
            }
        });
    }

    function del() {
        var id = $("#getId").val();
        var _token = $("#_token").val();
        $.ajax({
            url: "{{route('deleteStudent')}}",
            type: "POST",
            data: {
                id,
                _token
            },
            daraType: "json",
            cache: false,
            beforeSend: function() {
                $("#btn-del").attr("disabled", "disabled");
                $("#btn-del").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
            },
            success: function(data) {
                if (data.status == "success") {
                    table.ajax.reload(null, false);
                    $('#md-delete').modal('toggle');
                }

                notif(data.message, data.status);
            },
            complete: function() {
                $("#btn-del").removeAttr("disabled");
                $("#btn-del").html("<li class='fa fa-trash'></li> Proses");
            }
        });
    }

    function delSelected() {
        if (selectedIds.length === 0) {
            $('#md-delete-selected').modal('hide');
            return;
        }
        var _token = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: "{{ route('deleteStudents') }}",
            type: "POST",
            data: {
                ids: selectedIds,
                _token: _token
            },
            dataType: "json",
            beforeSend: function() {
                $("#btn-del-selected").attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
            },
            success: function(data) {
                if (data.status == "success") {
                    // clear selection and reload
                    selectedIds = [];
                    $('#selected-count').text(0);
                    $('#confirm-count').text(0);
                    $('#select-all').prop('checked', false);
                    table.ajax.reload(null, false);
                    $('#md-delete-selected').modal('toggle');
                }
                notif(data.message, data.status);
            },
            complete: function() {
                $("#btn-del-selected").removeAttr("disabled").html("<li class='fa fa-trash'></li> Proses");
            }
        });
    }

    function reload() {
        table.ajax.reload(null, false);
        selectedIds = [];
        $('#selected-count').text(0);
        $('#confirm-count').text(0);
        $('#select-all').prop('checked', false);
        $("#src_name").val("");
        $("#src_gender").val("").trigger('change');
        $("#src_grade").val("").trigger('change');
        $("#src_classroom").val("").trigger('change');
        $("#src_major").val("").trigger('change');
    }

    function getId(id) {
        $("#getId").val(id);
    }


</script>
@endsection