@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-medal text-primary"></i>
            </span>
            <h3 class="card-label">{{$career_path->name}} 's <small class="text-warning">Achievements for <span class="text-info font-weight-bold">{{$career_path->team->team_name}}</span> Team</small></h3>
        </div>
        @if ($loggedUserDetails['is_admin'] == 1)
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="{{route('careerpath.achivements.create',[$career_path->id])}}" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo7\dist/../src/media/svg/icons\General\Star.svg-->
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"/>
                    </g>
                </svg><!--end::Svg Icon-->
            </span>
            Create Achievement</a>
            <!--end::Button-->
            <button onclick="openModalAndShow('{{route('careerpath.copy.single.modal',[$career_path->id])}}')" class="btn btn-light-warning ml-3" data-toggle="tooltip" title="Copy From Achievement"><i class="flaticon2-copy"></i> Copy From</button>
            @if ($career_path->careerPathNotificationAchievement->count() > 0)
            <button onclick="openModalAndShow('{{route('careerpath.copyto.single.modal',[$career_path->id])}}')" class="btn btn-light-success ml-3" data-toggle="tooltip" title="Copy To Achievement"><i class="flaticon2-copy"></i> Copy To</button>
            @endif
        </div>
        @endif
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Achievement</th>    
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </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">Achievements</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="{{route('careerpath.list')}}" class="text-muted">Career Path</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="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        var ajax_datatable_list = null;
        var tableName = $('#datatable');
        let teams;
        $(document).ready(function(){
            initializeDatatable(); 
            @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"]'});  

            $('body').on('click','.btn-delete',function(){
                let achivement_id = $(this).data('aid');
                Swal.fire({
                    title: "Are you sure?",
                    text: "Delete Achievement! You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel",
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url : "{{route('careerpath.achivements.delete')}}",
                            type : 'delete',
                            dataType : "json",
                            data : {achivement_id:achivement_id},
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Deleted!",
                                        "Career Achievement has been deleted.",
                                        "success"
                                    )
                                }                                
                            },
                            error: function (response) {
                                toastr.error(response.message);
                            },
                            complete:function(){                                
                                initializeDatatable()
                            }
                        });
                        
                    }
                });
            })

            $('body').on('change','#copper_to_team_id',function(){
                let team_key = $(this).find(':selected').attr('data-value');            
                $('#copper_to_career_path_notification_id').find('option').remove();
                if(team_key !== undefined){
                    let careerPaths = teams[team_key]['career_paths'];                                        
                    $.each(careerPaths, function (key, careerPath) {
                        $("#copper_to_career_path_notification_id").append("<option value='"+careerPath['id']+"'>"+careerPath['name']+"</option>");
                    });
                }
            })

            $('body').on('change','#copper_team_id',function(){
                let team_key = $(this).find(':selected').attr('data-value');            
                $('#copper_career_path_notification_id').find('option').remove();
                $('#copper_career_path_achievement_notification_id').find('option').remove();
                if(team_key !== undefined){
                    let careerPaths = teams[team_key]['career_paths'];                                        
                    $.each(careerPaths, function (key, careerPath) {
                        $("#copper_career_path_notification_id").append("<option value='"+careerPath['id']+"' data-value='"+key+"'>"+careerPath['name']+"</option>");
                    });
                    let achievements = (teams[team_key]['career_paths'].lenght === 0 && teams[team_key]['career_paths'][0]['career_path_notification_achievement'].lenght) ? [] : teams[team_key]['career_paths'][0]['career_path_notification_achievement'];  
                    $("#copper_career_path_achievement_notification_id").append("<option value='0'>Select All Achievements</option>");
                    $.each(achievements, function (key, achievement) {
                        $("#copper_career_path_achievement_notification_id").append("<option value='"+achievement['id']+"'>"+achievement['name']+"</option>");
                    });
                }
            })

            $('body').on('change','#copper_career_path_notification_id',function(){
                let team_key = $('#copper_team_id').find(':selected').attr('data-value');  
                let careerPathKey = $(this).find(':selected').attr('data-value'); 
                $('#copper_career_path_achievement_notification_id').find('option').remove();                
                if(careerPathKey !== undefined && team_key !== undefined){
                    let achievements = teams[team_key]['career_paths'][careerPathKey]['career_path_notification_achievement']; 
                    $("#copper_career_path_achievement_notification_id").append("<option value='0'>Select All Achievements</option>");
                    $.each(achievements, function (key, achievement) {
                        $("#copper_career_path_achievement_notification_id").append("<option value='"+achievement['id']+"'>"+achievement['name']+"</option>");
                    });
                }
            })
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = tableName.DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('careerpath.achivements.ajax.list',[$career_path->id])}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.name!=null ? full.name : '';
                        }
                    },      
                                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            @if ($loggedUserDetails['is_admin'] == 1)
                                html += `<div class="float-right">`;
                                html += `
                                <a class="btn btn-md btn-light-warning btn-icon btn-circle mr-2"  href="${getWebUrl('career-path/achivements/edit/'+full.career_path_notification_id+'/'+full.id)}" data-toggle="tooltip" title="Edit Achievement"><i class="flaticon-edit-1"></i></a>
                                `;
                                html += `
                                <button class="btn btn-md btn-light-success btn-icon btn-circle mr-2" onclick="openModalAndShow('${getWebUrl('career-path/copy-to/single-achivement-modal/'+full.id)}')" href="javascript:;" data-toggle="tooltip" title="Copy Achievement To"><i class="flaticon2-copy"></i></button>
                                `;
                                html += `
                                <a class="btn btn-md btn-light-danger btn-icon btn-circle btn-delete mr-2" data-aid="${full.id}" href="javascript:;" data-toggle="tooltip" title="Delete Achievement"><i class="flaticon-delete"></i></a>
                                `;                            
                                html += `</div>`;
                            @endif
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }
        
        
    </script>
@endsection