{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan ">
    <div class="mobile-nav text-white">
        <a href="/back" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{scriptTitle}}</h4>
    </div>
    <div class="content-section" style="overflow-y: scroll;
    overflow-x: hidden;">
        <div class="result-section-lattan-result" style="padding: 20px;">
            <input type="hidden" name="jixID" id="jixID" value="{{userData['id']}}">
            <div class="row justify-content-center mb-3">
                <div class="col-auto">
                    <div class="pic-holder">
                        <!-- uploaded pic shown here -->
                        {% if userData['imgPath'] != None %}
                        <img id="profilePic" class="pic"
                            src="{{url_for('user_image_upload.static', filename=userData['imgPath'])}}">
                        {% else %}
                        <img id="profilePic" class="pic"
                            src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg">
                        {% endif %}


                        <Input class="uploadProfileInput" type="file" name="profile_pic" id="newProfilePhoto"
                            accept="image/*" style="opacity: 0; position: absolute;" />
                        <label for="newProfilePhoto" class="upload-file-block">
                            <div class="text-center">
                                <div class="mb-2">
                                    <i class="fa fa-camera fa-2x"></i>
                                </div>
                                <div class="text-uppercase">
                                    Update <br /> Profile Photo
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <div class="card mb-5">
                <div class="card-header">
                    <b>User Info:</b>
                </div>
                <div class="card-body">
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-4 col-form-label">Name:</label>
                        <div class="col-8">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="userName"
                                        value="{{userData['name']}}">
                                </div>
                                <div class="col-1 p-0 position-relative">
                                    <button id="successNameBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="nameChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="nameChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="nameChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 35px;">
                                        cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-4 col-form-label">Birth date:</label>
                        <div class="col-8">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="birthDate"
                                        value="{{userData['birth_date']}}">
                                </div>
                                <div class="col-1 p-0 position-relative">
                                    <button id="successBdateBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="bdateChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="bdateChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="bdateChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 me-1 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 35px;">
                                        cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-4 col-form-label">Birth time:</label>
                        <div class="col-8">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="birthTime"
                                        value="{{userData['birth_time']}}">
                                </div>
                                <div class="col-1 p-0 position-relative">
                                    <button id="successBtimeBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="btimeChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="btimeChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="btimeChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 me-1 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 35px;">
                                        cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-auto col-form-label">Gender:</label>
                        <div class="col-8">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="genderGroove"
                                        value="{{userData['gender']}}">
                                    <select id="genderSelect"
                                        class="d-none form-select form-select-lg form-control-plaintext">
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                    </select>
                                </div>
                                <div class="col-1 p-0 position-relative">
                                    <button id="successGenderBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="genderChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="genderChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="genderChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 me-1 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 55px;">
                                        cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-auto col-form-label">Email:</label>
                        <div class="col-9">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="userEmail"
                                        value="{{'Empty' if userData['email'] == None else userData['email']}}">
                                </div>

                                {% if userData['email'] == None %}
                                <div class="col-1 p-0 position-relative">
                                    <button id="successEmailBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="emailChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="emailChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="emailChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 me-1 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 35px;">
                                        cancel
                                    </button>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between">
                        <label for="staticName" class="col-4 col-form-label">Phone:</label>
                        <div class="col-8">
                            <div class="row align-items-center justify-content-end" style="padding-right: 12px;">
                                <div class="col-10 p-0 me-1">
                                    <input type="text" readonly
                                        class="form-control-plaintext form-control-lg text-end m-0" id="userPhone"
                                        value="{{'Empty' if userData['phone'] == None else userData['phone']}}">
                                </div>
                                {% if userData['phone'] == None %}
                                <div class="col-1 p-0 position-relative">
                                    <button id="successPhoneBtn"
                                        class="btn btn-link btn-sm text-success material-icons m-0"
                                        style="font-size: 24px; padding: 0; display: none;">
                                        done
                                    </button>
                                    <button id="phoneChangebtn" class="btn btn-link btn-sm material-icons m-0"
                                        style="font-size: 24px; padding: 0;">
                                        edit_note
                                    </button>
                                    <button id="phoneChangeSavebtn" jixID="{{userData['id']}}"
                                        class="d-none btn btn-link btn-sm material-icons m-0 me-1 text-warning"
                                        style="font-size: 24px; padding: 0;">
                                        save
                                    </button>
                                    <button id="phoneChangeClosebtn" jixID="{{userData['id']}}"
                                        class=" d-none btn btn-link btn-sm material-icons m-0 me-1 text-secondary position-absolute"
                                        style="font-size: 24px; padding: 0; top: 0; right: 35px;">
                                        cancel
                                    </button>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-grid gap-3 col-11 mx-auto">
                {% if userData['account_type'] == 'email' %}
                <button class="btn btn-primary btn-lg" type="button" id="profile-edit-btn" data-bs-toggle="modal"
                    data-bs-target="#changePasswordModal">Change Password</button>
                {% endif %}
                <button class="btn btn-outline-primary btn-lg" type="button"
                    onclick="window.location.href='/logout'">Logout </button>
            </div>
            {% if userData['account_type'] == 'email' %}
            <!-- Modal -->
            <div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Change Password</h1>
                            <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                        </div>
                        <div class="modal-body">
                            <form id="pc-form" action="" method="post" class="row g-4">
                                <div class="col-12">
                                    <div class="form-outline" id="oldPassContainer">
                                        <input type="text" id="oldPassword" class="form-control form-control-lg" />
                                        <label class="form-label" for="oldPassword">Old Password</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-outline" id="newPassContainer">
                                        <input type="text" id="newPassword" class="form-control form-control-lg" />
                                        <label class="form-label" for="newPassword">New Password</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-outline" id="conPassContainer">
                                        <input type="text" id="conPassword" class="form-control form-control-lg" />
                                        <label class="form-label" for="conPassword">Confirm Password</label>
                                    </div>
                                </div>
                            </form>
                            <div id="pc-success" class="row d-none">
                                <div class="col-12 text-center">
                                    <span class="material-icons text-success"
                                        style="font-size: 100px;">check_circle</span>
                                    <h5>Your password is successfully changed</h5>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="pc-close" type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="changePassBtn">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
<div class="preloader">
    <lottie-player src="https://assets4.lottiefiles.com/packages/lf20_t8hs6wpo.json" background="transparent" speed="1"
        style="width: 60px; height: 60px;" loop autoplay></lottie-player>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        setTimeout(() => {
            $('.preloader').fadeOut('slow');
            $('body').css('overflow', 'unset');
        }, 1000)
    })
</script>
<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
{% endblock %}