@extends('seller.seller_app')

@section('content')
<style>
.remove-profile-image {
    position: absolute;
    top: 0;
    left: 100px;
    background: #f00;
    color: #fff;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 5px;
}
</style>
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4">My Account</h4>

        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <h5 class="card-header">Profile Details </h5>
                    <div class="card-body">

                        <div id="login_success">
                            @if(session()->has('success'))
                            <div class="alert alert-success" role="alert">
                                {{ session()->get('success') }}
                            </div>
                            @endif
                        </div>

                        <div id="login_errors">
                            @if(session()->has('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ session()->get('error') }}
                            </div>
                            @endif
                        </div>
                        <form action="{{ route('seller.myaccount.edit_account') }}" autocomplete="off" id="formAccount" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('POST')
                            <div class="d-flex align-items-start align-items-sm-center gap-4 position-relative">
                                <input type="hidden" name="old_profile_image" class="old_profile_image" value="{{auth()->guard('seller')->user()->profile_image}}" />
                                <img src="{{ get_image_url(auth()->guard('seller')->user()->profile_image) }}" alt="user-avatar" class="d-block rounded previewImg" height="100" width="100" />
                                @if(auth()->guard('seller')->user()->profile_image != '')
                                    <span class="remove-profile-image">X</span>
                                @endif
                                <div class="button-wrapper">
                                    <input class="form-control seller-profile-image" type="file" id="upload" name="profile_image" value="" accept="image/*" />
                                </div>
                            </div>

                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label for="firstName" class="form-label">First Name</label>
                                    <input class="form-control" type="text" id="first_name" name="first_name" value="{{ auth()->guard('seller')->user()->first_name }}" />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="lastName" class="form-label">Last Name</label>
                                    <input class="form-control" type="text" id="last_name" name="last_name" value="{{ auth()->guard('seller')->user()->last_name }}" />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="email" class="form-label">E-mail</label>
                                    <input class="form-control" type="text" id="email" name="email" value="{{ auth()->guard('seller')->user()->email }}" readonly />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="mobile_number">Mobile Number</label>
                                    <div class="input-group input-group-merge">
                                        <input type="text" id="mobile_number" name="mobile_number" class="form-control"  value="{{ auth()->guard('seller')->user()->mobile_number }}"/>
                                    </div>
                                </div>
                                <hr class="my-0">
                                <h5 class="card-header"> Change Password </h5>
                                <div class="mb-3 col-md-12">
                                    <label for="oldpass" class="form-label">Old Password</label>
                                    <input class="form-control oldpass" type="password" id="oldpass" name="oldpass" autocomplete="off" />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="newpass" class="form-label">New Password</label>
                                    <input class="form-control newpass" type="password" id="newpass" name="newpass" autocomplete="off"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="confirmpass" class="form-label">Confirm Password</label>
                                    <input class="form-control confirmpass" type="password" id="confirmpass" name="confirmpass" autocomplete="off"/>
                                </div>
                                <div class="mt-2">
                                    <button type="submit" name="submit" class="btn btn-primary me-2">Save Changes</button>
                                    <!-- <button type="reset" class="btn btn-outline-secondary">Cancel</button> -->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var currentRequest = null;
    $("#formAccount").validate({
        rules:{
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            email :{
                required: true,
                email : true
            },
            profile_image: {
                extension: "jpg|jpeg|png|gif",
                filesize : 3
            },
            oldpass: {
                required : {
                    depends: function() {
                        return $('#newpass').val().length > 0;
                    }
                }
            },
            newpass: {
                minlength: 6,
                maxlength: 30,
                required: {
                    depends: function() {
                        return $('#oldpass').val().length > 0;
                    }
                }
            },
            confirmpass: {
                minlength: 6,
                equalTo: {
                    param: '#newpass',
                    depends: function() {
                        return $('#newpass').val().length > 0;
                    }
                }
            }
        },
        messages:{
            first_name:{
                required: 'Please enter an first name'
            },
            last_name:{
                required: 'Please enter an last name'
            },
            email:{
                required: 'Please enter an email address',
                email : 'Please enter valid email address'
            },
            oldpass: {
                required: "Please provide a current password",
                minlength: "Your password must be at least 6 characters long"
            },
            newpass: {
                required: "Please provide a new password",
                minlength: "Your password must be at least 6 characters long"
            },
            confirmpass: {
                required: "Please provide a confirm password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            }
        },
        submitHandler:function(form){
            $('#loading').show();
            var formData = new FormData(form);
            currentRequest = jQuery.ajax({
                type : 'POST',
                data : formData,
                url : '{{ route("seller.myaccount.edit_account") }}',
                dataType : 'JSON',
                contentType : false,
                processData : false,
                beforeSend : function(){
                    if(currentRequest != null){
                        currentRequest.abort();
                    }
                },
                success:function(data){
                    $("#login_success").html('');
                    $("#login_errors").html('');
                    if(data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(i, val) {
                            $('#login_success').append('<div class="alert alert-danger" role="alert">'+val+'</div>');
                        })
                    }
                    else if(data.status == '1'){
                        $('#login_success').html('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                        $('.seller-fullName').text(data.data.name)
                        $('.seller-profileImage').attr('src', data.data.profile_image)
                        // location.reload();
                    }
                    else{
                      $('#login_errors').html('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                    //   location.reload();
                    }
                    $('#loading').hide();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 1000);
                    setTimeout(() => {
                        $('#login_errorss').html('');
                        $('#login_success').html('');
                    }, 3000);
                },
                error: function(e) {
                    // Error
                    return false;
                }
            });
            return false;
        }
    });
    $(document).on('change', '.seller-profile-image', function() {
    const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function (event) {
                $(".previewImg")
                    .attr("src", event.target.result);
            };
            reader.readAsDataURL(file);
            $('.remove-profile-image').hide()
        }
    })

    $(document).on('click', '.remove-profile-image', function() {
        $('.old_profile_image').val('');
        $('.previewImg').attr('src', '{{get_image_url("")}}');
        $(this).hide()
    })
</script>
@endsection