@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-statistics text-primary"></i>
            </span>
            <h3 class="card-label">Manage Achivements <small>of {{$profile->profile_first_name}} {{$profile->profile_last_name}}({{$profile->profile_email}})</small></h3>
        </div>
        
    </div>    
    <div class="card-body">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            @foreach($careerPaths as $key=>$careerPath)
            <li class="nav-item">
                <a class="nav-link {{($key==0) ? 'active' : '' }}" id="active-tab" data-toggle="tab" href="#tab__{{$careerPath->id}}">
                    <span class="nav-text">{{$careerPath->careerPath->name}}</span>
                </a>
            </li>
            @endforeach
        </ul>
        <div class="tab-content mt-5" id="myTabContent">
            @foreach($careerPaths as $key=>$careerPath)
            <div class="tab-pane fade {{($key==0) ? 'show active' : '' }}" id="tab__{{$careerPath->id}}" role="tabpanel" aria-labelledby="active-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable careerPath" >
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Is Submit ?</th>
                            <th>Is Completed ?</th>
                            <th>Correct (%)</th>
                            <th>Submited Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($careerPath->careerPath->careerPathNotificationAchievement as $achievement)
                        <tr>
                            <td>{{$achievement->name}}</td>
                            <td>{!! ($achievement->submit_status == 1) ? '<p class="text-success font-weight-normal">Submitted</p>' : '<p class="text-danger font-weight-normal">Not Submitted</p>' !!}</td>
                            <td>{!! ($achievement->submit_status == 1) ? (($achievement->complete_status == 1 && $achievement->need_admin_res == 0) ? '<p class="text-success font-weight-normal">Completed</p>' : (($achievement->complete_status == 0 && $achievement->need_admin_res == 0) ? '<p class="text-danger font-weight-normal">Rejected</p>' : '<p class="text-warning font-weight-normal">Pending</p>')) : '' !!}</td>
                            <td>{{($achievement->submit_status == 1) ? '('.$achievement->score.'/'.$achievement->total_question.') '. $achievement->percentage .'%' : ''}}</td>
                            <td>{{ ($achievement->submit_status == 1) ? date('m/d/Y',strtotime($achievement->submit_date)): ''}}</td>
                            <td><a onclick="openModalAndShow('{{route('profile.career_path.update.modal',['id' =>$achievement->id,'profile_id'=>$achievement->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></td>
                        </tr>
                        @endforeach  
                    </tbody>
                </table>
                <!--end: Datatable--> 
            </div>
            @endforeach            
        </div>
    </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">Manage Achivements of {{$profile->profile_first_name}} {{$profile->profile_last_name}}</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="{{$previous_url}}" class="text-muted">Profile</a>
                    </li>
                    <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="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        $(document).ready(function(){
          $('table.careerPath').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': false,
          });
           
           $('body').tooltip({selector: '[data-toggle="tooltip"]'});
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif

            $('body').on('focus','[data-scroll="true"]',function() {
                var el = $(this);

                KTUtil.scrollInit(this, {
                    mobileNativeScroll: true,
                    handleWindowResize: true,
                    rememberPosition: (el.data('remember-position') == 'true' ? true : false)
                });
            })
        })

        

        function enableProfileHandler() {
            var profileId = $(this).attr('data-id');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This Profile will Enable after your action!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Enable it!",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('profile.ajax.status.change')}}",
                            type: 'get',
                            dataType: 'json',
                            data: {profileId:profileId},                    
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Enable!",
                                        response.message,
                                        "success"
                                    )
                                }else{
                                   toastr.error(response.message); 
                                }
                            },
                            error: function (response) {
                                toastr.error("An error occurred");                                
                            },
                            complete:function(){
                                initializeDatatable();
                            }
                        }); 
                    }
                });
        }
    </script>
@endsection