@extends('layouts.main')
@section('page_css')
<style>
i.fa-circle {
    filter: drop-shadow(0px 0px 3px #aaa);
}
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Career Path</h3>
        </div>
        @if ($loggedUserDetails['is_admin'] == 1)
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('careerpath.add.modal') }}')" 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\Shopping\Chart-line1.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">
                        <rect x="0" y="0" width="24" height="24"/>
                        <path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"/>
                        <path d="M8.7295372,14.6839411 C8.35180695,15.0868534 7.71897114,15.1072675 7.31605887,14.7295372 C6.9131466,14.3518069 6.89273254,13.7189711 7.2704628,13.3160589 L11.0204628,9.31605887 C11.3857725,8.92639521 11.9928179,8.89260288 12.3991193,9.23931335 L15.358855,11.7649545 L19.2151172,6.88035571 C19.5573373,6.44687693 20.1861655,6.37289714 20.6196443,6.71511723 C21.0531231,7.05733733 21.1271029,7.68616551 20.7848828,8.11964429 L16.2848828,13.8196443 C15.9333973,14.2648593 15.2823707,14.3288915 14.8508807,13.9606866 L11.8268294,11.3801628 L8.7295372,14.6839411 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                    </g>
                </svg><!--end::Svg Icon-->
            </span>
            Create Career Path</a>
            <!--end::Button-->
        </div>
        @endif
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Career Path</th>
                    <th>Team Name</th>
                    <th>Base Rev Share</th>
                    <th>Achievements</th>
                    <th>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">Career Path</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_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').on('click','.change-status', changeStatusHandler); 
              
            $('body').tooltip({selector: '[data-toggle="tooltip"]'});  
            
        })
        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.ajax.list')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.name + '<i class="fas fa-circle ml-5" style="color: '+full.color+'"></i>'
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.team!=null ? full.team.team_name : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.revenue_share
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            html += `
                            <a href="${getWebUrl('career-path/achivements/'+full.id)}" class="btn btn-light-primary mr-3" data-toggle="tooltip" title="Manage Achievement"><i class="flaticon-medal"></i> Manage</a>
                            `;
                            @if ($loggedUserDetails['is_admin'] == 1)
                            html += `
                            <button onclick="openModalAndShow('${getWebUrl('career-path/copy/single-modal/'+full.id)}')" class="btn btn-light-warning mr-3" data-toggle="tooltip" title="Copy Achievement"><i class="flaticon2-copy"></i> Copy From</button>
                            `;
                            @endif
                            
                            return html;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            @if ($loggedUserDetails['is_admin'] == 1)
                            html += `
                            <button class="btn btn-md btn-light-warning btn-icon btn-circle"  onclick="openModalAndShow('${getWebUrl('career-path/edit-modal/'+full.id)}')" data-toggle="tooltip" title="Edit Career Path"><i class="flaticon-edit-1"></i></button>
                            `;
                            @endif

                            if(full.status == 1){
                               html += `
                                <a href="javascript:" class="btn btn-md btn-light-success btn-icon btn-circle change-status" data-toggle="tooltip" title="Disable" data-id="${full.id}" data-text="This Status will disable after your action!" data-btn="Yes, disable it!" data-toggle="tooltip"><i class="flaticon2-zig-zag-line-sign text-primary"></i></a>
                                `; 
                            }else{
                                html += `
                                <a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle change-status" data-toggle="tooltip" title="Enable" data-id="${full.id}" data-text="This Status will Enable after your action!" data-btn="Yes, Enable it!" data-toggle="tooltip"><i class="flaticon2-zig-zag-line-sign"></i></a>
                                `;
                            }

                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        // $('body').on('change','#copper_team_id',function(){
        //     let team_key = $(this).find(':selected').attr('data-value');            
        //     $('#copper_career_path_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']+"'>"+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>");
                    });
                }
            })

        $('body').on('change','#isCopierShow',function(){
            if($("#isCopierShow").is(':checked')) {
                $('#showCopier').show(200);
            } else {
                $('#showCopier').hide(200);
            }
        })


        function changeStatusHandler() {
            var careerPathId = $(this).attr('data-id');
            var text = $(this).attr('data-text');
            var confirmButtonText = $(this).attr('data-btn');
            Swal.fire({
                title: "Are you sure?",
                text: text,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{route('careerpath.ajax.status.change')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {careerPathId:careerPathId},                    
                        success: function (response) {
                            if(response.status){
                                Swal.fire(
                                    response.title,
                                    response.message,
                                    "success"
                                )
                            }else{
                               toastr.error(response.message); 
                            }
                        },
                        error: function (response) {
                            toastr.error("An error occurred");                                
                        },
                        complete:function(){
                            initializeDatatable();
                        }
                    }); 
                }
            });
        }
        
    </script>
@endsection