@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.A4')}}</h3>
                            {{ Breadcrumbs::render('tools.hrBusinessAlignmentOGSM.index' ) }}
                            
                            <table class="table table-responsive table-bordered m-0">
                                <thead>
                                    {{-- <tr>
                                        <th colspan="4">
                                            <div class="mb-3 row">
                                                <label for="" class="col-auto ">Leader:</label>
                                                <div class="col">
                                                    <div class="ogsm-title">
                                                        {{ (!empty($ogsm)) ? $ogsm->leader : ''}}
                                                    </div>
                                                </div>
                                                <div class="col-auto ms-auto"><label class="col-auto col-form-label cursor-pointer text-end" id="edit-ogsm-leader"><i class="fa fa-pencil text-primary"></i></label></div>
                                            </div>
                                        </th>
                                    </tr> --}}
                                    <tr>
                                        <td class="text-left" colspan="4">
                                            <div class="mb-3 row">
                                                <label for="" class="col-auto fw-bold">Group Vision/Target/Aim:</label>
                                                <div class="col">
                                                    <div class="ogsm-title">
                                                        <span>{{(!empty($ogsm)) ? $ogsm->title : ''}}</span>
                                                    </div>
                                                </div>
                                                <div class="col-auto ms-auto"><label class="col-auto col-form-label cursor-pointer text-end" id="edit-ogsm-title"><i class="fa fa-pencil text-primary"></i></label></div>
                                            </div>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th width="25%">Objectives 
                                            <span class="fa fa-plus-circle text-primary cursor-pointer" id="addObjectives"></span>
                                        </th>
                                        <th width="25%">Goals </th>
                                        <th width="25%">Strategies </th>
                                        <th width="25%">Measures </th>
                                    </tr>
                                    @foreach($data as $objectives)
                                    
                                        {{-- <table class="table table-responsive table-bordered">
                                            <tbody> --}}
                                                <tr>
                                                    <td class="align-middle" width="25%" rowspan="{{ count($objectives->strategies) }}">
                                                        <span  class="">{!! html_entity_decode($objectives->objectives) !!} </span>
                                                        {{-- <p class="bg-light">{{ $objectives->objectives }}</p> --}}
                                                        <div class="text-end">
                                                            <a class="fa fa-pencil text-primary cursor-pointer updateObjectives" objectives-id="{{ $objectives->id }}"></a>
                                                            <a class="fa fa-trash text-primary cursor-pointer deleteObjectivesBtn" objectives-id="{{ $objectives->id }}" ></a>
                                                        </div>
                                                    </td>
                                                    <td class="align-middle" width="25%" rowspan="{{ count($objectives->strategies) }}">
                                                        {{-- <p class="bg-light">{{ $objectives->goals }}</p> --}}
                                                        <span  class="">{!! html_entity_decode($objectives->goals) !!} </span><br>
                                                        <button objectives-id="{{$objectives->id}}" class="btn btn-rounded btn-sm btn-primary px-4 mt-3  text-center addStrategy">Add Strategies</button>
                                                    </td>
                                
                                                    @if(count($objectives->strategies) > 0)
                                                        @foreach($objectives->strategies as $key=> $strategy)
                                                            @if($key == 0)
                                                                <td width="25%" class="align-middle">
                                                                    <span  class="">{!! html_entity_decode($strategy->strategy) !!} </span>
                                                                    {{-- <p class="bg-light">{{ $strategy->strategy }}</p> --}}
                                                                    <div class="text-end">
                                                                        <a class="fa fa-pencil text-primary cursor-pointer updateStrategy" strategy-id="{{$strategy->id}}"></a>
                                                                        <a class="fa fa-trash text-primary cursor-pointer deleteStrategyBtn" strategy-id="{{$strategy->id}}"></a>
                                                                    </div>
                                                                </td>
                                                                <td  width="25%" class="align-middle">
                                                                    <span  class="">{!! html_entity_decode($strategy->measures) !!} </span>
                                                                    {{-- <p class="bg-light">{{ $strategy->measures }}</p> --}}
                                                                </td></tr>
                                                            @endif
                                                            @if($key > 0)
                                                                <tr>
                                                                    <td width="25%" class="align-middle">
                                                                        <span  class="">{!! html_entity_decode($strategy->strategy) !!} </span>
                                                                        {{-- <p class="bg-light">{{ $strategy->strategy }}</p> --}}
                                                                        <div class="text-end">
                                                                            <a class="fa fa-pencil text-primary cursor-pointer updateStrategy" strategy-id="{{$strategy->id}}"></a>
                                                                            <a class="fa fa-trash text-primary cursor-pointer deleteStrategyBtn" strategy-id="{{$strategy->id}}"></a>
                                                                        </div>
                                                                    </td>
                                                                    <td width="25%" class="align-middle">
                                                                        <span  class="">{!! html_entity_decode($strategy->measures) !!} </span>
                                                                        {{-- <p class="bg-light">{{ $strategy->measures }}</p> --}}
                                                                    </td>
                                                                </tr>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <td width="25%"></td>
                                                        <td width="25%"></td>
                                                    @endif
                                                                
                                            {{-- </tbody>
                                        </table> --}}
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>  
                </div>
            </div>                 
        </div>
    </div>
</div>
{{-- MODAL POPUP OBJECTIVES --}}
<div class="modal" id="hrBusinessAlignmentOgsmModal" tabindex="-1" aria-labelledby="hrBusinessAlignmentOgsmModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered  modal-lg">
        <div class="modal-content">
            <div class="modal-body" id="hrBusinessAlignmentOgsmModalBody">
               
            </div>
        </div>
    </div>
</div>
{{-- MODAL POPUP STRATEGIES --}}
<div class="modal" id="strategiesModal" tabindex="-1" aria-labelledby="strategiesModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body" id="strategiesModalBody">
                <div class="modal-header px-0">
                    <h5 class="modal-title text-primary">Objectives/Goals</h5>
                    <button type="button" class="btn-close" onclick="location.reload()" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="strategiesModalFormBody">
                   
                </div>
            </div>
        </div>
    </div>
</div>
@include('includes.confirmation_popup')
@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", "#edit-ogsm-title", function (e) {
            getOgsmTitleForm();
        });

        $(document).on("click", "#edit-ogsm-leader", function (e) {
            getOgsmLeaderForm();
        });
 
        $(document).on("click", "#ogsmTitleUpdate", function (e) {
            $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span>Save')
            var title = $('#title').val();         
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: APP_URL + "/tools/hr-business-alignment-ogsm/update-ogsm-title",
                data: {title: title},
                type: "post",
                dataType: 'json',
                success: function(result) {
                    location.reload();
                },
                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>')
                    });
                },
            });  
        });

        $(document).on("click", "#ogsmLeaderUpdate", function (e) {
            $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span>Save')
            var leader = $('#leader').val();         
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: APP_URL + "/tools/hr-business-alignment-ogsm/update-ogsm-leader",
                data: {leader: leader},
                type: "post",
                dataType: 'json',
                success: function(result) {
                    location.reload();
                },
                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>')
                    });
                },
            });  
        });


        $(document).on("click", "#addObjectives", function (e) {
            getObjectiveForm();
        });

        $(document).on("click", ".addStrategy", function (e) {
            var objectives_id = $(this).attr('objectives-id');
            getStrategyeForm(objectives_id);
        });

        $(document).on("click", ".updateObjectives", function (e) {
            var objectives_id = $(this).attr('objectives-id');
            getUpdateObjectivesForm(objectives_id);
        });
        $(document).on("click", ".updateStrategy", function (e) {
            var strategy_id = $(this).attr('strategy-id');
            getUpdateStrategyeForm(strategy_id);
        });
        
        function getOgsmTitleForm() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-ogsm-title-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        function getOgsmLeaderForm() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-ogsm-leader-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        function getObjectiveForm() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-objectives-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        function getUpdateObjectivesForm(objectives_id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data:{objectives_id: objectives_id},
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-update-objectives-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        function getStrategyeForm(objectives_id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data:{objectives_id: objectives_id},
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-strategy-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        function getUpdateStrategyeForm(strategy_id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data:{strategy_id: strategy_id},
                url: APP_URL + "/tools/hr-business-alignment-ogsm/get-update-strategy-form",
                type: "post",
                dataType: 'html',
                success: function(result) {
                    $('#hrBusinessAlignmentOgsmModal').modal('show');
                    $('#hrBusinessAlignmentOgsmModalBody').html(result);
                },
            });  
        }

        $(document).on("click", "#saveObjectivesBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            e.preventDefault();
            let formData =$('#objectivesForm').serialize();
            var myEditor_objectives = document.querySelector('#objectives')
            var myEditor_goals = document.querySelector('#goals')
            var objectives = myEditor_objectives.children[0].innerHTML
            var goals = myEditor_goals.children[0].innerHTML
            if(objectives == "<p><br></p>") {
                objectives = '';
            }
            if(goals == "<p><br></p>") {
                goals = '';
            }
            var data = new FormData();
            data.append('objectives', objectives);
            data.append('goals', goals);
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:data,
                    url: APP_URL + "/tools/hr-business-alignment-ogsm/save-objectives",
                    type: "POST",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(result) {
                      location.reload();
                    },
                    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){
                        
                    }
                });  
        });
        

        $(document).on("click", "#updateObjectivesBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            e.preventDefault();
            var myEditor_objectives = document.querySelector('#objectives')
            var myEditor_goals = document.querySelector('#goals')
            var objectives = myEditor_objectives.children[0].innerHTML
            var goals = myEditor_goals.children[0].innerHTML
            if(objectives == "<p><br></p>") {
                objectives = '';
            }
            if(goals == "<p><br></p>") {
                goals = '';
            }
            var data = new FormData();
            data.append('objectives_id', $('#objectives_id').val());
            data.append('objectives', objectives);
            data.append('goals', goals);
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:data,
                    url: APP_URL + "/tools/hr-business-alignment-ogsm/update-objectives",
                    type: "POST",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(result) {
                      location.reload();
                    },
                    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){
                        
                    }
                });  
        });

        $(document).on("click", "#saveStrategyBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            e.preventDefault();
            // let formData =$('#strategyForm').serialize();
            var myEditor_strategy = document.querySelector('#strategy')
            var myEditor_measures = document.querySelector('#measures')
            var strategy = myEditor_strategy.children[0].innerHTML
            var measures = myEditor_measures.children[0].innerHTML
            if(strategy == "<p><br></p>") {
                strategy = '';
            }
            if(measures == "<p><br></p>") {
                measures = '';
            }
            var data = new FormData();
            data.append('objectives_id', $('#objectives_id').val());
            data.append('strategy', strategy);
            data.append('measures', measures);
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:data,
                    url: APP_URL + "/tools/hr-business-alignment-ogsm/save-strategy",
                    type: "POST",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(result) {
                      location.reload();
                    },
                    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){
                        
                    }
                });  
        });

        $(document).on("click", "#updateStrategyBtn", function (e) {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            e.preventDefault();
            //  let formData =$('#strategyForm').serialize();
            var myEditor_strategy = document.querySelector('#strategy')
            var myEditor_measures = document.querySelector('#measures')
            var strategy = myEditor_strategy.children[0].innerHTML
            var measures = myEditor_measures.children[0].innerHTML
            if(strategy == "<p><br></p>") {
                strategy = '';
            }
            if(measures == "<p><br></p>") {
                measures = '';
            }
            var data = new FormData();
            data.append('strategy_id', $('#strategy_id').val());
            data.append('strategy', strategy);
            data.append('measures', measures);
            $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data:data,
                    url: APP_URL + "/tools/hr-business-alignment-ogsm/update-strategy",
                    type: "POST",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(result) {
                      location.reload();
                    },
                    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){
                        
                    }
                });  
        });
        
        $(document).on("click", ".deleteStrategyBtn", function (e) {
            var strategy_id = $(this).attr('strategy-id');
            $('.confirmation-modal').modal('show');
            $(document).on("click", ".delete-confirmation", function (e) {
                $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Deleting...')
                
                e.preventDefault();
                $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        data:{strategy_id: strategy_id},
                        url: APP_URL + "/tools/hr-business-alignment-ogsm/delete-strategy",
                        type: "POST",
                        dataType: 'json',
                        success: function(result) {
                            location.reload();
                        }
                });  
            });
          
        });


        
        $(document).on("click", ".deleteObjectivesBtn", function (e) {
            var objectives_id = $(this).attr('objectives-id');
            $('.confirmation-modal').modal('show');
            $(document).on("click", ".delete-confirmation", function (e) {
                $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span> Deleting...')
                
                e.preventDefault();
                $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        data:{objectives_id: objectives_id},
                        url: APP_URL + "/tools/hr-business-alignment-ogsm/delete-objectives",
                        type: "POST",
                        dataType: 'json',
                        success: function(result) {
                            location.reload();
                        }
                });  
            });
          
        });

    });
</script>