@extends('user.layouts.app')

@section('title', '買取金額変更')

@section('header')
    <p class="back"><a href="javascript:history.go(-1)">
            <svg version="1.2" baseProfile="tiny" id="back"
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16"
                 overflow="visible" xml:space="preserve">
      <g>
          <polyline fill="none" stroke="#58595B" stroke-miterlimit="10" points="6.94,1.93 0.74,8.13 6.68,14.07 	"/>
          <line fill="none" stroke="#58595B" stroke-miterlimit="10" x1="1.21" y1="8.44" x2="15.97" y2="8.44"/>
      </g>
    </svg>
        </a></p>
    <h1 id="title">買取金額変更</h1>
@endsection

@section('content')
    <main>
        <form>
            <div class="purchase-total">
                <p>買取予定金額<span>1,000,000</span>円(税別)</p>
            </div>
            <div class="purchase-ok-total">
                <p><em>確定した買取金額</em><span>900,000</span>円(税別)</p>
            </div>
            <div id="wrapper-ok" class="contents">
                <p class="ok-btn">買取金額に同意する</p>
                <button class="cancel">同意はせずにキャンセルする</button>
            </div>
            <div class="sign">
                <h2>サインをお願いいたします。</h2>
                <div id="signature"></div>
                <p id="clear">クリア</p>
                <div id="someelement"></div>
                <input type="submit" value="登録する" id="change-confirm" onClick="location.href='{{ route('user.vehicles.history') }}'; return false;">
            </div>
        </form>
    </main>
@endsection
@section('page_js')
    <script src="{{ asset('assets/user/js/jSignature.min.js') }}"></script>
    <script>
        $(function () {
            $("#signature").jSignature();
            $("#clear").click(function () {
                $("#signature").jSignature("reset");
            });
            $("#change-confirm").click(function () {
                var i = new Image();
                i.src = $("#canvas").jSignature("getData");
                $(i).appendTo($("#someelement"));
            });
        })
    </script>
@endsection