@extends('layouts.app')
@section("script")
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />



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

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Edit Achievement: {{ $achievement->name }}</span>
          <hr>

          <div class="row">
            <div class="col s12">
              {!! Form::model($achievement, ['route' => ['achievement.update', $achievement->id], 'method' => 'PUT', 'class' => 'col s12', 'files' =>
              true]) !!} {!! Form::token() !!}
		<div class="row">
        <div class="input-field col s12 m6">
          <i class="material-icons prefix">book</i> {!! Form::text('name', null, ['id' => 'name', 'class' => 'validate', 'required'])
          !!} {!! Form::label('name', 'Achievement Name') !!}
        </div>
        <div class="file-field input-field col s12 m6">
            <i class="material-icons prefix">picture</i>
             {!! Form::text('image', null, ['id' => 'image', 'class' => 'validate',
            'required']) !!} {!! Form::label('image', 'Achievement Image') !!}
            <div class="btn" id="set_img_btn">
            <span>Select <i class="material-icons left">photo</i></span>
            </div>
          </div>


      </div>

      <div class="row">
          <div class="col s12 m6">

              <input id="bgcolour" name="bgcolour" type="text" class="jscolor" />
              {!! Form::label('bgcolor', 'Background Colour') !!}
          </div>



      </div>
      <div id="tiers"></div>
      <div class="row">
          <div class="input-field col s12">
            {!! Form::button('<i class="material-icons">add</i>', [ 'type' => 'button', 'id' => 'add_tier', 'class'
            => 'btn-floating btn waves-effect waves-light teal right tooltipped', 'data-position' => 'left', 'data-tooltip'
            => 'Add Tier' ]) !!}
          </div>
        </div>

      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">library_books</i>
          {!! Form::textarea('description', null, ['id' => 'description', 'class' => 'materialize-textarea']) !!} {!! Form::label('description
          ', 'Description') !!}
        </div>
      </div>
      <div class="row">
          <div class="input-field col s12 m6">
              <div class="switch">
                <label>
                Disabled
                {!! Form::checkbox('enabled', true, true); !!}
                <span class="lever"></span>
                Enabled
              </label>
              </div>
            </div>
      </div>

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

  </div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
<script src="{{asset('js/jscolor.js')}}"></script>
<script src="{{asset('js/achievement.js')}}"></script>
<script>
$(document).ready(()=>{


  function setTiers(){
  let tiers =JSON.parse(`{!! json_encode($tiers) !!}`);
  tiers.forEach((tier,index)=>{
    document.getElementById("add_tier").click();
    document.getElementById("tier["+index+"]"+"[name]").value=tier.name;
    document.getElementById("tier["+index+"]"+"[description]").value=tier.description;
    document.getElementById("tier["+index+"]"+"[image]").value=tier.image;
    document.getElementById("tier["+index+"]"+"[points]").value=tier.points;
    document.getElementById("tier["+index+"]"+"[gems]").value=tier.gems;

  })
}
function setBgColour(){
  let bgcolour = `{!! $bgcolour !!}`;
  document.getElementById("bgcolour").value=bgcolour;
}

setTiers();
setBgColour();

})

</script>
<script>
  var filebase = 'http://lingo-api.tootle.review:9595/?accessToken={!! Form::token() !!}';
  var urlbase = 'http://lingo-api.tootle.review:3000';
  var jq = jQuery.noConflict();
  jq(function(){
    jq("#set_img_btn").on("click",()=>{
			current_button_id="image";
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info( 'done!' );
          }
        }
      });
    })
	})
	jq(document).on("click",'.tier_image',(event)=>{
      console.log(event.currentTarget.attributes);
      current_button_id = 'tier['+event.currentTarget.attributes[2].value+'][image]';
      // console.log("Count",current_count);
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info("done");
          }
        }
      });
    })

		window.addEventListener("message", function(ev) {
      // console.log('ev: ',ev);
      if (ev.data.message === "file_selected") {
          console.log("result: " + ev.data.file);
          console.log(current_button_id);
          document.getElementById(current_button_id).value=urlbase+ev.data.file;
          // $("#"+current_button_id).val(urlbase+ev.data.file);
          jq.fancybox.close();
      }
  });


</script>
@endsection