@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{url('/css/jquery-ui.min.css')}}">
<style>
#accordion .input-group {
  flex-direction: row-reverse;
}
.align-right {
  text-align: right;
}
</style>
@endsection
@php
  $user_id = Auth::user()->id;
@endphp
@section('content')

<div class="container h-100 overflow-auto">
  <div id="accordion">
    @foreach($main_metrixes as $main_metrix)
    <div class="card">
      <div class="card-header align-right" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$main_metrix->id}}" aria-expanded="true" aria-controls="collapse{{$main_metrix->id}}">
          {{$main_metrix->name}}
          </button>
        </h5>
      </div>

      <div id="collapse{{$main_metrix->id}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          <form class="needs-validation cpr_form" mm="{{$main_metrix->id}}" method="POST" action="{{ route('admin.cpr_forms.store')}}" novalidate>
            @csrf
            <div class="form-row">

              <input hidden name="main_metrix_id" type="text" value="{{$main_metrix->id}}"/>
              <input hidden name="user_id" type="text" value="{{$user_id}}"/>

              <div class="col-md-4">
                <div class="form-group">
                  <label for="{{ __('messages.admin.Period') }}">{{ __('messages.admin.Quarter') }}</label>
                  <select class="form-control" name="quarter" mm="{{$main_metrix->id}}" required>
                    <option selected>{{ __('messages.admin.Quarter') }}</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                  </select>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label for="{{ __('messages.admin.Period') }}">{{ __('messages.admin.Period') }}</label>
                  <select class="form-control" name="period" id="{{ __('messages.admin.Period') }}" required>
                    <!-- <option selected>{{ __('messages.admin.Period') }}</option> -->
                    <option value="monthly">{{ __('messages.admin.Monthly') }}</option>
                    <option value="quarterly">{{ __('messages.admin.Quarterly') }}</option>
                    <option value="semiannually">{{ __('messages.admin.Semiannually') }}</option>
                    <option value="annually">{{ __('messages.admin.Annually') }}</option>
                  </select>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Year') }}</label>
                  <input type="text" class="form-control" name="year" value="{{date('Y')}}" id="{{ __('messages.admin.Year') }}" required>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Target') }}</label>
                  <div class="input-group mb-2 mr-sm-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">%</div>
                    </div>
                    <input type="number" name="target" value="0" max="100" min="0" class="form-control" required>
                    <div class="invalid-feedback">
                      Please enter a value between 0-100
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <div class="monthly_achievements" mm="{{$main_metrix->id}}"></div>
                  <label>{{ __('messages.admin.Monthly_Achivements') }}</label>
                  <textarea class="form-control" hidden rows="5" cols="35" name="monthly_achievements" mm="{{$main_metrix->id}}"></textarea>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Achievements_Average') }}</label>
                  <div class="input-group mb-2 mr-sm-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">%</div>
                    </div>
                    <input class="form-control" type="number" min="0" max="100" name="achievements_average" mm="{{$main_metrix->id}}">
                    <div class="invalid-feedback">
                      Please enter a value between 0-100
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Achievements') }}</label>
                  <textarea class="form-control" rows="5" cols="35" name="achievements_text" required>
                  </textarea>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Challenges') }}</label>
                  <textarea class="form-control" rows="5" cols="35" name="challenges_text" required>
                  </textarea>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-group">
                  <label>{{ __('messages.admin.Improvements') }}</label>
                  <textarea class="form-control" rows="5" cols="35" name="improvements_text" required>
                  </textarea>
                  <div class="invalid-feedback">
                    This field is required
                  </div>
                </div>
              </div>

              <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-primary">{{ __('messages.admin.submit') }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</div>
@endsection

@section('javascript')
<!-- jQuery -->
<script src="{{asset('js/jquery-3.4.1.min.js')}}" ></script>

<!-- jQuery UI -->
<script src="{{asset('js/jquery-ui.min.js')}}"></script>

<!-- Custom Scripts -->
<script>
const cpr_forms = <?php echo(json_encode($cpr_forms)); ?> ;
const year = <?php echo(date('Y')); ?>;
const months = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');

    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          var mmID = $(event.target).attr("mm");
          var monthly_achivements = {};

          setAchievementsAvarage(mmID);

          $(".monthly_achievements[mm='"+mmID+"'] div .input-group input").each(function(){
            var element = $( this );
            monthly_achivements[element[0].name] = element[0].value;
            $(element).prop("disabled", true);
          });

          $("textarea[name='monthly_achievements'][mm='"+mmID+"']").val(JSON.stringify(monthly_achivements));
        }

        form.classList.add('was-validated');
      }, false);
    });
  }, false);

  $(document).ready(function() {
    setMonthlyAchivements(1);
    $(".cpr_form").each(function(){
      var mmID = $(this).attr("mm");
      setCprForm(mmID,1);
    });
    $("select[name='quarter']").change(function(event){
      var quarter = event.target.value;
      var mmID = $(event.target).attr("mm");
      setMonthlyAchivements(quarter,mmID);
      setCprForm(mmID,quarter);
    });
  });
  var setAchievementsAvarage = function(mmID){
    var avarage = 0;
      $(".monthly_achievements[mm='"+mmID+"'] div .input-group input").each(function(){
        var element = $(this);
        avarage += parseInt(element[0].value);
      });
      avarage/=3;
      avarage = Math.round(avarage);
      $("input[name='achievements_average'][mm='"+mmID+"']").val(avarage);
  }
  var setMonthlyAchivements = function(quarter,mmID){
    var start = (quarter-1)*3;
    var element = $(".monthly_achievements");
    if(!!mmID){
      element = $(".monthly_achievements[mm='"+mmID+"']");
    }
      $(element).html("");
      for (let i = start; i < start+3; i++) {
        var html = '<div><label>'+months[i]+'</label><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">%</div></div><input type="number" max="100" min="0" value="0" name="'+months[i]+'" class="form-control"><div class="invalid-feedback">Please enter a value between 0-100</div></div></div>';
        $(element).append(html);
      }
      $(".monthly_achievements div input").on("change",function(event){
      var inputElement = event.target;
      var mmID = $(inputElement).parent().parent().parent().attr("mm");
      setAchievementsAvarage(mmID);
    });
  }

  var findCprForm = function(mmID,quarter){
    var cpr_form = null;
    for (let i = 0; i < cpr_forms.length; i++) {
      const c = cpr_forms[i];
      if(c.main_metrix_id == mmID && c.quarter == quarter){
        cpr_form = c;
        break;
      }
    }
    return cpr_form;
  }
  var setCprForm = function(mmID,quarter){
    var cpr_form = findCprForm(mmID,quarter);
    if(cpr_form == null) {
      clearCprForm(mmID);
      return;
    };
    var cpr_form_html = $(".cpr_form[mm='"+mmID+"']");
    cpr_form_html.find("select[name='period']").val(cpr_form.period);
    cpr_form_html.find("input[name='year']").val(cpr_form.year);
    cpr_form_html.find("input[name='target']").val(cpr_form.target);
    cpr_form_html.find("textarea[name='monthly_achivements']").val(cpr_form.monthly_achievements);
    var monthly_achievements_obj = JSON.parse(cpr_form.monthly_achievements);
    var keys = Object.keys(monthly_achievements_obj);
    for (let i = 0; i < keys.length; i++) {
      cpr_form_html.find(".monthly_achievements div input[name='"+keys[i]+"']").val(monthly_achievements_obj[keys[i]]);
    }
    cpr_form_html.find("input[name='achievements_average']").val(cpr_form.achievements_average);
    cpr_form_html.find("textarea[name='achievements_text']").val(cpr_form.achievements_text);
    cpr_form_html.find("textarea[name='challenges_text']").val(cpr_form.challenges_text);
    cpr_form_html.find("textarea[name='improvements_text']").val(cpr_form.improvements_text);
  }
  var clearCprForm = function(mmID){
    var cpr_form_html = $(".cpr_form[mm='"+mmID+"']");
    cpr_form_html.find("select[name='period']").val("monthly");
    cpr_form_html.find("input[name='year']").val(year);
    cpr_form_html.find("input[name='target']").val("0");
    cpr_form_html.find("input[name='achievements_average']").val("0");
    cpr_form_html.find("textarea[name='achievements_text']").val("");
    cpr_form_html.find("textarea[name='challenges_text']").val("");
    cpr_form_html.find("textarea[name='improvements_text']").val("");
  }

</script>
@endsection