@extends('customer.layouts.master')
@push('stylesheet')
    <link href="{{ asset('assets/css/profile.css') }}" rel="stylesheet">
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-4 profile-wrapper vh-100">
                <div class="row">
                    <div class="col-12 statusbar"></div>
                </div>
                <div class="row">
                    <div class="col-5">
                        <p>USER PROFILE</p>
                    </div>
                    @if(isset($badges))
                        @foreach ($badges as $item)
                            <div class="col-2">
                                {{$item->badge->title}}
                                <td><img src="{{ asset('badges/'.$item->badge->image) }}" width="100" alt=""></td>
                            </div>
                        @endforeach
                    @endif

                </div>
                <div class="row">
                    <div class="col-12">
                        <h4><span id="currentName">{{ $user->full_name }}</span> <i
                                    class="fa fa-pencil-alt" id="editNameBtn"></i>
                            <span style="display: none" id="fields"><input type="text" id="first_name"
                                                                           value="{{ $user->first_name }}">
                            <input type="text" id="last_name" value="{{ $user->last_name }}"> <i class="fa fa-times"
                                                                                                 id="editNameCancel"></i> <i
                                        class="fa fa-check" id="editNameConfirm"></i>
                            </span></h4>
                        <small>{{ $user->email }}</small>
                        <div class="clearfix">&nbsp;</div>
                        <small>JOB ROLE</small>
                        <p>
                        <div id="currentJob"><span id="currentJobName">{{ $user->profile->job_role->name }}</span> <i
                                    class="fa fa-pencil-alt"
                                    id="editJobBtn"></i></div>
                        <span style="display: none" id="jobSelect">
                                <select name="job_role" id="job_role">
                                    <option value="">Select</option>
                                    @foreach($jobs as $job)
                                        <option value="{{ $job->id }}"
                                                @if($user->profile->job_role_id == $job->id) selected @endif>{{ $job->name }}</option>
                                    @endforeach
                                </select>
                                <i class="fa fa-times"
                                   id="editJobCancel"></i> <i
                                    class="fa fa-check" id="editJobConfirm"></i>
                            </span>
                        </p>
                        <small>PARTNER NAME</small>
                        <p>{{$user->profile->property->name}}</p>
                    </div>

                </div>
                <div class="row align-items-center">
                    <div class="col-3 ">
                        <div class="image-default p-3 text-center" id="uploadNewImage">
                            @if(isset($user->profile->property->profile->logo))
                            <img src="/storage/{{$user->profile->property->profile->logo}}" class="card-img-top">
                            @else
                            <span>Partner Logo Not Set</span>
                            @endif
                        </div>

                    </div>
                    {{-- Disabled as no need to add partner logo, only display, can reimplement if adding a user profile picture --}}
                    {{-- <div style="display: none" id="uploadNewImageWrapper">
                        <div class="row">
                            <div class="col-md-8">

                                <form enctype="multipart/form-data" novalidate>
                                        @csrf

                                    <div class="form-group">
                                        <label for="name" class="form-label" class="form-label">@lang('admin.Title')</label>
                                        {!! Form::text('title', null, array('id'=>'title','required'=>'required','placeholder' => '','class' => 'form-control')) !!}
                                    </div>

                                    <div class="form-group">
                                        <label for="status" class="form-label">@lang('admin.Media File')
                                            <small>(Image)</small></label>
                                        <div>


                                            <!-- The fileinput-button span is used to style the file input field as button -->
                                            <span class="btn btn-success fileinput-button">
                                          <i class="fa fa-plus"></i>
                                          <span>Add File</span>
                                                <!-- The file input field used as target for the file upload widget -->
                                          <input id="fileupload" type="file" name="files[]">
                                      </span>

                                            <div id="progress" class="progress my-3">
                                                <div class="progress-bar progress-bar-success"></div>
                                            </div>

                                            <div id="files" class="files"></div>

                                        </div>
                                        <input type="hidden" id="media_file" name="media_file"
                                               class="form-control" required
                                               data-validation-required-message="Media is required">

                                    </div>
                                    <input type="hidden" name="upload_url" id="upload_url"
                                           value="{{ route('customer.profile.upload-image') }}">
                                </form>

                            </div>
                        </div>
                    </div> --}}
                </div>
                <div class="row mt-2">
                    <div class="col-8">
                        <p>PASSWORD</p>
                        <small>Lorem impious Lorem impious Lorem impious Lorem impious Lorem impious Lorem
                            impious</small>
                        <div class="row mt-3">
                            <div class="col-6"><span id="stars">*******</span>
                                <span id="passwordFields" style="display: none">
                                <form action="#" id="newPasswordForm">
                                    <small>New Password:</small> <input type="password" name="password" id="password"
                                                                        required
                                                                        minlength="8"
                                                                        data-parsley-special="1">
                                <small>Confirm password:</small> <input type="password" name="password_confirmation"
                                                                        id="password_confirmation"
                                                                        data-parsley-equalto="#password"
                                                                        required></form>

                                    <i class="fa fa-times"
                                       id="editPasswordCancel"></i> <i
                                            class="fa fa-check" id="editPasswordConfirm"></i>
                            </span></div>
                            <div class="col-6 text-right"><a href="#" id="editPasswordBtn">MANAGE</a></div>
                        </div>
                        <div class="row">
                            <div class="col-12">

                                <hr>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div class="col-8 profile-wrapper-content wrapper-middle">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-8 offset-2 text-center p-2">
                            <p>CURRENT POINTS TOTAL</p>
                            <div class="points">
                                @if(isset($user->profile->total_points))
                                {{$user->profile->total_points}}
                                @else
                                0 - (points error)
                                @endif
                            </div>
                            <a href="{{ route('customer.leaderboard.index') }}" class="btn-block btn">VIEW
                                LEADERBOARD</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="/assets/css/parsley-white.css">
    <script src="/assets/js/parsley.js"></script>
    <script>

        $(function () {
            //show edit name fields
            $('#editNameBtn').on('click', function (e) {
                e.preventDefault();
                $(this).hide();
                $('#currentName').hide();
                $('#fields').show();
                e.preventDefault();
            })
            //cancel edit name fields
            $('#editNameCancel').on('click', function (e) {
                $('#editNameBtn').show();
                $('#currentName').show();
                $('#fields').hide();
                e.preventDefault();
            });
            //confirm edit name fields
            $('#editNameConfirm').on('click', function (e) {
                $('.statusbar').html('<div class="alert alert-primary" role="alert">Updating...</div>');
                let firstName = $('#first_name').val();
                let lastName = $('#last_name').val();
                $.ajax({
                    method: 'POST',
                    url: '{{ route('customer.profile.update') }}',
                    data: {
                        _token: '{{csrf_token()}}',
                        action: 'name',
                        first_name: firstName,
                        last_name: lastName,
                    }
                    ,
                    success: function (data) {
                        if (data) {
                            $('#currentName').html(data.full_name);
                            $('#first_name').val(data.first_name);
                            $('#last_name').val(data.last_name);
                            $('#editNameBtn').show();
                            $('#currentName').show();
                            $('#fields').hide();
                            console.log('success');
                            $('.statusbar').html('<div class="alert alert-success" role="alert">Updated</div>');
                            setTimeout(function () {
                                $('.statusbar').slideUp();
                            }, 2000);
                        }
                    }
                });

                e.preventDefault();
            })
            // job role edit
            // show select and buttons
            $('#editJobBtn').on('click', function (e) {
                $('#currentJob').hide();
                $('#jobSelect').show();
                e.preventDefault();
            })
            //cancel edit
            $('#editJobCancel').on('click', function (e) {
                $('#currentJob').show();
                $('#jobSelect').hide();
                e.preventDefault();
            });
            //confirm and send request
            $('#editJobConfirm').on('click', function (e) {
                $.ajax({
                    method: 'POST',
                    url: '{{ route('customer.profile.update') }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        action: 'job',
                        job_role: $('#job_role').val()
                    }, success: function (data) {
                        if (data) {
                            console.log('success');
                            $('#currentJobName').html(data.job_role_name);
                            $('#currentJob').show();
                            $('#jobSelect').hide();
                            $('.statusbar').html('<div class="alert alert-success" role="alert">Updated</div>');
                            setTimeout(function () {
                                $('.statusbar').slideUp();
                            }, 2000);
                        }
                    }
                })
                e.preventDefault();
            });
            //password manage
            $('#editPasswordCancel').on('click', function (e) {
                $('#passwordFields').hide();
                $('#editPasswordBtn').show();
                $('#stars').show();
                e.preventDefault();
            })
            $('#editPasswordBtn').on('click', function (e) {
                $('#password').val('');
                $('#password_confirmation').val('');
                $('#passwordFields').show();
                $('#stars').hide();
                $('#editPasswordBtn').hide();
                e.preventDefault();
            });
            $('#editPasswordConfirm').on('click', function (e) {
                window.Parsley.addValidator('special', {
                    requirementType: 'number',
                    validateString: function (value, requirement) {
                        let specials = value.match(/[^a-zA-Z0-9]/g) || [];
                        return specials.length >= requirement;
                    },
                    messages: {
                        en: 'Your password must contain at least (%s) special character.'
                    }
                });
                if ($('#newPasswordForm').parsley().validate() !== false) {
                    $.ajax({
                        method: 'POST',
                        url: '{{ route('customer.profile.update') }}',
                        data: {
                            _token: '{{csrf_token()}}',
                            action: 'password',
                            password: $('#password').val(),
                            password_confirmation: $('#password_confirmation').val(),
                        },
                        success: function (data) {
                            if (data) {
                                console.log('success');
                                $('#editPasswordBtn').show();
                                $('#passwordFields').hide();
                                $('.statusbar').html('<div class="alert alert-success" role="alert">Updated</div>');
                                setTimeout(function () {
                                    $('.statusbar').slideUp();
                                }, 2000);
                            }
                        }
                    })
                }
                e.preventDefault();
            });
            // Disabled as no need to add partner logo, only display, can reimplement if adding a user profile picture
            // $('#uploadNewImage').on('click', function (e) {
            //     $('#uploadNewImage').find('span').hide();
            //     $('#uploadNewImageWrapper').show()
            //     e.preventDefault();
            // })
            // $('#uploadNewImageCancel').on('click', function (e) {
            //     alert('closed');
            //     e.preventDefault();
            // })
        });
    </script>
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.ui.widget.js') }}"></script>
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/load-image.all.min.js') }}"></script>
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/canvas-to-blob.min.js') }}"></script>
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.iframe-transport.js') }}"></script>
    <!-- The basic File Upload plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload.js') }}"></script>
    <!-- The File Upload processing plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload-process.js') }}"></script>
    <!-- The File Upload image preview & resize plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload-image.js') }}"></script>
    <!-- The File Upload audio preview plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload-audio.js') }}"></script>
    <!-- The File Upload video preview plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload-video.js') }}"></script>
    <!-- The File Upload validation plugin -->
    <script src="{{ asset('dashboard/assets/plugins/fileupload/js/jquery.fileupload-validate.js') }}"></script>
    <link href="{{ asset('dashboard/assets/plugins/fileupload/css/jquery.fileupload.css') }}" rel="stylesheet">

    <script src="{{ asset('dashboard/assets/scripts/media_create.js') }}"></script>
@stop