Update templates/customer_details.html

templates/customer_details.html

@@ -7,255 +7,231 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
-            background-color: #FDF4E3;
+            background-color: #F5F7FA;
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
         }
-
-        .back-to-menu {
-            display: block;
-            margin: 30px auto 10px auto;
-            padding: 10px 20px;
-            background-color: #ff5722;
-            color: #ffffff;
-            border: none;
-            border-radius: 25px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-align: center;
-            text-decoration: none;
-            width: 100%;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            transition: background-color 0.3s ease;
+        .container {
+            max-width: 90%;
+            margin: 20px auto;
+            padding: 15px;
         }
-
-        .back-to-menu:hover {
-            background-color: #e64a19;
+        .header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .back-btn {
+            font-size: 1.5rem;
+            color: #1C1C1C;
             text-decoration: none;
+            margin-right: 10px;
+            display: inline-flex;
+            align-items: center;
         }
-
-        .editable {
-            background-color: #f0f8ff; /* Light blue when edited */
+        .back-btn svg {
+            width: 24px;
+            height: 24px;
         }
-
-        .input-group {
+        .header h1 {
+            font-size: 1.25rem;
+            font-weight: bold;
+            color: #1C1C1C;
+            margin: 0;
+        }
+        .form-group {
+            margin-bottom: 15px;
             position: relative;
         }
-
-        .btn-change {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: #ffffff;
-            color: #0FAA39;
-            border: none;
-            border-radius: 5px;
-            padding: 5px 10px;
-            cursor: pointer;
-            font-size: 0.9rem;
+        .form-group label {
+            font-size: 0.875rem;
+            color: #6C757D;
+            margin-bottom: 5px;
+            display: block;
         }
-
-        .btn-change:hover {
-            background-color: #ffffff;
-            color: #0FAA39;
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #E0E0E0;
+            border-radius: 10px;
+            font-size: 1rem;
+            color: #1C1C1C;
+            background-color: #FFFFFF;
+            box-sizing: border-box;
         }
-
-        .copy-btn {
+        .form-group input[readonly] {
+            background-color: #F5F7FA;
+        }
+        .change-btn {
             position: absolute;
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #007bff;
-            font-size: 1.2rem;
-            cursor: pointer;
-        }
-
-        .update-btn {
-            background-color: #0FAA39;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            font-size: 1rem;
+            color: #FF0000;
+            font-size: 0.75rem;
+            font-weight: bold;
             cursor: pointer;
-            width: 20%;
-            font-weight: bold; /* Making the button text bold */
+            text-transform: uppercase;
+            padding: 2px 5px;
+            display: inline-block;
         }
-
-        .update-btn:hover {
-            background-color: #0f8e29;
+        .change-btn.disabled {
+            color: #A9A9A9;
+            cursor: not-allowed;
         }
-
-        .edit-btn {
-            background-color: #0FAA39;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
+        .update-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: #FFA07A;
+            border-color: #FFA07A;
+            color: #6C757D;
+            border: 1px solid;
+            border-radius: 10px;
             font-size: 1rem;
+            font-weight: bold;
             cursor: pointer;
-            width: 20%;
-            font-weight: bold; /* Making the button text bold */
-        }
-
-        .edit-btn:hover {
-            background-color: #0f8e29;
-        }
-
-
-
-/* Button container adjustments */
-.button-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 10px; /* Add space between buttons */
-}
-
-
-
-
-      
-        /* Flexbox for equally spaced buttons */
-        .button-container {
-            display: flex;
-            justify-content: space-between;
             margin-top: 20px;
         }
-
-        /* Ensure both buttons have equal height and width */
-        .edit-btn, .update-btn {
-            flex: 1;
-            margin: 0 5px;
-            padding: 10px 20px;
-            font-size: 1rem;
-            cursor: pointer;
-            border-radius: 5px;
-            height: 50px; /* Equal height for both buttons */
-        }
-
-        /* Change text color inside input fields to gray */
-        input[type="text"], input[type="email"], input[type="number"], .form-control {
-            color: #808080; /* Change text color to gray */
-        }
-
-        /* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
-        .form-label {
-            color: #1C1C1C; /* Change heading text color */
-        }
-
-        h1 {
-            color: #1C1C1C; /* Change User Profile heading color */
-            font-size: 24px; /* Change font size of 'User Profile' */
+        .update-btn:hover {
+            background-color: #FF7F50;
+            border-color: #FF7F50;
+        }
+
+        /* Media Queries for Smaller Screens */
+        @media (max-width: 576px) {
+            .container {
+                padding: 10px;
+            }
+            .header h1 {
+                font-size: 1.1rem;
+            }
+            .back-btn svg {
+                width: 20px;
+                height: 20px;
+            }
+            .form-group input,
+            .form-group select {
+                font-size: 0.9rem;
+                padding: 8px;
+            }
+            .update-btn {
+                padding: 10px;
+                font-size: 0.9rem;
+            }
         }
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
-        function enableEditField(fieldId) {
+        function enableEditField(fieldId, flagId) {
             var field = document.getElementById(fieldId);
-            field.removeAttribute("readonly");
-            field.classList.add("editable");
-            field.focus();
+            var flagField = document.getElementById(flagId);
+            var changeBtn = $(field).siblings('.change-btn');
+            changeBtn.hide();
+            if (flagField.value === "false") {
+                field.removeAttribute("readonly");
+                field.focus();
+                $(field).on('input', function() {
+                    flagField.value = "true";
+                });
+            }
+        }
+        function onFocusNext(inputField) {
+            var changeBtn = $(inputField).siblings('.change-btn');
+            changeBtn.show();
         }
-
         function updateProfile(event) {
             event.preventDefault();
+            var phone = $('#phone').val().trim();
+            var email = $('#email').val().trim();
+            var referralCode = $('#referralCode').val().trim();
+            if (!phone && !email && !referralCode) {
+                alert("Please enter at least one field to update (Phone, Email, or Referral Code).");
+                return;
+            }
+            if (phone && !/^\d{10}$/.test(phone)) {
+                alert("Please enter a valid 10-digit phone number.");
+                return;
+            }
+            if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                alert("Please enter a valid email address.");
+                return;
+            }
             var formData = $('#profileForm').serialize();
-
             $.ajax({
                 type: "POST",
-                url: "/user/update_profile",  
+                url: "/user/update_profile",
                 data: formData,
+                dataType: 'json',
                 success: function(response) {
                     if (response.status === "success") {
-                        alert(response.message);
+                        alert(response.message || "Profile updated successfully!");
                         location.reload();
                     } else {
-                        alert(response.message);
+                        alert(response.message || "Failed to update profile.");
                     }
                 },
-                error: function() {
-                    alert("An error occurred while updating the profile.");
+                error: function(xhr, status, error) {
+                    console.error("Error:", error);
+                    alert("An error occurred while updating the profile. Please try again.");
                 }
             });
         }
-
-        function editProfileFields() {
-            document.getElementById('customerName').removeAttribute('readonly');
-            document.getElementById('email').removeAttribute('readonly');
-            document.getElementById('phone').removeAttribute('readonly');
-            document.getElementById('customerName').classList.add('editable');
-            document.getElementById('email').classList.add('editable');
-            document.getElementById('phone').classList.add('editable');
-        }
-
-        function copyReferralCode() {
-            var referralCode = document.getElementById('referralCode');
-            referralCode.select();
-            document.execCommand('copy');
-            alert('Referral Code Copied!');
-        }
+        $(document).ready(function() {
+            if ($('#nameEdited').val() === "true") {
+                $('#customerName').siblings('.change-btn').addClass('disabled').off('click');
+            }
+            if ($('#phoneEdited').val() === "true") {
+                $('#phone').siblings('.change-btn').addClass('disabled').off('click');
+            }
+            if ($('#emailEdited').val() === "true") {
+                $('#email').siblings('.change-btn').addClass('disabled').off('click');
+            }
+        });
     </script>
 </head>
 <body>
-    <div class="container mt-4">
-        <h1>User Profile</h1>
-
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="alert alert-{{ messages[0][0] }}">
-                    {{ messages[0][1] }}
-                </div>
-            {% endif %}
-        {% endwith %}
-
-        <div class="card">
-            <div class="card-body">
-                <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
-                    <div class="mb-3">
-                        <label for="customerName" class="form-label"><strong>Name:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
-                        </div>
-                    </div>
+    <div class="container">
+        <div class="header">
+            <a href="/menu" class="back-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M15 18l-6-6 6-6"/>
+                </svg>
+            </a>
+            <h1>Your Profile</h1>
+        </div>
 
-                    <div class="mb-3">
-                        <label for="email" class="form-label"><strong>Email:</strong></label>
-                        <div class="input-group">
-                            <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
-                        </div>
-                    </div>
+        <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
+            <input type="hidden" id="nameEdited" name="nameEdited" value="{{ 'true' if customer['name_edited'] else 'false' }}">
+            <input type="hidden" id="phoneEdited" name="phoneEdited" value="{{ 'true' if customer['phone_edited'] else 'false' }}">
+            <input type="hidden" id="emailEdited" name="emailEdited" value="{{ 'true' if customer['email_edited'] else 'false' }}">
 
-                    <div class="mb-3">
-                        <label for="phone" class="form-label"><strong>Phone:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
-                        </div>
-                    </div>
+            <div class="form-group">
+                <label for="customerName">Name</label>
+                <input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly>
+                <span class="change-btn" onclick="enableEditField('customerName', 'nameEdited')">CHANGE</span>
+            </div>
 
-                    <div class="mb-3">
-                        <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
-                            <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
-                        </div>
-                    </div>
+            <div class="form-group">
+                <label for="phone">Mobile</label>
+                <input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this)">
+                <span class="change-btn" onclick="enableEditField('phone', 'phoneEdited')">CHANGE</span>
+            </div>
 
-                    <div class="mb-3">
-                        <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
-                        <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
-                    </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this)">
+                <span class="change-btn" onclick="enableEditField('email', 'emailEdited')">CHANGE</span>
+            </div>
 
-                    <!-- Flex container for Edit and Update buttons -->
-                    <div class="button-container">
-                        <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
-                        <button type="submit" class="update-btn">Update Profile</button>
-                    </div>
-                </form>
+            <div class="form-group">
+                <label for="referralCode">Referral Code</label>
+                <input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}">
             </div>
-        </div>
 
-        <a href="/menu" class="back-to-menu">Back to Menu</a>
+            <button type="submit" class="update-btn">Update profile</button>
+        </form>
     </div>
 </body>
-</html>
+</html>