@extends('layouts.app')
@section('title', 'EndoCapture')
@section('style')
    <link href="{{ url('public/extra/esign/colorpicker.css') }}" rel="stylesheet">
    <link href="{{ url('public/extra/esign/literally.css') }}" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <style type="text/css">
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            margin: 0;
        }
        .fs-container {
            width: 100%;
            height: 100%;
            margin: auto;
        }
        .literally {
            width: 2000px;
            height: 800px;
        }
        #canvas{
            width: 2000px;
            height: 800px;
        }
        .toolbar{
            display:none;
        }
    </style>
@endsection



@section('content')
<div class="row m-0">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="literally">
                            <canvas id="canvas"></canvas>
                        </div>
                    </div>
                    <div class="col-12" style="height: 550px;">
                        <form action="{{url("esign")}}" method="POST">
                            @csrf
                            <input type="hidden" name="event" value="save_sign">
                            <input type="hidden" name="userID" value="{{$userID}}">
                            <h1>{{$user->user_prefix}}{{$user->user_firstname}}&nbsp;&nbsp;{{$user->user_lastname}}</h1>
                            <br>
                            <br>
                            <br>
                            <label>Doctor Code</label>
                            <input type="text" name="user_code" class="form-control" placeholder="พิมพ์รหัส 5 ตัวอักษร">
                            <br>
                            <button class="btn btn-primary btn-block" type="submit">บันทึก</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
<script src="{{ url('public/extra/esign/literallycanvas.fat.js') }}"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function() {
        $(document).bind('touchmove', function(e) {
            var canvas  = document.getElementById('canvas');
            var dataURL = canvas.toDataURL();
            $.post('{{ url('photomove') }}', {
                event       : 'create_sign_doctor',
                user_id     : '{{$userID}}',
                datapic     : dataURL
            }, function(data, status) {});

            if (e.target === document.documentElement) {
                alert()
            }
        });
        $('.literally').literallycanvas();
    });


    $('#canvas').mouseup(function() {
        var canvas = document.getElementById('canvas');
        var dataURL = canvas.toDataURL();
        $.post('{{ url('photomove') }}', {
            event       : 'create_sign_doctor',
            user_id     : "{{$userID}}",
            datapic     : dataURL
        }, function(data, status) {});
    });
</script>






@endsection