@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('js/multi-select/css/multi-select.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
.hidden{
  display: none;
}
.multi-select-header{
  background-color: #555555;
  color: white;
}
</style>
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<div class="row justify-content-center">
  <div class="col-12 col-lg-10">
    <div class="shadow-sm p-3 bg-white rounded-lg pt-4">
      <form id="public_folderForm" method="post">
        @csrf
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputName">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>名稱</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <input type="text" name="name" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" id="InputName" value="{{ old('name',isset($model->name)?$model->name:null) }}" placeholder="名稱" required>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('name'))
            @foreach($errors->get('name') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="SelectFolder">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>上級資料夾</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          @php
          $parent_folder_id = old('parent_folder_id',isset($model->parent_folder_id)?$model->parent_folder_id:'root');
          $l = 1;
          $dir_name = '根目錄/';
          $has_folder = false;
          $folder_class = '\Modules\Doc\Entities\Folder';
          if(isset($model)&&$model instanceof $folder_class){
            $has_folder = true;
          }
          @endphp
          <select name="parent_folder_id" id="SelectFolder" class="selectpicker form-control {{ $errors->has('parent_folder_id') ? ' is-invalid' : '' }}" data-live-search="true" required>
            <option value="">請選擇上級資料夾</option>
            <option value="root"
              @if($parent_folder_id=='root')
              selected
              @endif
            >根目錄</option>
            @foreach($folders_options as $option)
              @include('doc::components.folderOptions',[$option,$parent_folder_id,$dir_name])
            @endforeach
          </select>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('parent_folder_id'))
            @foreach($errors->get('parent_folder_id') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputContent">
          <span class="align-middle"><b>說明</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <textarea type="text" name="description" class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" id="InputContent" rows="5">{{ old('description',isset($model->description)?$model->description:null) }}</textarea>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('description'))
            @foreach($errors->get('description') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-12 col-sm-3 text-sm-center">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>訪問人員</b></span>
        </label>
        @php
        $public_type_id = old('public_type_id',isset($model)?$model->public_type_id:1);
        @endphp
        <div class="col-12 col-sm-9 radio-group {{ $errors->has('public_type_id') ? ' is-invalid' : '' }}">
          @foreach($public_type_id_options as $option)
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input {{ $errors->has('public_type_id') ? ' is-invalid' : '' }}" id="public_type_id{{$option->id}}" name="public_type_id" value="{{$option->id}}"@if ($loop->first) required @endif
            @if($public_type_id==$option->id)
            checked
            @endif
            >
            <label class="custom-control-label" for="public_type_id{{$option->id}}">{{$option->name}}</label>
          </div>
          @endforeach
          <small class="form-text text-muted w-100">設定可訪問資料夾的人員</small>
        </div>
        @if ($errors->has('public_type_id'))
          @foreach($errors->get('public_type_id') as $error)
          <div class="invalid-feedback">
            {{ $error }}
          </div>
          @endforeach
        @endif
      </div>
      <div class="form-group row department-section @if($public_type_id==1) hidden @endif">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="SelectDepartment">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>部門/單位</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          @php
          $department_ids = old('department_ids',!empty($model->departments)?$model->departments->pluck('id')->toArray():[]);
          @endphp
          <select name="department_ids[]" id="SelectDepartment" class="selectpicker form-control {{ $errors->has('department_ids') ? ' is-invalid' : '' }}" multiple>
            @foreach($departments_options as $option)
            <option value="{{$option->id}}"
            @if(in_array($option->id,$department_ids))
            selected
            @endif
            >{{$option->name}}</option>
            @endforeach
          </select>
          <small class="form-text text-muted w-100">點擊可加入及移除</small>
          @if ($errors->has('department_ids'))
            @foreach($errors->get('department_ids') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
          <p class="multi-select-alert text-danger hidden">請選擇一個或多個部門/單位</p>
        </div>
      </div>
      <div class="text-center mt-5">
        <button type="button" class="btn btn-lg btn-success font-weight-bold folder-submit-btn">儲存</button>
      </div>
      </form>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/multi-select/js/jquery.multi-select.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
$(document).ready(function() {
  $('[name="public_type_id"]').on("change", function() {
      var type = $(this).val();
      $('.department-section').addClass('hidden');
      $('[name=department_ids]').attr("required",false);
      $('[name=department_ids]').multiSelect('deselect_all');

      if (type==2) {
        $('.department-section').removeClass('hidden');
        $('[name=department_ids]').attr("required",true);
      }
  });
  $('#SelectDepartment').multiSelect({
    selectableHeader: "<div class='multi-select-header text-center'>可選取部門/單位</div>",
    selectionHeader: "<div class='multi-select-header text-center'>已選取部門/單位</div>",
  });
  $('.folder-submit-btn').on("click", function() {
    var form = $("#public_folderForm");
    $('.multi-select-alert').addClass('hidden');
    $('.ms-container').css('border','none');
    if (!form[0].checkValidity()) {
      form[0].reportValidity();
      return;
    }

    var public_type_id = $('[name="public_type_id"]:checked').val();
    if (public_type_id==2) {
      var eleSelect =$('select[name="department_ids[]"]').val();
      if (eleSelect.length<=0) {
        $('.multi-select-alert').removeClass('hidden');
        $('.ms-container').css('border','2px solid red');
        return;
      }
    }
    LoadingCover.show();
    form.submit();
  });
});
</script>
@endpush