@extends('layouts.master')

@section('content')
  <div class="container">
    @include('pages.auth.assessment.details')
  </div>
@stop

@section('sub-content')
  <div class="view-assessments-content">
    <div class="view-assessment-form {{ $pageName }}">
      <div class="row text-center">
        <div class="col">
          <h2>Pre-assessment Questions</h2>
        </div>
      </div>
      <div class="accordion">
        <form id="preAssessmentForm" action="/pre-assessment/manager/{{ $hashCodeManager }}"  method="post">
          @csrf
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#basicInformationGroup" aria-expanded="true" aria-controls="basicInformationGroup">
                Basic Informations
              </button>
            </h2>
            <div id="basicInformationGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-basic')
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#responsibilitiesGroup" aria-expanded="true" aria-controls="responsibilitiesGroup">
                Resposnsibilities
              </button>
            </h2>
            <div id="responsibilitiesGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-responsibilities')
              </div>
            </div>
          </div>
          {{-- <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#compensationGroup" aria-expanded="true" aria-controls="compensationGroup">
                Annual Compensation
              </button>
            </h2>
            <div id="compensationGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-annual')
              </div>
            </div>
          </div> --}}
          <div class="accordion-item">
            <h2 class="accordion-header" >
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#behaviorGroup" aria-expanded="true" aria-controls="behaviorGroup">
                Bahaviors And Aptitude
              </button>
            </h2>
            <div id="behaviorGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-behavior')
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" >
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#reportsGroup" aria-expanded="true" aria-controls="reportsGroup">
                Direct Reports
              </button>
            </h2>
            <div id="reportsGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-direct')
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" >
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stressGroup" aria-expanded="true" aria-controls="stressGroup">
                Stress Level
              </button>
            </h2>
            <div id="stressGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                @include('pages.auth.assessment.pre-assessment.pre-assessment-stress')
              </div>
            </div>
          </div>
          <div class="mt-4 row">
            <div class="col text-center">
              <div class="d-grid gap-2 d-lg-block">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                <button id="saveAndWorkLater" type="button" class="btn btn-primary btn-lg">Save and Work Later</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    $(document).ready(function() {
      var forceSubmit = false 

      $('#demands.flexdatalist').flexdatalist('disabled', {{ $defaultDemandsCount < 5 ? 0 : 1 }})
      $('#kindLeadership.flexdatalist').flexdatalist('disabled', {{ $defaultCompentencyCount < 5 ? 0 : 1 }})

      $('#contact-select').change(() => {
        var contactVal = $(this).find(':selected').val()
        $('#contact-hidden').attr('name', 'contact-' + contactVal).val(contactVal)
      })

      $('#role1').click(() => {
        $('.already-in-role').removeClass('d-none').addClass('d-block')
        $('.already-in-role textarea, .already-in-role input').prop('required', true)
        $('.not-yet-role').removeClass('d-block').addClass('d-none')
        $('.not-yet-role textarea, .not-yet-role input').removeAttr('required')
      })

      $('#role0').click(() => {
        $('.already-in-role').removeClass('d-block').addClass('d-none')
        $('.already-in-role textarea, .already-in-role input').removeAttr('required')
        $('.not-yet-role').removeClass('d-none').addClass('d-block')
        $('.not-yet-role textarea, .not-yet-role input').prop('required', true)
      })

      $('#editDemandsButton').click(() => {
        $('#demands.flexdatalist').flexdatalist('disabled', false)
        var demands = $('#demands.flexdatalist').flexdatalist('value')
        $('#demands.flexdatalist').flexdatalist('value', [demands[0], demands[1], demands[2], demands[3]])
        $('#editDemandsButton').removeClass('d-block').addClass('d-none')
      })

      $('#demands.flexdatalist').on('change:flexdatalist', function(event, set) {
        var demands = $(this).flexdatalist('value')
        var demandsLength = demands.length

        if (demandsLength === 5) {
          $('#demands-flexdatalist').attr('placeholder', '')
          $(this).flexdatalist('disabled', true)
          $('#editDemandsButton').removeClass('d-none').addClass('d-block')
        } else {
          $('#demands-flexdatalist').attr('placeholder', 'Please select ' + (5 - demandsLength))
          $(this).flexdatalist('disabled', false)
          $('#editDemandsButton').removeClass('d-block').addClass('d-none')
        }
      })

      $('#editCompentencyButton').click(() => {
        $('#kindLeadership.flexdatalist').flexdatalist('disabled', false)
        var demands = $('#kindLeadership.flexdatalist').flexdatalist('value')
        $('#kindLeadership.flexdatalist').flexdatalist('value', [demands[0], demands[1], demands[2], demands[3]])
        $('#editCompentencyButton').removeClass('d-block').addClass('d-none')
      })

      $('#kindLeadership.flexdatalist').on('change:flexdatalist', function(event, set) {
        var demands = $(this).flexdatalist('value')
        var demandsLength = demands.length

        if (demandsLength === 5) {
          $('#kindLeadership-flexdatalist').attr('placeholder', '')
          $(this).flexdatalist('disabled', true)
          $('#editCompentencyButton').removeClass('d-none').addClass('d-block')
        } else {
          $('#kindLeadership-flexdatalist').attr('placeholder', 'Please select ' + (5 - demandsLength))
          $(this).flexdatalist('disabled', false)
          $('#editCompentencyButton').removeClass('d-block').addClass('d-none')
        }
      })

      $('#currency-select').change(function() {
        if($(this).val() === '6') {
          $('.otherCurrencyContainer').removeClass('d-none').addClass('d-block')
          $('.otherCurrencyContainer input').prop('required', true)
        } else {
          $('.otherCurrencyContainer').addClass('d-none').removeClass('d-block')
          $('.otherCurrencyContainer input').removeAttr('required')
        }
      })
      
      $('#compensation').keyup(function () {
        if(event.which >= 37 && event.which <= 40) return

        $(this).val(function(index, value) {
          return value .replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        })
      })

      // $('#baseCompensation, #commissionCompensation, #discretionaryCompensation').focusout(function() {
      //   console.log('in here')
      //   var baseCompensationVal = $('#baseCompensation').val()
      //   var commissionCompensationVal = $('#commissionCompensation').val()
      //   var discretionaryCompensationVal = $('#discretionaryCompensation').val()

      //   var totalPercentage = parseInt(baseCompensationVal ?? 0) + parseInt(commissionCompensationVal ?? 0) + parseInt(discretionaryCompensationVal ?? 0)

      //   if (baseCompensationVal && commissionCompensationVal && discretionaryCompensationVal && totalPercentage !== 100) {
      //     $('#baseCompensation, #commissionCompensation, #discretionaryCompensation').addClass('is-invalid')
      //   } else {
      //     $('#baseCompensation, #commissionCompensation, #discretionaryCompensation').removeClass('is-invalid')
      //   }
      // })

      $('#saveAndWorkLater').click(function() {
        forceSubmit = true
        $('#preAssessmentForm').submit()
      })

      $('#preAssessmentForm').on('submit', function() {
        $('#global-loading').removeClass('d-none').addClass('d-block')

        var demands = $('#demands.flexdatalist').flexdatalist('value')
        var relationships = $('#relationship.flexdatalist').flexdatalist('value')
        var kindLeadership = $('#kindLeadership.flexdatalist').flexdatalist('value')

        // var baseCompensationVal = $('#baseCompensation').val()
        // var commissionCompensationVal = $('#commissionCompensation').val()
        // var discretionaryCompensationVal = $('#discretionaryCompensation').val()
        // var totalPercentage = parseInt(baseCompensationVal ?? 0) + parseInt(commissionCompensationVal ?? 0) + parseInt(discretionaryCompensationVal ?? 0)

        let elementError

        // if (baseCompensationVal
        //   && commissionCompensationVal
        //   && discretionaryCompensationVal
        //   && totalPercentage !== 100) {
        //   $('#baseCompensation').addClass('is-invalid')
        //   elementError = $('#baseCompensation')
        // } else {
        //   $('#baseCompensation').removeClass('is-invalid')
        // }

        if (kindLeadership.length !== 5) {
          $('#kindLeadership-flexdatalist').addClass('is-invalid')
          elementError = $('#kindLeadership-flexdatalist')
          $('#kindLeadership-flexdatalist').closest('ul').css('border-color', 'red!important')
        } else {
          $('#kindLeadership-flexdatalist').removeClass('is-invalid')
          $('#kindLeadership-flexdatalist').closest('ul').css('border-color', 'rgb(206, 212, 218)!important')
        }

        if (demands.length !== 5) {
          $('#demands-flexdatalist').addClass('is-invalid')
          elementError = $('#demands-flexdatalist')
          $('#demands-flexdatalist').closest('ul').css('border-color', 'red!important')
        } else {
          $('#demands-flexdatalist').removeClass('is-invalid')
          $('#demands-flexdatalist').closest('ul').css('border-color', 'rgb(206, 212, 218)!important')
        }

        if (relationships.length < 1) {
          $('#relationship-flexdatalist').addClass('is-invalid')
          elementError = $('#relationship-flexdatalist')
          $('#relationship-flexdatalist').closest('ul').css('border-color', 'red!important')
        } else {
          $('#relationship-flexdatalist').removeClass('is-invalid')
          $('#relationship-flexdatalist').closest('ul').css('border-color', 'rgb(206, 212, 218)!important')
        }

        if (elementError && !forceSubmit) {
          $('html body').animate({ scrollTop: elementError.offset().top }, "slow");
          $('#global-loading').removeClass('d-block').addClass('d-none')
          return false
        }

        $('#demands.flexdatalist').flexdatalist('disabled', false)
        $('#kindLeadership.flexdatalist').flexdatalist('disabled', false)

        if (forceSubmit) {
          var input = $('<input>')
            .attr('type', 'hidden')
            .attr('name', 'isForceSubmit').val(true);
          $('#preAssessmentForm').append(input);
          return true
        }

        return true
      });
    })
  </script>
@endsection