@extends('admin.base')
@section('title')

   EDUCATIVE | attribuer_classe
    
@endsection

@section('meta')

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
@endsection

@section('stylesheet')
<style type="">

     * {
    box-sizing: border-box;
  }

  body {
    background-color: #f1f1f1;
  }

  #regForm {
    background-color: #ffffff;
    margin: 100px auto;
    font-family: Raleway;
    padding: 40px;
    width: 70%;
    min-width: 300px;
  }

  h1 {
    text-align: center;  
  }

  input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }

  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    background-color: #ffdddd;
  }

  /* Hide all steps by default: */
  .tab {
    display: none;
  }

  button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
  }

  button:hover {
    opacity: 0.8;
  }

  #prevBtn {
    background-color: #bbbbbb;
  }

  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;  
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }

  .step.active {
    opacity: 1;
  }

  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #04AA6D;
  }
  </style>
    
@endsection

@section('body')

<div class="py-5"> 
<div class="container">
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card  card-info col col-10 mx-auto">
     
            <!--<div class="py-4 card card-primary col col-10 mx-auto">-->
              <div class="card-header">
                <h3  class=" text-center">Attribution de classe</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form id="regForm" action="{{route('professeurclasses.store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="tab">Choisir le professeur:
                 <p>
                  <select  id="selection" name="professeur_id" class="form-control">
                    @foreach($professeurs as $professeur)
                    <option value="{{ $professeur->id }}">{{ $professeur->nom.' '.$professeur->prenom }}</option>
                    @endforeach
                   </select>
                   </p>
                </div>
                <!-- <div class="tab">Cochez les classes à attribuer :
                  <p>
                    @foreach($classes as $classe)
                    <div style="margin-bottom: 15px" class=" col col-3 colform-check form-check-inline">
                      <label class="form-check-label" for="inlineCheckbox1">{{$classe->nom}}</label>
                      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="{{$classe->id}}" name="{{$classe->nom}}">
                      
                    </div>
                    @endforeach
                  </p>
                </div>
                 -->
                <label class="label">Selectionner les classes à attribuer</label>
                <div class="select is-multiple">
                <select name="classes[]" multiple>
                  @foreach($classes as $classe)
                  <option value="{{ $classe->id }}">{{ $classe->nom }}</option>
                  @endforeach
                </select>
                </div>
                <div style="overflow:auto;">
                  <div style="float:right;">
                    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
                  </div>
                </div>
                <!-- Circles which indicates the steps of the form: -->
                <div style="text-align:center;margin-top:40px;">
                  <span class="step"></span>
                  <span class="step"></span>

                </div>
              </form>
           </div>
          </div>
        </div>
      </div>
    </div>  
  <!-- /.card -->     
                    
  </main>


@endsection

@section('javascript')
    <!-- JS -->
    <!-- <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/main.js"></script>
 -->
    <script>
          var currentTab = 0; // Current tab is set to be the first tab (0)
      showTab(currentTab); // Display the current tab

      function showTab(n) {
        // This function will display the specified tab of the form...
        var x = document.getElementsByClassName("tab");
        x[n].style.display = "block";
        //... and fix the Previous/Next buttons:
        if (n == 0) {
          document.getElementById("prevBtn").style.display = "none";
        } else {
          document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
          document.getElementById("nextBtn").innerHTML = "Submit";
        } else {
          document.getElementById("nextBtn").innerHTML = "Next";
        }
        //... and run a function that will display the correct step indicator:
        fixStepIndicator(n)
      }

      function nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName("tab");
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        currentTab = currentTab + n;
        // if you have reached the end of the form...
        if (currentTab >= x.length) {
          // ... the form gets submitted:
          document.getElementById("regForm").submit();
          return false;
        }
        // Otherwise, display the correct tab:
        showTab(currentTab);
      }

      function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
          // If a field is empty...
          if (y[i].value == "") {
            // add an "invalid" class to the field:
            y[i].className += " invalid";
            // and set the current valid status to false
            valid = false;
          }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
          document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
      }

      function fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
        var i, x = document.getElementsByClassName("step");
        for (i = 0; i < x.length; i++) {
          x[i].className = x[i].className.replace(" active", "");
        }
        //... and adds the "active" class on the current step:
        x[n].className += " active";
      }
  </script>
@endsection