@extends('main')
@section('css')
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/signature/init.css">

@endsection

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{--        {{ $vars['title'] }}--}}

        </h1>
    </section>


    <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="card card-outline card-success">
                    <div class="card-body card-profile">
                        <div class="text-center">
                            <img class="profile-user-img img-responsive img-circle"
                                 @if(isset($vars['user']->img)) src="{{ url('/') }}/{{$vars['user']->img }}"
                                 @else src="{{ url('/') }}/user.png" @endif width="200" height="100"
                                 alt="User profile picture">
                        </div>
                        <h3 class="profile-username text-center">{{ ucwords($vars['user']->name) }}</h3>

                        <p class="text-muted text-center">@isset($vars['position'])
                                {{ ucwords($vars['position']) }}
                            @endisset</p>

                        <ul class="list-group list-group-unbordered">
                            <li class="list-group-item">
                                <b>Gender</b> <a class="float-right">{{ ucwords($vars['user']->gender) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Email</b> <a class="float-right"
                                                style="font-size: 13px;">{{ ucwords($vars['user']->email) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Phone Number</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Living Area</b> <a class="float-right">{{ ucwords($vars['user']->address) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Description</b> <a class="float-right">{{ ucwords($vars['user']->description) }}</a>
                            </li>
                        </ul>

                        <a href="javascript:void(0)" class="btn bg-gradient-orange btn-block  editTr"
                           data-id="{{ $vars['user']->uuid }}">
                            <li class="fa fa-pencil-square-o"></li>
                            <b>Edit Profile</b></a>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-9">
                <div class="card card-orange card-outline">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                            <li class="nav-item"><a class="nav-link active " href="#signature" data-toggle="tab">Signature</a>
                            </li>

                        </ul>
                        <div class="card-body">
                            <div class="tab-content">
                                <!-- /.Roles Tab pane   -->

                                <div class="tab-pane active" id="signature">
                                    <div class="box box-primary">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">User signature</h3>
                                        </div>

                                        <div class="box-body">

                                            @if($vars['user']->signature_path )
                                                <div class="row">
                                                    <label class="col-sm-3 control-label no-padding-right">Old
                                                        Signature</label>

                                                    <div class="col-sm-9">
                                                        <img id="old_signature" style="border: 5px solid #555;"
                                                             width="400px;"
                                                             src="{{ url('/') }}{{ $vars['user']->signature_path }}">
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right">Signature</label>

                                                <div class="col-sm-9">
                                                    <input type="hidden" id="signature_user"
                                                           value="{{  $vars['user']->id }}">
                                                    <input type="hidden" id="signature_user_type" value="User">
                                                    <div id="signature-pad" class="signature-pad">
                                                        <div class="signature-pad--body">
                                                            <canvas></canvas>
                                                        </div>
                                                        <div class="signature-pad--footer">
                                                            <div class="description"><b style="color: green;">Sign
                                                                    above</b></div>

                                                            <div class="signature-pad--actions">
                                                                <div>
                                                                    <button class="btn btn-warning button clear"
                                                                            type="button" data-action="clear"><i
                                                                                class="fa fa-eraser"></i>Clear Signature
                                                                    </button>
                                                                    {{-- <button type="button" class="button clear" data-action="clear">Clear</button> --}}
                                                                    <button type="button" class="button"
                                                                            data-action="change-color"
                                                                            style="display: none;">Change color
                                                                    </button>
                                                                    <button type="button" class="button"
                                                                            data-action="undo" style="display: none;">
                                                                        Undo
                                                                    </button>

                                                                </div>
                                                                <div>
                                                                    <button class="btn btn-primary button save"
                                                                            type="button" data-action="save-png"><i
                                                                                class="fa fa-check"></i> Submit Form
                                                                    </button>
                                                                    {{-- <button type="button" class="button save" data-action="save-png">Save Signature</button> --}}
                                                                    <button type="button" class="button save"
                                                                            data-action="save-jpg"
                                                                            style="display: none;">Save as JPG
                                                                    </button>
                                                                    <button type="button" class="button save"
                                                                            data-action="save-svg"
                                                                            style="display: none;">Save as SVG
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="submit" id="submit_buttuon" hidden="true">Save
                                                        </button>
                                                        <textarea id="signature" name="signature"
                                                                  hidden="true"></textarea>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.tab-content -->
                </div>

            </div>
            <!-- /.nav-tabs-custom -->


    </section>
    {{--    @include('students/_guardian/_edit_guardian') --}}
    @include('users/_edit')
    @include('users/partials/_add')

@endsection



@section('js')
    <script src="{{ url('/') }}/assets/plugins/signature/init.js"></script>

    <script type="text/javascript">
        $(document).on('click', '.edit_signature', function () {
            var id = $(this).data("id");
            url = "/users_edit_signature/" + id;
            $.ajax({
                type: "GET",
                url: '/get_signature_view/' + id,
                success: function (data) {
                    // console.log(data);

                    $("#user_signature_div").replaceWith(data);
                    document.getElementById("users_edit_signature_modal").style.display = "block";
                    // $('#users_edit_signature_modal').toggle();
                },
            });
        });


        $(function () {
            $('#payments').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': true,
                'info': true,
                'autoWidth': false
            })
        })


        $(document).on('click', '.editTr', function () {
            var id = $(this).data("id");
            url = "/users/" + id;
            $.ajax({
                type: "GET",
                url: '/users/' + id + '/edit',
                success: function (data) {
                    console.log(data);
                    $("#edit_user_form input[name=name]").val(data.users.name);
                    $("#edit_user_form input[name=gender]").val(data.users.gender);
                    $("#edit_user_form input[name=phone]").val(data.users.phone);
                    $("#edit_user_form input[name=email]").val(data.users.email);
                    $("#edit_user_form ").attr("action", url);
                    $('#Edit_user_class_modal').modal('show');
                },
            });
        });

    </script>

@endsection