@extends('admin.index')
@section('title', Helper::getSiteTitle('News Articles'))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">News Articles</li>
                </ol>
            </div>
            <h4 class="page-title">News Articles</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-blue border-blue border">
                        <i class="fe-users font-22 avatar-title text-blue"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span data-plugin="counterup">{{ $total }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Total Articles">Total Articles</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                        <i class="fe-user-check font-22 avatar-title text-success"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="mt-1 text-dark"><span data-plugin="counterup">{{ $active }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Active Articles">Active Articles</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-4">
        <div class="widget-rounded-circle card-box">
            <div class="row">
                <div class="col-6">
                    <div class="avatar-lg rounded-circle bg-soft-danger border-danger border">
                        <i class="fe-user-x font-22 avatar-title text-danger"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="text-right">
                        <h3 class="text-dark mt-1"><span data-plugin="counterup">{{ $inactive }}</span></h3>
                        <p class="text-muted mb-1 text-truncate" title="Inactive Articles">Inactive Articles</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card-box">
            <button class="btn btn-danger waves-effect waves-light float-right ml-5 d-none remove-all-button">
                <span class="btn-label"><i class="mdi mdi-delete"></i></span>
                {{ __('Remove') }}
            </button>
            <a href="{{ route('admin-create-article') }}" class="btn btn-success waves-effect waves-light float-right">
                <span class="btn-label"><i class="fas fa-plus"></i></span>
                {{ __('Create New Article') }}
            </a>
            <h4 class="header-title mb-4">News Articles</h4>
            {!! Helper::getDatatables(['Image', __('Title'), __('Tags'), __('Status'), __('Created At'), __('Action')], 1) !!}
        </div>
    </div>
</div>
@endsection

@section('js-lib')
<script src="{{ asset('admin/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('admin/libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('admin/libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('admin/libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('admin/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('admin/libs/select2/js/select2.min.js') }}"></script>
@endsection

@section('css-lib')
<meta name="remove-url" content="{{ route('admin-remove-article') }}">
<meta name="class-to-open" content='articles'>
<link href="{{ asset('admin/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endsection

@section('js')
<script type="text/javascript">
    function createTable()
    {
        table = $('.datatable').DataTable({
            language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},
            drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollX": false,
            "pageLength": 25,
            "language": {
                "emptyTable": "No article available"
            },
            "order": [[0, "desc"]],
            "ajax":
            {
                url: "{{ route('admin-news-articles') }}",
                data: function ( d ) {},
                beforeSend: function(jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown){},
                complete: function(jqXHR) {}
            },
            createdRow: function( row, full, dataIndex ) {

                if (full.active == 0) 
                {
                    $( row ).addClass('alert alert-danger');
                }
            },
            "columnDefs": [
                { className: "text-center", "targets": [ 3 ] },
                { className: "text-center", "targets": [ 4 ] },
                { className: "text-center", "targets": [ 5 ] },
                { className: "text-right", "targets": [ 6 ] },
            ],
            "columns":[
                {
                    sortable: false,
                    name: "id",
                    "render": function ( data, type, full, meta ) {

                        return '<div class="checkbox checkbox-single"><input type="checkbox" class="select-item-checkbox" value="'+ full.id +'"><label></label></div>';
                    }
                },
                { "data": "image", "name":"id" },
                { "data": "title", "name":"id" },
                { "data": "tags", "name":"id", "sortable": false },
                { "data": "status", "name":"id", "sortable": false },
                { "data": "created_at", "name":"id", "sortable": false },
                { "data": "actions", "name":"id", "sortable": false },
            ] 
        });
    }
</script>
@endsection