@extends('admin.dashboard')

@section('title', 'Create Element')

@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/bootvalidation.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('addmicrounitselements', $microunit) !!}
</div>

<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <div class="box box-success">
      <div class="box-header">
        <span class="fa-stack fa-lg text-green">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-bars fa-stack-1x fa-inverse"></i>
        </span>
        <h3 class="box-title">Add Element to Microunit: <span class="text-green text-bold">{{$microunit->muid}}</span></h3>
      </div>
      @if (count($errors) > 0)
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      {!! Form::open(['route'=> ['admin.elmu.store', $microunit->id], 'method'=>'POST', 'class'=> 'form-horizontal', 'files'=> true ]) !!}
      <div class="box-body">
        <input id="microunit_id" name="microunit_id"  type="hidden" value="{{$microunit->id}}">
        <div class="row">
          <div class="col-lg-10 col-lg-offset-1">
            <div class="box-body">
              <div id="element_fields">

              </div>
              <div class="row" id="el">
                <div class="col-lg-12">
                  <div class="form-group">
                    {{ Form::label('title', 'Title *', ['class'=>'col-lg-1 control-label', 'for'=>'validate-title']) }}
                    <div class="input-group col-lg-11">
                      <input type="text" name="emtitle[]" id="emtitle" class="form-control title" required="">
                      <span class="input-group-addon danger">
                        <span class="glyphicon glyphicon-remove"></span>
                      </span>
                      {{-- <div class="input-group-btn">
                        <button class="btn btn-success" type="button"  onclick="element_fields();">
                          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>
                      </div> --}}
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    {{ Form::label('element_id', 'Element', ['class'=>'col-lg-2 control-label', 'for'=>'validate-element']) }}
                    <div class="input-group col-lg-10">
                      <select class="form-control elementid" name="element_id[]" id="elementid"  placeholder="Element" data-serial="0" required>
                        <option value="">Select an Element</option>
                        @foreach ($elements as $element)
                          <option value="{{$element->id}}">{{$element->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    {{ Form::label('status_id', 'Status', ['class'=>'col-lg-2 control-label', 'for'=>'validate-status']) }}
                    <div class="input-group col-lg-10">
                      <select class="form-control status" name="state_id[]" id="validate-select" placeholder="Status" required>
                        <option value="">Select a Status</option>
                        @foreach ($status as $st)
                          <option value="{{$st->id}}">{{$st->name}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    {{ Form::label('language_id', 'Language', ['class'=>'col-lg-2 control-label', 'for'=>'validate-language']) }}
                    <div class="input-group col-lg-10">
                      <select class="form-control language" name="emlanguage_id[]" id="validate-select" placeholder="Status" required>
                        <option value="">Select a Language</option>
                        @foreach ($languages as $language)
                          <option value="{{$language->id}}">{{$language->language}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                      {{ Form::label('filename', 'File', ['class'=>'col-lg-2 control-label', 'for'=>'validate-language']) }}
                      <div class="input-group col-lg-10">
                        <input type="file" name="emfilename[]" id="emfilename" class="form-control file" multiple="true">
                      </div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group">
                    {{ Form::label('description', 'Description', ['class'=>'col-lg-1 control-label', 'for'=>'validate-desc']) }}
                    <div class="input-group col-lg-11">
                      <textarea name="emdescription[]" id="emdescription" class="form-control description"></textarea>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 short-description" id="short-description">
                  <div class="form-group">
                    {{ Form::label('short_description', 'Short Description', ['class'=>'col-lg-1 control-label short-description', 'for'=>'validate-desc']) }}
                    <div class="input-group col-lg-11">
                      <textarea type="text" name="emshort[]" placeholder="Short Description..." class="form-control short-description" id="short-description"></textarea>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 audio-file" id="audio-file-form">
                  <div class="form-group">
                    {{ Form::label('audiofile', 'Audio File', ['class'=>'col-lg-1 control-label audio-file', 'for'=>'validate-desc']) }}
                    <div class="input-group col-lg-11">
                      <input type="file" name="emaudiofile[]" class="form-control audio-file" id="audio-file" multiple="true">
                    </div>
                  </div>
                </div>
              </div><!--.row -->
            </div>
          </div>
        </div>
        <div class="box-footer">
          <a href="{{route('admin.elmu.index', $microunit->id)}}" class="btn btn-danger pull-right">Cancel</a>
          <button type="submit" class="btn btn-success pull-right margin-right-btn">Add</button>
        </div><!-- /.box-footer -->
      </div><!-- /.box-body -->
      {!! Form::close() !!}
    </div>
  </div>
</div>
@endsection


@section('javascripts')
  <script src="/js/admin/dist/bootvalidation.js"></script>
  <script src="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.js"></script>
  <script src="/js/admin/select2/select2.min.js"></script>
  <script src="/js/admin/alert/validationrules.js"></script>
@endsection