@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">      
        
    </div>
    <div class="card-body">   
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="active-tab" data-toggle="tab" href="#active">
                    <span class="nav-text">Active</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="archive-tab" data-toggle="tab" href="#archive">
                    <span class="nav-text">Archive</span>
                </a>
            </li>
        </ul>
        <div class="tab-content mt-5" id="myTabContent">
            <div class="tab-pane fade show active" id="active" role="tabpanel" aria-labelledby="active-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable" id="datatable_pending">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Team Name</th>
                            <th>Name</th>
                            <th>Correct (%)</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
                <!--end: Datatable-->
            </div>
			<div class="tab-pane fade" id="archive" role="tabpanel" aria-labelledby="archive-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable" id="datatable_archive">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Team Name</th>
                            <th>Name</th>
                            <th>Correct (%)</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
                <!--end: Datatable-->
            </div>
        </div>
    </div>
    <div class="card-body">
        
    </div>
    <div class="card-body">
        
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">TT Progress Summary</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                {{-- <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul> --}}
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        var ajax_datatable_pending_list = null;
        var ajax_datatable_archive_list = null;
        var tableNamePending = $('#datatable_pending');
        var tableNameArchive = $('#datatable_archive');
        $(document).ready(function(){
            initializeDatatablePending();
            initializeDatatableArchive(); 
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 
              
            $('body').tooltip({selector: '[data-toggle="tooltip"]'});  
            
        })
        function initializeDatatablePending() {
            if (ajax_datatable_pending_list) {
                ajax_datatable_pending_list.destroy();
            }

            ajax_datatable_pending_list = tableNamePending.DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('careerpath.profile.path.pending.ajax')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.career_path_notification_achievement!=null ? full.career_path_notification_achievement.name : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile!=null ? (full.profile.profile_team!=null ? full.profile.profile_team.team_name : '') : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile!=null ? (full.profile.profile_first_name+' '+full.profile.profile_last_name) : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.career_path_notification_achievement!=null ? '(' + full.career_path_notification_achievement.totalCorrect +'/'+ full.career_path_notification_achievement.totalQuestion +') '+ full.career_path_notification_achievement.correctPercentage+'%' : 0;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            if(full.career_path_notification_achievement!=null){
                                html += `
                            <a onclick="openModalAndShow('${getWebUrl('profiles/career-path-update-modal?id='+full.career_path_notification_achievement_id+'&profile_id='+full.profile_id)}')" href="javascript:;" class="btn btn-md btn-light-warning btn-icon btn-circle" data-toggle="tooltip" title="Manage Career"><i class="flaticon-statistics"></i></a>
                            `;
                            }
                            
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_pending_list;
        }
        function initializeDatatableArchive() {
            if (ajax_datatable_archive_list) {
                ajax_datatable_archive_list.destroy();
            }

            ajax_datatable_archive_list = tableNameArchive.DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('careerpath.profile.path.archive.ajax')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.career_path_notification_achievement!=null ? full.career_path_notification_achievement.name : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile!=null ? (full.profile.profile_team!=null ? full.profile.profile_team.team_name : '') : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile!=null ? (full.profile.profile_first_name+' '+full.profile.profile_last_name) : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.career_path_notification_achievement!=null ? '(' + full.career_path_notification_achievement.totalCorrect +'/'+ full.career_path_notification_achievement.totalQuestion +') '+ full.career_path_notification_achievement.correctPercentage+'%' : 0;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            if(full.career_path_notification_achievement!=null){
                                html += `
                            <a onclick="openModalAndShow('${getWebUrl('profiles/career-path-update-modal?id='+full.career_path_notification_achievement_id+'&profile_id='+full.profile_id)}')" href="javascript:;" class="btn btn-md btn-light-warning btn-icon btn-circle" data-toggle="tooltip" title="Manage Career"><i class="flaticon-statistics"></i></a>
                            `;
                            }
                            
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_archive_list;
        }
        
    </script>
@endsection