@extends('layouts.default')
@extends('content_wrappers.md-10')

@section('title', ' | Edit '.$recipe->name)
@section('heading', 'Edit '.$recipe->name)

@section('content')
<div class="panel-body">
  {{ Form::model($recipe, array('route' => array('recipes.update', $recipe->id), 'method' => 'PUT')) }}
    <div class="row">
      <div class="form-group col-md-3 text-center">
        {{ Form::label('author', 'Created By:') }}
        {{ Form::text('author', null, array('class' => 'form-control', 'id' => 'authorFilter')) }}
      </div>
      <div class="col-md-3 text-center">
        {{ Form::label('user', 'Maintained By:') }}
        {{ Form::select($recipe->user->name, $lists['owners'], array('class' => 'form-control')) }}
      </div>

      <div class="col-md-3 text-center">Entered On: {{$recipe->date_entered->format('Y/m/d') }}</div>
      <div class="col-md-3 text-center">Last Changed: {{$recipe->date_modified->format('Y/m/d') }}</div>
    </div>
    <div class="row">
      <div class="col-sm-offset-3 col-sm-3 text-center">
        {{ Form::label('servings', 'Servings:') }}
        {{ Form::text('servings', null, array('class' => 'form-control')) }}
      </div>
      <div class="col-sm-3 text-center">Serving Size: {{$recipe->serving_size}}</div>
    </div>
    <br />
    <div class="row"><div class="panel-heading"><h1>Categories</h1></div></div>
    <div id="categories" class="row text-center">
      @foreach ($recipe->categories as $index => $category)
        {{ Form::button(ucwords($category->name), array('class' => 'btn form-control category','style'=>'width:100px;margin-left:10px;margin-bottom:10px;'))}}
      @endforeach
    </div>
    <div class='row text-center'>
      <div class='col-sm-offset-4 col-sm-2'><input id="categoryFilter" class="filter form-control" type="text" placeholder="Search.."></div>
      <div class='col-sm-2'>{{ Form::button("Add", array('id'=>'addCategory','class'=>'form-control'))}}</div>
    </div>
    <br />
    <div class="row"><div class="panel-heading"><h1>Description</h1></div></div>
    {{ Form::textarea('description', null, array('class' => 'form-control', 'id' => 'descriptionEditor','name'=>'descriptionEditor')) }}
    <br />
    <div class="row"><div class="panel-heading"><h1>Ingredients</h1></div></div>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th class='col-sm-2'>Alternative?</th>
            <th class='col-sm-1'>Quantity</th>
            <th class='col-sm-2'>Measurement</th>
            <th class='col-sm-5'>Name&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
            <th class='col-sm-2'></th>
          </tr>
        </thead>
        @foreach ($recipe->ingredients as $index => $ingredient)
          <tr>
            <td>
              @if($index != 0)
                {{Form::checkbox($ingredient->alternative,null,$ingredient->alternative,array('class' => 'form-control ingredientAlternative'))}}
              @endif
            </td>
            <td>{{Form::text($ingredient->quantity,$ingredient->quantity,array('class' => 'form-control ingredientQuantity'))}}</td>
            <td>{{Form::text($ingredient->measurement,$ingredient->measurement,array('class' => 'form-control ingredientMeasurement'))}}</td>
            <td>{{Form::text($ingredient->name,$ingredient->name,array('class' => 'form-control ingredientName'))}}</td>
            <td>{{Form::button("Remove",array('class' => 'form-control ingredientRemove'))}}</td>
          </tr>
        @endforeach
          <tr id="blankRow"><td colspan='5'></td></tr>
          <tr id="addRow">
            <td>{{Form::checkbox($ingredient->alternative,null,false,array('class' => 'form-control ingredientAlternative','id'=>'addIngredientAlternative'))}}</td>
            <td>{{Form::text($ingredient->quantity,null,array('class' => 'form-control ingredientQuantity'))}}</td>
            <td>{{Form::text($ingredient->measurement,null,array('class' => 'form-control ingredientMeasurement'))}}</td>
            <td>{{Form::text($ingredient->name,null,array('class' => 'form-control ingredientName'))}}</td>
            <td>{{Form::button("Add",array('class' => 'form-control','id' => 'addIngredient'))}}</td>
          </tr>
      </table>
    </div>
    @if(count($recipe->ingredients) > 0)
        </div>
    @endif

    <br /><br />
    <div class="row"><div class="panel-heading"><h1>Instructions</h1></div></div>
    {{ Form::textarea('instructions', null, array('class' => 'form-control', 'id' => 'instructionsEditor','name'=>'instructionsEditor')) }}
</div>

{{ Form::submit('Save', array('class' => 'btn btn-primary')) }}

{{ Form::close() }}
@endsection

@section('scripts')
  <script src="https://cdn.ckeditor.com/4.17.2/standard-all/ckeditor.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    CKEDITOR.replace('instructionsEditor');
    CKEDITOR.replace('descriptionEditor');

    var authors = @json($lists['authors']);
    $("#authorFilter").autocomplete({
      source: authors
    });
    var categories = @json($lists['categories']);
    $("#categoryFilter").autocomplete({
      source: categories
    });

    var ingredients = @json($lists['ingredients']);
    $(".ingredientName").autocomplete({
      source: ingredients
    });

    var measurements = @json($lists['measurements']);
    $(".ingredientMeasurement").autocomplete({
      source: measurements
    });

    $(".category").on("click",function(){
      $(this).remove();
    });

    $("#addCategory").on("click", function(){
      var newCategory = upperWords($('#categoryFilter').val().toLowerCase());
      var currentCategories = [];
      $(".category").each(function(){
        currentCategories.push($(this).text());
      });
      if(newCategory!="" && currentCategories.indexOf(newCategory) == -1){
        $("#categories").append('<button type="button" class="btn form-control category" style="width: 100px; margin-left: 10px;margin-bottom: 10px;">'+newCategory+'</button>');
      }
    });

    function upperWords(str){
      words=str.split(" ");
      words.forEach(function(word,i){
        words[i]=word[0].toUpperCase() + word.slice(1,word.length);
      });
      return words.join(" ");
    }

    $(".ingredientRemove").on("click",function(){
      $(this).parent().parent().remove();
    });

    $("#addIngredient").on("click", function(){
      var ingredientAlternative=$('#addIngredientAlternative').prop("checked");
      var ingredientQuantity=$('#addRow .ingredientQuantity').val();
      var ingredientMeasurement=$('#addRow .ingredientMeasurement').val();
      var ingredientName=$('#addRow .ingredientName').val();
      if(isFraction(ingredientQuantity) && ingredientMeasurement != "" && ingredientName != ""){
        var newRow='<tr>';
        newRow+='<td><input name="0" type="checkbox" '+ (ingredientAlternative ? 'checked="checked"' : "") +'class="form-control ingredientAlternative"></td>';
        newRow+='<td><input name="1" type="text" value="'+ingredientQuantity+'" class="form-control ingredientQuantity"></td>';
        newRow+='<td><input name="lb" type="text" value="'+ingredientMeasurement+'" class="form-control ingredientMeasurement ui-autocomplete-input" autocomplete="off"></td>';
        newRow+='<td><input name="carrot" type="text" value="'+ingredientName+'" class="form-control ingredientName ui-autocomplete-input" autocomplete="off"></td>';
        newRow+='<td><button type="button" class="form-control ingredientRemove">Remove</button></td>';
        newRow+='</tr>';
        $("#blankRow").before(newRow);
      }else{
        if(ingredientMeasurement == ""){alert("Ingredient measurement required")};
        if(ingredientName == ""){alert("Ingredient name required")};
      }
    });

    function isFraction(value){
      var pattern = new RegExp(/(^\d+\/\d+$)|(^\d*\.\d+$)|(^\d+ \d\/\d$)|(^\d+$)/);
      if(value.match(pattern)){return true}
      else{
        alert("Ingredient quantity must be a decimal or fraction");
        return false
      }
    }
  </script>
@endsection

@section('styles')
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endsection