@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
  <div class="col-sm-12">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h6 class="panel-title">Add Teacher's Details</h6>
      </div>
      <div class="panel-body">
        <h4 class="text-center bg-info" style="padding:5px; ">Teacher Form/Information:</h4>
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <form action="{{ route('LoggedIn.Settings.Teacher.Store') }}"
          class="form-horizontal" method="post" enctype="multipart/form-data" autoComplete="off"
        >
          @csrf

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Name</span>
              <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Full Name" value="{{ old('full_name') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Designation</span>
              <select class="form-control" id="designation" name="designation">
                <option value="">--Select--</option>
                @if ($designations->isNotEmpty())
                    @foreach ($designations as $designation)
                      <option value="{{ $designation->designation_id }}"
                        {{ old('designation') && $designation->designation_id == old('designation') ? 'selected' : '' }}>
                        {{ $designation->designation_name }}
                      </option>
                    @endforeach
                  @endif
              </select>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Email</span>
              <input type="text" class="form-control" id="email" name="email" placeholder="Email" value="{{ old('email') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Contact No.</span>
              <span class="input-group-addon" id="basic-addon1">+8801</span>
              <input type="text" class="form-control" id="ContactNo" maxlength="9" name="ContactNo" placeholder="Contact No."
                value="{{ old('ContactNo') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Relegion</span>
              <select class="form-control" id="relegion" name="relegion">
                <option value="">--Select--</option>
                <option value="Islam" {{ old('relegion') == 'Islam' ? 'selected' : '' }}>Islam</option>
                <option value="Hindu" {{ old('relegion') == 'Hindu' ? 'selected' : '' }}>Hindu</option>
                <option value="Chistian" {{ old('relegion') == 'Chistian' ? 'selected' : '' }}>Chistian</option>
                <option value="Buddist" {{ old('relegion') == 'Buddist' ? 'selected' : '' }}>Buddist</option>
              </select>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Blood</span>
              <select class="form-control" id="blood_group" name="blood_group">
                <option value="">--Select--</option>
                <option value="A+" {{ old('blood_group') == 'A+' ? 'selected' : '' }}>A+</option>
                <option value="B+" {{ old('blood_group') == 'B+' ? 'selected' : '' }}>B+</option>
                <option value="AB+"{{ old('blood_group') == 'AB+'? 'selected' : '' }}>AB+</option>
                <option value="O+" {{ old('blood_group') == 'O+' ? 'selected' : '' }}>O+</option>
                <option value="A-" {{ old('blood_group') == 'A-' ? 'selected' : '' }}>A-</option>
                <option value="B-" {{ old('blood_group') == 'B-' ? 'selected' : '' }}>B-</option>
                <option value="AB-"{{ old('blood_group') == 'AB-'? 'selected' : '' }}>AB-</option>
                <option value="O-" {{ old('blood_group') == 'O-' ? 'selected' : '' }}>O-</option>
              </select>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Emergency Contact No</span>
              <span class="input-group-addon" id="basic-addon1">8801</span>
              <input type="text" class="form-control" id="emg_phone_no" name="emg_phone_no" placeholder="Emergency Contact No"
                value="{{ old('emg_phone_no') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Name of emergency contact person</span>
              <input type="text" class="form-control" id="emg_name" name="emg_name" placeholder="Name of emergency contact person"
                value="{{ old('emg_name') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Emergency contact person relationship</span>
              <input type="text" class="form-control" id="emg_relation" name="emg_relation" placeholder="Emergency contact person relationship"
                value="{{ old('emg_relation') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Gender</span>
              <select class="form-control" id="gender" name="gender">
                <option value="">--Select--</option>
                <option value="1" {{ old('gender') == '1' ? 'selected' : '' }}>Male</option>
                <option value="2" {{ old('gender') == '2' ? 'selected' : '' }}>Female</option>
              </select>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">NID</span>
              <input type="text" class="form-control" id="nid_no" name="nid_no" placeholder="NID" value="{{ old('nid_no') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Date Of Birth</span>
              <input type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="ture" class="form-control date" id="date_of_birth" name="date_of_birth" placeholder="2018-12-31"  value="{{ old('date_of_birth') }}">
            </div>
          </div>

          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">TIN NUMBER (IF ANY)</span>
              <input type="text" class="form-control" id="tin_no" name="tin_no" placeholder="TIN NUMBER" value="{{ old('tin_no') }}">
            </div>
          </div>

          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <div class="input-group" style="margin-bottom: 0px">
                <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">NID Image</span>
                <input type="file" name="nid_image" id="nid_image"  class="form-control" value="" />
              </div>
              <label class="text-info" style="font-size: 10px;">
                You can Upload only : jpeg, png, jpg , Limit: Maximum allowed file size is 2MB .
              </label>
            </div>
            <div class="col-sm-4">
              <div class="input-group" style="margin-bottom: 0px">
                <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Birthday Certificate Image</span>
                <input type="file" name="birthday_certificate_image" id="birthday_certificate_image"  class="form-control" value="" />
              </div>
              <label class="text-info" style="font-size: 10px;">
                You can Upload only : jpeg, png, jpg, Limit: Maximum allowed file size is 2MB .
              </label>
            </div>
            <div class="col-sm-4">
              <div class="input-group" style="margin-bottom: 0px">
                <span class="input-group-addon" id="basic-addon1" style="font-weight: bold">Profile Image</span>
                <input type="file" name="image" id="image"  class="form-control" value="" />
              </div>
              <label class="text-info" style="font-size: 10px;">
                You can Upload only : jpeg, png, jpg, Limit: Maximum allowed file size is 2MB .
              </label>
            </div>
          </div>

          <h4 class="text-center bg-info" style="padding:5px; ">Account Details</h4>

          <div class="form-group form-group-sm">
            <div class="col-sm-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Mobile Banking Account</span>
                <input type="text" class="form-control" id="account_no" name="account_no" placeholder="Account No" value="{{ old('account_no') }}">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Account Type</span>
                <select class="form-control" id="account_type" name="account_type">
                  <option value="">--Select--</option>
                  <option value="1" {{ old('account_type') == '1' ? 'selected' : '' }}>bKash</option>
                  <option value="2" {{ old('account_type') == '2' ? 'selected' : '' }}>Nagad</option>
                  <option value="3" {{ old('account_type') == '3' ? 'selected' : '' }}>Rocket</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-group form-group-sm">
            <div class="col-md-12 table-responsive">
              <table class="table table-bordered table-hover table-sortable" id="bankTable">
                <thead>
                  <tr>
                    <th class="text-center">
                      Bank Name
                    </th>
                    <th class="text-center">
                      Bank Account No
                    </th>
                    <th class="text-center">
                      Bank Branch
                      <button type="button" name="add_bank" id="add_bank" class="btn btn-success btn-sm pull-right">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @for($i=0; $i<1; $i++)
                  <tr>
                    <td>
                      <input type="text" name="bank_information[{{ $i }}][bank_name]" placeholder="Bank Name"
                        class="form-control" value="{{ old('bank_information[$i][bank_name]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="bank_information[{{ $i }}][bank_account_no]" placeholder="Bank Account No"
                        class="form-control" value="{{ old('bank_information[$i][bank_account_no]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="bank_information[{{ $i }}][bank_branch]" placeholder="Bank Branch"
                        class="form-control"value="{{ old('bank_information[$i][bank_branch]') }}"
                      />
                    </td>
                  </tr>
                  @endfor
                </tbody>
              </table>
            </div>
          </div>

          <h4 class="text-center bg-info" style="padding:5px; ">Job Details (Branch)</h4>

          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Joining Date</span>
                <input type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="ture"
                  class="form-control date" id="joining_date" name="joining_date" placeholder="2018-12-31" value="{{ old('joining_date') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Branch</span>
                <select class="form-control" id="User_branch" name="User_branch">
                  <option value="">---Select---</option>
                  @if ($branches->isNotEmpty())
                    @foreach ($branches as $branch)
                      <option value="{{ $branch->school_branch_id }}"
                        {{ old('User_branch') && $branch->school_branch_id == old('User_branch') ? 'selected' : '' }}
                      >
                        {{ $branch->school_branch_name }}
                      </option>
                    @endforeach
                  @endif
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#A94442;font-weight: bold">Branch-Shift-Version</span>
                <select id="branch_shift_version" name="branch_shift_version" class="form-control">
                  <option value="">----- Select -----</option>
                  @if ($branchAndVersions->isNotEmpty())
                    @foreach ($branchAndVersions as $ibv)
                      <option value="{{ $ibv->institute_branch_version_id }}"
                        {{ old('branch_shift_version') && $ibv->institute_branch_version_id == old('branch_shift_version') ? 'selected' : '' }}
                      />
                        {{ $ibv->school_branch_name }}, {{ $ibv->school_version_name }} Version
                      </option>
                    @endforeach
                  @endif
                </select>
              </div>
            </div>
            <div class="col-sm-4">
            <div class="input-group">
               <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold"> Index No</span>
               <input type="text" class="form-control" id="index_no" name="index_no" placeholder="Index No" value="{{ old('index_no') }}">
            </div>
            </div>

            <div class="col-sm-4">
              <div class="input-group">
                   <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Salary Code</span>
                   <input type="text" class="form-control" id="salary_code" name="salary_code" placeholder="Salary Code" value="{{ old('salary_code') }}">
              </div>
            </div>

            <div class="col-sm-4">
              <div class="input-group">
                 <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">MPO Date</span>
                 <input type="text" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="ture" class="form-control date" id="mpo_date" name="mpo_date" placeholder="2018-12-31" value="{{ old('mpo_date') }}">
              </div>
            </div>
          </div>

          <h4 class="text-center bg-info" style="padding:5px; ">Family Information</h4>

          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Father's Name</span>
                <input type="text" class="form-control" id="father_name" name="father_name" placeholder="Father Name"
                  value="{{ old('father_name') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Mother's Name</span>
                <input type="text" class="form-control" id="mother_name" name="mother_name" placeholder="Mother's  Name"
                  value="{{ old('mother_name') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Marital Status</span>
                <select class="form-control" id="marital_status" name="marital_status">
                  <option value="">--Select--</option>
                  <option value="1" {{ old('marital_status') == '1' ? 'selected' : '' }}>Single</option>
                  <option value="2" {{ old('marital_status') == '2' ? 'selected' : '' }}>Married</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="col-md-12 table-responsive">
              <table class="table table-bordered table-hover table-sortable" id="familyTable">
                <thead>
                  <tr>
                    <th class="text-center">
                      Name
                    </th>
                    <th class="text-center">
                      Relation
                    </th>
                    <th class="text-center">
                      Profession
                      <button type="button" name="add_family" id="add_family" class="btn btn-success btn-sm pull-right">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @for($i=0; $i<1; $i++)
                  <tr>
                    <td>
                      <input type="text" name="family_information[{{ $i }}][name]" placeholder="Name"
                        class="form-control" value="{{ old('family_information[$i][name]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="family_information[{{ $i }}][relation]" placeholder="Relation"
                        class="form-control" value="{{ old('family_information[$i][relation]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="family_information[{{ $i }}][profession]" placeholder="Profession"
                        class="form-control"value="{{ old('family_information[$i][profession]') }}"
                      />
                    </td>
                  </tr>
                  @endfor
                </tbody>
              </table>
            </div>
          </div>

          <h4 class="text-center bg-info" style="padding:5px; ">Present Address</h4>

          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Present Address</span>
                <textarea class="form-control" id="address" name="address">{{ old('address') }}</textarea>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Police station</span>
                <input type="text" class="form-control" id="present_police_station" name="present_police_station"
                  placeholder="Police station" value="{{ old('present_police_station') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Postcode</span>
                <input type="text" class="form-control" id="present_postcode" name="present_postcode"
                  placeholder="Postcode" value="{{ old('present_postcode') }}">
              </div>
            </div>
          </div>
          <h4 class="text-center bg-info" style="padding:5px; ">Permanent Address</h4>
          <div class="form-group form-group-sm">
            <div class="col-sm-12">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Permanent Address</span>
                <textarea class="form-control" id="permanent_address" name="permanent_address">{{ old('permanent_address') }}</textarea>
              </div>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">District</span>
                <input type="text" class="form-control" id="district" name="district" placeholder="District" value="{{ old('district') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Upazila</span>
                <input type="text" class="form-control" id="upazila" name="upazila" placeholder="Upazila" value="{{ old('upazila') }}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" style="color:#000;font-weight: bold">Postcode</span>
                <input type="text" class="form-control" id="postcode" name="postcode" placeholder="Postcode" value="{{ old('postcode') }}">
              </div>
            </div>
          </div>
          <h4 class="text-center bg-info" style="padding:5px; ">Others Experience</h4>
          <div class="form-group form-group-sm">
            <div class="col-md-12 table-responsive">
              <table class="table table-bordered table-hover table-sortable" id="experienceTable">
                <thead>
                  <tr>
                    <th class="text-center" style="width:400px;">
                      Institute
                    </th>
                    <th class="text-center" style="width:140px;">
                      Position
                    </th>
                    <th class="text-center" style="width:100px;">
                      Tenure
                      <button type="button" name="add" id="add_experience" class="btn btn-success btn-sm pull-right">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @for($i=0; $i<1; $i++)
                  <tr>
                    <td>
                      <input type="text" name="experience_information[{{ $i }}][institute]" placeholder="Institute"
                        class="form-control" value="{{ old('experience_information[$i][institute]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="experience_information[{{ $i }}][position]" placeholder="Lecturer"
                        class="form-control" value="{{ old('experience_information[$i][position]') }}"
                      />
                    </td>
                    <td>
                      <input type="text" name="experience_information[{{ $i }}][tenure]"  placeholder="6 months"
                        class="form-control"value="{{ old('experience_information[$i][tenure]') }}"
                      />
                    </td>
                  </tr>
                  @endfor
                </tbody>
              </table>
            </div>
          </div>
          <h4 class="text-center bg-info" style="padding:5px; ">Academic Information</h4>
          <div class="form-group form-group-sm">
            <div class="col-md-12 table-responsive">
              <table class="table table-bordered table-hover table-sortable" id="dynamicTable">
                <thead>
                  <tr>
                    <th class="text-center" style="width:340px;">
                      Name Of Exam
                    </th>
                    <th class="text-center" style="width:180px;">
                      Year
                    </th>
                    <th class="text-center" style="width:360px;">
                      Department/Subject
                    </th>
                    <th class="text-center" style="width:140px;">
                      Grade/Division
                    </th>
                    <th class="text-center">
                      Board/University
                      <button type="button" name="add" id="add" class="btn btn-success btn-sm pull-right">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                      </button>
                    </th>
                    </tr>
                  </thead>
                  <tbody>
                    @for($i=0; $i<3; $i++)
                    <tr>
                      <td>
                        <input type="text" name="academic_information[{{ $i }}][ac_exam_name]" placeholder="Name Of Exam"
                          class="form-control" value="{{ old('academic_information[$i][ac_exam_name]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="academic_information[{{ $i }}][ac_year]" placeholder="Year"
                          class="form-control" value="{{ old('academic_information[$i][ac_year]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="academic_information[{{ $i }}][ac_department]" placeholder="Department/Subject"
                          class="form-control"value="{{ old('academic_information[$i][ac_department]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="academic_information[{{ $i }}][ac_grade]" placeholder="Grade/Division"
                          class="form-control"value="{{ old('academic_information[$i][ac_grade]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="academic_information[{{ $i }}][ac_board]" placeholder="Board/University"
                          class="form-control"value="{{ old('academic_information[$i][ac_board]') }}"
                        />
                      </td>
                    </tr>
                    @endfor
                  </tbody>
                </table>
              </div>
            </div>
            <h4 class="text-center bg-info" style="padding:5px; ">Training Details</h4>
            <div class="form-group form-group-sm">
              <div class="col-md-12 table-responsive">
                <table class="table table-bordered table-hover table-sortable" id="traningTable">
                  <thead>
                    <tr>
                      <th class="text-center" style="width:200px;">
                        Name of training
                      </th>
                      <th class="text-center" style="width:200px;">
                        Authority
                      </th>
                      <th class="text-center" style="width:100px;">
                        Tenure
                      </th>
                      <th class="text-center" style="width:100px;">
                        Year
                        <button type="button" name="add_traning" id="add_traning" class="btn btn-success btn-sm pull-right">
                          <i class="fa fa-plus" aria-hidden="true"></i>
                        </button>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @for($i=0; $i<1; $i++)
                    <tr>
                      <td>
                        <input type="text" name="traning_information[{{ $i }}][name_of_training]" placeholder="Name of training"
                          class="form-control" value="{{ old('traning_information[$i][name_of_training]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="traning_information[{{ $i }}][authority]" placeholder="Authority"
                          class="form-control" value="{{ old('traning_information[$i][authority]')}}"
                        />
                      </td>
                      <td>
                        <input type="text" name="traning_information[{{ $i }}][tenure]" placeholder="Tenure"
                          class="form-control" value="{{ old('traning_information[$i][tenure]') }}"
                        />
                      </td>
                      <td>
                        <input type="text" name="traning_information[{{ $i }}][year]" placeholder="Year"
                          class="form-control"value="{{ old('traning_information[$i][year]') }}"
                        />
                      </td>
                    </tr>
                    @endfor
                  </tbody>
                </table>
              </div>
            </div>

            <h4 class="text-center bg-info" style="padding:5px; ">Achievement Details</h4>

            <div class="form-group form-group-sm">
              <div class="col-md-12 table-responsive">
                <table class="table table-bordered table-hover table-sortable" id="achievementTable">
                  <thead>
                    <tr>
                      <th class="text-center" style="width:400px;">
                        Achievement Details
                      </th>
                      <th class="text-center" style="width:100px;">
                        Year
                        <button type="button" name="add_achievement" id="add_achievement" class="btn btn-success btn-sm pull-right">
                          <i class="fa fa-plus" aria-hidden="true"></i>
                        </button>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    @for($i=0; $i<1; $i++)
                    <tr>
                      <td>
                        <textarea class="form-control" id="details" name="achievement_information[{{ $i }}][details]">
                          {{ old('achievement_information[$i][details]')}}
                        </textarea>
                      </td>
                      <td>
                        <input type="text" name="achievement_information[{{ $i }}][year]" placeholder="2021"
                          class="form-control" value="{{ old('achievement_information[$i][year]') }}"
                        />
                      </td>
                    </tr>
                    @endfor
                  </tbody>
                </table>
              </div>
            </div>

            <h4 class="text-center bg-info" style="padding:5px; ">Online Class Information ( Zoom )</h4>

            <div class="form-group form-group-sm">
              <div class="col-sm-6">
                <div class="input-group">
                  <span class="input-group-addon" id="zoom_api_key" style="font-weight: bold">Zoom Api Key</span>
                  <input type="text" class="form-control" id="zoom_api_key" name="zoom_api_key" value="{{ old('zoom_api_key') }}">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group">
                  <span class="input-group-addon" id="zoom_api_secret" style="font-weight: bold">Zoom Api Secret</span>
                  <input type="text" class="form-control" id="zoom_api_secret" name="zoom_api_secret" value="{{ old('zoom_api_secret') }}">
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-12">
                <button type="submit" class="btn btn-primary btn-sm btn-block">
                  <i class="fa fa-floppy-o"></i>&nbsp;Save
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  var rowCount = $("#bankTable tr").length;
  var b = rowCount-2;
  $("#add_bank").click(function(){
    b++;
    $("#bankTable").append(
      `<tr>
        <td>
          <input type="text" name="bank_information[${b}][bank_name]"  placeholder="Bank Name" class="form-control"/>
        </td>
        <td>
          <input type="text" name="bank_information[${b}][bank_account_no]" placeholder="Bank Account No" class="form-control"/></td>
        <td>
          <input type="text" name="bank_information[${b}][bank_branch]"  placeholder="Bank Branch" class="form-control"/>
        </td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  var rowCount = $("#familyTable tr").length;
  var f = rowCount-2;
  $("#add_family").click(function(){
    f++;
    $("#familyTable").append(
      `<tr>
        <td>
          <input type="text" name="family_information[${f}][name]"  placeholder="Name" class="form-control"/>
        </td>
        <td>
          <input type="text" name="family_information[${f}][relation]" placeholder="Relation" class="form-control"/></td>
        <td>
          <input type="text" name="family_information[${f}][profession]"  placeholder="Profession" class="form-control"/>
        </td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  var rowCount = $("#experienceTable tr").length;
  var ex = rowCount-2;
  $("#add_experience").click(function(){
    ex++;
    $("#experienceTable").append(
      `<tr>
        <td>
          <input type="text" name="experience_information[${ex}][institute]"  placeholder="Institute" class="form-control"/>
        </td>
        <td>
          <input type="text" name="experience_information[${ex}][position]" placeholder="Lecturer" class="form-control"/></td>
        <td>
          <input type="text" name="experience_information[${ex}][tenure]"  placeholder="6 months" class="form-control"/>
        </td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  var rowCount = $("#dynamicTable tr").length;
  var e = rowCount-2;
  $("#add").click(function(){
    e++;
    $("#dynamicTable").append(
      `<tr>
        <td>
          <input type="text" name="academic_information[${e}][ac_exam_name]" placeholder="Name Of Exam" class="form-control"/>
        </td>
        <td>
          <input type="text" name="academic_information[${e}][ac_year]"  placeholder="Year" class="form-control"/>
        </td>
        <td>
          <input type="text" name="academic_information[${e}][ac_department]"  placeholder="Department/Subject" class="form-control"/></td>
        <td>
          <input type="text"name="academic_information[${e}][ac_grade]" placeholder="Grade/Division" class="form-control"/></td>
        <td>
          <input type="text" name="academic_information[${e}][ac_board]" placeholder="Board/University" class="form-control"/></td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  var rowCount = $("#traningTable tr").length;
  var t = rowCount-2;
  $("#add_traning").click(function(){
    t++;
    $("#traningTable").append(
      `<tr>
        <td>
          <input type="text" name="traning_information[${t}][name_of_training]"  placeholder="Name of training" class="form-control"/>
        </td>
        <td>
          <input type="text" name="traning_information[${t}][authority]"  placeholder="Authority" class="form-control"/>
        </td>
        <td>
          <input type="text" name="traning_information[${t}][tenure]" placeholder="Tenure" class="form-control"/></td>
        <td>
          <input type="text" name="traning_information[${t}][year]"  placeholder="Year" class="form-control"/>
        </td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  var rowCount = $("#achievementTable tr").length;
  var a = rowCount-2;
  $("#add_achievement").click(function(){
    a++;
    $("#achievementTable").append(
      `<tr>
        <td>
          <textarea class="form-control" id="address" name="achievement_information[${a}][details]"></textarea>
        </td>
        <td>
          <input type="text" name="achievement_information[${a}][year]"  placeholder="Year" class="form-control"/>
        </td>
        <td width="1%">
          <button type="button" class="btn btn-danger btn-sm remove-tr">
            <i class="fa fa-window-close" aria-hidden="true"></i>
          </button>
        </td>
      </tr>`
    );
  });

  $(document).on('click', '.remove-tr', function(){
    $(this).parents('tr').remove();
  });
  </script>
  @endsection