@extends('layouts.app')

@section('content')
    <div class="page">
        <div class="page-inner">
            <header class="page-title-bar">
                <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>
                <div class="d-md-flex align-items-md-start">
                    <h1 class="page-title mr-sm-auto">{{ __('Tests Management') }}</h1>
                    <div class="btn-toolbar">
                        <a href="{{ route('tests.create') }}" class="btn btn-primary">{{ __('New Test') }}</a>
                    </div>
                </div>
            </header>

            @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

            <div class="page-section">
                <section class="card card-fluid">
                    <div class="card-body">
                        <table id="tests-table" class="table table-responsive-xl">
                            <thead>
                                <tr>
                                    <th>{{ __('Name') }}</th>
                                    <th>{{ __('Questions') }}</th>
                                    <th>{{ __('Categories') }}</th>
                                    <th>{{ __('Results') }}</th>
                                    <th>{{ __('Status') }}</th>
                                    <th>{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    </div>
@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() {
        $('#tests-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') }}",
                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('tests.data') !!}',
            columns: [
                { data: 'name', name: 'name' },
                { data: 'questions_count', name: 'questions_count', searchable: false },
                { data: 'point_categories_count', name: 'point_categories_count', searchable: false },
                { data: 'results_count', name: 'results_count', searchable: false },
                { data: 'status', name: 'archived' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ]
        });
    });
    </script>
@endpush