@extends('admin.main')
@section('title', 'Knowledges')
@section('breadcrumb')
    {{-- <li class="breadcrumb-item"><a href="#">Home</a></li> --}}
    <li class="breadcrumb-item active">Knowledges</li>
@endsection
@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data Knowledge</h3>
                <div class="card-tools">
                    <a href="" id="btnAdd" data-toggle="modal" data-target="#modalAdd" class="btn btn-success btn-sm"><i class="fas fa-plus-circle"></i>&nbsp;Tambah Data</a>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="data-knowledge" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="5%">NO</th>
                            <th width="10%">File</th>
                            <th>Title</th>
                            <th width="8%">Upload</th>
                            <th width="15%">Upload At</th>
                            <th width="15%">Created At</th>
                            <th width="20%">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <div class="modal fade" id="modalAdd">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-add">
                    @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Form Tambah Data</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        <div class="form-group">
                            <label>Title</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="title" name="title" placeholder="input title.." required>
                        </div>
                        <div class="form-group">
                            <label for="customFile">File</label><span style="color: var(--danger);"><b>*</b></span>
                            <div class="custom-file">
                                <input type="file" name="file" id="file" class="custom-file-input" id="customFile" accept="application/pdf">
                                <label class="custom-file-label" for="customFile">Choose file</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Deskripsi</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="description" name="description" placeholder="input deskripsi.." required>
                        </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </div>
            </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="modalEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-edit">
                    @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Form Edit</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="id">
                        <label>Title</label><span style="color: var(--danger);"><b>*</b></span>
                        <input type="text" class="form-control" id="title" name="title" placeholder="input title.." required>
                    </div>
                    <div class="form-group">
                        <label for="customFile">File</label><span style="color: var(--danger);"><b>*</b></span>
                        <div class="custom-file">
                            <input type="file" name="file" id="file" class="custom-file-input" id="customFile" accept="application/pdf">
                            <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label><span style="color: var(--danger);"><b>*</b></span>
                        <input type="text" class="form-control" id="description" name="description" placeholder="input deskripsi.." required>
                    </div>
            </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                </div>
            </form>

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

    <script>
        $(document).ready(function() {

            bsCustomFileInput.init();

            loadData();

            $('.form-modal-add').submit(function(e) {
                e.preventDefault();

                var form = $(this);
                var token = form.find('input[name=_token]');

                var formData = new FormData();
                var file = $('#file')[0].files[0];
                formData.append('_token', token.val());
                formData.append('title', form.find('input[name=title]').val());
                formData.append('file_knowledge', file);
                formData.append('description', form.find('input[name=description]').val());

                hitApiWithImage(
                    '/admin/knowledges/store',
                    'post', formData, 
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalAdd').modal('hide');
                            loadData();
                            Swal.fire({
                                title: 'Success!',
                                text: response.message,
                                icon: 'success'
                            })
                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );
            });

            $(document).on('click', '#btnEdit', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                hitApi(
                    '/admin/knowledges/get-data?id=' + id,
                    'get', {},
                    function(response) {
                        if (!$.isEmptyObject(response.data)) {
                            var item = response.data[0];
                            var form = $('.form-modal-edit');
                            form.find('input[name=id]').val(item.id);
                            form.find('input[name=title]').val(item.title);
                            form.find('input[name=description]').val(item.description);
                        } else {}
                    }
                );
            });

            $('.form-modal-edit').submit(function(e) {
                e.preventDefault();

                var token = $('input[name=_token]');
                var form = $(this);
                var id = form.find('input[name=id]').val();

                var formData = new FormData();
                var file = $('#file')[0].files[0];
                formData.append('_token', token.val());
                formData.append('title', form.find('input[name=title]').val());
                formData.append('file_knowledge', file);
                formData.append('description', form.find('input[name=description]').val());

                hitApiWithImage(
                    '/admin/knowledges/update/' +id,
                    'post', formData,
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalEdit').modal('hide');
                            loadData();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });
                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );
            });

            $(document).on('click', '#btnDelete', function(e) {
                e.preventDefault();

                var id = $(this).data('id');
                var token = $('input[name=_token]');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {

                        hitApi(
                            '/admin/knowledges/delete/' + id,
                            'post', {
                                _token: token.val(),
                            },
                            function(response) {
                                token.val(response.newToken);
                                if (response.isSuccess) {
                                    loadData();
                                    Swal.fire({
                                        title: "Deleted!",
                                        text: response.message,
                                        icon: "success"
                                    });
                                } else {
                                    Swal.fire({
                                        title: "Warning!",
                                        text: response.message,
                                        icon: "warning"
                                    });
                                }
                            }
                        );
                    }
                });

            });

            $(document).on('click', '#btnUpload', function(e) {
                e.preventDefault();

                var id = $(this).data('id');
                var token = $('input[name=_token]');

                Swal.fire({
                    title: "Are you sure?",
                    text: "Are you sure to continue uploading this file?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, sure!"
                }).then((result) => {
                    if (result.isConfirmed) {

                        hitApi(
                            '/admin/knowledges/upload/' + id,
                            'post', {
                                _token: token.val(),
                            },
                            function(response) {
                                token.val(response.newToken);
                                if (response.isSuccess) {
                                    loadData();
                                    Swal.fire({
                                        title: "Uploaded!",
                                        text: response.message,
                                        icon: "success"
                                    });
                                } else {
                                    Swal.fire({
                                        title: "Warning!",
                                        text: response.message,
                                        icon: "warning"
                                    });
                                }
                            }
                        );
                    }
                });

            });
            
        })

        function loadData() {
            showData(
                '#data-knowledge',
                '/admin/knowledges/get-data',
                [{
                        data: 'no'
                    },
                    {
                        data: 'file_knowledge'
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'is_upload'
                    },
                    {
                        data: 'upload_at'
                    },
                    {
                        data: 'created_at_format'
                    },
                    {
                        data: 'id'
                    },
                ],
                [
                    {
                        targets: 1,
                        data: 'file_knowledge',
                        render: function(data, type, row) {
                            var button = `<a target="_blank" href="{{ Storage::url('${row.file_knowledge}') }}" class="btn btn-info btn-sm"><i class="fas fa-eye"></i>&nbsp;View File</a>&nbsp;`;
                            return button;
                        }
                    },
                    {
                        targets: 3,
                        data: 'is_upload',
                        render: function(data, type, row) {
                            var button = (row.is_upload == 1) ? `<span class="badge bg-success">Uploaded</span>` : `<span class="badge bg-danger">Not Yet</span>`;
                            return button;
                        }
                    },
                    {
                        targets: 6,
                        data: 'id',
                        render: function(data, type, row) {
                            var button = '<a href="" id="btnEdit" data-id="' + row.id + '" data-toggle="modal" data-target="#modalEdit" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i>&nbsp;Edit</a>&nbsp;' +
                                '<a href="" id="btnDelete" data-id="' + row.id + '" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i>&nbsp;Delete</a>';
                            if (row.is_upload == 0) {
                                button += '&nbsp;<a href="" id="btnUpload" data-id="' + row.id + '" class="btn btn-info btn-sm"><i class="fas fa-upload"></i>&nbsp;Upload</a>';
                            }
                            
                            return button;
                        }
                    }
                ]
            );
        }
    </script>
@endsection