@extends('layouts.app')

@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">
                <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>
                      </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>
                              {!! $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>
                                {!! $privacy_policy !!}
                              </div>
                        </div>
                        </li>
                        <li>
                            <div class="collapsible-header"><i class="material-icons">book</i>Terms and Conditions</div>
                            <div class="collapsible-body"> 
                                <div id="tnc">

                                    <label class="active">Terms and Conditions</label>
                                {!! $tnc !!}
                                </div>
                            </div>
                          </li>
                </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
@endsection
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script>
  $(document).ready(()=>{
    $('.collapsible').collapsible();
    let daily_goals = JSON.parse('{!! json_encode($daily_goals) !!}');
    for(let goal in daily_goals){
      if(daily_goals.hasOwnProperty(goal)){
        $("#daily_goals").append(`   <div class="row">
                      <div class="input-field col s12 m6">
                        <input type="text" readonly value="`+goal+`">
                        
                      </div>
                      <div class="input-field col s12 m6">
                        <input type="text" readonly value="`+daily_goals[goal]+`">
                        
                      </div>
                      
                    </div>`);
      }
    }
  })
  </script>