@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 {
            display: none;
            text-align: center;
            background: url('https://cms.e4mtest.com/img/loader.gif') no-repeat center;
            height: 150px;
            width: 100%;
            position: absolute;
            z-index: 9999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </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 by Keywords</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-lg-3">
                                    <label for="title">Keywords :</label>
                                    <select name="special" id="special" class="form-control">
                                        <option value="">Select one</option>
                                        @foreach ($keywords as $auth)
                                            <option value="{{ $auth->name }}">{{ $auth->name }}</option>
                                        @endforeach

                                    </select>
                                </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>
                                </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 id="loading" style="display:none;"></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="box-body">
                            <div class="table-responsive data-table-wrapper filter_data" id="dvData"
                                style="height:600px; overflow: scroll;">
                                <h4>Total Records: <span id="total_records"></span></h4>
                                <table class="table table-condensed table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Article Id</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>




@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(special, from_date, to_date) {
                $('#loading').show();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '{{ route('admin.articles.fetchPublishedArticlesByKeywords') }}',
                    method: "POST",
                    data: {
                        special: special,
                        from_date: from_date,
                        to_date: to_date
                    },
                    dataType: "json",
                    beforeSend: function() {
                        console.log('Before Send Triggered'); // Debugging
                        $('#loading').show(); // Ensure the loader is shown
                    },
                    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].article_id + '</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() {
                        setTimeout(function() {
                            $('#loading').hide(); // Hide loader after delay
                        }, 1000); // 1-second delay
                    },
                });
            }

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

                if (from_date != '' && to_date != '' && query != '') {
                    load_data(special, from_date, to_date);
                } else {
                    alert('All Fields are 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