@extends('layouts.app')

@section('content')

<div class="container">

  <form action="{{ route('department.store')}}" method="POST">

     {{ csrf_field() }}

    <div class="row">

        <div class="col s12">

            <h4>Add Department</h4>

        </div>

    </div>

<div class="row">

      <div class="col s12 m12 l12">

        <div class="input-field col s12 m12 l6">
        <select name="faculty">
          <option value="" selected>Select Faculty</option>
         @foreach($faculty as $facult)

         <option value="{{$facult->FACULTY_ID}}" {{ old('faculty') == $facult->FACULTY_ID ? 'selected' : '' }}>{{$facult->FACULTY_NAME}}</option>
        @endforeach
        </select>
        
        <label for="faculty">Faculty</label>

      </div>
      </div>
</div>

        <div class="row">

          <div class="col s12 m12 l12">

            <div class="input-field col s12 m12 l6">

              <input id="department" type="text" class="validate" placeholder="You cannot add an existing department" name="department" value="{{ old('department') }}" required>

              <label for="department">Department</label>

           </div>
          </div>
        </div>


      <div class="row">

        <div class="col s12 m12 l12">

          <div class="input-field col s12 l6">

            <button type="submit" class="btn" style="width:100%">Add Department</button>

        </div>

      </div>



      </form>

</div>


<script>

  document.addEventListener('DOMContentLoaded', function() {

    var elems = document.querySelectorAll('select');

    var instances = M.FormSelect.init(elems);

  });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


@endsection