@extends('admin/course-management/course-details/index', ['withoutCard' => true])

@section('main-content-tab')
<div class="card mb-6">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h1 class="fs-18px fw-500 mb-0">Career Insight Item List</h1>
        <a href="{{route('career-insight.create', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}"
            class="btn btn--primary rounded-btn text-cs-gray" style="background: rgba(117,117,117,0.1);">
            <i class="fa fa-pen"></i> Add Career Insight Item
        </a>
    </div>
    <div class="card-body faculty-table-card">
        <div class="table-responsive">
            <table class="table table-row-bordered data-table">
                <thead>
                    <tr>
                        <th class="text-center">SL.</th>
                        <th class="text-center">Related Role</th>
                        <th class="text-center">Job Satisfaction (0 to 5)</th>
                        <th class="text-center">Average Salary</th>
                        <th class="text-center">Jobs In BD</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-bold">

                </tbody>
            </table>
        </div>
    </div>
</div>
@include('admin.course-management.course-details.career-insight.sectionDescription')
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
    <style>
        a.badge.text-capitalize:hover{
            color: #fff;
        }
        .note-editor.note-frame .note-editing-area{
          text-align: left;
        }
    </style>
@endsection


@section('extra-extra-script')
    @section('extra-sub-script')
        @show
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>
    <script src="{{ asset('summernote/summernote.min.js') }}"></script>
    <script type="text/javascript">
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting:[],
            lengthMenu: [ [ 10, 25, 50, 100], [ 10, 25, 50, 100] ],
            ajax: "{{ route('career-insight.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}?type=table",
            dom: 'Blfrtip',
            buttons: [
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0,1,2,3,4,5] // Column index which needs to export
                    }
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0,1,2,3,4,5] // Column index which needs to export
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0,1,2,3,4,5] // Column index which needs to export
                    }
                }
            ],
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'related_role', name: 'related_role'},
                { data: 'job_satisfaction', name: 'job_satisfaction'},
                { data: 'average_salary', name: 'average_salary'},
                { data: 'jobs_in_bd', name: 'jobs_in_bd'},
                { data: 'status', name: 'status'},
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
        });

    });
    </script>

    <script>
        function editSectionFunction(){
            $(".print-error-msg").css('display','none');
            document.getElementById("sectionForm").reset();
            return true;
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
          $('.summernote').summernote({
            height: 200,
            popover: {
                image: [],
                link: [],
                air: []
            }
          });
        });
    </script>
@endsection