@extends('layouts.app')

@section('title','Manage Organizational Structure')

@section('content')
<div class="title_left">
  <h3>Struktur Organisasi</h3>
</div>

<div class ="row">
  <div class ="col-md-12 col-sm-12 col-xs-12">
   <div class ="dashboard_graph x_panel">
    <div class ="row x_title">
     <div class ="col-md-6">
      <h3>Bagan Struktur Organisasi</h3>
    </div>
    <div class ="col-md-12">
    </div>
  </div>

  <div id="chart-container"></div>
  <div id="edit-panel" class="view-state">
    <span id="chart-state-panel" class="radio-panel">
      <input type="radio" name="chart-state" id="rd-view" value="view" checked="true"><label for="rd-view">View</label>
      <input type="radio" name="chart-state" id="rd-edit" value="edit"><label for="rd-edit">Edit</label>
    </span>
    <br>
    <label class="selected-node-group">Selected Structure :</label>
    <input type="text" id="selected-node" class="selected-node-group">
    <label>New Structure :</label>
    <input type="text" class="new-node">
    <label>Type Organizational Structure:</label>

    <select name="structure_type">
      @foreach (App\Models\StructureType::all() as $key => $structureType)
      <option value="{{ $structureType->id }}">{{ $structureType->name }}</option>
      @endforeach
    </optgroup>
  </select>
{{--     <i class="fa fa-plus-circle btn-inputs" id="btn-add-input"></i>
    <i class="fa fa-minus-circle btn-inputs" id="btn-remove-input"></i>
    <span id="node-type-panel" class="radio-panel">
      <input type="radio" name="node-type" id="rd-parent" value="parent"><label for="rd-parent">Parent(root)</label>
      <input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
      <input type="radio" name="node-type" id="rd-sibling" value="siblings"><label for="rd-sibling">Sibling</label>
    </span> --}}
    <button type="button" id="btn-add-nodes">Add</button>
    <button type="button" id="btn-edit-nodes">Edit</button>
    <button type="button" id="btn-delete-nodes">Delete</button>
    <br>
    <label>Select Position</label>

    <select name="position_name">
      <optgroup label="Position">
        <option value="">---</option>
      </optgroup>
    </select>


    <label class="control-label">New Position</label>
    <input type="text" name="position_name" class="selected-node-group">

    <label>Level Of Position</label>

    <select name="position_level">
      @foreach (App\Models\LevelOfPosition::all() as $key => $level)
      <option value="{{ $level->id }}">{{ $level->name }}</option>
      @endforeach
    </select>

    <button type="button" id="btn-add-position">Add Position</button>
    <button type="button" id="btn-delete-position">Delete Position</button>
  </div>

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

@endsection

@push('scripts')
  <script type="text/javascript" src="{{ asset('assets/admin/sto/js/scriptsorg.js') }}"></script>
@endpush