@inject('complianceAssessmentModel', '\App\Models\Compliance\ComplianceAssessment')

@extends('layouts.main')

@section('title', 'GLESEC Member Portal')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">MSS-GAP</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">MSS-GAP</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <div class="content-body">
    <div class="row">
      <div class="col-md-12">
        @can('view-service', 'MSS-GAP')
          @include('dashboards.ecsm.incl_docs_button', ['docs'=>\App\Models\SplunkDashboards::getDocuments('MSS-GAP')])
          <section class="grap" id="grap-dashboard">
            @include('dashboards.mss-gap.standards-tree')
          </section>
        @else
          <h1>Information is unavailable!</h1>
        @endcan
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script type="text/javascript">
    function openWavesEffect() {
      var nestingFirst = $('.active__sub-shadow'),
        nestingSecond = $('.active__sub-shadow-ul'),
        nestingThird = $('.active__list');
      if (nestingFirst.length || nestingSecond.length || nestingThird.length) {
        nestingFirst.next('ul').css("display", "block");
        nestingSecond.next('ul').css("display", "block");
        nestingThird.next('ul').css("display", "block");
      }
    }

    function customWavesEffectMenu(start, el, speed) {
      $(document).on('click', start, function (e) {
        e.preventDefault();
        if (!$(this).hasClass(el)) {
          // hide any open menus and remove all other classes
          $("ul", $(this).parents("ul:first")).slideUp(speed);
          $("a", $(this).parents("ul:first")).removeClass(el);
          $("a", $(this).parents("ul:first")).removeClass('active__sub-shadow');
          $("a", $(this).parents("ul:first")).removeClass('active__sub-shadow-ul');
          $("a", $(this).parents("ul:first")).removeClass('active__list');
          // open our new menu and add the open class
          $(this).next("ul").slideDown(speed);
          $(this).addClass(el);
        } else if ($(this).hasClass(el)) {
          $(this).removeClass(el);
          $(this).next("ul").slideUp(speed);
        }
      })
    }

    $(function () {
      customWavesEffectMenu('.grap-aside__waves-effect', 'active__sub-shadow', 135);
      customWavesEffectMenu('.color__waves-effect', 'active__sub-shadow-ul', 300);
      customWavesEffectMenu('.list__waves-effect', 'active__list', 500);

      $(document).on('click', '.grap-contant__item .item__waves-effect', function (e) {
        if (!$(this).parents(".grap-contant__item").hasClass('active')) {
          // hide any open menus and remove all other classes
          $(".grap-contant__item").removeClass('active');
          // open our new menu and add the open class
          $(this).parents(".grap-contant__item").addClass('active');
        } else if ($(this).parents(".grap-contant__item").hasClass('active')) {
          $(this).parents(".grap-contant__item").removeClass('active');
        }
      });
      $(document).on('click', 'li.line', function () {
        $('#grap-dashboard').find('li.line a').removeClass('active show');
        $(this).children(0).addClass('active show');
      });
    });
  </script>
  <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
  <script type="text/javascript">
    function showUnderProcessingAnimation() {
      $("#grap-dashboard").LoadingOverlay("show", {
        background: "rgba(33, 58, 102, 0.5)",
        imageColor: "#ffffff"
      });
    }

    function hideUnderProcessingAnimation() {
      $("#grap-dashboard").LoadingOverlay("hide");
    }

    $(function () {
      $(document).on('click', '.gap-control', function () {
        showUnderProcessingAnimation();

        var el = $(this);

        $.get("{!! route('mss-gap.get-control-overview') !!}", {
          controlId: el.attr('data-control-key'),
          controlFamilyId: el.attr('data-control-family-key'),
          functionId: el.attr('data-function-key'),
          standardId: el.attr('data-standard-key'),
          '_token': '{!! csrf_token() !!}'
        }).done(function (response) {
          if (response.length > 0) {
            $('#gap-content').eq(0).html(response);
            $('[data-toggle="popover"]').popover();
          }
        }).fail(function () {
          alert('Something went wrong. Please try again.');
        }).always(function () {
          hideUnderProcessingAnimation();
        });
      });

      $(document).on('click', '.answer-fld', function () {
        var answerId = $(this).val();

        if (answerId.length > 0) {
          showUnderProcessingAnimation();

          var container = $(this).closest('.grap-contant__item');
          var questionId = container.attr('data-question-key');
          var standardId = container.attr('data-standard-key');
          var functionId = container.attr('data-function-key');
          var controlFamilyId = container.attr('data-control-family-key');
          var controlId = container.attr('data-control-key');
          var explanationOfAnswer = container.find('.explanation-of-answer-fld').val();

          $.post("{!! route('mss-gap.update-answer-on-question') !!}", {
            questionId: questionId,
            standardId: standardId,
            functionId: functionId,
            controlFamilyId: controlFamilyId,
            controlId: controlId,
            answerId: answerId,
            explanationOfAnswer: explanationOfAnswer,
            '_token': '{!! csrf_token() !!}'
          }).done(function (response) {
            if (response.success) {
              var answerIcon = container.find('.item-form__icon').eq(0).children(0);

              if (typeof answerIcon !== typeof undefined) {
                answerIcon.removeClass('not-answer answer-no answer').addClass('pending');
              }

              var statusContainer = container.find('.answer-status-container').eq(0);

              if (typeof statusContainer !== typeof undefined) {
                $.each(statusContainer.find('input:radio'), function (i, statusField) {
                  $(statusField).removeAttr('checked');

                  if ($(statusField).val() == {!! $complianceAssessmentModel::STATUS_PENDING !!}) {
                    $(statusField).attr('checked', 'checked');
                  }
                });
              }

              container.find('.explanation-of-answer-fld').eq(0).removeAttr('disabled');

              if (!$.isEmptyObject(response.case)) {
                container.find('.assigned-case-container').eq(0).html('').append([
                  $('<span>', {
                    text: 'Link:'
                  }),
                  $('<div>', {
                    class: 'item-info-link',
                    html: $('<a>', {
                      href: response.case.url,
                      title: 'View Case',
                      target: '_blank',
                      html: 'View Case'
                    })
                  })
                ]);
              }

              $.get("{!! route('MSS-GAP') !!}", {
                standardId: standardId,
                functionId: functionId,
                controlFamilyId: controlFamilyId,
                controlId: controlId,
                '_token': '{!! csrf_token() !!}'
              }).done(function (response) {
                if (response.length > 0) {
                  $('#grap-dashboard').find('.grap-aside').eq(0).replaceWith(response);

                  openWavesEffect();
                }
              }).fail(function () {
                alert('Something went wrong. Please try again.');
              }).always(function () {
                hideUnderProcessingAnimation();
              });
            }
          }).fail(function () {
            hideUnderProcessingAnimation();
            alert('Something went wrong. Please try again.');
          });
        }
      });

      $(document).on('change', '.explanation-of-answer-fld', function () {
        var questionId = $(this).closest('.grap-contant__item').attr('data-question-key');
        var explanationOfAnswer = $(this).val();

        showUnderProcessingAnimation();

        $.post("{!! route('mss-gap.update-answer-explanation') !!}", {
          questionId: questionId,
          explanationOfAnswer: explanationOfAnswer,
          '_token': '{!! csrf_token() !!}'
        }).done(function (response) {
          if (!response.success) {
            alert('Something went wrong. Please try again.');
          }
        }).fail(function () {
          alert('Something went wrong. Please try again.');
        }).always(function () {
          hideUnderProcessingAnimation();
        });
      });
    });
  </script>
@endsection