@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 Function Urgency and Impact Assessment</h3>
                            {{ Breadcrumbs::render('tools.businessImpact.matrix' ) }}
                            <hr>
                            <div class="row">
                                <div class="col text-center"><h4>Matrix Assessment</h4></div>
                            </div>
                            @php 
                            $column_1_1 = '';
                            $column_1_2 = '';
                            $column_1_3 = '';

                            $column_2_1 = '';
                            $column_2_2 = '';
                            $column_2_3 = '';

                            $column_3_1 = '';
                            $column_3_2 = '';
                            $column_3_3 = '';
                            @endphp
                            @foreach($data->maturityDevelopmentPlan as $development_plan)
                                @php $accountabilities = '*'.$development_plan->FaAccountability->accountabilities; @endphp
                                @if( $development_plan->business_urgency == 1 && $development_plan->business_impact == 3)
                                    @php $column_1_1 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 1 && $development_plan->business_impact == 2)
                                    @php $column_1_2 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 1 && $development_plan->business_impact == 1)
                                    @php $column_1_3 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif

                                @if( $development_plan->business_urgency == 2 && $development_plan->business_impact == 3)
                                    @php $column_2_1 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 2 && $development_plan->business_impact == 2)
                                    @php $column_2_2 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 2 && $development_plan->business_impact == 1)
                                    @php $column_2_3 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif

                                @if( $development_plan->business_urgency == 3 && $development_plan->business_impact == 3)
                                    @php $column_3_1 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 3 && $development_plan->business_impact == 2)
                                    @php $column_3_2 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                                @if( $development_plan->business_urgency == 3 && $development_plan->business_impact == 1)
                                    @php $column_3_3 .=  '<p class="text-dark">'.$accountabilities.'</p>'  @endphp
                                @endif
                            @endforeach


                            <div class="riskMatrix">
                            <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <td rowspan="3" class="h4 fw-bold vericaltext text-center bg-light" width="5%"> Urgency</td>
                                    <th class="text-center" height="140">High</th>
                                    <td class="bg-low text-dark" width="30%">{!! $column_1_1 !!}</td>
                                    <td class="bg-medium text-dark" width="30%">{!! $column_1_2 !!}</td>
                                    <td class="bg-high text-dark" width="30%"> {!! $column_1_3 !!}</td>
                                </tr>

                                <tr>
                                    <th class="text-center"  height="140">Medium</th>
                                    <td class="bg-low text-dark">{!! $column_2_1 !!}</td>
                                    <td class="bg-medium text-dark">{!! $column_2_2 !!}</td>
                                    <td class="bg-medium text-dark">{!! $column_2_3 !!}</td>
                                
                                </tr>
                                <tr>
                                    <th class="text-center"  height="140">Low</th>
                                    <td class="bg-low text-dark">{!! $column_3_1 !!}</td>
                                    <td class="bg-low text-dark">{!! $column_3_2 !!}</td>
                                    <td class="bg-low text-dark">{!! $column_3_3 !!}</td>
                                </tr>
                                <tr>
                                    <td class="text-end"></td>
                                    <td class="text-end"></td>
                                    <th class="text-center">Low</th>
                                    <th class="text-center">Medium</th>
                                    <th class="text-center">High</th>
                                </tr>
                                <tr>
                                    <td class="text-end"></td>
                                    <td class="text-end"></td>
                                    <td colspan="3" class="text-center h4 fw-bold bg-light" style="letter-spacing: 2px">Impact</td>
                                </tr>
                            
                            </tbody></table>    
                            </div>

                            <style>
                            .vericaltext{
                                writing-mode: vertical-lr;
                                text-orientation: upright;
                            }
                            tr td, th{
                                vertical-align: middle;
                            }
                            p{
                                margin: 0;
                                padding: 0;
                            }

                            .bg-low {
                                background: red !important;
                            }
                            .bg-medium {
                                background: #f7b900 !important;
                            }
                            .bg-high {
                                background: #0fd71b   !important;
                            }
                            tr :first-child{
                                
                            }
                            </style>
                        </div>
                    </div>  
                </div>
              </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() {
        $(document).on("click", ".createUrgencyImpactAssesment", function (e) {
            $('#hrfAssesmentModal').show();
        });

        $(document).on("click", "#saveAssesmentBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            e.preventDefault();
            let formData =$('#saveAssesmentForm').serialize();
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:formData,
                    url: APP_URL + "/tools/hrf-urgency-impact-assesment/save-urgency-impact-assesment",
                    type: "POST",
                    dataType: 'json',
                    success: function(result) {
                      console.log(result);
                    },
                    error:function (response){
                        $('.is-invalid').removeClass('is-invalid');
                        $('.invalid-feedback').remove();
                        var obj = response.responseJSON.json;
                        $.each(obj, function(key,value) {
                            var key = key.split('.').join("");
                            $('#'+key).addClass('is-invalid');
                            $('#'+key).after('<div class="invalid-feedback">'+value+'</div>')
                        });
                    },
                    complete:function(data){
                        
                    }
                });  
        });

    });
</script>