From c40a79e66053463a0a1e48db5061210f293ba24b Mon Sep 17 00:00:00 2001
From: nsavinda <nirmalsavinda29@gmail.com>
Date: Mon, 30 Oct 2023 20:11:34 +0530
Subject: [PATCH] feat: customer profile edit

---
 app/controllers/Customer.php           |  14 ++
 app/controllers/Profile.php            |  18 +-
 app/views/customer/profile.view.php    | 329 +++++++++++++++++++++++++
 app/views/profile.view.php             |  97 +++++++-
 public/assets/css/customer-profile.css | 121 ++++++++-
 5 files changed, 576 insertions(+), 3 deletions(-)
 create mode 100644 app/controllers/Customer.php
 create mode 100755 app/views/customer/profile.view.php

diff --git a/app/controllers/Customer.php b/app/controllers/Customer.php
new file mode 100644
index 00000000..c921a734
--- /dev/null
+++ b/app/controllers/Customer.php
@@ -0,0 +1,14 @@
+<?php
+
+class Customer {
+    use Controller;
+
+
+    public function update(string $a = '', string $b = '', string $c = ''):void {
+
+
+
+
+        $this->view('customer/profile');
+    }
+}
\ No newline at end of file
diff --git a/app/controllers/Profile.php b/app/controllers/Profile.php
index 19df606d..2641d419 100755
--- a/app/controllers/Profile.php
+++ b/app/controllers/Profile.php
@@ -4,6 +4,22 @@ class Profile {
     use Controller;
 
     public function index(string $a = '', string $b = '', string $c = ''):void {
-        $this->view('profile');
+
+        $user = $_SESSION['USER'];
+        // echo $user->role;
+
+        if ($user->role == 'customer') {
+            $this->view('customer/profile');
+        } else if ($user->role == 'guide') {
+            $this->view('guide/profile');
+        } else if ($user->role == 'admin') {
+            $this->view('rental-service/profile');
+        } 
+        
+        // else {
+        //     $this->view('profile');
+        // }
+
+        // $this->view('profile');
     }
 }
\ No newline at end of file
diff --git a/app/views/customer/profile.view.php b/app/views/customer/profile.view.php
new file mode 100755
index 00000000..844cb71d
--- /dev/null
+++ b/app/views/customer/profile.view.php
@@ -0,0 +1,329 @@
+<?php
+require_once('../app/views/layout/header.php');
+
+require_once('../app/views/components/navbar.php');
+?>
+
+    <div>
+
+        <div class="frame">
+
+            <div class="edit-prof-button">
+                <button type="submit" class="small-button-middle"  id="edit-profile">
+                    Edit Profile
+                </button>
+            </div>
+
+            <div class="div-1">
+                <div class="div-12">
+                    <!-- <div class="text-wrapper">Hello Jenny!</div> -->
+                    <div class="img-1">
+                        <img src="<?php echo ROOT_DIR?>/assets/images/1.png" alt="">
+                    </div>
+                </div>
+
+                <form class="div-3">
+
+                    <div class="div-4">
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">Name : <?php echo $user->name ?></div>
+                        </div>
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">NIC : <?php echo $user->nic ?></div>
+                        </div>
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">Role : Customer</div>
+                        </div>
+                    </div>
+
+                    <div class="div-4">
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">Email : <?php echo $user->email ?></div>
+                        </div>
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">Mobile : <?php echo $user->number ?></div>
+                        </div>
+                        <div class="div-wrapper">
+                            <div class="text-wrapper-2">Address : <?php echo $user->address ?></div>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+
+
+        <!-- Modal Box -->
+<div class="profile-editor" id="profile-editor">
+<div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="profile-info">
+            <img src="<?php echo ROOT_DIR?>/assets/images/dp.jpg" alt="Profile Image" class="profile-image">
+
+            
+            <form id="customer" action="<?=ROOT_DIR?>/customer/update" method="post">
+    <h2>Update Customer Details</h2>
+    <?php if(isset($errors)): ?>
+        <div>  <?= implode('<br>', $errors)?>  </div>
+    <?php endif; ?>
+
+    <label for="name">Name</label>
+    <input type="text" name="name" id="name" value="<?= $user->name ?>" required>
+
+    <label for="address">Address</label>
+    <input type="text" name="address" id="address" value="<?= $user->address ?>" required>
+
+    <label for="email">Email</label>
+    <input type="text" name="email" id="email" value="<?= $user->email ?>" required>
+
+    <label for="number">Number</label>
+    <input type="text" name="number" id="number" value="<?= $user->number ?>" required>
+
+    <label for="nic">NIC Number</label>
+    <input type="text" name="nic" id="nic" value="<?= $user->nic ?>" required>
+
+    <!-- <label for="password">Password</label>
+    <input type="password" name="password" id="password" required> -->
+
+    <input type="submit" name="submit" value="Update">
+</form>
+
+
+
+            </div>
+        </div>
+    </div>
+</div>
+
+        <!-- Modal Box -->
+
+
+
+
+
+        <div class="frame2">
+            <div class="yellow-card">
+                <div class="upper-card-text">
+                    <div class="text-card-topic">Total Booking</div>
+                    <div class="edit-prof-button">
+                        <button type="submit" class="small-button-middle">
+                            More &gt
+                        </button>
+                    </div>
+                </div>
+                <div class="number-card">03</div>
+            </div>
+
+            <div class="yellow-card">
+                <div class="upper-card-text">
+                    <div class="text-card-topic">Equipment Booking</div>
+                    <div class="edit-prof-button">
+                        <button type="submit" class="small-button-middle">
+                            More &gt
+                        </button>
+                    </div>
+                </div>
+                <div class="number-card">02</div>
+            </div>
+
+            <div class="yellow-card">
+                <div class="upper-card-text">
+                    <div class="text-card-topic">Guide Booking</div>
+                    <div class="edit-prof-button">
+                        <button type="submit" class="small-button-middle">
+                            More &gt
+                        </button>
+                    </div>
+                </div>
+                <div class="number-card">01</div>
+            </div>
+        </div>>
+
+
+
+        <div class="frame">
+            <div class="edit-prof-button">
+                <button type="submit" class="small-button-middle">
+                    More &gt
+                </button>
+            </div>
+
+            <div class="sec3-booking">
+                <div class="sec3-booking-main">
+                    <div class="text-topic">Recent Booking</div>
+                    <div class="img-2">
+                        <img src="<?php echo ROOT_DIR?>/assets/images/2.png" alt="">
+                    </div>
+                </div>
+
+                <div class="div-5">
+                    <div class="div-wrapper-2">
+                        <div class="text-wrapper-2">Booking Type : Equipment Booking</div>
+                    </div>
+                    <div class="div-wrapper-2">
+                        <div class="text-wrapper-2">Name : Glazers Camping</div>
+                    </div>
+                    <div class="div-wrapper-2">
+                        <div class="text-wrapper-2">Date : 20/08/2023</div>
+                    </div>
+                    <div class="div-wrapper-2">
+                        <div class="text-wrapper-2">Time : 10:00</div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+
+
+        <div class="frame">
+            <div class="edit-prof-button">
+                <button type="submit" class="small-button-middle">
+                    More &gt
+                </button>
+            </div>
+
+            <div class="text-topic">Booking History</div>
+
+            <div class="div-6">
+                <div class="div-wrapper-3">
+                  <table>
+                    <tr>
+                        <th>Name</th>
+                        <th>Status</th>
+                        <th>Type</th>
+                        <th>Date</th>
+                        <th>Time</th>
+                    </tr>
+
+                    <tr>
+                        <td>Glazers Camping</td>
+                        <td>Upcoming</td>
+                        <td>Equipment</td>
+                        <td>02/12/2023</td>
+                        <td>10.00</td>
+                    </tr>
+
+                    <tr>
+                        <td>Glazers Camping</td>
+                        <td>Upcoming</td>
+                        <td>Equipment</td>
+                        <td>02/12/2023</td>
+                        <td>10.00</td>
+                    </tr>
+
+                    <tr>
+                        <td>Sarath</td>
+                        <td>Done</td>
+                        <td>Guide</td>
+                        <td>01/09/2023</td>
+                        <td>10.00</td>
+                    </tr>
+                    
+                  </table>
+                </div>
+              </div>
+        </div>
+    </div>
+
+
+
+    <!-- <form>
+                <div class="div-3">
+                    <div class="div-4">
+                        <div class="div-wrapper">
+                            <label for="name">Name:</label>
+                            <input type="text" id="name" name="name" value="Jenny Fernando">
+                        </div>
+                        <div class="div-wrapper">
+                            <label for="age">Age:</label>
+                            <input type="number" id="age" name="age" value="20">
+                        </div>
+                        <div class="div-wrapper">
+                            <label for="role">Role:</label>
+                            <select id="role" name="role">
+                                <option value="Customer" selected>Customer</option>
+                                <option value="Employee">Employee</option>
+                                <option value="Manager">Manager</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="div-4">
+                        <div class="div-wrapper">
+                            <label for="name2">Name:</label>
+                            <input type="text" id="name2" name="name2" value="Jenny Fernando">
+                        </div>
+                        <div class="div-wrapper">
+                            <label for="age2">Age:</label>
+                            <input type="number" id="age2" name="age2" value="20">
+                        </div>
+                        <div class="div-wrapper">
+                            <label for="role2">Role:</label>
+                            <select id="role2" name="role2">
+                                <option value="Customer" selected>Customer</option>
+                                <option value="Employee">Employee</option>
+                                <option value="Manager">Manager</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <button type="submit">Submit</button>
+            </form> -->
+
+
+
+
+
+            <script>
+
+var modal = document.getElementById("profile-editor");
+
+var span = document.getElementsByClassName("close")[0];
+
+// Get all view buttons
+var viewButton = document.getElementById('edit-profile');
+
+// Function to handle modal display
+function openModal() {
+    // document.getElementById("modal-content").innerHTML = content;
+    modal.style.display = "block";
+}
+
+// Add click event listener to view buttons
+    viewButton.addEventListener('click', function() {
+        
+        // var name = this.parentElement.parentElement.querySelector('td:first-child').textContent;
+        // var email = this.parentElement.parentElement.querySelector('td:nth-child(2)').textContent;
+        openModal();
+    });
+
+
+
+
+// Close the modal when the close button is clicked
+span.onclick = function() {
+    modal.style.display = "none";
+}
+
+// Close the modal if the user clicks outside of it
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+</script>
+
+
+
+            
+
+<?php
+require_once('../app/views/layout/footer.php');
+
+
+?>
\ No newline at end of file
diff --git a/app/views/profile.view.php b/app/views/profile.view.php
index 463d6684..844cb71d 100755
--- a/app/views/profile.view.php
+++ b/app/views/profile.view.php
@@ -9,7 +9,7 @@
         <div class="frame">
 
             <div class="edit-prof-button">
-                <button type="submit" class="small-button-middle">
+                <button type="submit" class="small-button-middle"  id="edit-profile">
                     Edit Profile
                 </button>
             </div>
@@ -56,6 +56,54 @@
 
 
 
+        <!-- Modal Box -->
+<div class="profile-editor" id="profile-editor">
+<div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="profile-info">
+            <img src="<?php echo ROOT_DIR?>/assets/images/dp.jpg" alt="Profile Image" class="profile-image">
+
+            
+            <form id="customer" action="<?=ROOT_DIR?>/customer/update" method="post">
+    <h2>Update Customer Details</h2>
+    <?php if(isset($errors)): ?>
+        <div>  <?= implode('<br>', $errors)?>  </div>
+    <?php endif; ?>
+
+    <label for="name">Name</label>
+    <input type="text" name="name" id="name" value="<?= $user->name ?>" required>
+
+    <label for="address">Address</label>
+    <input type="text" name="address" id="address" value="<?= $user->address ?>" required>
+
+    <label for="email">Email</label>
+    <input type="text" name="email" id="email" value="<?= $user->email ?>" required>
+
+    <label for="number">Number</label>
+    <input type="text" name="number" id="number" value="<?= $user->number ?>" required>
+
+    <label for="nic">NIC Number</label>
+    <input type="text" name="nic" id="nic" value="<?= $user->nic ?>" required>
+
+    <!-- <label for="password">Password</label>
+    <input type="password" name="password" id="password" required> -->
+
+    <input type="submit" name="submit" value="Update">
+</form>
+
+
+
+            </div>
+        </div>
+    </div>
+</div>
+
+        <!-- Modal Box -->
+
+
+
+
+
         <div class="frame2">
             <div class="yellow-card">
                 <div class="upper-card-text">
@@ -227,6 +275,53 @@
             </form> -->
 
 
+
+
+
+            <script>
+
+var modal = document.getElementById("profile-editor");
+
+var span = document.getElementsByClassName("close")[0];
+
+// Get all view buttons
+var viewButton = document.getElementById('edit-profile');
+
+// Function to handle modal display
+function openModal() {
+    // document.getElementById("modal-content").innerHTML = content;
+    modal.style.display = "block";
+}
+
+// Add click event listener to view buttons
+    viewButton.addEventListener('click', function() {
+        
+        // var name = this.parentElement.parentElement.querySelector('td:first-child').textContent;
+        // var email = this.parentElement.parentElement.querySelector('td:nth-child(2)').textContent;
+        openModal();
+    });
+
+
+
+
+// Close the modal when the close button is clicked
+span.onclick = function() {
+    modal.style.display = "none";
+}
+
+// Close the modal if the user clicks outside of it
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+</script>
+
+
+
+            
+
 <?php
 require_once('../app/views/layout/footer.php');
 
diff --git a/public/assets/css/customer-profile.css b/public/assets/css/customer-profile.css
index 33e6d6fb..e5baafb2 100755
--- a/public/assets/css/customer-profile.css
+++ b/public/assets/css/customer-profile.css
@@ -338,4 +338,123 @@ tr {
     letter-spacing: 0;
     line-height: 28.3px;
     white-space: nowrap;
-} */
\ No newline at end of file
+} */
+
+
+
+/* Edit Profile Modal  */
+
+.profile-editor {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.profile-editor .modal-content {
+    background-color: #fefefe;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 400px;
+    position: relative;
+    border-radius: 8px;
+}
+
+.profile-editor .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.profile-editor .close:hover,
+.profile-editor .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.profile-editor .profile-image {
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 50%;
+    margin-bottom: 20px;
+}
+
+.profile-editor #profile-name {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.profile-editor .profile-links a {
+    display: block;
+    margin-bottom: 10px;
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.profile-editor .profile-links a:hover {
+    color: #0056b3;
+}
+
+
+
+.profile-editor input[type="text"],
+  .profile-editor input[type="password"],
+  .profile-editor select {
+    display: block;  
+    background-color: #ECECEC;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  }
+  
+  .profile-editor input[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #BCAB86;
+    border-radius: 5px;
+    background-color: #88915D;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    
+  }
+  
+  .profile-editor input[type="submit"]:hover {
+    border: 1px solid #BCAB86;
+    background-color: #ECECEC;
+    color: #4C5039;
+  }
+  
+  .profile-editor p {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 12px;
+  }
+  
+  .profile-editor a {
+    color: #333;
+    text-decoration: none;
+    transition: color 0.3s ease;
+    text-align: right;
+  }
+  
+  .profile-editor a:hover {
+    color: #88915D;
+  }
\ No newline at end of file