@extends ('backend.layouts.app')

@section('title', trans('labels.backend.authors.management'))

@section('page-header')
    <h1>Author Profile Management</h1>
@endsection

@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <div class="box-tools pull-right">

                <div class="row user-menu-container square">
                    <div class="col-md-7 user-details">
                        <div class="row coralbg white">
                            <div class="col-md-6 no-pad">
                                <div class="user-pad">
                                    <input type="hidden" name="newsletter" id="newsletter" value="{{ $author->id }}">
                                    <h5>Welcome, {{ $author->name }}</h5>
                                    <h6 class="white"><i class="fa fa-check-circle-o"></i> {{ $author->designation }}</h6>
                                    <h4 class="white"><i class="fa fa-twitter"></i> {{ $author->twitter }}</h4>
                                    <h6 class="white"><i class="fa fa-envelope"></i> {{ $author->email }}</h6>
                                    <h4 class="white"><i class="fa fa-phone"></i> {{ $author->mobile }}</h4>
                                    <a
                                        href="{{ Config::get('constant.SiteCmsurl') }}/admin/authors/{{ $author->id }}/edit"><button
                                            type="button" class="btn btn-labeled btn-info">
                                            <span class="btn-label"><i class="fa fa-pencil"></i></span>Edit</button></a>
                                </div>
                            </div>
                            <div class="col-md-6 no-pad">
                                <div class="user-image">
                                    <img src="{{ Config::get('constant.SiteCmsurlalbum') }}{{ $author->photo }}"
                                        class="img-responsive thumbnail">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-5 user-menu user-pad">
                        <div class="user-menu-content active">
                            <h3>
                                Bio
                            </h3>
                            <p class="text-justify">{{ $author->bio }}</p>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div><!--box-header with-border-->

    <div class="box-body">
        <div class="box-info">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-2">Total Records - <b><span id="total_records"></span></b></div>
                        <div class="col-md-5">
                            <div class="input-group1 input-daterange" style="display: table;">
                                <div class="input-group-addon">From</div>
                                <input type="text" name="from_date" id="from_date" readonly class="form-control"
                                    style="background-color: #ffffff" />
                                <div class="input-group-addon">to</div>
                                <input type="text" name="to_date" id="to_date" readonly class="form-control"
                                    style="background-color: #ffffff" />
                            </div>
                        </div>
                        <div class="col-md-5">
                            <button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Filter</button>
                            <button type="button" name="refresh" id="refresh"
                                class="btn btn-warning btn-sm">Refresh</button>
                            <input type="button" id="btnExport" onclick="exportTableToExcel('example', 'reporter_report')"
                                class="btn btn-info btn-sm" value=" Export Table data into Excel " />
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive" id="dvData">
                        <table id="example" class="display nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Article Id</th>
                                    <th>Title</th>
                                    <th>Publish Date</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        {{ csrf_field() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('after-scripts')
    <script src="{{ mix('js/dataTable.js') }}"></script>





    <script>
        $(document).ready(function() {
            var _token = $('input[name="_token"]').val();
            fetch_data();

            function fetch_data(from_date = '', to_date = '') {
                var _token = $('input[name="_token"]').val();
                id = $('#newsletter').val();
                $.ajax({
                    url: "{{ url('admin/authors/viewstoryfilter') }}",
                    type: "post",
                    data: {
                        id: id,
                        from_date: from_date,
                        to_date: to_date,
                        _token: _token
                    },
                    dataType: "json",
                    success: function(data) {
                        var output = '';
                        $('#total_records').text(data.length);
                        for (var count = 0; count < data.length; count++) {
                            output += '<tr>';
                            output += '<td>' + data[count].article_id + '</td>';
                            output += '<td><a href="' + data[count].url + '" target="_blank">' + data[
                                count].title + '</td>';
                            output += '<td>' + data[count].publish_date + '</td></tr>';
                        }
                        $('tbody').html(output);
                        $('#example').DataTable();
                    }
                })
            }

            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                if (from_date != '' && to_date != '') {
                    fetch_data(from_date, to_date);
                } else {
                    alert('Both Date is required');
                }
            });

            $('#refresh').click(function() {
                $('#from_date').val('');
                $('#to_date').val('');
                fetch_data();
            });


        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            var $btnSets = $('#responsive'),
                $btnLinks = $btnSets.find('a');

            $btnLinks.click(function(e) {
                e.preventDefault();
                $(this).siblings('a.active').removeClass("active");
                $(this).addClass("active");
                var index = $(this).index();
                $("div.user-menu>div.user-menu-content").removeClass("active");
                $("div.user-menu>div.user-menu-content").eq(index).addClass("active");
            });
        });

        $(document).ready(function() {
            $("[rel='tooltip']").tooltip();

            $('.view').hover(
                function() {
                    $(this).find('.caption').slideDown(250); //.fadeIn(250)
                },
                function() {
                    $(this).find('.caption').slideUp(250); //.fadeOut(205)
                }
            );
        });
    </script>
@endsection