Merge branch 'master' of https://gitlab.discs.ateneo.edu/navapatriciaisabella/csci-41-project

MagisAir/MagisAir/settings.py

@@ -124,6 +124,7 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 

MagisAir/booking/models.py

@@ -49,7 +49,7 @@ class Flight(models.Model):
     Destination_Airport = models.ForeignKey(City, on_delete=models.CASCADE, related_name='destination')
 
     def __str__(self):
-        return self.Flight_Code + ' (' + self.Origin_Airport.City_Name + ' to ' + self.Destination_Airport.City_Name + ')'
+        return self.Flight_Code
 
         
 class Additional_Item(models.Model):

MagisAir/booking/static/booking/detail.css

+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+* {
+  font-family: Helvetica, sans-serif;
+  padding: 0;
+  margin: 0;
+  color: #313334;
+}
+
+body {
+  background-color: #F6F6F6;
+  overflow-x: hidden;
+}
+
+.header {
+  display: flex;
+  position: relative;
+  width: 110%;
+  background-color: #F6F6F6;
+  top: -1rem;
+  left: -1rem;
+  padding: 0.5rem 0 0.5rem 1rem;
+  box-shadow: 0 10px 40px rgba(204, 212, 220, 0.5254901961);
+}
+
+i {
+  color: #04364B;
+  font-size: 50px;
+  margin: 1.7rem 0 0 2rem;
+  position: absolute;
+}
+
+h1 {
+  color: #04364B;
+  font-size: 3rem;
+  font-weight: 700;
+  font-family: "Poppins", sans-serif;
+  padding: 1rem 0 0 6rem;
+  z-index: 1;
+}
+
+h2 {
+  font-size: 60px;
+  font-weight: bold;
+}
+h2 + h4 {
+  background-color: #dce1e6;
+  padding: 5px 10px 5px;
+}
+
+h3 {
+  color: #2B7296;
+  font-size: 1.6rem;
+  text-transform: uppercase;
+}
+
+h4 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+}
+
+p {
+  padding: 4px;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 17rem 3rem;
+  width: 60%;
+}
+
+.passenger-cost {
+  display: flex;
+  justify-content: space-between;
+}
+.passenger-cost .passenger {
+  width: 60%;
+}
+.passenger-cost .cost {
+  width: 20%;
+}
+
+.booking-details {
+  margin-top: 2rem;
+}
+.booking-details h4 {
+  margin-top: 1.5rem;
+  color: #7c7f82;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  height: 100%;
+}
+
+th {
+  border: 2px solid #dce1e6;
+  text-align: left;
+  padding: 8px;
+  font-weight: lighter;
+}
+
+span {
+  font-weight: bolder;
+}/*# sourceMappingURL=detail.css.map */
\ No newline at end of file

MagisAir/booking/static/booking/detail.css.map

+{"version":3,"sources":["detail.scss","detail.css"],"names":[],"mappings":"AAAQ,qFAAA;AAUR;EACI,kCAAA;EACA,UAAA;EACA,SAAA;EACA,cARI;ACAR;;ADWA;EACI,yBAbI;EAcJ,kBAAA;ACRJ;;ADWA;EACI,aAAA;EACA,kBAAA;EACA,WAAA;EACA,yBArBI;EAsBJ,UAAA;EACA,WAAA;EACA,6BAAA;EACA,yDAAA;ACRJ;;ADWA;EACI,cAhCU;EAiCV,eAAA;EACA,uBAAA;EACA,kBAAA;ACRJ;;ADWA;EACI,cAvCU;EAwCV,eAAA;EACA,gBAAA;EACA,kCAAA;EACA,sBAAA;EACA,UAAA;ACRJ;;ADWA;EACI,eAAA;EACA,iBAAA;ACRJ;ADSI;EACI,yBA9CD;EA+CC,qBAAA;ACPR;;ADWA;EACI,cAxDW;EAyDX,iBAAA;EACA,yBAAA;ACRJ;;ADWA;EACI,qBAAA;EACA,iBAAA;EACA,yBAAA;ACRJ;;ADWA;EACI,YAAA;ACRJ;;ADWA;EACI,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,UAAA;ACRJ;;ADWA;EACI,aAAA;EACA,8BAAA;ACRJ;ADSI;EACI,UAAA;ACPR;ADSI;EACI,UAAA;ACPR;;ADWA;EACI,gBAAA;ACRJ;ADSI;EACI,kBAAA;EACA,cAxFI;ACiFZ;;ADWA;EACI,yBAAA;EACA,WAAA;EACA,YAAA;ACRJ;;ADWA;EACI,yBAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;ACRJ;;ADWA;EACI,mBAAA;ACRJ","file":"detail.css"}
\ No newline at end of file

MagisAir/booking/static/booking/detail.scss

+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+
+$dark-accent: #04364B;
+$light-accent: #2B7296;
+$light-accent2:#82a6b9;
+$white: #F6F6F6;
+$black: #313334;
+$grey: #dce1e6;
+$dark-grey: #7c7f82;
+
+*{
+    font-family: Helvetica, sans-serif;
+    padding: 0;
+    margin: 0;
+    color: $black;
+}
+
+body{
+    background-color: $white;
+    overflow-x: hidden;
+}
+
+.header{
+    display:flex;
+    position: relative;
+    width: 110%;
+    background-color: $white;
+    top: -1rem;
+    left: -1rem;
+    padding: 0.5rem 0 0.5rem 1rem;
+    box-shadow: 0 10px 40px #ccd4dc86;
+}
+
+i{
+    color: $dark-accent;
+    font-size: 50px;
+    margin: 1.7rem 0 0 2rem;
+    position: absolute;
+}
+
+h1{
+    color: $dark-accent;
+    font-size: 3rem;
+    font-weight: 700;
+    font-family: 'Poppins', sans-serif;
+    padding: 1rem 0 0 6rem;
+    z-index: 1;
+}
+
+h2{
+    font-size: 60px;
+    font-weight: bold;
+    + h4{
+        background-color: $grey;
+        padding: 5px 10px 5px;
+    }
+}
+
+h3{
+    color: $light-accent;
+    font-size: 1.6rem;
+    text-transform: uppercase;
+}
+
+h4{
+    margin: 1rem 0 0.5rem;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+}
+
+p{
+    padding: 4px;
+}
+
+.main{
+    display: flex;
+    flex-direction: column;
+    padding: 3rem 17rem 3rem;
+    width: 60%;
+}
+
+.passenger-cost{
+    display: flex;
+    justify-content: space-between;
+    .passenger{
+        width: 60%;
+    }
+    .cost{
+        width: 20%;
+    }
+}
+
+.booking-details{
+    margin-top: 2rem;
+    h4{
+        margin-top: 1.5rem;
+        color: $dark-grey;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 100%;
+}
+
+th {
+    border: 2px solid $grey;
+    text-align: left;
+    padding: 8px;
+    font-weight: lighter;
+}
+
+span{
+    font-weight: bolder;
+}
\ No newline at end of file

MagisAir/booking/static/booking/index.css

+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+* {
+  font-family: Helvetica, sans-serif;
+  padding: 0;
+  margin: 0;
+  color: #313334;
+}
+
+body {
+  background-color: #F6F6F6;
+  overflow-x: hidden;
+}
+
+.header {
+  display: flex;
+  position: relative;
+  width: 110%;
+  background-color: #F6F6F6;
+  top: -1rem;
+  left: -1rem;
+  padding: 0.5rem 0 0.5rem 1rem;
+  box-shadow: 0 10px 40px rgba(204, 212, 220, 0.5254901961);
+}
+
+i {
+  color: #04364B;
+  font-size: 50px;
+  margin: 1.7rem 0 0 2rem;
+  position: absolute;
+}
+
+h1 {
+  color: #04364B;
+  font-size: 3rem;
+  font-weight: 700;
+  font-family: "Poppins", sans-serif;
+  padding: 1rem 0 0 6rem;
+  z-index: 1;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 17rem 3rem;
+}
+
+h2 {
+  font-size: 60px;
+  font-weight: bold;
+  padding-bottom: 1rem;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  height: 100%;
+}
+
+th {
+  border: 1px solid #eeeeee;
+  text-align: left;
+  padding: 8px;
+  font-weight: lighter;
+}
+
+tr:nth-child(even) {
+  background-color: #dce1e6;
+}
+
+form {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.center a {
+  color: #2B7296;
+  text-underline-offset: 1px;
+}
+.center a:hover {
+  color: #82a6b9;
+  transition: ease-in-out;
+  transition-duration: 500ms;
+}
+
+form {
+  width: 100%;
+  padding: 1rem 0 1rem;
+}
+form #P-ID {
+  width: 45%;
+  height: 1.5rem;
+  border-radius: 8px;
+  border-color: #313334;
+}
+form #P-ID::-moz-placeholder {
+  padding-left: 8px;
+}
+form #P-ID:-ms-input-placeholder {
+  padding-left: 8px;
+}
+form #P-ID::placeholder {
+  padding-left: 8px;
+}
+form #search-button {
+  width: 15%;
+  height: 1.7rem;
+  border-radius: 8px;
+  background-color: #2B7296;
+  border-width: 0;
+  color: #F6F6F6;
+  font-weight: bold;
+}
+form #search-button:hover {
+  background-color: #82a6b9;
+  transition: ease-in-out;
+  transition-duration: 500ms;
+  cursor: pointer;
+}
+form #origin, form #destination {
+  width: 15%;
+  border-radius: 8px;
+  height: 1.7rem;
+  border-color: #313334;
+}
+form #origin::-moz-placeholder, form #destination::-moz-placeholder {
+  padding-left: 12px;
+}
+form #origin:-ms-input-placeholder, form #destination:-ms-input-placeholder {
+  padding-left: 12px;
+}
+form #origin::placeholder, form #destination::placeholder {
+  padding-left: 12px;
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file

MagisAir/booking/static/booking/index.css.map

+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAQ,qFAAA;AASR;EACI,kCAAA;EACA,UAAA;EACA,SAAA;EACA,cAPI;ACAR;;ADUA;EACI,yBAZI;EAaJ,kBAAA;ACPJ;;ADUA;EACI,aAAA;EACA,kBAAA;EACA,WAAA;EACA,yBApBI;EAqBJ,UAAA;EACA,WAAA;EACA,6BAAA;EACA,yDAAA;ACPJ;;ADUA;EACI,cA/BU;EAgCV,eAAA;EACA,uBAAA;EACA,kBAAA;ACPJ;;ADUA;EACI,cAtCU;EAuCV,eAAA;EACA,gBAAA;EACA,kCAAA;EACA,sBAAA;EACA,UAAA;ACPJ;;ADUA;EACI,aAAA;EACA,sBAAA;EACA,wBAAA;ACPJ;;ADUA;EACI,eAAA;EACA,iBAAA;EACA,oBAAA;ACPJ;;ADUA;EACI,yBAAA;EACA,WAAA;EACA,YAAA;ACPJ;;ADUA;EACI,yBAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;ACPJ;;ADUA;EACI,yBAnEG;AC4DP;;ADUA;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;ACPJ;;ADUA;EACI,cAjFW;EAkFX,0BAAA;ACPJ;ADQI;EACI,cAnFO;EAoFP,uBAAA;EACA,0BAAA;ACNR;;ADUA;EACI,WAAA;EACA,oBAAA;ACPJ;ADQI;EACI,UAAA;EACA,cAAA;EACA,kBAAA;EACA,qBA9FA;ACwFR;ADOQ;EACI,iBAAA;ACLZ;ADIQ;EACI,iBAAA;ACLZ;ADIQ;EACI,iBAAA;ACLZ;ADQI;EACI,UAAA;EACA,cAAA;EACA,kBAAA;EACA,yBA1GO;EA2GP,eAAA;EACA,cA1GA;EA2GA,iBAAA;ACNR;ADOQ;EACI,yBA9GG;EA+GH,uBAAA;EACA,0BAAA;EACA,eAAA;ACLZ;ADQI;EACI,UAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAtHA;ACgHR;ADOQ;EACI,kBAAA;ACLZ;ADIQ;EACI,kBAAA;ACLZ;ADIQ;EACI,kBAAA;ACLZ","file":"index.css"}
\ No newline at end of file

MagisAir/booking/static/booking/index.scss

+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+
+$dark-accent: #04364B;
+$light-accent: #2B7296;
+$light-accent2:#82a6b9;
+$white: #F6F6F6;
+$black: #313334;
+$grey: #dce1e6;
+
+*{
+    font-family: Helvetica, sans-serif;
+    padding: 0;
+    margin: 0;
+    color: $black;
+}
+
+body{
+    background-color: $white;
+    overflow-x: hidden;
+}
+
+.header{
+    display:flex;
+    position: relative;
+    width: 110%;
+    background-color: $white;
+    top: -1rem;
+    left: -1rem;
+    padding: 0.5rem 0 0.5rem 1rem;
+    box-shadow: 0 10px 40px #ccd4dc86;
+}
+
+i{
+    color: $dark-accent;
+    font-size: 50px;
+    margin: 1.7rem 0 0 2rem;
+    position: absolute;
+}
+
+h1{
+    color: $dark-accent;
+    font-size: 3rem;
+    font-weight: 700;
+    font-family: 'Poppins', sans-serif;
+    padding: 1rem 0 0 6rem;
+    z-index: 1;
+}
+
+.main{
+    display: flex;
+    flex-direction: column;
+    padding: 3rem 17rem 3rem;
+}
+
+h2{
+    font-size: 60px;
+    font-weight: bold;
+    padding-bottom: 1rem;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 100%;
+}
+
+th {
+    border: 1px solid #eeeeee;
+    text-align: left;
+    padding: 8px;
+    font-weight: lighter;
+}
+  
+tr:nth-child(even) {
+    background-color: $grey;
+}
+
+form {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.center a{
+    color: $light-accent;
+    text-underline-offset: 1px;
+    &:hover{
+        color: $light-accent2;
+        transition: ease-in-out;
+        transition-duration: 500ms;
+    }
+}
+
+form{
+    width: 100%;
+    padding: 1rem 0 1rem;
+    #P-ID{
+        width: 45%;
+        height: 1.5rem;
+        border-radius: 8px;
+        border-color: $black;
+        &::placeholder{
+            padding-left: 8px;
+        }
+    }
+    #search-button{
+        width: 15%;
+        height: 1.7rem;
+        border-radius: 8px;
+        background-color: $light-accent;
+        border-width: 0;
+        color: $white;
+        font-weight: bold;
+        &:hover{
+            background-color: $light-accent2;
+            transition: ease-in-out;
+            transition-duration: 500ms;
+            cursor: pointer;
+        }
+    }
+    #origin, #destination{
+        width: 15%;
+        border-radius: 8px;
+        height: 1.7rem;
+        border-color: $black;
+        &::placeholder{
+            padding-left: 12px;
+        }
+    }
+}
\ No newline at end of file

MagisAir/booking/templates/booking/base.html

@@ -2,17 +2,14 @@
 <!DOCTYPE html>
 <html lang ="en">
     <head>
-        <link rel ="stylesheet" type="text/css" href="{% static 'booking/style.css' %}">
+        {% block styles %}{% endblock %}
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE-edge">
         <meta name ="viewport" content="width-device width, initial scale=1.0">
         <title>Magis Air Booking</title>
     </head>
     <body>
-
-        <h1> Magis Air </h1>
         {% block content %}
-        
         {% endblock %}
     </body>
 </html>
\ No newline at end of file

MagisAir/booking/templates/booking/detail.html

 {% extends "booking/base.html" %}
 {% load static %}
 
-{% block content %}
-<h1> Booking Details </h1>
-<h1> Passenger Information </h1>
-<p> 
-    Passenger ID: {{booking.Passenger.P_ID}}  <br>
-    Passenger Name: {{booking.Passenger.First_Name}} {{booking.Passenger.Middle_Initial}} {{booking.Passenger.Last_Name}}<br>
-    Birth Date: {{booking.Passenger.Birthdate}} <br>
-    Age: {{booking.Passenger.Age}} <br>
-    Gender: {{booking.Passenger.Gender}} <br>
-</p>
-
-<h1> Total Cost </h1>
-PHP {{booking.Total_Cost}}
-
-<h1> Booking Information </h1>
-Date Booked: {{booking.Booking_Date}}
+{% block styles %}   
+    <link rel ="stylesheet" type="text/css" href="{% static 'booking/detail.css' %}">
+    <script src="https://kit.fontawesome.com/e3617e5fde.js" crossorigin="anonymous"></script>
+{% endblock %}
 
-<h1> Trip Itinerary </h1>
-
-    {% for result in booksched %}
-        {{result.Sched_Code.Flight_Code}} 
-        {{result.Sched_Code.Departure_Time}} 
-        {{result.Sched_Code.Arrival_Time}} 
-        {{result.Sched_Code.Duration}} 
-        {{result.Sched_Code.Flight_Cost}} <br>
-    
+{% block content %}
+<div class="header">
+    <i class="fa-solid fa-earth-asia"></i>
+    <h1> MAGIS AIR </h1>
+</div>
+<div class="main">
+    <h2>Booking Details</h2>
+    <h4>Booking ID: {{booking.Booking_ID}}</h4>
 
+    <div class="passenger-cost">
+        <div class="passenger">
+            <h3>Passenger Information</h3>
+            <p><span>Passenger ID:</span> {{booking.Passenger.P_ID}}</p>
+            <p><span>Passenger Name:</span> {{booking.Passenger.First_Name}} {{booking.Passenger.Middle_Initial}} {{booking.Passenger.Last_Name}}</p>
+            <p><span>Birth Date:</span> {{booking.Passenger.Birthdate}}</p>
+            <p><span>Age:</span> {{booking.Passenger.Age}}</p>
+            <p><span>Gender:</span> {{booking.Passenger.Gender}}</p>
+        </div>
+        
+        <div class="cost">
+            <h3> Total Cost </h3>
+            <p>PHP{{booking.Total_Cost}}</p>
+        </div>
+    </div>
 
-    {% endfor %}  
+    <div class="booking-details">
+        <h3>Booking Information</h3>
+        <p><span>Date Booked:</span> {{booking.Booking_Date}}</p>
 
+        <h4>Trip Itinerary</h4>
+        <table>
+            <tr class="head">
+                <th style="color: #7c7f82; font-weight: bolder;">FLIGHT</th>
+                <th style="color: #7c7f82; font-weight: bolder;">ORIGIN</th>
+                <th style="color: #7c7f82; font-weight: bolder;">DESTINATION </th>
+                <th style="color: #7c7f82; font-weight: bolder;">DEPARTURE TIME</th>
+                <th style="color: #7c7f82; font-weight: bolder;">ARRIVAL TIME</th>
+                <th style="color: #7c7f82; font-weight: bolder;">DURATION</th>
+                <th style="color: #7c7f82; font-weight: bolder;">COST</th>
+            </tr>  
+            {% for result in booksched %}
+                <tr>
+                    <th>{{result.Sched_Code.Flight_Code}}</th>
+                    <th>{{result.Sched_Code.Flight_Code.Origin_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Origin_Airport.Country}}</th>
+                    <th>{{result.Sched_Code.Flight_Code.Destination_Airport.City_Name}}, {{result.Sched_Code.Flight_Code.Destination_Airport.Country}}</th>
+                    <th>{{result.Sched_Code.Departure_Time | time:'H:i'}}</th>
+                    <th>{{result.Sched_Code.Arrival_Time | time:'H:i'}}</th>
+                    <th>{{result.Sched_Code.Duration}}</th> 
+                    <th>PHP{{result.Sched_Code.Flight_Cost}}</th> 
+                </tr>
+            {% endfor %}
+        </table>
+        
+        <h4>Additional Items</h4>
+        <table>
+            <tr class="head">
+                <th style="color: #7c7f82; font-weight: bolder;">DESCRIPTION</th>
+                <th style="color: #7c7f82; font-weight: bolder;">QUANTITY</th>
+                <th style="color: #7c7f82; font-weight: bolder;">SUBTOTAL </th>
+            </tr>
+            {% for item in add_items %}
+                <tr>
+                    <th>{{item.AddItem_Desc}}</th>
+                    <th>{{item.Quantity}}</th>
+                    <th>PHP{{item.Subtotal}}</th>
+                </tr>
+            {% endfor %} 
+        </table>
+    </div>
+</div>
 {% endblock %}
\ No newline at end of file

MagisAir/booking/templates/booking/index.html

 {% extends "booking/base.html" %}
+{% load static %}
 
-{% block content %}
-<head>    
-    <style>
-    table {
-      font-family: arial, sans-serif;
-      border-collapse: collapse;
-      width: 80%;
-      height: 100%;
-    }
-
-    table.center {
-      margin-left: auto;
-      margin-right: auto;
-    }
-    
-    td, th {
-      border: 1px solid #eeeeee;
-      text-align: left;
-      padding: 8px;
-    }
-    
-    tr:nth-child(even) {
-      background-color: #dddddd;
-    }
-
-    form {
-        width: 80%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    </style>
-    </head>
-    <h1> Travel History </h1>
-    <form>
-        <input type="text" name="q" empty_value="" value='Passenger ID'>
-        <input type="submit">
-        <select id="id_field1" name="originAP">
-            <option value="Any">Any</option>
-            {% for j in city %}
-            <option value={{j.Airport_Code}}>{{j.City_Name}}</option>
-            {% endfor %}
-
-        </select>
-        <select id="id_field2" name="destinationAP">
-            <option value="Any">Any</option>
-            {% for k in city %}
-            <option value={{k.Airport_Code}}>{{k.City_Name}}</option>
-            {% endfor %}
+{% block styles %}   
+    <link rel ="stylesheet" type="text/css" href="{% static 'booking/index.css' %}">
+    <script src="https://kit.fontawesome.com/e3617e5fde.js" crossorigin="anonymous"></script>
+{% endblock %}
 
-        </select>
-    </form>
-    <p>
+{% block content %}
+    <div class="header">
+        <i class="fa-solid fa-earth-asia"></i>
+        <h1> MAGIS AIR </h1>
+    </div>
+    <div class="main">
+        <h2> Travel History </h2>
+        <form>
+            <input type="text" name="q" empty_value="" id="P-ID" placeholder="Passenger ID">
+            <input type="submit" id="search-button" value="SEARCH">
+            <select id="origin" name="originAP">
+                <option value="Any">Any</option>
+                {% for j in city %}
+                <option value={{j.Airport_Code}}>{{j.City_Name}}</option>
+                {% endfor %}
+
+            </select>
+            <select id="destination" name="destinationAP">
+                <option value="Any">Any</option>
+                {% for k in city %}
+                <option value={{k.Airport_Code}}>{{k.City_Name}}</option>
+                {% endfor %}
+            </select>
+        </form>
         <table class="center">
-            <tr>
-
-                <th style="color:cornflowerblue">DATE</th>
-                <th style="color:cornflowerblue">BOOKING ID</th>
-                <th style="color:cornflowerblue">ORIGIN </th>
-                <th style="color:cornflowerblue">DESTINATION</th>
+            <tr class="head">
+                <th style="color: #2B7296; font-weight: bolder;">DATE</th>
+                <th style="color: #2B7296; font-weight: bolder;">BOOKING ID</th>
+                <th style="color: #2B7296; font-weight: bolder;">ORIGIN </th>
+                <th style="color: #2B7296; font-weight: bolder;">DESTINATION</th>
             </tr>  
             {% for s in booking %}
                 <tr>
@@ -71,7 +48,7 @@
                 </tr>
             {% endfor %} 
         </table>
-    </p>
+    </div>
     
 
 {% endblock %}

MagisAir/booking/views.py

 from django.http import HttpResponse
 from django.http import Http404
 from django.shortcuts import render, redirect
-from .models import Booking, Booking_Sched, Passenger, City, Flight, Schedule
+from .models import Booking, Booking_Sched, Booking_AddItem, Passenger, City, Flight, Schedule
 from django.views import View
 from django.db.models import F
 
@@ -56,9 +56,12 @@ def detail(request, booking_id=None):
         booking = Booking.objects.get(pk=booking_id)
         #for trip itinerary table
         booksched = Booking_Sched.objects.select_related('Sched_Code').filter(Booking_ID=booking_id).all()
+        #for additional items
+        add_items = Booking_AddItem.objects.filter(Booking_ID=booking_id).all()
         context = {
             "booking": booking,
-            "booksched": booksched
+            "booksched": booksched,
+            "add_items": add_items
             }
     except Booking.DoesNotExist:
         raise Http404("Booking does not exist!")