@extends ('backend.layouts.app')
@section('title', trans('labels.backend.articles.management') . ' | ' . trans('labels.backend.articles.edit'))


@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"
        crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" />
    <style>
        #loading {
            text-align: center;
            background: url('../../img/loader.gif') no-repeat center;
            height: 150px;
        }
    </style>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
    <div class="box box-info">
        <div class="box-header card-header with-border">
            <h3 class="box-title">Search Published Article </h3>
            <div class="box-tools pull-right">

                <div class="clearfix"></div>
            </div>
            <div class="alert alert-success" id="msga" style="display: none;">Article Link Updated Successfully</div>
        </div>
        <div class="box-body">
            <div class="form-group">
                <div class="box-body">
                    <form class="form-horizontal" method="post" id="fetch_article_url" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="col-md-6">
                                    <div class="row input-daterange">
                                        <div class="col-md-4">
                                            <label for="title">From Date :</label>
                                            <input type="text" name="from_date" id="from_date" class="form-control"
                                                placeholder="From Date" />
                                        </div>
                                        <div class="col-md-4">
                                            <label for="title">To Date :</label>
                                            <input type="text" name="to_date" id="to_date" class="form-control"
                                                placeholder="To Date" readonly />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="button" name="search" class="btn btn-primary mt-3" id="search">
                                        <i class="fa fa-search"></i> Search
                                    </button>

                                    <button type="submit" class="btn btn-danger mt-3" onclick="reloadPage();">
                                        <i class="fa fa-refresh"></i> Reset
                                    </button>

                                    <div class="export-excel">
                                        <input type="button" onclick="tableToExcel('dvData', 'W3C Example Table')"
                                            value="Export to Excel" class="btn btn-success" style="float: right;">
                                    </div>
                                </div>
                            </div>


                    </form>
                </div><br>
                <div class="row">

                    <!--                    <div class="wrapper wrapper-content animated fadeInRight">-->

                    <div class="col-md-12">

                        <div class="box-body">
                            <div class="table-responsive data-table-wrapper filter_data" id="dvData"
                                style="height:500px; overflow: scroll;">
                                <div id="loading" style="display:none;"></div>

                                <table class="table table-condensed table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Published At</th>
                                            <th>Title</th>
                                            <th>View Article</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <!--table-responsive-->
                        </div>
                    </div>

                    <!--                    </div>-->
                </div>


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




@endsection
@section('after-scripts')
    <script src="https://storage.googleapis.com/e4m-news-photo/news-photo/cms-js/dataTable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"
        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function() {
            load_data();

            function load_data(from_date, to_date) {

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '{{ route('admin.articles.fetchBreakingArticles') }}',
                    method: "POST",
                    data: {
                        from_date: from_date,
                        to_date: to_date

                    },
                    dataType: "json",
                    beforeSend: function() {
                        $('#loading').show();
                    },
                    success: function(data) {
                        $('#total_records').text(data.length);
                        var html = '';
                        if (data.length > 0) {
                            var i = 1;
                            for (var count = 0; count < data.length; count++) {
                                html += '<tr>';
                                html += '<td>' + i + '</td>';
                                html += '<td>' + data[count].publish_date + '</td>';
                                html += '<td>' + data[count].title + '</td>';

                                html += '<td><a target="_blank" href="' + data[count].url + '">' + data[
                                    count].url + '</a></td></tr>';
                                i++;
                            }

                        } else {
                            html = '<tr><td colspan="4">No Data Found</td></tr>';
                        }
                        $('tbody').html(html);
                    },
                    complete: function() {
                        $('#loading').hide();
                    }
                });
            }

            $('#search').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                if (from_date != '' && to_date != '') {
                    load_data(from_date, to_date);
                } else {
                    alert('All Field is required');
                }


            });
            $('#example').DataTable({
                dom: 'Bfrtip',
                "bFilter": false,
                paging: true,
                pageLength: 10,
                buttons: ["pdf", "print", "excelHtml5", "pdfHtml5"]
            });

        });
    </script>
    <script>
        function reloadPage() {
            location.reload(true);
        }
    </script>
    @verbatim
        <script type="text/javascript">
            var tableToExcel = (function() {
                var uri = 'data:application/vnd.ms-excel;base64,',
                    template =
                    '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                    base64 = function(s) {
                        return window.btoa(unescape(encodeURIComponent(s)))
                    },
                    format = function(s, c) {
                        return s.replace(/{(\w+)}/g, function(m, p) {
                            return c[p];
                        })
                    }
                return function(table, name) {
                    if (!table.nodeType)
                        table = document.getElementById(table)
                    var ctx = {
                        worksheet: name || 'Worksheet',
                        table: table.innerHTML
                    }
                    window.location.href = uri + base64(format(template, ctx))
                }
            })()
        </script>
    @endverbatim


@endsection