@extends('layouts.welcome')

@section('title')
    Online Application
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <ol class="breadcrumb page-breadcrumb pull-center">
                        <li class="">Personal Details<i class="fa fa-angle-right"></i></li>
                        <li class=""><strong>Education Background</strong> <i class="fa fa-angle-right"></i></li>
                        <li class="">Programme <i class="fa fa-angle-right"></i></li>
                        <li class="">Confirm Details <i class="fa fa-angle-right"></i></li>
                        <li class="">Files</li>
                    </ol>
                </div>
            </div>

            <div style="margin-top: 30px" class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Education Background</header>
                        </div>
                        <div class="card-body " id="bar-parent2">
                            <form method="post" action="{{ url('educational-background') }}" id="form_sample_1" class="form-horizontal">
                                @csrf
                                <div id="personalDet" class="row">
                                    {{-- <input type="hidden" name="applicant_id" value="{{$applicant->id}}"> --}}
                                    {{-- <input type="hidden" name="nrc" value="{{$nrc}}"> --}}
                                    @if(Session::get('applicant_type_id') == 1)
                                    <div  class="col-md-3 col-sm-6">
                                        <div class="form-group">
                                            <label>Secondary School</label>
                                            <input type="text" name="highschool_name" class="form-control" placeholder="institution name">
                                        </div><br>
                                    </div>
                                    <div  class="col-md-3 col-sm-6">
                                        <div class="form-group">
                                            <label>Examination Board</label>
                                            <select name="exam_board_id" class="form-control">
                                                @foreach($exam_board as $e_b)
                                                <option value="{{$e_b->id}}">{{$e_b->board_name}}</option>
                                                @endforeach
                                            </select>
                                        </div> <br>
                                    </div>
                                    <div  class="col-md-3 col-sm-6">
                                        <div class="form-group">
                                            <label>Year Of Completion</label>
                                            <select name="highschool_compl_date" class="form-control">
                                                @foreach($years as $year)
                                                <option value="{{$year}}">{{$year}}</option>
                                            @endforeach
                                            </select>
                                        </div> <br>
                                    </div>
                                    {{-- <div  class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            <label>Year Of Completion</label>
                                            <select name="highschool_compl_date" class="form-select">
                                                @foreach($years as $year)
                                                    <option value="{{$year}}">{{$year}}</option>
                                                @endforeach
                                            </select>
                                        </div><br>
                                    </div> --}}

                                    @endif

                                    @if(Session::get('applicant_type_id') == 2)
                                    <div  class="col-md-4 col-sm-6">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <label>Previous Institution</label>
                                            <input type="text" name="institution_name" class="form-control" placeholder="institution name">
                                        </div><br>
                                        <div class="form-group">
                                            <label>Highest Qualification</label>
                                            <select name="highest_qualification" class="form-control">
                                                <option value="trade certificate">trade certificate</option>
                                                <option value="Diploma">Diploma</option>
                                                <option value="Advanced Diploma">Advanced Diploma</option>
                                                <option value="Degree">Degree</option>
                                                <option value="Masters">Masters</option>
                                            </select>
                                        </div><br>
                                        <div class="form-group">
                                            <label>Year Of Completion</label>

                                            <select name="tetiary_compl_date" class="form-select">
                                                @foreach($years as $year)
                                                    <option value="{{$year}}">{{$year}}</option>
                                                @endforeach
                                            </select>

                                        </div><br>

                                        <div class="form-group">
                                            <label>Examination Board</label>
                                            <select name="exam_board_id" class="form-control">
                                                @foreach($exam_board as $e_b)
                                                <option value="{{$e_b->id}}">{{$e_b->board_name}}</option>
                                                @endforeach
                                            </select>
                                        </div> <br>

                                    </div>
                                    @endif

                                </div>

                                <div id="personalDet" class="row">
                                    {{-- <div style="margin-bottom: 50px" class="card-head">
                                        <header>Grades Attained</header>
                                    </div> --}}
                                    @foreach($subjects as $subject)
                                        <div  class="col-md-3 col-sm-6">
                                            <!-- text input -->
                                            <div class="form-group">
                                                <label>{{$subject->subject_name}}</label>
                                                <select name="{{$subject->subject_name}}" class="form-select">
                                                    <option value="" selected disabled>Grade</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="A">A</option>
                                                    <option value="B">B</option>
                                                    <option value="C">C</option>
                                                    <option value="D">D</option>
                                                </select>
                                            </div><br>

                                        </div>
                                    @endforeach
                                </div><br>

                                <div class="col-md-12 col-sm-6">
                                    <span id="previous" class="btn btn-grey m-r-20">Previous</span>
                                    <button type="submit" class="btn btn-info m-r-20">Next</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- end page content -->
<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