@extends('layouts.app') 
@section("script")
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js" defer></script>


@section('content')
  @include('globalSettings.header')

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Current Global Settings</span>
          <hr>

          <div class="row">
            <div class="col s12">
              {!! Form::open(['route' => 'globalSettings.store', 'class' => 'col s12', 'files' => true]) !!} {!! Form::token() !!} {{ csrf_field()
              }}
              <ul class="collapsible">
                <li>
                  <div class="collapsible-header"><i class="material-icons">date_range</i>Daily Goals</div>
                  <div class="collapsible-body">
                    <div id="daily_goals">
                      <label class="active">Daily Goals</label>
                    </div>
                    <div class="row">
                      <div class="col s12"><a class="add-daily-goal waves-effect waves-teal green btn-flat white-text right"><i
                                                  class="material-icons left">add</i>Add Daily Goal</a></div>
                    </div>
                  </div>

                </li>
                <li>
                  <div class="collapsible-header"><i class="material-icons">favorite</i>Gems Awarded on Referral</div>
                  <div class="collapsible-body">
                    <div id="gems-awarded-on-referral">
                      <label class="active">Gems Awarded on Referral</label> 
                      {!! Form::number('gems_on_referral',$gems_on_referral, ['id'
                      => 'gems_on_referral']) !!}

                    </div>
                  </div>
                </li>
                <li>
                  <div class="collapsible-header"><i class="material-icons">enhanced_encryption</i>Privacy Policy</div>
                  <div class="collapsible-body">
                    <div id="privacy-policy">
                      <label class="active">Privacy Policy</label> {!! Form::textarea('privacy_policy',$privacy_policy, ['id'
                      => 'privacy_policy', 'class' => 'materialize-textarea']) !!}

                    </div>
                  </div>
                </li>
                <li>
                  <div class="collapsible-header"><i class="material-icons">book</i>Terms and Conditions</div>
                  <div class="collapsible-body">
                    <div id="terms_and_conditions">
                      {!! Form::textarea('tnc',$tnc, ['id' => 'tnc', 'class' => 'materialize-textarea']) !!}

                    </div>
                  </div>
                </li>
              </ul>
              {!! Form::button('Submit<i class="material-icons right">send</i>', ['type' => 'submit', 'class' => 'btn']);
              !!} {!! Form::close() !!}
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
@endsection


<script>
  $(document).ready(()=>{
        $('.collapsible').collapsible();

        var toolBarOptions =[['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['table', ['table']],
    ['insert', ['link', 'picture', 'hr']],
    ['view', ['fullscreen', 'codeview']],
    ['mybutton', ['hello']] //add button here
  ]
    $("#privacy_policy").summernote({
      height:300,
      toolbar:toolBarOptions,
      
    });

    $("#tnc").summernote({
      height:300,
      toolbar:toolBarOptions,
      
    });



        let daily_goals = JSON.parse('{!! json_encode($daily_goals) !!}');
        let count=0;
        for(let goal in daily_goals){
          if(daily_goals.hasOwnProperty(goal)){
            addDailyGoal(goal,daily_goals[goal]);
          }
        }
        function addDailyGoal(goal,value){
          $("#daily_goals").append(`   <div class="row" id="daily_goal_`+count+`">
                          <div class="input-field col s12 m4">
                            <input type="text" name="daily_goal[`+count+`][goal]"  value="`+goal+`">
                            
                          </div>
                          <div class="input-field col s12 m4">
                            <input type="text" name="daily_goal[`+count+`][value]" value="`+value+`">
                            
                          </div>
                          <div class="col s12 m4">
                            <input type="button" data-count="`+count+`" value="Delete" class="btn delete_goal">
                          </div>
                          
                        </div>`);
                        count++;
        }
        $(document).on("click",".add-daily-goal",()=>{
          addDailyGoal("","");
        })
        $(document).on("click",".delete_goal",function(){
          if(parseInt($(this).data("count"))+1 > 3){
            $("#"+"daily_goal_"+$(this).data("count")).remove();
          }
          else{
            alert("Minimum 3 daily goals need to be present");
          }
          
        })
      })
</script>