@extends('layouts.app')

@section('content')
<style>
    .kbw-signature { width: 300px; height: 200px;}

    #sig canvas{
        width: 300px;
        height: 200px;
        border: 1px solid #a1a1a1;
    }
    #sigRe canvas{
        width: 300px;
        height: 200px;
        border: 1px solid #a1a1a1;
    }
</style>
        <input type="hidden" id="p_code" value="LKR">
        <input type="hidden" id="p_symbol" value="₨">
        <input type="hidden" id="p_thousand" value=",">
        <input type="hidden" id="p_decimal" value=".">
<section class="content" style="background:black">
    <div class="box box-solid"  style="background:black;color:skyblue;">
        {!! Form::open(['url' => action('PurchaseController@saveDocument'), 'class' => '', 'method' => 'post', 'id' => 'doc_add_form' , 'files' => true]) !!}
        <input type="hidden" name="transaction_id" value="{{$purchase->id}}">
        <div class="box-header">
        	<h2>Documents - {{$purchase->invoice_no}}</h2>
        </div>
        <div class="box-body"  style="margin-left:20px;margin-right:20px;">
            <div class="row" style="border-right: 1px solid black !important;border-top: 1px solid black !important;border-left: 1px solid black !important;">
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('doc', __('Document') . ':') !!}
                        {!! Form::file('doc[]', ['multiple']); !!}
                    </div>
                </div>
            </div>
            <div class="col-md-6">

                <strong>Suplier Signature:</strong>
                <br/>
                @if(isset($purchase->supplier_image))
                <img src ="{{ asset(Illuminate\Support\Facades\Storage::url('public/purchase/supplier/' . $purchase->supplier_image))}}" width="298.4" height="198.4"/>
                @else
                <div id="sig" ></div>
                 
                <br/>
                <button id="clear" class="btn btn-danger btn-sm mt-1">Clear Signature</button>

                <textarea id="signature64" name="supplier" style="display: none"></textarea>
                @endif
            </div>
            <div class="col-md-6">

                <strong>Receiver Signature:</strong>
                <br/>
                @if(isset($purchase->reciver_image))
                <img src ="{{ asset(Illuminate\Support\Facades\Storage::url('public/purchase/reciver/' . $purchase->reciver_image))}}" width="298.4" height="198.4"/>
                @else
                <div id="sigRe" ></div>

                <br/>
                <button id="clearRe" class="btn btn-danger btn-sm mt-1">Clear Signature</button>

                <textarea id="signature" name="reciver" style="display: none"></textarea>
                @endif
            </div>
            <div class="row">
                <div class="col-md-12" style="float:right">
                    <button type="submit" class="btn btn-lg btn-primary pull-right">SAVE</button>
                </div>
            </div>
        </div>
        <br>
        <div class="box-body"  style="margin-left:20px;margin-right:20px;">
            <div class="row" style="border-right: 1px solid black !important;border-top: 1px solid black !important;border-left: 1px solid black !important;">
                @foreach($documents as $document)
                <div class="col-md-6">
                <iframe src ="{{ asset(Illuminate\Support\Facades\Storage::url('public/documents/' . $document->docs)) }}" width="600px" height="600px"></iframe>
                </div>
                @endforeach
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</section>
@endsection
@section('javascript')
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">
<script>
    var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
    var sigRe = $('#sigRe').signature({syncField: '#signature', syncFormat: 'PNG'});
    $('#clear').click(function(e) {
        e.preventDefault();
        sig.signature('clear');
        $("#signature64").val('');
    });
    $('#clearRe').click(function(e) {
        e.preventDefault();
        sigRe.signature('clear');
        $("#signature").val('');
    });
</script>
@endsection