@extends('admin.template')

@section('content')
    @component('h1')
    {!! trans('planning/lang.txt350') !!}
    @endcomponent
    
    <div class="row">
        <div class="col-12 text-end">
            <a href="../../planning" class="btn btn-dark btn-xs"><i class="bi bi-arrow-left-square"></i> {!! trans('planning/lang.txt351') !!}</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <h2>{{ $projet->ref }} : {{ $commande->intitule }}</h2>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-xxl-4 mx-auto">
            <form class="form-horizontal" action="/admin/module/planning/bondelivraison/signer" method="post">
                <div id="sign" style="width:100%;height:200px;background-color: white;color:black;"></div>
                <textarea style="display:none;" id="signature" name="sign"></textarea>
                
                <p class="text-center mt-3"><button id="clear" class="btn btn-sm btn-warning me-5">{!! trans('planning/lang.txt352') !!}</button> <button id="save" class="btn btn-sm btn-success">{!! trans('planning/lang.txt353') !!}</button></p>
                {!! csrf_field() !!}
                <input type="hidden" name="id" value="{{ $commande->id }}">
            </form>
        </div>
    </div>
    <script>
        var sign = $('#sign').signature({ syncField:'#signature', syncFormat:'JPEG' });
        $('#clear').click(function(e){
            e.preventDefault();
            sign.signature('clear');
            $('#signature').val('');
        });
    </script>
@endsection