@extends('layouts.app')
@section('styles')
    @parent
    <link href="{{ asset('canvas/style.css')}}" rel="stylesheet">
    <link rel="Stylesheet" type="text/css" href="{{asset('wPaint-master/lib/wColorPicker.min.css')}}"/>
    <link rel="Stylesheet" type="text/css" href="{{asset('wPaint-master/src/wPaint.css')}}"/>
@endsection
@section('scripts')
    @parent
    <script type="text/javascript" src="{{asset('wPaint-master/lib/jquery.ui.core.1.10.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/lib/jquery.ui.widget.1.10.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/lib/jquery.ui.mouse.1.10.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/lib/jquery.ui.draggable.1.10.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/lib/wColorPicker.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/src/wPaint.utils.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/src/wPaint.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/plugins/main/src/fillArea.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/plugins/main/src/wPaint.menu.main.js')}}"></script>
    <script type="text/javascript" src="{{asset('wPaint-master/plugins/file/src/wPaint.menu.main.file.js')}}"></script>
    <script type="text/javascript">
        $(function () {
            function saveImg(image) {
                var _this = this;
            }

            // init wPaint
            $('#wPaint-demo1').wPaint({
                saveImg: saveImg
            });
            $('#clear').click(function () {
                $('#wPaint-demo1').wPaint('clear');
            })

            $('#save').click(function () {
                var imageData = $("#wPaint-demo1").wPaint("image");
                var name = document.getElementById("name");
                var email = document.getElementById("email");
                var type = document.getElementById("type");
                var tel = document.getElementById("tel");
                var year = document.getElementById('year');
                var manth = document.getElementById('manth');
                var day = document.getElementById('day');
                var promo = document.getElementById('promo');
                var promo_int = promo.checked ? 0 : 1;
                var putdate = day.value + '.' + manth.value + '.' + year.value;
                var le = document.getElementById('le');
                if (name.value == '') {
                    name.style.background = '#FFDDDD';
                } else {
                    name.style.background = '#FFFFFF';
                }
                if (email.value == '') {
                    email.style.background = '#FFDDDD';
                } else {
                    email.style.background = '#FFFFFF';
                }
                if (tel.value == '') {
                    tel.style.background = '#FFDDDD';
                } else {
                    tel.style.background = '#FFFFFF';
                }
                var im = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAADICAYAAAAeGRPoAAABm0lEQVR4nO3BgQAAAADDoPlTX+EAVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACvARuiAAG7IxQSAAAAAElFTkSuQmCC';
                var im2 = 'data:image/png;base64,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';
                var err = null;
                if (imageData == im || imageData == im2) {
                    $('.my_error').text('Le champ de signature est obligatoire');
                    err = 'error';
                } else {
                    $('.my_error').text();
                    err = null;
                }
                if (name.value != '' && email.value != '' && tel != '' && err != 'error') {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "post"
                    });
                    $.ajax({
                        url: '/contract/{{$obj->id}}',
                        data: 'name=' + name.value + '&email=' + email.value + '&tel=' + tel.value + '&ne=' + putdate + '&image=' + imageData + '&type=' + type.value + '&le=' + le.value + '&promo=' + promo_int,
                        success: function (data) {
                            console.log('ok');
                            location.href = '/contract/{{$obj->id}}';
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                }
                //$("#canvasImage").attr('src', imageData);
            });
        })

    </script>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12 bodycon">

                <div class="panel-body main_body">
                    <div class="main_page">
                        <ul role="tablist" class="nav nav-tabs">
                            <li role="presentation" class="active">
                                <a href="#">{{trans('client.contract.new contract')}}</a>
                            </li>
                        </ul>
                        <div class="tab-content index">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-2">
                                        <img src="{{asset('uploads/'.(isset($obj->companies->picture)?$obj->companies->picture:$obj->picture))}}"/>
                                    </div>
                                    <div class="col-md-10">
                                        <p>{{$obj->address}}</p>
                                        <p>{{$obj->phone}}</p>
                                    </div>
                                </div>
                                <h2>{{trans('client.contract.title')}}</h2>
                                <p>{{trans('client.contract.welcome')}}
                                    <b>{{(isset($obj->companies->name)?$obj->companies->name:$obj->name)}}</b></p>
                                <p>{{trans('client.contract.line1')}}
                                    <b>{{(isset($obj->companies->name)?$obj->companies->name:$obj->name)}}</b>
                                    {{trans('client.contract.line2')}}</p>
                                <p>{{trans('client.contract.line3')}}</p>
                                <p>{{trans('client.contract.line4')}} <b>{{trans('client.contract.line5')}}</b></p>
                                <p>{{trans('client.contract.line51')}}</p>
                                <p>{{trans('client.contract.line6')}} <b>{{(isset($obj->companies->name)?$obj->companies->name:$obj->name)}}</b> {{trans('client.contract.line7')}}</p>
                                <b>
                                    <p>{{trans('client.contract.line8')}}</p>
                                    <ul>
                                        <li> {{trans('client.contract.list1')}}</li>
                                        <li> {{trans('client.contract.list2')}}</li>
                                        <li> {{trans('client.contract.list3')}}</li>
                                        <li> {{trans('client.contract.list4')}}</li>
                                        <li> {{trans('client.contract.list5')}}</li>
                                        <li> {{trans('client.contract.list6')}}</li>
                                    </ul>
                                </b>
                                <p><b>{{trans('client.contract.line9')}}</b></p>
                                <p>
                                    {{trans('client.contract.line10')}}
                                </p>
                                <p>{{trans('client.contract.team')}} <b>{{(isset($obj->companies->name)?$obj->companies->name:$obj->name)}}</b></p>
                                <form class="form-horizontal" role="form">
                                    {!! csrf_field() !!}
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">{{trans('client.contract.name')}}</label>

                                        <div class="col-md-6">
                                            <input type="text" required class="form-control" name="name" id="name"
                                                   value="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">{{trans('client.contract.email')}}</label>

                                        <div class="col-md-6">
                                            <input type="email" required class="form-control" name="email" id="email"
                                                   value="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">{{trans('client.contract.tel')}}</label>
                                        <div class="col-md-6">
                                            <input type="text" required class="form-control" name="tel" id="tel"
                                                   value="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-4 control-label">{{trans('client.contract.birth')}}</label>

                                        <div class="col-md-6">
                                            <div class="col-sm-4 nopadding">
                                                <select class="form-control" name="day" id="day">
                                                    @for ($i = 1; $i < 32; $i++)
                                                        <option value="{{$i}}">{{$i}}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="col-sm-4 nopadding">
                                                <select class="form-control" name="manth" id="manth">
                                                    <option value="01"> {{trans('client.month.january')}}</option>
                                                    <option value="02"> {{trans('client.month.february')}}</option>
                                                    <option value="03"> {{trans('client.month.march')}}</option>
                                                    <option value="04"> {{trans('client.month.april')}}</option>
                                                    <option value="05"> {{trans('client.month.may')}}</option>
                                                    <option value="06"> {{trans('client.month.june')}}</option>
                                                    <option value="07"> {{trans('client.month.july')}}</option>
                                                    <option value="08"> {{trans('client.month.august')}}</option>
                                                    <option value="09"> {{trans('client.month.september')}}</option>
                                                    <option value="10"> {{trans('client.month.october')}}</option>
                                                    <option value="11"> {{trans('client.month.november')}}</option>
                                                    <option value="12"> {{trans('client.month.december')}}</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-4 nopadding end">
                                                <select class="form-control" name="year" id="year">
                                                    @for ($a = (int)date('Y'); $a > 1930; $a--)
                                                        <option value="{{$a}}">{{$a}}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">&nbsp; </label>

                                        <div class="col-md-6">
                                            <select name="types" class="form-control" id="type">
                                                <option value="tattoo">Tattoo</option>
                                                <option value="piercing">Piercing</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">&nbsp; </label>
                                        <div class="col-md-6">
                                            <input class="my_check" name="promo" type="checkbox" id="promo" />
                                            <label class="control-label">{{trans('client.contract.no_promotions')}}</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            {{trans('client.contract.authorize')}}
                                            <b>{{(isset($obj->companies->name)?$obj->companies->name:$obj->name)}}</b> à
                                            {{trans('client.contract.line11')}}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label"> {{trans('client.contract.done in Paris')}} </label>

                                        <div class="col-md-6">
                                            <div class="col-sm-5 nopadding">
                                                <!--<input type="text" class="form-control" name="fait" id="fait"/>-->
                                                <input type="date" class="form-control" value="{{date('Y-m-d')}}"
                                                       name="le" id="le"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">{{trans('client.contract.sign')}}
                                            <img id="canvasImage" width="100%">
                                        </label>

                                        <div class="col-md-6">
                                            <label class="col-md-12 has-error my_error">

                                            </label>
                                            <div id="wPaint-demo1"
                                                 style="position:relative; width:500px; height:200px; background-color:#7a7a7a; margin:20px auto 20px auto;"></div>
                                            <center id="wPaint-img"></center>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-6 col-md-offset-4">

                                            <button type="button" class="btn btn-warning -align-right" id="save">
                                                {{trans('client.contract.confirm')}}
                                            </button>

                                            <input type="button" id="clear" class="btn btn-primary btn-log"
                                                   name="clear" value="{{trans('client.contract.clear')}}">
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection