@extends('layouts.app')

  @section('content')
    <style>
      p { padding-left:5px; }
    </style>

    <div class="box-info">
      <h2><b>{!! trans('messages.inventory') !!}</b> {!! trans('messages.acknowledgement').' '.trans('messages.slip') !!}</h2>
      {!! Form::open(['url' => '/home/save-signature', 'files' => true, 'id' => 'cSign-form', 'data-submit' => 'noAjax']) !!}

        {{-- Issuer --}}
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <h4><b>{{ trans('messages.issuer') }}:</b></h4>
              @if(!empty($sender))
                <p>{!! $sender !!}</p>
              @endif
            </div>
          </div>
          {{-- Item Listing --}}
          @if (!empty($stocks))
            <div class="col-sm-12">
              <h4><b>{{ trans('messages.items') }}:</b></h4>
              <div class="table-responsive-sm">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>{{ trans('messages.name') }}</th>
                      <th>{{ trans('messages.quantity') }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($stocks as $stock)
                      <tr>
                        <td>{{ $stock->stock->item->name }}</td>
                        <td>{{ $stock->before - $stock->after }}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          @endif
        </div>

        <hr>

        {{-- Receiver --}}
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <h4><b>{{ trans('messages.recipient') }}:</b></h4>
            </div>
            <div class="form-group">
              @if(!empty($receiver))
                <p>{!! $receiver !!}</p>
              @endif
            </div>
            <div class="form-group">
              <h4><b>{{ trans('messages.recipient').' '.trans('messages.signature') }}:</b></h4>
            </div>
          </div>
        </div>

        {{-- Signature --}}
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <div id="drawSign" scroll="false" style="width:100%; margin:0 auto; display:flex; justify-content:center;">
                <canvas id="cSign" style="border: 2pt solid black;"></canvas>
              </div>
            </div>
          </div>
        </div>

        {{-- Buttons --}}
        <div class="row" style="display:flex; justify-content:center;">
          <div class="col-md-12" style="display:flex; justify-content:space-between; width:100%; max-width:600px;">
            <div class="form-group">
              <a id="clear-canvas" class="btn btn-info" style="width: 100px;">{!! trans('messages.clear') !!}</a>
            </div>
            <div class="form-group">
              <button id="submit-canvas" class="btn btn-success" style="width: 100px;">{!! trans('messages.save') !!}</button>
            </div>
          </div>
        </div>

        {!! Form::hidden('img_string','',['id' => 'hidden_textarea','size' => '30x3', 'class' => 'form-control','data-autoresize' => 1]) !!}
        {!! Form::hidden('model',isset($model) ? $model : '') !!}
        {!! Form::hidden('type',isset($type) ? $type : '') !!}
        {!! Form::hidden('uid',isset($user_id) ? $user_id : '') !!}
        {!! Form::hidden('items',isset($items) ? $items : '') !!}
        {!! Form::hidden('sender',isset($sender) ? $sender : '') !!}

      {!! Form::close() !!}
    </div>
  @stop

  @section('js')
    {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js') !!}
    <script>
      var element = document.getElementById("drawSign");
      var width = element.offsetWidth ;   // width of canvas
      var height = element.offsetHeight;  // height of canvas
      var canvas = new fabric.Canvas('cSign');

      canvas.isDrawingMode = true;
      canvas.selection = false;
      fabric.Object.prototype.selectable = false; // prevent drawing objects to be draggable or clickable
      // canvas.backgroundColor = "white";  // use this background colour to check the actual canvas size
      canvas.freeDrawingBrush.width = 4;    // size of the drawing brush

      function responsive() {
        var width = 600 ;
        var height = 400;
        if (element.offsetWidth < 600) {
          width = element.offsetWidth;
          height =  width * 2/3;
        }
        canvas.setHeight(height);
        canvas.setWidth(width);
        canvas.setDimensions({'width':width,'height':height},{'backstoreOnly':false,'cssOnly':true});
      }

      // Call responsive() on first load
      responsive();

      // Call responsive() on screen resize
      window.addEventListener('resize', function(){ responsive(); });

      // Clear button
      var btn_clear = document.getElementById('clear-canvas');
      btn_clear.onclick = function(){
        canvas.clear();
        canvas.backgroundColor = "white";
      };

      // Save button
      var btn_submit = document.getElementById('submit-canvas');
      btn_submit.onclick = function(){
        var dataURL = canvas.toDataURL({
          format: 'png',
          quality: 0.8
        });

        var hidden_field = document.getElementById('hidden_textarea');
        hidden_field.value = dataURL;

        document.getElementById("cSign-form").submit();
      };
    </script>
  @stop