@extends('layouts.master')

@section('content')
  <div class="container">
    @include('layouts.page-header')
    @include('pages.auth.question.add-descriptor-modal')
    @include('pages.auth.question.delete-descriptor-modal')
    <form action="" method="post" id="scoringConfigForm">
      @csrf
      <div class="filterContainer row">
        <div class="col-6 text-center mt-3 mb-3">
          <div class="form-floating">
            <select class="form-select" id="dimensionFilter" name="dimensionId">
              @foreach($dimensions as $dimension)
                <option value="{{ $dimension->id }}" {{ $dimension->id === $currentDimensionId ? 'selected' : '' }}>{{ $dimension->name }}</option>
              @endforeach
            </select>
            <label for="dimensionFilter">Dimension</label>
          </div>
        </div>

        <div class="col-6 text-center mt-3 mb-3">
          <div class="form-floating">
            <select class="form-select" id="compentencyFilter" name="competenceId">
              @foreach($competencies as $competence)
                <option value="{{ $competence->id }}" {{ $competence->id === $currentCompetenceId ? 'selected' : '' }}>{{ $competence->name }}</option>
              @endforeach
            </select>
            <label for="compentencyFilter">Competency</label>
          </div>
        </div>

        <div class="col-6 text-center mt-3 mb-3">
          <div class="form-floating">
            <select class="form-select" id="dateSort" name="dateSort">
              <option value="asc" {{ $dateSort === 'asc' ? 'selected' : '' }}>Oldest To Latest</option>
              <option value="desc" {{ $dateSort === 'desc' ? 'selected' : '' }}>Latest To Oldest</option>
            </select>
            <label for="dateSort">Sort By Date</label>
          </div>
        </div>

        <div class="col-6 text-center mt-3 mb-3">
          <div class="form-floating">
            <select class="form-select" id="colorFilter" name="colorFilter">
              <option value="all" {{ $colorFilter === 'all' ? 'selected' : '' }}>All</option>
              <option value="green" {{ $colorFilter === 'green' ? 'selected' : '' }}>Green</option>
              <option value="yellow" {{ $colorFilter === 'yellow' ? 'selected' : '' }}>Yellow</option>
              <option value="red" {{ $colorFilter === 'red' ? 'selected' : '' }}>Red</option>
              <option value="none" {{ $colorFilter === 'none' ? 'selected' : '' }}>None</option>
            </select>
            <label for="colorFilter">Show by colors</label>
          </div>
        </div>

        <div class="col-4 text-center mt-3 mb-3 row">
          <label for="configGreen" class="col-6 col-form-label text-end">Green</label>
          <div class="col-6">
            <input value="{{ $scoringConfig->threshold_green }}" name="configGreen" required id="configGreen" type="number" class="form-control form-control-sm">
          </div>
        </div>

        <div class="col-4 text-center mt-3 mb-3 row">
          <label for="configYellow" class="col-6 col-form-label text-end">Yellow</label>
          <div class="col-6">
            <input value="{{ $scoringConfig->threshold_yellow }}" name="configYellow" required id="configYellow" type="number" class="form-control form-control-sm">
          </div>
        </div>

        <div class="col-4 text-center mt-3 mb-3 row">
          <label for="configRed" class="col-6 col-form-label text-end">Red</label>
          <div class="col-6">
            <input value="{{ $scoringConfig->threshold_red }}" name="configRed" required id="configRed" type="number" class="form-control form-control-sm">
          </div>
        </div>

      </div>

      <div class="row mt-3">
        <div class="col text-center mt-3 mb-3">
          <div class="d-grid gap-2 d-sm-block">
            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
            <button type="button" class="btn btn-primary btn-sm addNewDescriptor">Add New Descriptor</button>
          </div>
        </div>

        <div class="col-12 mb-3">
          <h1>Descriptors ({{ count($descriptors) }})</h1>
        </div>

        @foreach($descriptors as $descriptorDetails)
          <div class="descriptorContainer">
            <div class="col-6 mb-2 text-center row">
              <div class="col-4 text-center">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" value="green" name="descriptor[{{ $descriptorDetails['descriptor']->id }}][color][]" id="descriptorGreen{{ $descriptorDetails['descriptor']->id }}" {{ in_array('green', $descriptorDetails['colors']) ? 'checked' : '' }}>
                  <label class="form-check-label" for="descriptorGreen{{ $descriptorDetails['descriptor']->id }}">
                    Green
                  </label>
                </div>
              </div>
      
              <div class="col-4 text-center">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" value="yellow" name="descriptor[{{ $descriptorDetails['descriptor']->id }}][color][]" id="descriptorYellow{{ $descriptorDetails['descriptor']->id }}" {{ in_array('yellow', $descriptorDetails['colors']) ? 'checked' : '' }}>
                  <label class="form-check-label" for="descriptorYellow{{ $descriptorDetails['descriptor']->id }}">
                    Yellow
                  </label>
                </div>
              </div>
      
              <div class="col-4 text-center">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" value="red" name="descriptor[{{ $descriptorDetails['descriptor']->id }}][color][]" id="descriptorRed{{ $descriptorDetails['descriptor']->id }}" {{ in_array('red', $descriptorDetails['colors']) ? 'checked' : '' }}>
                  <label class="form-check-label" for="descriptorRed{{ $descriptorDetails['descriptor']->id }}">
                    Red
                  </label>
                </div>
              </div>
            </div>
      
            <div class="col-12 mb-2">
              <div class="form-floating">
                <textarea required name="descriptor[{{ $descriptorDetails['descriptor']->id }}][text]" id="descriptorText{{ $descriptorDetails['descriptor']->id }}" class="form-control" placeholder="Descriptor..." required>{{ $descriptorDetails['descriptor']->descriptor_text }}</textarea>
                <label for="descriptorText{{ $descriptorDetails['descriptor']->id }}">Descriptor...</label>
              </div>
            </div>

            <div class="col-12 text-end">
              <button type="button" class="btn btn-danger btn-sm deleteDescriptionBtn mb-3" descriptorId="{{ $descriptorDetails['descriptor']->id }}">Delete Descriptor</button>
            </div>
          </div>
        @endforeach

        <div class="col text-center mt-3 mb-3">
          <div class="d-grid gap-2 d-sm-block">
            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
            <button type="button" class="btn btn-primary btn-sm addNewDescriptor">Add New Descriptor</button>
          </div>
        </div>

      </div>
    </form>
  </div>
@stop

@section('footer-scripts')
  <script>
    jQuery(function() {
      $('#scoringConfigForm, #addDescriptorForm, #deleteDescriptorForm').on('submit', function() {
        $('#global-loading').removeClass('d-none').addClass('d-block')
        return true
      })

      $('.addNewDescriptor').on('click', function() {
        $('.dimensionIdNew').val($('#dimensionFilter').val())
        $('.competenceIdNew').val($('#compentencyFilter').val())
        $('#addDescriptorModal').modal('show')
      })

      $('.deleteDescriptionBtn').on('click', function() {
        $('.deleteDescriptorId').val($(this).attr('descriptorId'))
        var message = 'Are you sure you want delete this descriptor?<br><b>'
          + $(this).closest('.descriptorContainer').find('textarea').val()
          + '</b>'
        $('#deleteDescriptorText').html(message)
        $('.dimensionIdNew').val($('#dimensionFilter').val())
        $('.competenceIdNew').val($('#compentencyFilter').val())
        $('#deleteDescriptorModal').modal('show')
      })

      $('#dimensionFilter, #compentencyFilter, #dateSort, #colorFilter').on('change', function() {
        $('#global-loading').removeClass('d-none').addClass('d-block')
        
        var currentDimension = '{{ $currentDimensionId }}'

        if (currentDimension !== $('#dimensionFilter').val()) {
           window.location.replace('/scoring/management?dimensionFilter=' + $('#dimensionFilter').val())
           return
        }

        var uri = '/scoring/management?dimensionFilter=' + $('#dimensionFilter').val() + '&competenceFilter=' + $('#compentencyFilter').val() + '&dateSort=' + $('#dateSort').val() + '&colorFilter=' + $('#colorFilter').val()

        window.location.replace(uri)
      })
    })
  </script>
@endsection