@extends('admin')

@push('after-style')
<style>
    .card-body>.table>thead>tr>td,
    .card-body>.table>thead>tr>th {
        border-top-width: 0;
        text-align: center;
    }
</style>
<link rel="stylesheet" href="{{ asset('adminn/plugins/summernote/summernote-bs4.css') }}">

@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">{{ session()->get('title') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">{{ session()->get('title') }}</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
                <a target="_blank" href="{{ url('/admin/news/add') }}" class="btn-sm btn btn-primary">tambah</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Title</th>
                            <th>Image</th>
                            <th>Date</th>
                            <th>Author</th>
                            <th>Publish</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

<div id="modal_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>

            <div class="modal-body">
                <form id="form">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" id="title" class="form-control">
                        <div class="text-danger text-error" id="title_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="content">Content</label>
                        <textarea class="textarea" name="content" id="content" placeholder="Place some text here" style="width: 100%; height: 1000px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        </textarea>
                        <div class="text-danger text-error" id="content_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="publish_at">Date</label>
                        <input type="date" class="form-control" name="publish_at" id="publish_at">
                        <div class="text-danger text-error" id="publish_at_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="author">Author</label>
                        <input class="form-control" name="author" id="author">
                        <div class="text-danger text-error" id="author_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Image</label>
                        <input type="file" name="image" id="image" class="form-control">
                        <div class="text-danger text-error" id="image_error">*error</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Tutup</button>
                <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Save
                    changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@push('after-script')
<script src="{{ asset('adminn/plugins/summernote/summernote-bs4.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {

        table = $('#table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            "order": [], //Initial no order.

            // Load data for the table's content from an Ajax source
            "ajax": {
                "type": "POST",
                "url": "{{ url('/admin/news/show') }}",
                "data": {
                    "_token": "{{ csrf_token() }}"
                },
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'imageField',
                    name: 'imageField'
                },
                {
                    data: 'publish_at',
                    name: 'publish_at'
                },
                {
                    data: 'author',
                    name: 'author'
                },
                {
                    data: 'publishBtn',
                    name: 'publishBtn'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });

        $('#content').summernote({
            height: "600",
            callbacks: {
                onImageUpload: function(image) {
                    console.log('1');
                    uploadImage(image[0]);
                },
                onMediaDelete: function(target) {
                    console.log('2');
                    deleteImage(target[0].src);
                }
            }
        });

        function uploadImage(image) {
            console.log('upload image');
            var data = new FormData();
            data.append("image", image);
            $.ajax({
                url: "{{ url('/admin/news/upload-image') }}",
                cache: false,
                contentType: false,
                processData: false,
                data: data,
                type: "POST",
                success: function(url) {
                    $('#content').summernote("insertImage", url.message);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }

        function deleteImage(image) {
            console.log('delete image');
            $.ajax({
                data: {
                    image: image
                },
                type: "POST",
                url: "{{ url('/admin/news/delete-image') }}",
                cache: false,
                success: function(response) {
                    console.log(response);
                }
            });
        }

    });

    function add() {
        save_method = 'add';
        $('.text-error').empty(); // clear error string
        $('#form')[0].reset(); // reset form on modals
        $('#content').summernote('code', '');
        $('#btnSave').text('Simpan');
        $('.modal-title').text('Tambah'); // Set Title to Bootstrap modal title
        $('#modal_form').modal('show'); // show bootstrap modal
    }

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 
        var url;

        if (save_method == 'add') {
            url = "{{ url('/admin/news/add') }}";
        } else {
            url = "{{ url('/admin/news/update') }}";
        }

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    if (save_method == 'add') {
                        text = 'Data Added Successfully';
                    } else {
                        text = 'Data Updated Successfully';
                    }
                    toastr.success(text);
                    // notification('success', 'Success', text);
                    $('#modal_form').modal('hide');
                    reload_table();
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }

                    if (save_method == 'add') {
                        $('#btnSave').text('Save');
                    } else {
                        $('#btnSave').text('Update');
                    }
                }

                $('#btnSave').attr('disabled', false); //set button enable 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // $('#btnSave').attr('disabled', false); //set button enable 
            }
        });
    }

    function reload_table() {
        table.ajax.reload(null, false); //reload datatable ajax 
    }

    function edit(id) {
        save_method = 'update';
        $('.text-error').empty();
        $('#form')[0].reset(); // reset form on modals

        //Ajax Load data from ajax
        $.ajax({
            url: "{{ url('/admin/news/edit') }}",
            type: "POST",
            data: {
                "id": id,
                "_token": "{{ csrf_token() }}",
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                $('[name="id"]').val(data.id);
                $('[name="title"]').val(data.title);
                $('#content').summernote('code', data.content);

                $('#btnSave').text('Update'); // Set Title to Bootstrap modal title
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Edit'); // Set title to Bootstrap modal title
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    }

    function deletee(id) {
        if (confirm('Ingin menghapus data ?')) {
            // ajax delete data to database
            $.ajax({
                url: "{{ url('/admin/news/delete') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "id": id,
                    "_token": "{{ csrf_token() }}",
                },
                success: function(data) {
                    toastr.success('Berhasil menghapus data');
                    // notification('success', 'Success', 'Berhasil menghapus data');

                    $('#modal_form').modal('hide');
                    reload_table();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error deleting data');
                }
            });

        }
    }

    function toggle(id) {
        // console.log(id);
        $.ajax({
            url: "{{ url('/admin/news/toggle') }}",
            type: "POST",
            data: {
                "id": id,
                "_token": "{{ csrf_token() }}",
            },
            dataType: "JSON",
            success: function(data) {
                if (data.status) //if success close modal and reload ajax table
                {
                    toastr.success(data.message);
                } else {
                    toastr.error(data.message);
                }
                tableImages.ajax.reload(null, false);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
</script>
@endpush