@extends('layout')
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Komentar Masuk</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                                <li class="breadcrumb-item active">Daftar Daftar Komentar Masuk</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title" style="float: left;">Daftar Komentar</h4>
                            {{--                            <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-success waves-effect waves-light" style="float: right;">Filter</button>--}}
                        </div>
                        <div class="card-body">
                            <table id="datatable-category-bisnis" class="table table-bordered dt-responsive "
                                   style="min-width: 100%;">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Nama</th>
                                    <th>Email</th>
                                    <th>Artikel</th>
                                    <th>Komentar</th>
                                    <th style="width: 100px">Action</th>
                                </tr>
                                </thead>


                                <tbody>

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
    <!-- sample modal content -->
    <div id="myModal" class="modal bs-example-modal-center" tabindex="-1" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myModalLabel">Detail Komentar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="judul" ><a href="">Kalau Aplikasi PeduliLindungi Bocor, Pemerintah Bertanggung Jawab</a></p>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-3 col-form-label">Nama</label>
                        <div class="col-md-9">
                            <input class="form-control" readonly id="name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-3 col-form-label">Email</label>
                        <div class="col-md-9">
                            <input class="form-control" readonly id="email">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-3 col-form-label">Komentar</label>
                        <div class="col-md-9">
                            <textarea readonly class="form-control" id="message" rows="7"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
{{--                    <button onclick="filter()" type="button" class="btn btn-primary waves-effect waves-light">--}}
{{--                        Tampilkan--}}
{{--                    </button>--}}
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        function filter() {
            $("#myModal").modal('hide');
            $('#datatable-category-bisnis').DataTable().ajax.reload()
        }
        var dt;
        $(document).ready(function (e) {
            dt = $('#datatable-category-bisnis').DataTable({
                "ordering": false,
                "pageLength": 10,
                "serverSide": true,
                "processing": true,
                "order": [[0, "asc"]],
                "ajax": {
                    url: '{{url('/comment/list')}}',
                    type: 'POST',
                    "data": function (d) {
                        d._token = "{{ csrf_token() }}";
                        d.is_answered = $("#filterAnswer").val();
                        d.status = $("#filterStatus").val();
                    },
                    beforeSend: function () {
                        // Here, manually add the loading message.
                        $('#tableTransaction > tbody').html(
                            '<tr class="odd">' +
                            '<td valign="top" colspan="2" class="dataTables_empty">Loading&hellip;</td>' +
                            '</tr>'
                        );
                    }
                },

                // "scrollX": true,
                // "scrollCollapse": true,
                "paging": true,
                "columns": [
                    {
                        "data": "id", render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {"data": "name"},
                    {"data": "email"},
                    {
                        "data": "title",
                        render: function (data, type, row, meta) {
                            return `<a target="_blank" href="` + baseUrlFront + `blog/` + row.link + `" >` + data + `</a>`;
                        },
                    },
                    {
                        "data": "text",
                        render: function (data, type, row, meta) {
                            return `<p class="column-elipsis" >` + data + `</p>`;
                        },
                    },
                    {
                        "data": "id",
                        render: function (data, type, row, meta) {
                            var cnt  = `<button type="button" class="detail-comment btn btn-sm btn-success waves-effect waves-light">
                        <i class="mdi mdi-eye-circle d-block font-size-16"></i></button>`;
                            if (row.is_visible == 1){
                                cnt += `<a style="margin-left: 2px;" onclick="return confirm('Apakah anda yakin untuk tidak menampilkan komentar ini?');" href="`+baseUrl+'/comment/disable/'+row.id+`" type="button" class="btn btn-sm btn-danger waves-effect waves-light">
                                      <i class="mdi mdi-chat-remove-outline d-block font-size-16"></i>
                                    </a>`;
                            }else  if (row.is_visible == 0){
                                cnt += `<a style="margin-left: 2px;" onclick="return confirm('Apakah anda yakin untuk menampilkan komentar ini?');" href="`+baseUrl+'/comment/enable/'+row.id+`" type="button" class="btn btn-sm btn-primary waves-effect waves-light">
                                      <i class="mdi mdi-chat-plus-outline d-block font-size-16"></i>
                                    </a>`;
                            }

                            return cnt;
                        },
                    },



                ]

            });
        });
        $('#datatable-category-bisnis tbody').on( 'click', 'tr td button.detail-comment', function () {
            var tr = $(this).closest('tr');
            var row = dt.row( tr );
            var rowData = row.data();
            $("#judul").html( `<a target="_blank" href="` + baseUrlFront + `blog/` + rowData.link + `" >` + rowData.title + `</a>`);
            $("#name").val(rowData.name);
            $("#email").val(rowData.email);
            $("#message").val(rowData.text);
            $("#myModal").modal('show');
        });
    </script>
@endsection