{% extends 'back.html.twig' %}

{% block title %} My Profile{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">{{ app.user.fullName }}</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Profile</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header with-border" style="padding-bottom: 0px;">
                            {% include '@User/users/partials/user-profile-menu.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <img src="{{ asset('images/user-default.png') }}" alt="{{ app.user.fullName }}" class="img-thumbnail">
                                </div>
                                <div class="col-md-9">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="email" class="col-sm-3 control-label">Email</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="email" placeholder="Email" value="{{ app.user.email }}" disabled/>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="first_name" class="col-sm-3 control-label">First Name <span class="compulsory">*</span></label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="first_name" placeholder="First Name" value="{{ app.user.firstName }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="last_name" class="col-sm-3 control-label">Last Name <span class="compulsory">*</span></label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="last_name" placeholder="Last Name" value="{{ app.user.lastName }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="phone" class="col-sm-3 control-label">Phone <span class="compulsory">*</span></label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="phone" placeholder="Phone" value="{{ app.user.phone }}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="business_name" class="col-sm-3 control-label">Business Name</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="business_name" placeholder="Business Name" value="{{ app.user.businessName }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="abn" class="col-sm-3 control-label">ABN</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="abn" placeholder="A.B.N" value="{{ app.user.abn }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3">
                                                <label for="abn" class="col-sm-3 control-label">Address</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control mb-2" id="user_address_1" placeholder="Address Line 1" value="{{ app.user.address1 }}">
                                                    <input type="text" class="form-control mb-2" id="user_address_2" placeholder="Address Line 2" value="{{ app.user.address2 }}">
                                                    <input type="text" class="form-control mb-2" id="user_city" placeholder="City" value="{{ app.user.city }}">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <input type="text" class="form-control" id="user_zip" placeholder="Post Code" value="{{ app.user.postcode }}">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="text" class="form-control" id="user_state" placeholder="State" value="{{ app.user.state }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <button type="button" class="btn btn-primary" id="update_user_btn">Update</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-4 mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header with-border">Change Password</div>
                        <div class="card-body">
                            <div class="form-group mb-3">
                                <label for="currentPassword" class="col-sm-3 control-label">Current Password <span class="compulsory">*</span></label>
                                <div class="col-sm-12">
                                    <input type="password" class="form-control" id="currentPassword" placeholder="Current Password"/>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="newPassword" class="col-sm-3 control-label">New Password <span class="compulsory">*</span></label>
                                <div class="col-sm-12">
                                    <input type="password" class="form-control" id="newPassword" placeholder="New Password"/>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="confirmPassword" class="col-sm-3 control-label">Confirm New Password <span class="compulsory">*</span></label>
                                <div class="col-sm-12">
                                    <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm New Password"/>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <p>Password need to be :-</p>
                                <ul>
                                    <li><i id="chars8_req" class="bi bi-x text-danger"></i> 8 characters long</li>
                                    <li><i id="capital_req" class="bi bi-x text-danger"></i> Contain a capital letter</li>
                                    <li><i id="number_req" class="bi bi-x text-danger"></i> Contain a number</li>
                                    <li><i id="special_req" class="bi bi-x text-danger"></i> Contain a special character <span class="text-muted">(! # $ % ^ & * ( ) _ + / \ { } [ ] ~ ` @)</span></li>
                                </ul>
                            </div>

                            <button type="button" class="btn btn-primary" id="update_password_btn" style="float:right;">Update Password</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $("#update_user_btn").on("click", function () {

            var button = $(this);
            var firstName = $.trim($("#first_name").val());
            var lastName = $.trim($("#last_name").val());
            var phone = $.trim($("#phone").val());
            var businessName = $.trim($("#business_name").val());
            var address_1 = $.trim($("#user_address_1").val());
            var address_2 = $.trim($("#user_address_2").val());
            var city = $.trim($("#user_city").val());
            var zip = $.trim($("#user_zip").val());
            var state = $.trim($("#user_state").val());
            var abn = $.trim($("#abn").val());

            if (
                validateInput(firstName, "First Name") &&
                validateInput(lastName, "Last Name") &&
                validateInput(phone, "Phone Number")
            ){
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '/api/user/update',
                    datatype: 'json',
                    data: {
                        id : {{ app.user.id }},
                        firstName : firstName,
                        lastName : lastName,
                        phone : phone,
                        businessName : businessName,
                        abn : abn,
                        address_1 : address_1,
                        address_2 : address_2,
                        city : city,
                        zip : zip,
                        state : state
                    }
                })
                    .done(function (data) {
                        Swal.fire(
                            'Success!',
                            'Updated Successfully!',
                            'success'
                        );

                        setTimeout(function(){ location.reload(); }, 2500);
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        button.attr('disabled', false);
                        toastr.options.progressBar = true;
                        toastr.error('Failed to Update!', 'Error!');
                    });
            }
        });

        $("#newPassword").on('input', function (e) {
            var password = $(this).val();

            // 1. Validate Length (8+ characters)
            validateRequirement('#chars8_req', password.length >= 8);

            // 2. Validate Capital Letter
            validateRequirement('#capital_req', /[A-Z]/.test(password));

            // 3. Validate Number
            validateRequirement('#number_req', /[0-9]/.test(password));

            // 4. Validate Special Character
            const specialChars = /[!#\$%\^&\*\(\)_\+/\\\{\}\[\]~`@]/;
            validateRequirement('#special_req', specialChars.test(password));
        });

        function validateRequirement(elementId, isValid) {
            const $el = $(elementId);
            if (isValid) {
                $el.removeClass('bi-x text-danger').addClass('bi-check-lg text-success');
            } else {
                $el.removeClass('bi-check-lg text-success').addClass('bi-x text-danger');
            }
        }

        function validatePassword(newPassword, confirmPassword) {

            toastr.options.progressBar = true;
            const specialChars = /[!#\$%\^&\*\(\)_\+/\\\{\}\[\]~`@]/;

            if (newPassword !== confirmPassword) {
                toastr.error("New Password does not match Confirm Password!", 'Error!');
                return false;
            }
            else if(
                newPassword.length < 8 ||
                /[A-Z]/.test(newPassword) == false ||
                /[0-9]/.test(newPassword) == false ||
                specialChars.test(newPassword) == false
            ) {
                toastr.error("Password does not satisfy the requirements!", 'Error!');
                return false;
            }

            return true;
        }

        $("#update_password_btn").on("click", function (e) {
            e.preventDefault();

            var button = $(this);
            var currentPassword = $("#currentPassword").val();
            var newPassword = $("#newPassword").val();
            var confirmPassword = $("#confirmPassword").val();

            if (
                validateInput(currentPassword, "Current Password") &&
                validateInput(newPassword, "New Password") &&
                validateInput(confirmPassword, "Confirm New Password") &&
                validatePassword(newPassword, confirmPassword)
            )
            {
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '{{ path('api_user_change_password') }}',
                    datatype: 'json',
                    data: {
                        currentPassword : currentPassword,
                        newPassword : newPassword,
                        confirmPassword : confirmPassword
                    }
                })
                .done(function (data) {
                    Swal.fire(
                        'Success!',
                        'Password Updated Successfully!',
                        'success'
                    );

                    setTimeout(function(){ location.reload(); }, 1500);
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    button.attr('disabled', false);
                    toastr.options.progressBar = true;
                    toastr.error('Failed to Update Password!', 'Error!');
                });
            }

        });

    </script>


{% endblock %}