@extends('layouts.admin.app')

@section('content')


<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <section class="content-header">
            <h1>
                Panduan
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-book" aria-hidden="true"></i>
                        Panduan</a></li>
                <li class="active">Daftar Panduan</li>
            </ol>
        </section>
    </section>
    <!-- Main content -->
    <section class="content">
        <section class="col-lg-12 connectedSortable">
            <!-- TABLE: LATEST ORDERS -->
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">List Panduan</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <!-- <button type="button" class="btn btn-default create_panduan">
                        ADD NEW PANDUAN
                    </button> -->

                    <div class="table-responsive">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Nomor</th>
                                    <th>Nama Panduan</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($result as $e => $r)
                                <tr>
                                    <td>{{ $e + 1 }}</td>
                                    <td>
                                        {{ $r->name }}
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary edit-panduan" id="{{$r->id}}">edit</a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                </div>
                <!-- /.box-body -->

                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </section>
    </section>
    <!-- /.content -->

</div>

<div class="modal fade" id="panduan-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title userCrudModal"></h4>
            </div>

            <form id="panduanForm" name="panduanForm" class="form-horizontal" enctype="multipart/form-data">
                <div class="modal-body">
                    <input type="hidden" class="form-control id_panduan" name="id_panduan" id="id_panduan">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label>Nama Panduan</label>
                            <input type="text" class="form-control" id="nama_panduan" name="nama_panduan">
                        </div><!-- end col -->


                        <div class="col-sm-12">
                            <label>Upload File</label>
                            <br>
                            <b>Note : Jika tidak ada Perubahan File maka jangan diisi</b>
                            <input type="file" class="form-control" name="file_path" id="file_path">
                        </div>


                        <div class="col-sm-12">
                            <!--<label>Jenis</label>-->
                            <!--<input type="hidden" class="form-control id_panduan" name="Jenis" id="Jenis">-->
                            <select type="text" class="form-control" id="Jenis" name="Jenis" style="display: none;">
                                <option value="">--Pilih Jenis Panduan--</option>
                                <option value="0">Admin</option>
                                <option value="1">External User</option>
                            </select>
                        </div><!-- end col -->
                    </div><!-- end form-group -->
                </div><!-- end modal body -->

                <div class="modal-footer" style="margin-top:10px">
                    <button type="button" class="btn btn-danger closesx" data-dismiss="modal" aria-label="Close">Tutup</button>

                    <button type="submit" class="btn btn-primary btn-save" value="create">
                        Save changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
@section('footer')

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script>
    $(function() {
        $('#example1').DataTable()
    })
    $(document).ready(function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.create_panduan').click(function() {
            $('.btn-save').val("create-user");
            $('#panduanForm').trigger("reset");
            $('.userCrudModal').html("Add New User");
            $('#panduan-modal').modal('show');
        });
        $('body').on('click', '.edit-panduan', function() {
            var id_panduan = $(this).attr('id');
            $.get('getdatapanduan/' + id_panduan + '/edit', function(data) {
                $('#userCrudModal').html("Edit Software Details");
                $('#btn-save').val("edit-user");
                $('#panduan-modal').modal('show');
                $('#id_panduan').val(data.data.id);
                $('#nama_panduan').val(data.data.name);
                $('#Jenis').val(data.data.status);
            })
        });

        if ($("#panduanForm").length > 0) {
            console.log($("#panduanForm"));
            $("#panduanForm").validate({
                submitHandler: function(form) {
                    var actionType = $('.btn-save').val();
                    $('.btn-save').html('Sending..');
                    $.ajax({
                        data: new FormData(document.getElementById('panduanForm')),
                        url: "{{ url('listPanduan') }}",
                        type: "POST",
                        cache: false,
                        contentType: false,
                        enctype: 'multipart/form-data',
                        processData: false,
                        success: function(data) {
                            $('#send_form').html('Submit');
                            $('#position-1-success-changelog').show(function() {

                                var notice = new PNotify({
                                    title: 'Success',
                                    text: 'Berhasil Menambahkan.',
                                    type: 'success',
                                    icon: 'fa-check-circle ',
                                    addclass: 'stack-bottomleft'
                                }); //end function
                            }); //end response  

                            console.log('form info:', data);

                            $('#updateTable').trigger("reset");
                            $('#panduan-modal').modal('hide');
                            $('#btn-save').html('Save Changes');
                            window.location.reload();
                            // setTimeout( 
                            //     function() {
                            //         window.location.reload(true);
                            //     }, 800);
                        },
                        error: function(data) {
                            console.log('Error:', data); // remove this for production
                            $('#btn-save').html('Save Changes');
                        }
                    });
                }
            });
        }


    });
</script>

@stop