@extends('layouts.app')

@section('content')
<div class="container">
  <form action="{{ route('staffcreate.update', ['id' => $userProfile->id]) }}" method="post">
     {{ csrf_field() }}
     {{ method_field('PUT') }}
    <div class="row">
        <div class="col s12">
            <h4>Edit Profile</h4>
        </div>
    </div>
    <div class="row">
      <div class="col s12 m12 l12">
        <div class="input-field col  s12 m6 l6">
        <select name="designation">
            @foreach ($designations as $designation)
            <option value="{{$designation->staff_title }}" {{ ( $userProfile->title== $designation->staff_title) ? 'selected' : '' }}>
                {{$designation->staff_title }}
            </option>
          @endforeach
        </select>
        <label>Title</label>
      </div>
      <div class="input-field col  s12 m6 l6">
        <select name="title">
          @foreach ($titles as $title)
            <option value="{{$title->Name}}" {{ ( $userProfile->designation== $title->Name) ? 'selected' : '' }}>
                {{$title->Name}}
            </option>
          @endforeach
        </select>
        <label>Staff Designation</label>
      </div>
     </div>
    </div>
        <div class="row">
          <div class="col s12 m12 l12">
            <div class="input-field col s12 m12 l4">
              <input id="first_name" type="text" class="validate" value="{{ $userProfile->first_name}}" name="firstname" required>
              <label for="first_name">First Name</label>
           </div>

          <div class="input-field col  s12 m12 l4">
            <input id="last_name" type="text" class="validate" value="{{ $userProfile->last_name}}" name="lastname" required>
            <label for="last_name">Last Name</label>
          </div>

            <div class="input-field col  s12 m12 l4">
            <input id="mid_name" type="text" class="validate" value="{{ $userProfile->middle_name}}" name="middlename">
            <label for="mid_name">Middle Name</label>
          </div>
        </div>
      </div>


      <div class="row">
      <div class="col s12 m12 l12">
        <div class="input-field col s12 m12 l6">
        <select name="faculty">
          @foreach($faculty as $facult)
          <option value="{{$facult->FACULTY_NAME}}" {{ ( $userProfile->faculty== $facult->FACULTY_NAME) ? 'selected' : '' }}>{{$facult->FACULTY_NAME}}</option>
        @endforeach
        </select>
        <label>Faculty</label>
      </div>
      <div class="input-field col s12 m12 l6">
        <select name="department">
          @foreach($department as $dept)
          <option value="{{$dept->department_name}}" {{ ( $userProfile->department== $dept->department_name) ? 'selected' : '' }}>{{$dept->department_name}}</option>
        @endforeach
        </select>
        <label>Department</label>
      </div>
     </div>
    </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12 m12 l6">
            <input id="Unit" type="text" class="validate" value="{{$userProfile->unit}}" name="unit">
            <label for="Unit">Unit</label>
          </div>
          <div class="input-field col s12 m12 l6">
            <input id="Phone" type="text" class="validate" maxlength="20" value="{{$userProfile->phone}}" name="phone" required>
            <label for="Phone">Phone Number</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="file-field input-field col s12 m12 l6">
              @isset($userProfile->CV_url)
                        <tr>
                        <td>

                         <small>Click here to view {{$userProfile->title.' '.$userProfile->last_name.' '.$userProfile->first_name}}'s CV</small>
                          <a href="{{ url('storage/files/staff_CV/'.$userProfile->CV_url) }}" class="btn-floating btn-Small green" target="_blank">
                              <i class="material-icons" >local_printshop</i></a>

                        </td>
                      </tr>
                       @endisset
        </div>
          <div class="file-field input-field col s12 m12 l6">
              <div class="btn">
                <span>UPDATE CV (.PDF)</span>
                <input type="file">
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Optional if CV is already uploaded" name="CV">
              </div>
        </div>
        </div>

      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Biography</h6>
            <hr>
              <textarea id="Biography" class="materialize-textarea" name="biography" required>{{$userProfile->biography}}</textarea>

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

        <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Area of Specialization</h6>
            <hr>
              <textarea id="1" class="materialize-textarea" name="specialization"></textarea>
              <input type="hidden" name="specializationId" value="1" />
            </div>
        </div>
      </div>

        <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Conferences and Workshops</h6>
            <hr>
              <textarea id="9" class="materialize-textarea" name="conferences"></textarea>
              <input type="hidden" name="conferencesId" value="9" />

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

        <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Membership of professional bodies</h6>
            <hr>
              <textarea id="4" class="materialize-textarea" name="membership"></textarea>
              <input type="hidden" name="membershipId" value="4" />

            </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Publications (Articles and Journals)</h6>
            <hr>
              <textarea id="5" class="materialize-textarea" name="publications"></textarea>
              <input type="hidden" name="publicationsId" value="5" />
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Qualifications</h6>
            <hr>
              <textarea id="8" class="materialize-textarea" name="qualifications"></textarea>
              <input type="hidden" name="qualificationsId" value="8" />
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Research archive</h6>
            <hr>
              <textarea id="3" class="materialize-textarea" name="researchArchive"></textarea>
                <input type="hidden" name="researchArchiveId" value="3" />
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Research Interest</h6>
            <hr>
              <textarea id="7" class="materialize-textarea" name="researchInterest"></textarea>
              <input type="hidden" name="researchInterestId" value="7" />
            </div>
        </div>
      </div>
       <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Responsibilities</h6>
            <hr>
              <textarea id="2" class="materialize-textarea" name="responsibilities"></textarea>
              <input type="hidden" name="responsibilitiesId" value="2" />
            </div>
        </div>
      </div>
       <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <h6>Working Experience</h6>
            <hr>
              <textarea id="6" class="materialize-textarea" name="workingExperience"></textarea>
              <input type="hidden" name="workingExperienceId" value="6" />
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <div class="input-field col s12">
            <button type="submit" class="btn" style="width:100%">UPDATE</button>
        </div>
      </div>

      </form>
</div>


<script>
var elem = document.querySelector('.collapsible.expandable');
var instance = M.Collapsible.init(elem, {
  accordion: false
});
</script>

<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>
{{-- <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script> --}}

<script>
  function init() {
    var staffData = ;
   // console.log(staffData);
      for (let i = 0; i < staffData.length; i++) {
          document.getElementById(staffData[i].field_id).value = staffData[i].field_value
        }
  }

  const d = document.getElementById('Unit').value;
   if (d.length < 2) {
      document.getElementById('Unit').value='None';
  }

  init();
</script>

@endsection