<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
    <title>Information Page</title>
    <style>
        body {
    background: #67B26F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4ca2cd, #67B26F);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4ca2cd, #67B26F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #000;
}
.User-profile .card {
    border-radius: 10px;
}
.User-profile .card .card-header .profile_img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 10px auto;
    border: 10px solid #ccc;
    border-radius: 50%;
}
.User-profile .card h3 {
    font-size: 20px;
    font-weight: 700;
}
.User-profile .card p {
    font-size: 16px;
    color: #000;
}
.User-profile .table th,
.User-profile .table td {
    font-size: 14px;
    padding: 5px 10px;
    color: #000;
}
.sign-out {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #fff;
            padding: 8px 15px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

       


    </style>
</head>
<body>
    
    
    <div class="User-profile py-4">
        
        <div class="container">
          <div class="row">
            <div class="col-lg-4">
              <div class="card shadow-sm">
                <div class="card-header bg-transparent text-center">
                  <img class="profile_img" src="https://source.unsplash.com/600x300/?student" >
                  <% if(locals.userName){%>
                      <h3><%= userName %></h3>
                  <%} %>
                  
                </div>
                <div class="card-body">
                  <p class="mb-0"><strong class="pr-1">USER NAME:</strong>
                    <% if (locals.user && user.firstName && user.lastName) { %>
                      <%= user.firstName %> <%= user.lastName %>
                    <% } else if(user.email){ %>
                      <%= user.email %>
                    <% }else{%>
                      Alan Saji
                      <% } %>
                  </p>                  
                  <p class="mb-0"><strong class="pr-1">Age:</strong>65</p>
                  <p class="mb-0"><strong class="pr-1">DOB:</strong>3/11/1965</p>
                  <button id="bookcabbutton">Book a Cab</button>
                </div>
              </div>
            </div>
            <div class="col-lg-8">
              <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                  <h3 class="mb-0"><i class="far fa-clone pr-1"></i>General Information</h3>
                </div>
                <div class="card-body pt-0">
                  <table class="table table-bordered">
                    <tr>
                      <th width="30%">Country</th>
                      <td width="2%">:</td>
                      <td>India</td>
                    </tr>
                    <tr>
                      <th width="30%">State</th>
                      <td width="2%">:</td>
                      <td>Delhi</td>
                    </tr>
                    <tr>
                      <th width="30%">Gender</th>
                      <td width="2%">:</td>
                      <td>Male</td>
                    </tr>
                    <tr>
                        <th width="30%">Postal Code:</th>
                        <td width="2%">:</td>
                        <td>452011</td>
                      </tr>
                    <tr>
                      <th width="30%">Blood Group:</th>
                      <td width="2%">:</td>
                      <td>O+</td>
                    </tr>
                    <tr>
                      <th width="30%">Contact Number:</th>
                      <td width="2%">:</td>
                      <td><% if(locals.user){ %>
                        <%= user.phone %>
                      <%}%>
                      </td>
                    </tr>
                    <tr>
                        <th width="30%">Specially Challenged?</th>
                        <td width="2%">:</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <th width="30%">Disability (Blindness)</th>
                        <td width="2%">:</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <th width="30%">Senior Citizen</th>
                        <td width="2%">:</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <th width="30%">Family Member's Contact Number</th>
                        <td width="2%">:</td>
                        <td>+91XXXXXXXXXX</td>
                    </tr>
                    
                  </table>
                  <button id="logoutbutton" class="sign-out btn">Sign Out</button>
                </div>
              </div>
                <div style="height: 26px"></div>
              <div class="card shadow-sm">
                <div class="card-header bg-transparent border-0">
                  <h3 class="mb-0"><i class="far fa-clone pr-1"></i>Other Information</h3>
                </div>
                <div class="card-body pt-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script>
        //aditya nair was here
        document.getElementById("logoutbutton").onclick = function() {
        
        window.location.href = "/logout";
    };
    document.getElementById("bookcabbutton").onclick = function() {
        
        window.location.href = "/book_cab";
    };
      </script>
</body>
</html>