@section('title', 'AUMDC Medical Research – Explore Innovation in Health')
@section('description', 'AUMDC Medical Research inspires future minds to explore, question & discover. Apply now at Abu Umara Medical & Dental College to start your research path.')
@section('keywords', 'AUMDC Medical Research, AUMDC clinical research publications, Student-faculty research at AUMDC')
@section('tags', 'AUMDC Medical Research, AUMDC clinical research publications, Student-faculty research at AUMDC')
@extends('front.layouts.app')
@push('head-scripts')
    <style>
        .form-control {
            height: 20px;
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 6px 12px;
            margin: 1px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            color: #333;
            cursor: pointer;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
        .dataTables_wrapper .dataTables_paginate .paginate_button.next {
            margin-right: 0.5px;
            margin-left: 0.5px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 6px 12px;
            margin: 1px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            color: #333;
            cursor: pointer;
        }


        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #f2f2f2;
            color: #333;
        }

    </style>
@endpush

@section('content')
    <!-- Start Page Banner Area -->
    <div class="research-banner-area bg-1 pt-100">
        <div class="container">
            <div class="page-banner-content ">
                <h2>Researches</h2>
                <ul>
                    <li>
                        <a href="{{ route('main') }}">
                            Home
                        </a>
                    </li>
                    <li>
                        <span>Researches</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Banner Area -->

    <div class="container my-5">
        <div class="row">
            <div class="col-12">
                <div class="table-responsive research-front">
                    <table id="indextable" class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                        <thead class="table" style="background-color: #da0808; color: white">
                        <th>#</th>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Journal</th>
                        <th>Date</th>
                        <th>Author</th>
                        <th>Actions</th>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript" src="{{ asset('admin/datatable/datatables.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Datatable
            $('#indextable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": "{{ route('get.researchs') }}",
                },
                columns: [
                    { data: 'id', orderable: false },
                    { data: 'title' },
                    { data: 'department_id' },
                    { data: 'journal' },
                    { data: 'year' },
                    { data: 'author' },
                    { data: null },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '100px',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            let detail = "{{ route('research.details', ':id') }}";
                            detail = detail.replace(':id', row.id);
                            return '<div class="d-flex">' +
                                '<a class="me-1" href="' + detail + '"><span class="badge text-light" style="background-color: #da0808;">Read More</span></a>' +
                                '</div>';
                        }
                    }
                ]
            });
        });

        function selectRange() {
            $('.dataTable').DataTable().ajax.reload()
        }
    </script>
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
@endpush