@extends ('backend.layouts.app')
@section('title', 'Top News')
@section('content')
    <div class="box box-info">
        <div class="box-header with-border card-header">
            <h3 class="box-title" style="display: block;">Articles Currently Under Top News</h3>

            <span>
                <p id="message"></p>
            </span>
            <div class="box-body">
                <div class="table-responsive data-table-wrapper">
                    <div class="table-responsive data-table-wrapper">
                        <div id="stays-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="dataTables_length" id="stays-table_length">
                            </div>
                            <table id="articles-table" class="table table-condensed table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ trans('labels.backend.articles.table.id') }}</th>
                                        <th>{{ trans('labels.backend.articles.table.tt') }}</th>

                                        <th>Sequence</th>
                                        <th>{{ trans('labels.backend.articles.table.pub') }}</th>
                                        {{-- <th>{{ trans('labels.general.actions') }}</th> --}}
                                        <th>Move</th>
                                    </tr>
                                </thead>

                                <thead class="transparent-bg">
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        {{-- <th></th> --}}
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>


                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="box box-info">
        <div class="box-header with-border card-header">
            <h3 class="box-title" style="display: block;">Recently Published news</h3>
            <div class="box-body">
                <div class="table-responsive data-table-wrapper">
                    <table id="publish-table" class="table table-condensed table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>{{ trans('labels.backend.articles.table.id') }}</th>
                                <th>{{ trans('labels.backend.articles.table.tt') }}</th>
                                <th>{{ trans('labels.backend.articles.table.Author') }}</th>
                                <th>{{ trans('labels.backend.articles.table.cat') }}</th>
                                <th>{{ trans('labels.backend.articles.table.status') }}</th>
                                <th>{{ trans('labels.backend.articles.table.pub') }}</th>
                                <th>{{ trans('labels.general.actions') }}</th>

                            </tr>
                        </thead>
                        <thead class="transparent-bg">
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('after-scripts')
    {{-- For DataTables --}}
    <script src="{{ mix('js/dataTable.js') }}"></script>

    <script>
        //Below written line is short form of writing $(document).ready(function() { })
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var dataTable = $('#publish-table').dataTable({
                processing: true,
                "iDisplayLength": 10,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.articles.getpublishtop') }}',
                    type: 'post',
                },
                columns: [{
                        data: 'article_id',
                        name: '{{ config('module.articles.table') }}.article_id'
                    },
                    {
                        data: 'title',
                        name: '{{ config('module.articles.table') }}.title'
                    },
                    {
                        data: 'authorname',
                        name: '{{ config('module.articles.table') }}.authorname'
                    },
                    {
                        data: 'category_name',
                        name: '{{ config('module.articles.table') }}.category_name'
                    },
                    {
                        data: 'status',
                        name: '{{ config('module.articles.table') }}.status'
                    },
                    {
                        data: 'publish_date',
                        name: 'publish_date'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        searchable: false,
                        sortable: false
                    }

                ],
                order: [
                    [0, "asc"]
                ],
                searchDelay: 500,
                dom: 'lBfrtip',
                buttons: {
                    buttons: [{
                            extend: 'copy',
                            className: 'copyButton',
                            exportOptions: {
                                columns: [0, 1]
                            }
                        },
                        {
                            extend: 'csv',
                            className: 'csvButton',
                            exportOptions: {
                                columns: [0, 1]
                            }
                        },
                        {
                            extend: 'excel',
                            className: 'excelButton',
                            exportOptions: {
                                columns: [0, 1]
                            }
                        },
                        {
                            extend: 'pdf',
                            className: 'pdfButton',
                            exportOptions: {
                                columns: [0, 1]
                            }
                        },
                        {
                            extend: 'print',
                            className: 'printButton',
                            exportOptions: {
                                columns: [0, 1]
                            }
                        }
                    ]
                }
            });
            Backend.DataTableSearch.init(dataTable);
        });
    </script>

@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $.noConflict();
    jQuery(document).ready(function($) {
        function fetch_data() {
            var _token = "{{ csrf_token() }}";
            id = $('#newsletterId').val();
            $.ajax({
                url: "{{ url('admin/articles/fetch_dataf') }}",
                data: {
                    id: id,
                    _token: _token
                },
                dataType: "json",
                type: "post",
                success: function(data) {
                    var html = '';
                    for (var count = 0; count < data.length; count++) {
                        html += '<tr id="view_' + data[count].story_key_id + '">';
                        html += '<td>' + data[count].story_key_id + '</td>';
                        html += '<td>' + data[count].title + '</td>';
                        html += '<td>' + data[count].sequence + '</td>';
                        html += '<td>' + data[count].publish_date + '</td>';
                        // if (data[count].breaking_status == 1) {
                        //     html +=
                        //         '<td style="width: 22%;"><a href="" style="padding: 8px;"><img src="{{ url('') }}/breaking.png" alt="" style="width: 15%;"></a>';
                        // } else {
                        //     html +=
                        //         '<td style="width: 22%;"><button type="button" class="btn-sm btn-primary breaking" id="' +
                        //         data[count].story_key_id + '">Set as Breaking</button>';
                        // }
                        // if (data[count].breaking_status == 2) {
                        //     html += '<button type="button" class="btn-sm btn-primary pinned" id="' +
                        //         data[count].story_key_id +
                        //         '"><img src="{{ url('') }}/pin.png" alt="" style="width: 15%;"></button></td></tr>';
                        // } else {
                        //     html += '<button type="button" class="btn-sm btn-primary pinned" id="' +
                        //         data[count].story_key_id + '">Set as Pinned</button></td></tr>';
                        // }

                        html += '<td><a class="btn btn-flat btn-default moveonbottom" data-id="' +
                            data[count].story_key_id +
                            '" id="moveonbottom"><i class="fa fa-arrow-down" aria-hidden="true"></i></a></td></tr>';

                    }

                    $('#articles-table tbody').html(html);
                }

            });
        }
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $("#articles-table tbody").sortable({
                appendTo: "parent",
                helper: "clone",
                update: function(event, ui) {
                    var data = $(this).sortable('serialize');
                    $.ajax({
                        data: data,
                        type: 'POST',
                        url: '{{ url('/admin/articles/sort/') }}'
                    });
                    fetch_data();
                }
            }).disableSelection();
        });
    });
</script>
<script>
    $(document).ready(function() {
        fetch_data();

        function fetch_data() {
            var _token = "{{ csrf_token() }}";
            id = $('#newsletterId').val();
            $.ajax({
                url: "{{ url('admin/articles/fetch_dataf') }}",
                data: {
                    id: id,
                    _token: _token
                },
                dataType: "json",
                type: "post",
                success: function(data) {
                    var html = '';
                    for (var count = 0; count < data.length; count++) {
                        html += '<tr id="view_' + data[count].story_key_id + '">';
                        html += '<td>' + data[count].story_key_id + '</td>';
                        html += '<td>' + data[count].title + '</td>';
                        html += '<td>' + data[count].sequence + '</td>';
                        html += '<td>' + data[count].publish_date + '</td>';
                        // if (data[count].breaking_status == 1) {
                        //     html +=
                        //         '<td style="width: 22%;"><a class="unpinned" data-toggle="tooltip" title="Reset from Breaking News" data-id="br" id="' +
                        //         data[count].story_key_id +
                        //         '" style="padding: 8px;"><img src="{{ url('') }}/breaking.png" alt="" style="width: 15%;cursor:mouse;"></a>';
                        // } else {
                        //     html +=
                        //         '<td style="width: 22%;"><button type="button" class="btn-sm btn-primary breaking" id="' +
                        //         data[count].story_key_id + '">Set as Breaking </button>';
                        // }
                        // if (data[count].breaking_status == 2) {
                        //     html +=
                        //         '<a class="btn btn-flat btn-default unpinned" data-toggle="tooltip" title="Reset from Pinned News" data-id="pin" id="' +
                        //         data[count].story_key_id +
                        //         '" ><i class="fa fa-thumb-tack"></i></a></td></tr>';
                        // } else {
                        //     html += '<button type="button" class="btn-sm btn-primary pinned" id="' +
                        //         data[count].story_key_id + '">Set as Pinned </button></td>';
                        // }
                        html += '<td><a class="btn btn-flat btn-default moveonbottom" data-id="' +
                            data[count].story_key_id +
                            '" id="moveonbottom"><i class="fa fa-arrow-down" aria-hidden="true"></i></a></td></tr>';
                    }
                    //alert(html);
                    $('#articles-table tbody').html(html);
                }
            });
        }
        var _token = "{{ csrf_token() }}";
        $(document).on('click', '.breaking', function() {
            var _token = $('input[name="_token"]').val();
            var id = $(this).attr("id");
            swal({
                title: "Are you sure?",
                text: "This will remove any article added as breaking news or pinned or having highest priority under top news. Are you sure you want to make this article as breaking news ? ",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes, Do it!",
                confirmButtonColor: "#ec6c62"
            }, function() {
                $.ajax({
                        url: "{{ url('admin/articles/breking_data') }}",
                        method: "POST",
                        data: {
                            type: 'br',
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    })
                    .done(function(data) {
                        swal("Done!",
                            "Article has been successfully added as breaking news.",
                            "success");
                    })
                    .error(function(data) {
                        swal("Oops", "We couldn't connect to the server!", "error");
                    });
            });
        });
        $(document).on('click', '.pinned', function() {
            var _token = $('input[name="_token"]').val();
            var id = $(this).attr("id");
            swal({
                title: "Are you sure?",
                text: "It will remove any article added as breaking news and this article will be displayed under top news having highest priority and with a pinned icon.  Are you sure you want to make this article pinned under top news ?",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes, Do it!",
                confirmButtonColor: "#ec6c62"
            }, function() {
                $.ajax({
                        url: "{{ url('admin/articles/breking_data') }}",
                        method: "POST",
                        data: {
                            type: 'pin',
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    })
                    .done(function(data) {
                        swal("Done!",
                            "Article has been successfully pinned under top news.",
                            "success");
                    })
                    .error(function(data) {
                        swal("Oops", "We couldn't connect to the server!", "error");
                    });
            });
        });
        $(document).on('click', '.unpinned', function() {
            var _token = $('input[name="_token"]').val();
            var id = $(this).attr("id");
            var sid = $(this).attr("data-id");
            if (sid == 'br') {
                var ms = "Are you sure you want to remove this article Breaking news ?";
                var sms = "The article has been successfully removed from Breaking news."
            } else {
                var ms = "Are you sure you want to remove this article  pinned under top news ?";
                var sms =
                    "The article has been successfully removed from pinned under the top news list."
            }
            swal({
                title: "Are you sure?",
                text: ms,
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes, Do it!",
                confirmButtonColor: "#ec6c62"
            }, function() {
                $.ajax({
                        url: "{{ url('admin/articles/removebreking_data') }}",
                        method: "POST",
                        data: {
                            type: sid,
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    })
                    .done(function(data) {
                        swal("Done!", sms, "success");
                    })
                    .error(function(data) {
                        swal("Oops", "We couldn't connect to the server!", "error");
                    });
            });
        });
        $(document).on('click', '.moveontop', function() {
            var _token = $('input[name="_token"]').val();
            var id = $(this).attr("data-id");
            swal({
                title: "Are you sure?",
                text: "Sure to move on top news ?",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes, Do it!",
                confirmButtonColor: "#ec6c62"
            }, function() {
                $.ajax({
                        url: "{{ url('admin/articles/move_data') }}",
                        method: "POST",
                        data: {
                            type: 'pin',
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    })
                    .done(function(data) {
                        swal("Done!", data, "success");
                    })
                    .error(function(data) {
                        swal("Oops", data, "error");
                    });
            });
        });
        // bottom article
        $(document).on('click', '.moveonbottom', function() {
            var _token = $('input[name="_token"]').val();
            var id = $(this).attr("data-id");
            //alert(id);
            swal({
                title: "Are you sure?",
                text: "Sure to remove the article from top news ?",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes, Do it!",
                confirmButtonColor: "#ec6c62"
            }, function() {
                $.ajax({
                        url: "{{ url('admin/articles/move_databottom') }}",
                        method: "POST",
                        data: {
                            type: 'pin',
                            id: id,
                            _token: _token
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    })
                    .done(function(data) {
                        swal("Done!", data, "success");
                    })
                    .error(function(data) {
                        swal("Oops", data, "error");
                    });
            });
        });
    });
</script>