@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">HR Functional maturity development roadmap and plan</h3>
                            {{ Breadcrumbs::render('tools.maturityDevelopmentPlan' ) }}
                            <table class="table table-bordered table-responsive">
                            
                                <tbody>
                                    <tr>
                                        <th colspan="5" class="h5 bg-light text-primary">5-8 High Urgency/High Impact HR Maturity Areas</th>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">Accountability</td>
                                        <td class="fw-bold"> Maturity Level</td>
                                        <td class="fw-bold">SMART Goal</td>
                                        <td></td>
                                    </tr>
                                        @foreach($data as $key=>$development_plan)
                                            <tr>
                                                <td style="vertical-align: middle">{{ $development_plan->faAccountability->accountabilities }}</td>
                                                <td>
                                                    <div class="row mb-3">
                                                        <div class="col-2 fw-bold">Current:</div>
                                                        <div class="col-10">
                                                            @if($development_plan->current_maturity_level == NULL)
                                                                <a href="#" parent-id="{{ $development_plan->id }}" class="current_maturity_level btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                            @else
                                                                {{$development_plan->MaturityLevel->maturity_level_text}}
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-2 fw-bold">Aspiration:</div>
                                                        <div class="col-10">
                                                            @if($development_plan->current_maturity_level == NULL)
                                                                <a href="#" parent-id="{{ $development_plan->id }}" class="maturity_level_aspiration btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                            @else
                                                                {{$development_plan->MaturityLevel->maturity_level_text}}
                                                            @endif
                                                        </div>
                                                    </div>
                                              
                                                </td>
                                                <td width="25%">
                                                    <input type="text" class="form-control form-control-sm">
                                                </td>
                                            </tr>
                                        @endforeach
                                </tbody>
                            </table>
                        </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-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() {
        function openCurrentMaturityLevelCheckBox(accountability_id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{accountability_id: accountability_id},
                url: APP_URL + "/tools/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(accountability_id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{accountability_id: accountability_id},
                url: APP_URL + "/tools/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 accountability_id = $(this).attr("parent-id");
            openCurrentMaturityLevelCheckBox(accountability_id);
        });

        $(document).on("click", ".maturity_level_aspiration ", function (e) {
            var accountability_id = $(this).attr("parent-id");
            openMaturityLevelAspirationCheckBox(accountability_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/update-current-maturity-level",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                        $('#maturityLevelModal').modal('show');
                        $('#maturityLevelModalBody').html(result);
                    },
                    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/update-maturity-level-aspiration",
                    type: "POST",
                    dataType: 'html',
                    success: function(result) {
                        $('#maturityLevelModal').modal('show');
                        $('#maturityLevelModalBody').html(result);
                    },
                    error:function (response){},
                    complete:function(data){
                        
                    }
            });  
        });

    });
</script>