@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">
                                        <label for="title">Search Text :</label><br>
                                        <input type="text" id="tags" class="form-control" data-role="tagsinput"
                                            placeholder="Enter the keyword" />
                                    </div>
                                </div>
                                <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 class="col-md-4">
                                            <button type="button" name="filter" id="filter"
                                                class="btn btn-success">Filter</button>
                                            <button type="button" name="refresh" id="refresh"
                                                class="btn btn-warning">Refresh</button>
                                        </div> --}}
                                    </div>

                                </div>

                                {{-- <div class="col-lg-3">
                                    <label for="title">Categories :</label>

                                    <select name="category_id" id="category_id" class="form-control">
                                        <option value="">Select one</option>
                                        @foreach ($category as $cat)
                                            <option value="{{ $cat->category_id }}">{{ $cat->name }}</option>
                                        @endforeach

                                    </select>
                                </div> --}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-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>Description</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="{{ mix('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(query, category_id, from_date, to_date) {

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '{{ route('admin.articles.fetchPublishedArticles') }}',
                    method: "POST",
                    data: {
                        query: query,
                        category_id: category_id,
                        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>' + data[count].description + '</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 query = $('#tags').val();
                var category_id = $('#category_id').val();
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                if (from_date != '' && to_date != '' && query != '') {
                    load_data(query, category_id, 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>
    <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></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>

@endsection