@extends('layouts.app_discussion')

@section('content')


<div class="container">
    <div class="row">
        <div class="col-md-3">
            @include('includes/dashboard/left_menu')
        </div>
        <div class="col-md-9 h-100">
            <div class="wrapper wrapper-content animated fadeInRight" style="min-height: 625px">
                <div class="ibox-content forum-container h-100">
                    <div class="col-lg-12">
                        <div class="forum-title">
                            <h3 class="text-primary"> {{ config('tools.A2') }}</h3>
                            {{ Breadcrumbs::render('tools.maturityDevelopmentPlan.index' ) }}
                            <hr>
                            @foreach( $data as $key=> $list)
                                <div class="row">
                                    <div class="col fw-bold h4">
                                        {{ $list->focus_area }}
                                    </div>
                                </div>
                                @foreach($list->faAccountability as $key_acc=>$accountability)
                                    <div class="mb-4">
                                        <table class="table table-responsive m-0 table-bordered border-secondary">
                                            <tbody>
                                                <tr><th colspan="2" class="h5 text-dark fw-bold header-dev-plan">{{ $key_acc+1 }}. {{ $accountability->accountabilities }}</th></tr>
                                                <tr>
                                                    <td width="50%" class="border-bottom-0 bg-light maturuty-level-description">
                                                        <label class="mb-2">Current Maturity Level:</label><br>
                                                        @if($accountability->personalDevelopmentPlan->current_maturity_level == NULL)
                                                            <a href="#" parent-id="{{ $accountability->personalDevelopmentPlan->id }}" class="current_maturity_level btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                        @else
                                                            <b>{{($accountability->personalDevelopmentPlan->CurrentMaturityLevel) ? $key_acc+1 .'.'.$accountability->personalDevelopmentPlan->CurrentMaturityLevel->maturity_level.'. '.$accountability->personalDevelopmentPlan->CurrentMaturityLevel->maturity_level_text : ''}}</b>
                                                            <a href="#" parent-id="{{ $accountability->personalDevelopmentPlan->id }}" class="current_maturity_level"><i class="fa fa-pencil text-primary"></i></a>
                                                        @endif
                                                    </td>
                                                    <td width="50%" class="border-bottom-0 bg-light maturuty-level-description">
                                                        <label class="mb-2">Maturity Level Aspiration:</label><br>
                                                        @if($accountability->personalDevelopmentPlan->maturity_level_aspiration == NULL)
                                                            <a href="#" parent-id="{{ $accountability->personalDevelopmentPlan->id }}" class="maturity_level_aspiration btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                        @else
                                                            <b>{{($accountability->personalDevelopmentPlan->MaturityLevelAspiration) ? $key_acc+1 .'.'.$accountability->personalDevelopmentPlan->MaturityLevelAspiration->maturity_level.'. '.$accountability->personalDevelopmentPlan->MaturityLevelAspiration->maturity_level_text : ''}}</b>
                                                            <a href="#" parent-id="{{ $accountability->personalDevelopmentPlan->id }}" class="maturity_level_aspiration"><i class="fa fa-pencil text-primary"></i></a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table class="table table-bordered m-0">
                                            <tbody>
                                                                                                <tr>
                                                        <th class="border border-secondary align-middle border-top-0" width="4%">#</th>
                                                        <th class="border border-secondary align-middle border-top-0" width="24%">Action</th>
                                                        <th class="border border-secondary align-middle border-top-0" width="24%">SMART Goal <a href="#" data-bs-trigger="focus" data-toggle="popover" title="SMART Goal" data-bs-html="true" data-bs-content="{{$content}}"><i class="fa fa-question-circle-o text-muted"></i></a></th>
                                                        <th class="border border-secondary align-middle border-top-0" width="24%">How</th>
                                                        <th class="text-center  border-secondary border align-middle border-top-0" width="4%">
                                                            <span data-id="{{ $accountability->personalDevelopmentPlan->id }}" class="fa fa-plus-circle text-primary m-0 h2 cursor-pointer DevelopmentPlanRowForm"></span>
                                                        </th>
                                                </tr>
                                                
                                                @if(count($accountability->personalDevelopmentPlan->personalDevelopmentPlanList) > 0)
                                                    @foreach($accountability->personalDevelopmentPlan->personalDevelopmentPlanList as $list_key=> $devlopment_plan_list)
                                                    <tr>
                                                        <td class="text-center border border-secondary">{{ $list_key+1}}</td>
                                                        <td class=" border border-secondary">{{ $devlopment_plan_list->action }}</td>
                                                        <td class=" border border-secondary">{{ $devlopment_plan_list->smart_goal }}</td>
                                                        <td class=" border border-secondary">
                                                            <b>{{ ($devlopment_plan_list->level1 !== null ? $devlopment_plan_list->level1->level1.':' : '' ) }}</b>
                                                            <p>{{ ($devlopment_plan_list->level2 !== null ? $devlopment_plan_list->level2->level2 : '' ) }}</p>
                                                            <b>Details:</b>
                                                            <p>{{ $devlopment_plan_list->details }}</p>
                                                        </td>

                                                        <td class="text-center border border-secondary" width="4%">
                                                            <span data-id="{{ $devlopment_plan_list->id }}" class="fa fa-pencil text-primary cursor-pointer UpdateDevelopmentPlanRowForm"></span>
                                                            <span data-id="{{ $devlopment_plan_list->id }}" class="fa fa-trash text-primary cursor-pointer deleteDevelopmentPlanRow"></span></td>
                                                    </tr>
                                                    @endforeach
                                                @else
                                                
                                                    <tr><th colspan="5" class="border-top border-0 border-secondary p-0"></th></tr>
                                                @endif
                                            </tbody>
                                        </table>
                                        
                                    </div>
                                @endforeach
                            @endforeach
                        </div>
                    </div>  
                </div>
              </div>                 
          </div>
    </div>
</div>
<!-- Modal -->
<div class="modal" id="maturityLevelModal" tabindex="-1" aria-labelledby="maturityLevelModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal modal-lg">
        <div class="modal-content">
        <div class="modal-body" id="maturityLevelModalBody"></div>
        </div>
    </div>
</div>
@endsection

<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
    var APP_URL  = "{{ url('')}}";
    $(document).ready(function() {
        $('[data-toggle="popover"]').popover();

        function openCurrentMaturityLevelCheckBox(id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{id: id},
                url: APP_URL + "/tools/personal-development-plan/get-current-maturity-level-checkbox",
                type: "POST",
                dataType: 'html',
                success: function(result) {
                    $('#maturityLevelModal').modal('show');
                    $('#maturityLevelModalBody').html(result);
                },
                error:function (response){},
                complete:function(data){
                    
                }
            });
        }

        function openMaturityLevelAspirationCheckBox(id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{id: id},
                url: APP_URL + "/tools/personal-development-plan/get-maturity-level-aspiration-checkbox",
                type: "POST",
                dataType: 'html',
                success: function(result) {
                    $('#maturityLevelModal').modal('show');
                    $('#maturityLevelModalBody').html(result);
                },
                error:function (response){},
                complete:function(data){
                    
                }
            });
        }

        $(document).on("click", ".current_maturity_level", function (e) {
            var id = $(this).attr("parent-id");
            openCurrentMaturityLevelCheckBox(id);
        });

        $(document).on("click", ".maturity_level_aspiration ", function (e) {
            var id = $(this).attr("parent-id");
            openMaturityLevelAspirationCheckBox(id);
        });

        $(document).on("click", "#saveCurrentMaturityLevelBtn", function (e) {
            e.preventDefault();
            let formData =$('#maturityDevelopmentPlan').serialize();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:formData,
                    url: APP_URL + "/tools/personal-development-plan/update-current-maturity-level",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                        location.reload();
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
            });  
        });

        $(document).on("click", "#saveMaturityLevelAspirationBtn", function (e) {
            e.preventDefault();
            let formData =$('#maturityDevelopmentPlan').serialize();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:formData,
                    url: APP_URL + "/tools/personal-development-plan/update-maturity-level-aspiration",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                     location.reload();
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
            });  
        });

        $(document).on("click", ".saveSmartGoalBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            var _this = $(this);
            $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> submit...');
            e.preventDefault();
            var maturity_development_plan_id = $(this).attr("parent-id");
            let smart_goal =$('#smart_goal'+maturity_development_plan_id).val();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:{smart_goal: smart_goal, id: maturity_development_plan_id},
                    url: APP_URL + "/tools/update-smart-goal",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                     location.reload();
                    },
                    error:function (response){
                        $(_this).html('Submit')
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                        $('#'+key+maturity_development_plan_id).addClass('is-invalid');
                        $('#'+key+maturity_development_plan_id).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
            });  
        });

        $(document).on("click", ".DevelopmentPlanRowForm", function (e) {
            var personal_development_plan_id = $(this).attr("data-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:{personal_development_plan_id: personal_development_plan_id},
                    url: APP_URL + "/tools/personal-development-plan/get-development-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                        $('#maturityLevelModal').modal('show');
                        $('#maturityLevelModalBody').html(result);
                    },
                    error:function (response){
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                        $('#'+key+personal_development_plan_id).addClass('is-invalid');
                        $('#'+key+personal_development_plan_id).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
            }); 
           
        });

        $(document).on("click", ".UpdateDevelopmentPlanRowForm", function (e) {
            var _this = $(this);
            e.preventDefault();
            var personal_development_plan_list_id = $(this).attr("data-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:{personal_development_plan_list_id: personal_development_plan_list_id},
                    url: APP_URL + "/tools/personal-development-plan/get-update-development-form",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                        $('#maturityLevelModal').modal('show');
                        $('#maturityLevelModalBody').html(result);
                    },
                    error:function (response){
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                        $('#'+key+personal_development_plan_id).addClass('is-invalid');
                        $('#'+key+personal_development_plan_id).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
            }); 
           
        });


        $(document).on("click", ".addDevelopmentPlanRow", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            var _this = $(this);
            e.preventDefault();
            var personal_development_plan_id = $(this).attr("data-id");
            let formData = $('#personalDevelopmentPlanForm'+personal_development_plan_id).serialize();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:formData,
                    url: APP_URL + "/tools/personal-development-plan/add-development-list",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                        location.reload();
                    },
                    error:function (response){
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                        $('#'+key).addClass('is-invalid');
                        $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
            });  
        });

        $(document).on("click", ".updateDevelopmentPlanRow", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            var _this = $(this);
            e.preventDefault();
            let formData = $('#personalDevelopmentPlanForm').serialize();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:formData,
                    url: APP_URL + "/tools/personal-development-plan/update-development-list",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                        location.reload();
                    },
                    error:function (response){
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                        $('#'+key).addClass('is-invalid');
                        $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
            });  
        });

        $(document).on("click", ".deleteDevelopmentPlanRow", function (e) {
            var _this = $(this);
            e.preventDefault();
            var personal_development_plan_list_id = $(this).attr("data-id");
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:{personal_development_plan_list_id: personal_development_plan_list_id},
                    url: APP_URL + "/tools/personal-development-plan/delete-development-list",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                        location.reload();
                    }
            });  
        });
        

    });
</script>
<style>
      .teal-color {
        color:teal;
    }
    .header-dev-plan{
        background-color:   #d4d4d487   !important;
    } 
    .maturuty-level-description{
        /* background-color: #f1f1f1  !important; */
    }  
</style>