@extends('admin.dashboard')

@section('Title', 'Create Microunit')

@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">
  <link rel="stylesheet" href="/css/admin/select2/select2.min.css">
@endsection

@section('content')

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

<div class="row">
  <div class="col-md-12">
    <div class="box box-info">
      <div class="box-header with-border">
        <span class="fa-stack fa-lg text-green">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
        </span>
        <h3 class="box-title">Create Microunit</h3>
      </div><!-- /.box-header -->
      @if (count($errors) > 0)
      <div class="alert alert-danger">
        <ul>
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif
      <!-- form start -->

      {!! Form::open(['route'=> 'admin.microunits.store', 'method'=>'POST', 'class'=> 'form-horizontal', 'files'=> true ]) !!}
        <div class="box-body">
          <input id="muid" name="muid"  type="hidden" value="{{$microunitmuid}}">
          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <div class="box box-danger">
                <div class="box-header">
                  <span class="fa-stack fa-lg text-red">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-info fa-stack-1x fa-inverse"></i>
                  </span>
                  <h3 class="box-title">
                    Microunit Main Info
                  </h3>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-lg-4">
                      <div class="form-group">
                        {{ Form::label('language_id', 'Language *', ['class'=>'col-lg-3 control-label', 'for'=>'validate-language']) }}
                        <div class="input-group col-lg-9">
                          <select class="form-control" name="language_id" id="mu-language" placeholder="Language" required>
                            <option value="">Select a Language</option>
                            @foreach ($languages as $language)
                              <option value="{{$language->id}}">{{$language->language}}</option>
                            @endforeach
                          </select>
                          <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        {{ Form::label('license_id', 'License *', ['class'=>'col-lg-3 control-label', 'for'=>'validate-license']) }}
                        <div class="input-group col-lg-9">
                          <select class="form-control" name="license_id" id="mu-license" placeholder="License" required>
                            <option value="">Select a License</option>
                            @foreach ($licenses as $license)
                              <option value="{{$license->id}}">{{$license->name}}</option>
                            @endforeach
                          </select>
                          <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="form-group">
                        {{ Form::label('category_id', 'Topic *', ['class'=>'col-lg-3 control-label', 'for'=>'validate-topic']) }}
                        <div class="input-group col-lg-9">
                          <select class="form-control" name="category_id" id="mu-category" placeholder="Topic" required>
                            <option value="">Select a Topic</option>
                            @foreach ($categories as $category)
                              <option value="{{$category->id}}">{{$category->name}}</option>
                            @endforeach
                          </select>
                          <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                        </div>
                      </div>
                    </div>
                    <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">
                          {{ Form::text('title', null, array(
                            'class' => 'form-control',
                            'name'=> 'title',
                            'id' => 'mu-title',
                            'placeholder' => 'Title...',
                            'required'))
                          }}
                          <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('image', 'Feature Image *', ['class' => 'col-lg-6 control-label']) }}
                        <div class="col-lg-6">
                          {{ Form::file('image', array(
                            'class' => 'form-control',
                            'id' => 'mu-file'
                            ))
                          }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('material', 'I take full responsibility for the uploaded material', ['class'=>'col-lg-6 control-label']) }}
                        <div class="input-group col-lg-6">
                          {{ Form::checkbox('material', 1, true) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <div class="box box-danger">
                <div class="box-header">
                  <span class="fa-stack fa-lg text-red">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                  </span>
                  <h3 class="box-title">
                    Microunit Description & Target Group
                  </h3>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="form-group">
                          {{ Form::label('description', 'Description *', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                          {{ Form::textarea('description', null, array(
                           'class' => 'form-control',
                           'placeholder' => 'Description...',
                           'rows'=> '3',
                           'id' => 'mu-desc'))
                          }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                          {{ Form::label('target', 'Target *', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                          {{ Form::textarea('target', null, array('class' => 'form-control', 'placeholder' => 'Description...', 'rows'=> '3', 'id'=>'mu-target')) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <div class="box box-info">
                <div class="box-header">
                  <span class="fa-stack fa-lg text-blue">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-tags fa-stack-1x fa-inverse"></i>
                  </span>
                  <h3 class="box-title">Microunit Tags</h3>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        {{ Form::label('tag_id', 'Tags', ['class'=>'col-sm-2 control-label', 'for'=>'validate-topic']) }}
                        <div class="input-group col-xs-9">
                          <select class="form-control select2-multi" name="tag_id[]" id="validate-select" multiple="multiple" placeholder="Tags">
                            <option value="">Select Tag</option>
                            @foreach ($tags as $tag)
                              <option value="{{$tag->id}}">{{$tag->name}}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </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 fa-cog fa-stack-1x fa-inverse"></i>
                  </span>
                  <h3 class="box-title">Microunit Text Info</h3>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="form-group">
                        {{ Form::label('short_description', 'Short Desc', ['class'=>'col-lg-1 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-11">
                           {{ Form::textarea('short_description', null, array('class' => 'form-control', 'placeholder' => 'Short Description...', 'rows'=> '3')) }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('experiences', 'Experiences', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                           {{ Form::textarea('experiences', null, array('class' => 'form-control', 'placeholder' => 'Experiences...', 'rows'=> '3')) }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('learning_styles', 'Learning Styles', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                           {{ Form::textarea('learning_styles', null, array('class' => 'form-control', 'placeholder' => 'Learning Styles...', 'rows'=> '3')) }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('prerequisites', 'Pre-requisites', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                           {{ Form::textarea('prerequisites', null, array('class' => 'form-control', 'placeholder' => 'Pre-requisites...', 'rows'=> '3')) }}
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        {{ Form::label('funding', 'Funding', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                           {{ Form::textarea('funding', null, array('class' => 'form-control', 'placeholder' => 'Funding...', 'rows'=> '3')) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <div class="box box-warning">
                <div class="box-header">
                  <span class="fa-stack fa-lg text-orange">
                    <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</h3>
                </div>
                <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-desc']) }}
                        <div class="input-group col-lg-11">
                          <input type="text" name="emtitle[]" id="emfileid" class="form-control title">
                          <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>

          <div class="box-footer">
            <a href="{{url('admin/microunits')}}" class="btn btn-danger pull-right">Cancel</a>
            <button type="submit" class="btn btn-success pull-right margin-right-btn" id='form-create-mu'>Add</button>
          </div><!-- /.box-footer -->

        </div>
      {!! 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>
  <script type="text/javascript">

  $('.select2-multi').select2();

  var room = 1;
  function element_fields()
  {

    var l = $("div[id^=el]").length;

    if (l > 30)
    {

      swal({
        title: "Good Job",
        text: "You have already 30 elements! You can't add more!",
        type: "success",
        allowOutsideClick: false,
      });

    } else
    {

      room++;
      var objTo = document.getElementById('element_fields');
      var divtest = document.createElement("div");
      divtest.setAttribute("class", "form-group removeclass"+room);
      var rdiv = 'removeclass'+room;

      divtest.innerHTML = '<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-desc'])}}<div class="input-group col-lg-11"> <input type="text" name="emtitle[]" id="emfileid" class="form-control title"> <div class="input-group-btn"> <div class="input-group-btn"> <button class="btn btn-danger" onclick="remove_element_fields('+ room +');" type="button"> <span aria-hidden="true" class="glyphicon glyphicon-minus"></span> </button> </div></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[]" data-serial='+room+' id="elementid'+room+'" placeholder="Element" 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="emfileid'+room+'" 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'+room+'" class="form-control description"></textarea> </div></div></div><div class="col-lg-12 short-description" id="short-description'+room+'"> <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'+room+'"></textarea> </div></div></div><div class="col-lg-12 audio-file" id="audio-file-form'+room+'"> <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'+room+'" multiple="true"> </div></div></div></div><hr>';

      objTo.appendChild(divtest);
      $('#short-description'+room).hide();
      $('#audio-file-form'+room).hide();

      $('#elementid'+room).change(function ()
      {

        var select = $(this).val();
        if (select == "1" || select == "3" ) {
          $('#short-description'+room).show();
        } else
          $('#short-description'+room).hide();
        if (select == "5" ) {
          $('#audio-file-form'+room).show();
        } else $('#audio-file-form'+room).hide();

      });

      // validation rule for explanation element

      $('#elementid'+room).change(function(){
        var select =  $(this).val();

        if (select === "1")
        {

          $("#emdescription"+room).focusout(function(){
            var len = $("#emdescription"+room).val().length;
            if (len < 5 ) {
              swal({
                title: "Validation Rule",
                text: "Description min 100 char",
                type: "warning",
                allowOutsideClick: false,
                timer:5000,
              });
            } else if (len > 300) {
              swal({
                title: "Validation Rule",
                text: "Description 300 char",
                type: "warning",
                allowOutsideClick: false,
                timer:5000,
              });
            }
          });

          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });

        }

        else
        {

          if (select === "2")
          {

            $("#emdescription"+room).focusout(function(){
              var len = $("#emdescription"+room).val().length;
              if (len < 5 ) {
                swal({
                  title: "Validation Rule",
                  text: "Description min 100 char",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              } else if (len > 200) {
                swal({
                  title: "Validation Rule",
                  text: "Description 200 char",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
            });

            $("#emfileid"+room).change(function(){
              var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
                if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
                  swal({
                    title: "Validation Rule",
                    text: "The file must be with file type",
                    type: "warning",
                    allowOutsideClick: false,
                    timer:5000,
                  });
                }
            });

          }

        }

        if (select === "3")
        {

          $("#emdescription"+room).focusout(function(){
            var len = $("#emdescription"+room).val().length;
            if (len < 5 ) {
              swal({
                title: "Validation Rule",
                text: "Description min 100 char",
                type: "warning",
                allowOutsideClick: false,
                timer:5000,
              });
            } else if (len > 400) {
              swal({
                title: "Validation Rule",
                text: "Description 400 char",
                type: "warning",
                allowOutsideClick: false,
                timer:5000,
              });
            }
          });

          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });

        }

        // rule filename for simple graphic
        if (select === "4")
        {
          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });
        }

        // rule filename for interactive graphic
        if (select === "5")
        {
          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['gif']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with gif file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });
        }

        // rule filename for audio file
        if (select === "6")
        {
          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['mp3', 'mp4']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with mp3 file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });
        }

        // rule filename for video file
        if (select === "7")
        {
          $("#emfileid"+room).change(function(){
            var ext = $('#emfileid'+room).val().split('.').pop().toLowerCase();
              if($.inArray(ext, ['mp4']) == -1) {
                swal({
                  title: "Validation Rule",
                  text: "The file must be with mp4 file type",
                  type: "warning",
                  allowOutsideClick: false,
                  timer:5000,
                });
              }
          });
        }

        //rules for extra field for audio file
        $("#audio-file"+room).change(function(){
          var ext = $('#audio-file'+room).val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['mp3']) == -1) {
              swal({
                title: "Validation Rule",
                text: "The file must be with mp3 file type",
                type: "warning",
                allowOutsideClick: false,
                timer:5000,
              });
            }
        });

      });


    }



  }

  </script>
@endsection