@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.A9')}}</h3>
                            {{ Breadcrumbs::render('tools.maturityDevelopmentPlan.view' ) }}
                            <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">Current Maturity Level</td>
                                        <td class="fw-bold"> Maturity Level Aspiration</td>
                                        {{-- <td class="fw-bold">SMART Goal</td> --}}
                                        {{-- <td></td> --}}
                                    </tr>
                                        @foreach($data as $key=>$development_plan)
                                            <tr>
                                                <td rowspan="2" style="vertical-align: middle">{{ $development_plan->faAccountability->accountabilities }}</td>
                                                <td>
                                                    @if($development_plan->current_maturity_level == NULL)
                                                        <a href="#" parent-id="{{ $development_plan->faAccountability->id }}" class="current_maturity_level btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                    @else
                                                        {{($development_plan->CurrentMaturityLevel) ? $development_plan->CurrentMaturityLevel->maturity_level_text : ''}}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($development_plan->maturity_level_aspiration == NULL)
                                                        <a href="#" parent-id="{{ $development_plan->faAccountability->id }}" class="maturity_level_aspiration btn btn-rounded btn-sm btn-outline-primary px-4">Select</a>
                                                    @else
                                                        {{($development_plan->MaturityLevelAspiration) ? $development_plan->MaturityLevelAspiration->maturity_level_text : ''}}
                                                    @endif
                                                </td>

                                                {{-- <td width="25%">
                                                    <input type="text" class="form-control form-control-sm">
                                                </td> --}}
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <label class="form-label">SMART Goal</label>
                                                    <div class="row">
                                                        <div class="col"><textarea type="text" name="smart_goal" id="smart_goal{{ $development_plan->id }}" class="form-control">{{$development_plan->smart_goal}}</textarea></div>    
                                                        <div class="col-auto"><a href="#" parent-id="{{ $development_plan->id }}" class="btn btn-sm btn-primary saveSmartGoalBtn">Submit</a></div>    
                                                    </div>
                                                </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(id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{id: 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(id) {
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
            });
            $.ajax({
                data:{id: 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 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/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/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){
                        
                    }
            });  
        });

    });
</script>