@extends('layouts.app')
@section("script")
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

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

<section class="">
  <div class="row">
    <div class="col s12">
      <div class="card white">
        <div class="card-content white">
          <span class="card-title">Edit Gem</span>
          <hr>
          <div class="row">
            <div class="col s12">
              {{-- {!! Form::open(['route' => ['quotes.update', $quotes->id], 'method' => 'PUT','class' => 'col s12', 'files' => true]) !!} {!! Form::token() !!} --}}
              {!! Form::model($gem, ['route' => ['gems.update', $gem->id], 'class' => 'col s12', 'method' => 'PUT', 'files' => true]) !!}
              {!! Form::token() !!}

              <div class="row">
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">book</i>
                  {!! Form::text('name', $gem->name, ['id' => 'name', 'class' => 'validate', 'required'])
                  !!} {!! Form::label('name', 'Name') !!}
                </div>
                <div class="input-field col s12 m6">
                  <i class="material-icons prefix">attach_money</i>
                  {!! Form::number('cost', $gem->cost, ['id' => 'cost', 'class' => 'validate', 'required'])
                  !!} {!! Form::label('cost', 'Cost') !!}
                </div>
                <div class="input-field col s12 m12">
                  <i class="material-icons prefix">library_books</i>
                  {!! Form::text('description', $gem->description, ['id' => 'description', 'class' => 'validate', 'required'])
                  !!} {!! Form::label('description', 'Description') !!}
                </div>
                <input type="hidden" name="code" value="{{ $gem->code}}">


              </div>
              <div class="row">
								<div class="file-field input-field col s12 m12">
								  <i class="material-icons prefix">picture</i>
								   {!! Form::text('active_image', null, ['id' => 'active_img', 'class' => 'validate',
                  'required']) !!}
                   {!! Form::label('active_image', 'Active Image') !!}
								  <div class="btn" id="active_image">
									<span>Select <i class="material-icons left">photo</i></span>
								  </div>
								</div>

                </div>
                <div class="row">
                  <div class="file-field input-field col s12 m12">
                    <i class="material-icons prefix">picture</i>
                     {!! Form::text('inactive_image', null, ['id' => 'inactive_img', 'class' => 'validate',
                    'required']) !!}
                     {!! Form::label('inactive_image', 'Inactive Image') !!}
                    <div class="btn" id="inactive_image">
                    <span>Select <i class="material-icons left">photo</i></span>
                    </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>
@endsection

@section('scripts')

<script>
  var filebase = 'http://lingo-api.tootle.review:9595/?accessToken={!! Form::token() !!}';
  var urlbase = 'http://lingo-api.tootle.review:3000';
  var jq = jQuery.noConflict();
  let type="";
  jq(function(){
    jq("#active_image").on("click",()=>{
      type="active_img";
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info( 'done!' );
          }
        }
      });
    })
    jq("#inactive_image").on("click",()=>{
      type="inactive_img";
      jq.fancybox.open({
        src  : filebase,
        type : 'iframe',
        opts : {
          afterShow : function( instance, current ) {
            console.info( 'done!' );
          }
        }
      });
    })
  })

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

</script>