@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('/') }}/svgicon/users.svg" @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>Company</b> <a
                                        class="float-right">{{ ucwords($vars['user']?->companyUser?->name) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Branch</b> <a class="float-right">{{ ucwords($vars['user']->branchUser?->name) }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Office</b> <a class="float-right">{{ ucwords($vars['user']->officeUser?->name) }}</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>

                            <li class="nav-item"><a class="nav-link  " href="#passwordtab"
                                                    data-toggle="tab">Password</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 class="tab-pane" id="passwordtab">

                                    <div class="card card-outline card-success">
                                        <div class="card-header">
                                            <h3 class="card-title">Update User Password</h3>
                                        </div>
                                        <form id="changepasswordform" class="prevent-resubmit-form" id=""
                                              enctype="multipart/form-data">
                                            @csrf
                                            <div class="card-body ">
                                                <input type="hidden" name="id" value="{{auth()->id()}}">
                                                <div class="form-group">
                                                    <label> New Password</label>
                                                    <input type="password" name="password" class="form-control"
                                                           id="newpassword">
                                                </div>
                                            </div>

                                            <div class="card-footer">
                                                <button type="submit"
                                                        class="btn btn-primary float-right prevent-resubmit-button">
                                                    Submit
                                                </button>
                                            </div>
                                        </form>

                                    </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');
                },
            });
        });


        $(document).on('submit', '#changepasswordform', function (e) {
            e.preventDefault();
            var paswd = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
            let password = $("#newpassword").val();
            if (password.match(paswd)) {
                Swal.showLoading();
                let formService = new FormData(this);
                asyncFetchAnyData(url = "change-password", formService).then((risks) => {
                    toastFunction('success', 'Successful Changed');
                    Swal.hideLoading()
                    location.reload();
                });
            } else {
                swalFunction('In correct Format', 'Your password must Include Number,Character,Capital Letter', 'info')
                $('.prevent-resubmit-button').prop("disabled", false);
                $('.prevent-resubmit-button').html(' Change..');
            }
        });

    </script>

@endsection