@extends('layouts.header')

@section('content')

<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card bg-white rounded-10 p-4">
            <div class="row justify-content-center form-style">
                <div class="col-md-8">

                    <form id="userForm" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="id" id="id" value="{{ $data->id }}">
                        <input type="hidden" name="page_type" id="page_type" value="PROFILE">

                        <div class="row justify-content-center">
                            <div class="col-lg-4 col-md-5 mb-4 text-center">

                                <div class="mb-3">
                                    @if($data->avtar)
                                    <img src="{{ $data->avtar }}" class="rounded-circle" alt="image thumb" id="img_hoder_1" width="130" height="130">
                                    @else
                                    <img src="/images/no-pic.jpg" class="img-fluid rounded-circle" alt="image thumb" id="img_hoder_1" width="130" height="130">
                                    @endif
                                </div>

                                <button type="button" class="btn px-3 upload-img-merge-btn  btn-secondary w-75 text-capitalize">
                                    Upload
                                    <input type="file" class="btn upload-img" id="AddPhoto" name="image" onchange="readURL(this);" accept=".png, .jpg, .jpeg">
                                </button>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-lg-6 mb-3">
                                <label for="">First Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name',$data->first_name)}}" placeholder="Enter login name">
                                @if ($errors->has('first_name'))
                                <span id="first_name-error" class="error text-danger" for="first_name">{{ $errors->first('first_name') }}</span>
                                @endif
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label for="">Last Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('last_name',$data->last_name)}}" placeholder="Enter full name">
                                @if ($errors->has('last_name'))
                                <span id="last_name-error" class="error text-danger" for="last_name">{{ $errors->first('last_name') }}</span>
                                @endif
                            </div>

                            <div class="col-lg-6 mb-4">
                                <label for="">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ old('email',$data->email)}}" placeholder="Enter email">
                                @if ($errors->has('email'))
                                <span id="email-error" class="error text-danger" for="email">{{ $errors->first('email') }}</span>
                                @endif
                                <a href="#changePasswordModal" id="changePwd" data-toggle="modal" style="text-decoration: underline;color:#214884;float:right;">Change Password</a>
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label for="">Designation <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="designation" name="designation" value="{{ old('designation',$data->designation )}}" placeholder="Enter designation">
                                @if ($errors->has('designation'))
                                <span id="designation-error" class="error text-danger" for="designation">{{ $errors->first('designation') }}</span>
                                @endif
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label for="">Department <span class="text-danger">*</span></label>
                                <div class="selectParent mr-3">
                                    <select class="select-option" name="department" id="department">
                                        <option value="" selected="">Select</option>
                                        @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}" {{ $data->department_id == $dept->id ? 'selected' : ''}}>{{ $dept->department }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('department'))
                                    <span id="department-error" class="error text-danger" for="department">{{ $errors->first('department') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-6 mb-3">
                                <label for="">Country <span class="text-danger">*</span></label>
                                <div class="selectParent mr-3">
                                    <select class="select-option" name="country" id="country">
                                        <option value="" selected="">Select</option>
                                        @foreach($countries as $country)
                                        <option value="{{ $country->id }}" {{ $data->country_id == $country->id ? 'selected' : ''}}>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('country'))
                                    <span id="country-error" class="error text-danger" for="country">{{ $errors->first('country') }}</span>
                                    @endif
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Cancel</button>
                                <button type="submit" class="btn btn-primary" id="btnAdd" onclick="submitForm()">Update</button>
                            </div>
                        </div>
                </div>


                </form>

            </div>
        </div>
    </div>
</div>
</div>

<!-- Change Password -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="forgotpassModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content modal-sm" style="margin: 0 auto">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Change Password</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">


                <form id="changePasswordForm" method="POST" action="javascript:void(0)">
                    @csrf

                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <div class="form-group">
                                <label>Current Password <span class="error">*</span></label>
                                <input type="password" name="current_password" id="current_password" value="{{ old('current_password') }}" class="form-control" placeholder="Current Password">
                                @if ($errors->has('current_password'))
                                <span id="current_password-error" class="error text-danger" for="current_password">{{ $errors->first('current_password') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12">
                            <div class="form-group">
                                <label>New Password <span class="error">*</span></label>
                                <input type="password" name="new_password" id="new_password" value="{{ old('new_password')}}" class="form-control" placeholder="New Password">
                                @if ($errors->has('new_password'))
                                <span id="new_password-error" class="error text-danger" for="new_password">{{ $errors->first('new_password') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12">
                            <div class="form-group">
                                <label>Confirm New Password <span class="error">*</span></label>
                                <input type="password" name="new_confirm_password" id="new_confirm_password" value="" class="form-control" placeholder="Confirm New Password">
                                @if ($errors->has('new_confirm_password'))
                                <span id="new_confirm_password-error" class="error text-danger" for="new_confirm_password">{{ $errors->first('new_confirm_password') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary" onclick="changePasswordSubmit()">Save</button>
                    </div>

                </form>

            </div>

        </div>
    </div>
</div>


@endsection

@section('append')

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#img_hoder_1')
                    .attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    function submitForm() {

        $("#userForm").validate({
            errorElement: 'div',
            rules: {
                first_name: {
                    required: true,
                },
                last_name: {
                    required: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                designation: {
                    required: true,
                },
                department: {
                    required: true,
                },
                country: {
                    required: true,
                },
                password: {
                    required: true,
                },
                confirm_password: {
                    required: true,
                },


            },

            messages: {
                first_name: {
                    required: "Please enter first name",
                },
                last_name: {
                    required: "Please select last name",
                },
                email: {
                    required: "Please enter email",
                },
                designation: {
                    required: "Please enter designation",
                },
                department: {
                    required: "Please select department",
                },
                country: {
                    required: "Please enter country",
                },
                password: {
                    required: "Please enter password"
                },
                confirm_password: {
                    required: "Please enter confirm password "
                },


            },

            errorPlacement: function(error, element) {
                if (element.hasClass('select-option')) {
                    error.insertAfter(element.parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            submitHandler: function(form) {
                //form.submit();

                var form = $('#userForm')[0];
                var formData = new FormData(form);
                $.ajax({
                    url: '/update/user',
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $('#btnAdd').addClass('btn-disabled');
                        $('#btnAdd').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
                    },
                    success: function(data) {
                        if (data.success != undefined) {
                            toastr.success(data.success);
                            $('#userForm')[0].reset();
                            setTimeout(() => {
                                window.location.href = "/manage/users";
                            }, 2000);
                        } else {
                            toastr.error(data.error);
                        }

                    },
                    complete: function() {
                        setTimeout(function() {
                            $('#btnAdd').removeClass('btn-disabled');
                            $('#btnAdd').html('Update');
                        }, 1000);
                    },
                    error: function(xhr, status, error) {
                        var err = JSON.parse(xhr.responseText);
                        if (err.errors.email != undefined) {
                            toastr.error(err.errors.email);
                        }
                    },
                });

            },

        });

    }

    function changePasswordSubmit() {
        $("#changePasswordForm").validate({
            errorElement: 'div',
            rules: {
                current_password: {
                    required: true,
                },
                new_password: {
                    required: true,
                    minlength: 6,
                },
                new_confirm_password: {
                    required: true,
                    equalTo: '#new_password'
                }

            },

            messages: {
                current_password: {
                    required: "Please enter current password",
                },
                new_password: {
                    required: "Please enter new password",
                },
                new_confirm_password: {
                    required: "Please enter confirm new password",
                }

            },

            errorPlacement: function(error, element) {
                if (element.hasClass('select2')) {
                    error.insertAfter(element.parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            submitHandler: function(form) {
                //form.submit();
                $('#btnChangePwd').html('Please wait..');
                var form = $('#changePasswordForm')[0];
                var formData = new FormData(form);
                var pageName = $('#type').val();
                $.ajax({
                    url: '/user/my-profile/change-password',
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        setTimeout(function() {
                            $('#btnChangePwd').html('Save');
                        }, 2000);
                        toastr.success(data.success);
                        $('#changePasswordForm')[0].reset();
                        $('#changePasswordModal').modal('hide');
                    },
                    error: function(error) {
                        toastr.error("You have entered wrong current password");
                    },
                });

            },

        });
    }
</script>
@endsection