@extends('layouts.app')

@section('content')
    <!-- .page -->
    <div class="page">
        <!-- .page-inner -->
        <div class="page-inner">
            <!-- .page-title-bar -->
            <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active">
                            <a href="/">
                                <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
                        </li>
                    </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                    <h1 class="page-title mr-sm-auto">{{ __('Forum') }}</h1>
                    <!-- .btn-toolbar -->
                    <div class="btn-toolbar">
                        <a href="/forum/create" class="btn btn-primary">{{ __('New Post') }}</a>
                    </div>
                    <!-- /.btn-toolbar -->
                </div>
                <!-- /title and toolbar -->
            </header>
            <!-- /.page-title-bar -->

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- .page-section -->
            <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                    <!-- .card-body -->
                    <div class="card-body">
                        <table id="forum-table" class="table table-responsive-xl">
                            <thead>
                                <tr>
                                    <th>{{ __('Title') }}</th>
                                    <th>{{ __('Author') }}</th>
                                    <th>{{ __('Comments') }}</th>
                                    <th>{{ __('Date') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </section>
                <!-- /.card -->
            </div>
            <!-- /.page-section -->
        </div>
        <!-- /.page-inner -->
    </div>
    <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dataTables.bootstrap.js') }}"></script>
    <script>
    $(function() {
        $('#forum-table').DataTable({
            processing: true,
            serverSide: true,
            dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
            language: {
                info: "{{ __('datatables_info') }}",
                infoEmpty: "{{ __('datatables_infoEmpty') }}",
                infoFiltered: "{{ __('datatables_infoFiltered') }}",
                lengthMenu: "{{ __('datatables_lengthMenu') }}",
                processing: "{{ __('datatables_processing') }}",
                search: "{{ __('datatables_search') }}",
                thousands: "{{ __('datatables_thousands') }}",
                zeroRecords: "{{ __('datatables_zeroRecords') }}",
                paginate: {
                    previous: '<i class="fa fa-lg fa-angle-left"></i>',
                    next: '<i class="fa fa-lg fa-angle-right"></i>'
                }
            },
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
            autoWidth: false,
            ajax: '{!! route('forum.data') !!}',
            deferRender: true,
            order: [[3, 'desc']],
            columns: [
                { data: 'title_display', name: 'forum_posts.title' },
                { data: 'author', name: 'users.name' },
                { data: 'comments_count', name: 'comments_count', searchable: false, orderable: false },
                { data: 'created_display', name: 'created_display', type: 'num', render: { '_': 'display', 'sort': 'timestamp' } }
            ]
        });
    });
    </script>
@endpush