More styling fixes in admin/flight add/edit form

2018-04-09 19:32:38 -05:00 · 2018-04-09 19:32:38 -05:00 · e1c8174b3f
commit e1c8174b3f
parent 0986cddae1
18 changed files with 1758 additions and 236 deletions
--- a/app/Models/Flight.php
+++ b/app/Models/Flight.php
@ -55,6 +55,8 @@ class Flight extends Model
        'flight_type',
        'route',
        'notes',
+        'start_date',
+        'end_date',
        'has_bid',
        'active',
    ];
@ -65,6 +67,8 @@ class Flight extends Model
        'level'         => 'integer',
        'distance'      => 'float',
        'flight_time'   => 'integer',
+        'start_date'    => 'date',
+        'end_date'      => 'date',
        'has_bid'       => 'boolean',
        'active'        => 'boolean',
    ];
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "moment": "^2.21.0",
    "paper-dashboard": "^1.1.0",
    "pe7-icon": "^1.0.4",
+    "pikaday": "^1.7.0",
    "pjax": "^0.2.5",
    "popper.js": "^1.14.1",
    "rivets": "^0.9.6",
--- a/public/assets/admin/css/admin.css
+++ b/public/assets/admin/css/admin.css
@ -4,7 +4,11 @@
 */

 .select2-container {
-    margin-top: 5px;
+    margin-top: 2px;
+}
+
+textarea.input-text {
+    padding: 10px
 }

 .border-blue-bottom {
--- a/public/assets/admin/css/vendor.css
+++ b/public/assets/admin/css/vendor.css
@ -10838,6 +10838,246 @@ button.close {
 .select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb; }

+@charset "UTF-8";
+
+/*!
+ * Pikaday
+ * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
+ */
+
+.pika-single {
+    z-index: 9999;
+    display: block;
+    position: relative;
+    color: #333;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/*
+clear child float (pika-lendar), using the famous micro clearfix hack
+http://nicolasgallagher.com/micro-clearfix-hack/
+*/
+.pika-single:before,
+.pika-single:after {
+    content: " ";
+    display: table;
+}
+.pika-single:after { clear: both }
+.pika-single { *zoom: 1 }
+
+.pika-single.is-hidden {
+    display: none;
+}
+
+.pika-single.is-bound {
+    position: absolute;
+    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
+}
+
+.pika-lendar {
+    float: left;
+    width: 240px;
+    margin: 8px;
+}
+
+.pika-title {
+    position: relative;
+    text-align: center;
+}
+
+.pika-label {
+    display: inline-block;
+    *display: inline;
+    position: relative;
+    z-index: 9999;
+    overflow: hidden;
+    margin: 0;
+    padding: 5px 3px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+    background-color: #fff;
+}
+.pika-title select {
+    cursor: pointer;
+    position: absolute;
+    z-index: 9998;
+    margin: 0;
+    left: 0;
+    top: 5px;
+    filter: alpha(opacity=0);
+    opacity: 0;
+}
+
+.pika-prev,
+.pika-next {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    border: 0;
+    padding: 0;
+    width: 20px;
+    height: 30px;
+    /* hide text using text-indent trick, using width value (it's enough) */
+    text-indent: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    opacity: .5;
+    *position: absolute;
+    *top: 0;
+}
+
+.pika-prev:hover,
+.pika-next:hover {
+    opacity: 1;
+}
+
+.pika-prev,
+.is-rtl .pika-next {
+    float: left;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+    *left: 0;
+}
+
+.pika-next,
+.is-rtl .pika-prev {
+    float: right;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+    *right: 0;
+}
+
+.pika-prev.is-disabled,
+.pika-next.is-disabled {
+    cursor: default;
+    opacity: .2;
+}
+
+.pika-select {
+    display: inline-block;
+    *display: inline;
+}
+
+.pika-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 0;
+}
+
+.pika-table th,
+.pika-table td {
+    width: 14.285714285714286%;
+    padding: 0;
+}
+
+.pika-table th {
+    color: #999;
+    font-size: 12px;
+    line-height: 25px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.pika-button {
+    cursor: pointer;
+    display: block;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    outline: none;
+    border: 0;
+    margin: 0;
+    width: 100%;
+    padding: 5px;
+    color: #666;
+    font-size: 12px;
+    line-height: 15px;
+    text-align: right;
+    background: #f5f5f5;
+}
+
+.pika-week {
+    font-size: 11px;
+    color: #999;
+}
+
+.is-today .pika-button {
+    color: #33aaff;
+    font-weight: bold;
+}
+
+.is-selected .pika-button,
+.has-event .pika-button {
+    color: #fff;
+    font-weight: bold;
+    background: #33aaff;
+    box-shadow: inset 0 1px 3px #178fe5;
+    border-radius: 3px;
+}
+
+.has-event .pika-button {
+    background: #005da9;
+    box-shadow: inset 0 1px 3px #0076c9;
+}
+
+.is-disabled .pika-button,
+.is-inrange .pika-button {
+    background: #D5E9F7;
+}
+
+.is-startrange .pika-button {
+    color: #fff;
+    background: #6CB31D;
+    box-shadow: none;
+    border-radius: 3px;
+}
+
+.is-endrange .pika-button {
+    color: #fff;
+    background: #33aaff;
+    box-shadow: none;
+    border-radius: 3px;
+}
+
+.is-disabled .pika-button {
+    pointer-events: none;
+    cursor: default;
+    color: #999;
+    opacity: .3;
+}
+
+.is-outside-current-month .pika-button {
+    color: #999;
+    opacity: .3;
+}
+
+.is-selection-disabled {
+    pointer-events: none;
+    cursor: default;
+}
+
+.pika-button:hover,
+.pika-row.pick-whole-week:hover .pika-button {
+    color: #fff;
+    background: #ff8000;
+    box-shadow: none;
+    border-radius: 3px;
+}
+
+/* styling for abbr */
+.pika-table abbr {
+    border-bottom: none;
+    cursor: help;
+}
+
+
 /*! X-editable - v1.5.1 
 * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
 * http://github.com/vitalets/x-editable
@ -12448,7 +12688,7 @@ hr {
 }

 .main-panel {
-  background-color: rgba(255, 255, 255, 0.96);
+  background-color: #ebeff2;
  position: relative;
  z-index: 2;
  float: right;
@ -12457,7 +12697,7 @@ hr {
 }

 .main-panel > .content {
-  padding: 30px 15px;
+  padding: 0 2px;
  min-height: calc(100% - 123px);
 }

@ -13193,7 +13433,8 @@ fieldset[disabled] .btn-neutral.active {
  border: 1px solid #E3E3E3;
  color: #333333;
  line-height: 1em;
-  font-size: 0.8571em;
+  font-size: 14px;
+  font-weight: 400;
  -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -webkit-box-shadow: none;
@ -13514,13 +13755,14 @@ fieldset[disabled] .btn-neutral.active {

 textarea.form-control {
  max-width: 100%;
-  padding: 10px 10px 0 0;
+  padding: 10px 10px;
  resize: none;
  background-color: transparent;
  border: 1px solid #E3E3E3;
  color: #333333;
  line-height: 1em;
-  font-size: 0.8571em;
+  font-size: 14px;
+  font-weight: 400;
  border-radius: 0;
 }

@ -16221,9 +16463,8 @@ fieldset[disabled] .card .btn-neutral.active {
  position: relative;
  overflow: hidden;
  width: 100%;
-  margin-bottom: 20px;
+  /*margin-bottom: 20px;*/
  font-weight: bold;
-  text-transform: uppercase;
 }

 .form-container h6 {
--- a/public/assets/admin/css/vendor.min.css
+++ b/public/assets/admin/css/vendor.min.css
@ -569,7 +569,7 @@ hr {
 }

 .main-panel {
-  background-color: rgba(255, 255, 255, 0.96);
+  background-color: #ebeff2;
  position: relative;
  z-index: 2;
  float: right;
@ -578,7 +578,7 @@ hr {
 }

 .main-panel > .content {
-  padding: 30px 15px;
+  padding: 0 2px;
  min-height: calc(100% - 123px);
 }

@ -1314,7 +1314,8 @@ fieldset[disabled] .btn-neutral.active {
  border: 1px solid #E3E3E3;
  color: #333333;
  line-height: 1em;
-  font-size: 0.8571em;
+  font-size: 14px;
+  font-weight: 400;
  -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -webkit-box-shadow: none;
@ -1635,13 +1636,14 @@ fieldset[disabled] .btn-neutral.active {

 textarea.form-control {
  max-width: 100%;
-  padding: 10px 10px 0 0;
+  padding: 10px 10px;
  resize: none;
  background-color: transparent;
  border: 1px solid #E3E3E3;
  color: #333333;
  line-height: 1em;
-  font-size: 0.8571em;
+  font-size: 14px;
+  font-weight: 400;
  border-radius: 0;
 }

@ -4342,9 +4344,8 @@ fieldset[disabled] .card .btn-neutral.active {
  position: relative;
  overflow: hidden;
  width: 100%;
-  margin-bottom: 20px;
+  /*margin-bottom: 20px;*/
  font-weight: bold;
-  text-transform: uppercase;
 }

 .form-container h6 {
--- a/public/assets/admin/js/vendor.js
+++ b/public/assets/admin/js/vendor.js
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@ -1,7 +1,7 @@
 {
    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=3d5b0dff38050f6b5e0b",
    "/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=a64d6e004c25bd2720b2",
-    "/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=7b067ced063f89165b11",
+    "/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=bdc704679950dfc5db16",
    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=926a7c24ec36533523e3",
    "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=c65781eda730445d666e",
    "/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
@ -9,8 +9,8 @@
    "/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=0e92f4c3efc6988a3c96",
    "/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=90a4b76b4f11558691f6",
    "/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=6a07da9fae934baf3f74",
-    "/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=724120aacdfd53f887d8",
-    "/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=aa7db4bedfe23409f625",
+    "/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=cab0fdbdde73930463ea",
+    "/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=5130233c88c71fc60135",
    "/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=753a3c0dec86d3a38d9c",
    "/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",
    "/assets/global/js/vendor.js": "/assets/global/js/vendor.js?id=6436d215691e8f38eb12",
--- a/resources/sass/admin/paper/_form-container.scss
+++ b/resources/sass/admin/paper/_form-container.scss
@ -5,9 +5,9 @@
    position: relative;
    overflow: hidden;
    width: 100%;
-    margin-bottom: 20px;
+    /*margin-bottom: 20px;*/
    font-weight: bold;
-    text-transform: uppercase;
+    //text-transform: uppercase;

    h6 {
        font-size: 15px;
--- a/resources/sass/admin/paper/_inputs.scss
+++ b/resources/sass/admin/paper/_inputs.scss
@ -7,7 +7,8 @@
    border: 1px solid $light-gray;
    color: $black-color;
    line-height: 1em;
-    font-size: $font-size-small;
+    font-size: $font-size-base;
+    font-weight: 400;
    @include transition-input-focus-color();
    @include box-shadow(none);

@ -229,13 +230,14 @@

 textarea.form-control {
    max-width: 100%;
-    padding: 10px 10px 0 0;
+    padding: 10px 10px;
    resize: none;
    background-color: $transparent-bg;
    border: 1px solid $light-gray;
    color: $black-color;
    line-height: 1em;
-    font-size: $font-size-small;
+    font-size: $font-size-base;
+    font-weight: 400;
    border-radius: 0;

    &:focus,
--- a/resources/sass/admin/paper/_sidebar-and-main-panel.scss
+++ b/resources/sass/admin/paper/_sidebar-and-main-panel.scss
@ -174,8 +174,8 @@
 }

 .main-panel{
-    //background-color: $bg-nude;
-    background-color: $white-navbar;
+    background-color: $bg-nude;
+    //background-color: $white-navbar;
    position: relative;
    z-index: 2;
    float: right;
@ -183,7 +183,8 @@
    min-height: 100%;

    > .content{
-        padding: 30px 15px;
+        //padding: 30px 15px;
+        padding: 0 2px;
        min-height: calc(100% - 123px);
    }

--- a/resources/views/admin/app.blade.php
+++ b/resources/views/admin/app.blade.php
@ -21,7 +21,6 @@
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet" type="text/css">

-    {{--<link rel="stylesheet" href="{{ public_asset('/assets/system/css/vendor.min.css') }}"/>--}}
    <link rel="stylesheet" href="{{ public_asset('/assets/global/css/vendor.css') }}">
    <link rel="stylesheet" href="{{ public_asset('/assets/admin/css/vendor.css') }}">
    <link rel="stylesheet" href="{{ public_asset('/assets/admin/css/admin.css') }}">
--- a/resources/views/admin/flights/edit.blade.php
+++ b/resources/views/admin/flights/edit.blade.php
@ -2,30 +2,30 @@

@section('title', 'Edit Flight')
@section('content')
-<div class="card  border-blue-bottom">
+    <div class="card border-blue-bottom">
       <div class="content">
            {{ Form::model($flight, ['route' => ['admin.flights.update', $flight->id], 'method' => 'patch']) }}
                @include('admin.flights.fields')
            {{ Form::close() }}
       </div>
-</div>
-
-<div class="card  border-blue-bottom">
-    <div class="content">
-       @include('admin.flights.flight_fields')
    </div>
-</div>

-<div class="card  border-blue-bottom">
+    <div class="card border-blue-bottom">
        <div class="content">
            @include('admin.flights.subfleets')
        </div>
-</div>
+    </div>

-<div class="card  border-blue-bottom">
+    <div class="card border-blue-bottom">
+        <div class="content">
+           @include('admin.flights.flight_fields')
+        </div>
+    </div>
+
+    <div class="card border-blue-bottom">
        <div class="content">
            @include('admin.flights.fares')
        </div>
-</div>
+    </div>
@endsection
@include('admin.flights.scripts')
--- a/resources/views/admin/flights/fares.blade.php
+++ b/resources/views/admin/flights/fares.blade.php
@ -65,17 +65,16 @@
                {{ Form::open(['url' => '/admin/flights/'.$flight->id.'/fares',
                        'method' => 'post',
                        'class' => 'pjax_fares_form form-inline'
-                                ])
-                }}
+                ]) }}
                {{ Form::select('fare_id', $avail_fares, null, [
                        'placeholder' => 'Select Fare',
                        'class' => 'ac-fare-dropdown form-control input-lg select2',
-
-                    ])
-                }}
-                {{ Form::button('<i class="glyphicon glyphicon-plus"></i> add',
-                                 ['type' => 'submit',
-                                  'class' => 'btn btn-success btn-s']) }}
+                        'style' => 'width: 400px;',
+                ]) }}
+                {{ Form::button('<i class="glyphicon glyphicon-plus"></i> add', [
+                        'type' => 'submit',
+                        'class' => 'btn btn-success btn-s']
+                ) }}
                {{ Form::close() }}
            </div>
        </div>
--- a/resources/views/admin/flights/fields.blade.php
+++ b/resources/views/admin/flights/fields.blade.php
@ -5,7 +5,8 @@
            <h6><i class="fas fa-info-circle"></i>
                &nbsp;Flight Information
            </h6>
-            <div class="form-container-body row">
+            <div class="form-container-body">
+                <div class="row">
                    <div class="form-group col-sm-3">
                        {{ Form::label('airline_id', 'Airline:') }}&nbsp;<span
                                class="required">*</span>
@ -15,24 +16,104 @@

                    <!-- Flight Number Field -->
                    <div class="form-group col-sm-3">
-                    {{ Form::label('flight_number', 'Flight Number:') }}&nbsp;<span
-                            class="required">*</span>
-                    {{ Form::text('flight_number', null, ['class' => 'form-control']) }}
+                        {{ Form::label('flight_number', 'Flight Number/Code/Leg') }}&nbsp;<span class="required">*</span>
+
+                        <div class="input-group input-group-sm mb3">
+                            {{ Form::text('flight_number', null, ['class' => 'form-control', 'style' => 'width: 33%']) }}
+                            {{ Form::text('route_code', null, ['class'=>'form-control', 'placeholder'=>'optional', 'style' => 'width: 33%']) }}
+                            {{ Form::text('route_leg', null, ['class'=>'form-control', 'placeholder'=>'optional', 'style' => 'width: 33%']) }}
+                        </div>
+
                        <p class="text-danger">{{ $errors->first('flight_number') }}</p>
+                        <p class="text-danger">{{ $errors->first('route_code') }}</p>
+                        <p class="text-danger">{{ $errors->first('route_leg') }}</p>
+
                    </div>

                    <!-- Route Code Field -->
                    <div class="form-group col-sm-3">
-                    {{ Form::label('route_code', 'Route Code:') }}
-                    {{ Form::text('route_code', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
-                    <p class="text-danger">{{ $errors->first('route_code') }}</p>
+                        {{ Form::label('level', 'Flight Type:') }}&nbsp;<span class="required">*</span>
+                        {{ Form::select('flight_type', $flight_types, null, ['class' => 'form-control select2']) }}
+                        <p class="text-danger">{{ $errors->first('flight_type') }}</p>
                    </div>

                    <!-- Route Leg Field -->
                    <div class="form-group col-sm-3">
-                    {{ Form::label('route_leg', 'Route Leg:') }}
-                    {{ Form::text('route_leg', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
-                    <p class="text-danger">{{ $errors->first('route_leg') }}</p>
+                        {{ Form::label('flight_time', 'Flight Time (hours & minutes)') }}
+
+                        <div class="input-group input-group-sm mb3">
+                            {{ Form::number('hours', null, [
+                                    'class' => 'form-control',
+                                    'placeholder' => 'hours',
+                                    'style' => 'width: 50%',
+                                ]) }}
+
+                            {{ Form::number('minutes', null, [
+                                    'class' => 'form-control',
+                                    'placeholder' => 'minutes',
+                                    'style' => 'width: 50%',
+                                ]) }}
+                        </div>
+
+                        <p class="text-danger">{{ $errors->first('hours') }}</p>
+                        <p class="text-danger">{{ $errors->first('minutes') }}</p>
+
+                    </div>
+                </div>
+
+                {{-- NEXT ROW --}}
+
+                <div class="row">
+                    <div class="form-group col-sm-4">
+                        {{ Form::label('dpt_airport_id', 'Departure Airport:') }}&nbsp;<span
+                                class="required">*</span>
+                        {{ Form::select('dpt_airport_id', $airports, null , ['class' => 'form-control select2']) }}
+                        <p class="text-danger">{{ $errors->first('dpt_airport_id') }}</p>
+                    </div>
+
+                    <!-- Arr Airport Id Field -->
+                    <div class="form-group col-sm-4">
+                        {{ Form::label('arr_airport_id', 'Arrival Airport:') }}&nbsp;<span
+                                class="required">*</span>
+                        {{ Form::select('arr_airport_id', $airports, null , ['class' => 'form-control select2']) }}
+                        <p class="text-danger">{{ $errors->first('arr_airport_id') }}</p>
+                    </div>
+
+                    <!-- Alt Airport Id Field -->
+                    <div class="form-group col-sm-4">
+                        {{ Form::label('alt_airport_id', 'Alt Airport:') }}
+                        {{ Form::select('alt_airport_id', $alt_airports, null , ['class' => 'form-control select2']) }}
+                        <p class="text-danger">{{ $errors->first('alt_airport_id') }}</p>
+                    </div>
+                </div>
+
+
+                {{-- NEXT ROW --}}
+
+                <div class="row">
+                    <div class="form-group col-sm-3">
+                        {{ Form::label('dpt_time', 'Departure Time:') }}
+                        {{ Form::text('dpt_time', null, ['class' => 'form-control']) }}
+                        <p class="text-danger">{{ $errors->first('dpt_time') }}</p>
+                    </div>
+
+                    <div class="form-group col-sm-3">
+                        {{ Form::label('arr_time', 'Arrival Time:') }}
+                        {{ Form::text('arr_time', null, ['class' => 'form-control']) }}
+                        <p class="text-danger">{{ $errors->first('arr_time') }}</p>
+                    </div>
+
+                    <div class="form-group col-sm-3">
+                        {{ Form::label('level', 'Flight Level:') }}
+                        {{ Form::text('level', null, ['class' => 'form-control']) }}
+                        <p class="text-danger">{{ $errors->first('level') }}</p>
+                    </div>
+
+                    <div class="form-group col-sm-3">
+                        {{ Form::label('distance', 'Distance:') }} <span class="description small">in nautical miles</span>
+                        {{ Form::text('distance', null, ['class' => 'form-control']) }}
+                        <p class="text-danger">{{ $errors->first('distance') }}</p>
+                    </div>
                </div>
            </div>
        </div>
@ -47,166 +128,96 @@
            </h6>
            <div class="form-container-body">
                <div class="row">
-                    <div class="form-group col-md-12" style="text-align: center;">
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Monday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::MONDAY,
-                                in_mask($days, \App\Models\Enums\Days::MONDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Tuesday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::TUESDAY,
-                                in_mask($days, \App\Models\Enums\Days::TUESDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Wednesday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::WEDNESDAY,
-                                in_mask($days, \App\Models\Enums\Days::WEDNESDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Thursday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::THURSDAY,
-                                in_mask($days, \App\Models\Enums\Days::THURSDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Friday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::FRIDAY,
-                                in_mask($days, \App\Models\Enums\Days::FRIDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span style="margin-right: 20px;">
-                            {{ Form::label('days[]', 'Saturday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::SATURDAY,
-                                in_mask($days, \App\Models\Enums\Days::SATURDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                        <span>
-                            {{ Form::label('days[]', 'Sunday') }}
-                            {{ Form::checkbox(
-                                'days[]',
-                                \App\Models\Enums\Days::SUNDAY,
-                                in_mask($days, \App\Models\Enums\Days::SUNDAY),
-                                ['class' => 'form-control icheck']
-                            ) }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

-<div class="row">
-
-    <div class="form-group col-sm-3">
-        {{ Form::label('level', 'Flight Type:') }}&nbsp;<span class="required">*</span>
-        {{ Form::select('flight_type', $flight_types, null, ['class' => 'form-control select2']) }}
-        <p class="text-danger">{{ $errors->first('flight_type') }}</p>
+                    <div class="col-sm-4">
+                        {{ Form::label('start_date', 'Start Date') }}
+                        <span class="description small">optional</span>
+                        {{ Form::text('start_date', null, ['id' => 'start_date', 'class' => 'form-control']) }}
                    </div>

-    <div class="form-group col-sm-3">
-        {{ Form::label('dpt_airport_id', 'Departure Airport:') }}&nbsp;<span class="required">*</span>
-        {{ Form::select('dpt_airport_id', $airports, null , ['class' => 'form-control select2']) }}
-        <p class="text-danger">{{ $errors->first('dpt_airport_id') }}</p>
-    </div>
-
-    <!-- Arr Airport Id Field -->
-    <div class="form-group col-sm-3">
-        {{ Form::label('arr_airport_id', 'Arrival Airport:') }}&nbsp;<span class="required">*</span>
-        {{ Form::select('arr_airport_id', $airports, null , ['class' => 'form-control select2']) }}
-        <p class="text-danger">{{ $errors->first('arr_airport_id') }}</p>
-    </div>
-
-    <!-- Alt Airport Id Field -->
-    <div class="form-group col-sm-3">
-        {{ Form::label('alt_airport_id', 'Alt Airport:') }}
-        {{ Form::select('alt_airport_id', $alt_airports, null , ['class' => 'form-control select2']) }}
-        <p class="text-danger">{{ $errors->first('alt_airport_id') }}</p>
-    </div>
-</div>
-
-
-<div class="row">
-
-    <div class="form-group col-sm-2">
-        {{ Form::label('dpt_time', 'Departure Time:') }}
-        {{ Form::text('dpt_time', null, ['class' => 'form-control']) }}
-        <p class="text-danger">{{ $errors->first('dpt_time') }}</p>
-    </div>
-
-    <div class="form-group col-sm-2">
-        {{ Form::label('arr_time', 'Arrival Time:') }}
-        {{ Form::text('arr_time', null, ['class' => 'form-control']) }}
-        <p class="text-danger">{{ $errors->first('arr_time') }}</p>
+                    <div class="col-sm-4">
+                        {{ Form::label('end_date', 'End Date') }}
+                        <span class="description small">optional</span>
+                        {{ Form::text('end_date', null, ['id' => 'end_date', 'class' => 'form-control']) }}
                    </div>

                    <div class="form-group col-sm-4">
-        {{ Form::label('flight_time', 'Flight Time (hours & minutes):') }}
-        <div style="float: left">
-            {{ Form::number('hours', null, [
-                    'class' => 'form-control',
-                    'placeholder' => 'hours'
-                ]) }}
+                        {{Form::label('days', 'Days of Week')}}
+                        <span class="description small">optional</span>
+                        <select id="days_of_week" name="days[]" multiple="multiple" size="7" style="width: 100%;">
+                            <option value="{{\App\Models\Enums\Days::MONDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::MONDAY) ? 'selected':'' }}>
+                                @lang('system.days.mon')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::TUESDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::TUESDAY) ? 'select':'' }}>
+                                @lang('system.days.tues')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::WEDNESDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::WEDNESDAY) ? 'selected':'' }}>
+                                @lang('system.days.wed')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::THURSDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::THURSDAY) ? 'selected':'' }}>
+                                @lang('system.days.thurs')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::FRIDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::FRIDAY) ? 'selected':'' }}>
+                                @lang('system.days.fri')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::SATURDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::SATURDAY) ? 'selected':'false' }}>
+                                @lang('system.days.sat')
+                            </option>
+                            <option value="{{\App\Models\Enums\Days::SUNDAY}}"
+                                    {{in_mask($days, \App\Models\Enums\Days::SUNDAY) ? 'selected':'false' }}>
+                                @lang('system.days.sun')
+                            </option>
+                        </select>
                    </div>
-        <div style="float: left">
-            {{ Form::number('minutes', null, [
-                    'class' => 'form-control',
-                    'placeholder' => 'minutes'
-                ]) }}
                </div>
-        <p class="text-danger">{{ $errors->first('hours') }}</p>
-        <p class="text-danger">{{ $errors->first('minutes') }}</p>
            </div>
-
-    <div class="form-group col-sm-2">
-        {{ Form::label('level', 'Flight Level:') }}
-        {{ Form::text('level', null, ['class' => 'form-control']) }}
-        <p class="text-danger">{{ $errors->first('level') }}</p>
        </div>
-
-    <div class="form-group col-sm-2">
-        {{ Form::label('distance', 'Distance:') }} <span class="small">in nautical miles</span>
-        {{ Form::text('distance', null, ['class' => 'form-control']) }}
-        <p class="text-danger">{{ $errors->first('distance') }}</p>
    </div>
 </div>

 <div class="row">
+    <div class="col-lg-12">
+        <div class="form-container">
+            <h6><i class="fas fa-map"></i>
+                &nbsp;Route
+            </h6>
+            <div class="form-container-body row">
                <!-- Route Field -->
-    <div class="form-group col-sm-6">
-        {{ Form::label('route', 'Route:') }}
-        {{ Form::textarea('route', null, ['class' => 'form-control']) }}
+                <div class="form-group col-sm-12">
+                    {{ Form::textarea('route', null, [
+                        'class' => 'form-control input-text',
+                        'style' => 'padding: 10px',
+                    ]) }}
                    <p class="text-danger">{{ $errors->first('route') }}</p>
                </div>
+            </div>
+        </div>
+    </div>
+</div>

-    <!-- Notes Field -->
-    <div class="form-group col-sm-6">
-        {{ Form::label('notes', 'Notes:') }}
-        {{ Form::textarea('notes', null, ['class' => 'form-control']) }}
+<div class="row">
+    <div class="col-lg-12">
+        <div class="form-container">
+            <h6><i class="fas fa-sticky-note"></i>
+                &nbsp;Remarks
+            </h6>
+            <div class="form-container-body row">
+                <div class="form-group col-sm-12">
+                    {{ Form::textarea('notes', null, [
+                        'class' => 'form-control input-text',
+                        'style' => 'padding: 10px',
+                    ]) }}
                    <p class="text-danger">{{ $errors->first('notes') }}</p>
                </div>
+            </div>
+        </div>
+    </div>
 </div>

 <div class="row">
--- a/resources/views/admin/flights/scripts.blade.php
+++ b/resources/views/admin/flights/scripts.blade.php
@ -60,20 +60,20 @@ const setFieldsEditable = () =>

 $(document).ready(function () {

+    $("select#days_of_week").select2();
+
    setEditable();
    setFieldsEditable();

-    /*new Pjax({
-        elements: 'form[action].pjax_subfleet_form',
-        selectors: ['div#subfleet_flight_wrapper'],
-        history: false,
+  const start_date_picker = new Pikaday({
+    field: document.getElementById('start_date'),
+    minDate: new Date(),
  });

-    new Pjax({
-        elements: 'form[action].pjax_flight_fields',
-        selectors: ['div#flight_fields_wrapper'],
-        history: false
-    });*/
+  const end_date_picker = new Pikaday({
+    field: document.getElementById('end_date'),
+    minDate: new Date(),
+  });

    $(document).on('submit', 'form.pjax_flight_fields', function (event) {
        event.preventDefault();
--- a/resources/views/admin/flights/subfleets.blade.php
+++ b/resources/views/admin/flights/subfleets.blade.php
@ -46,6 +46,7 @@
                {{ Form::select('subfleet_id', $avail_subfleets, null, [
                        'placeholder' => 'Select Subfleet',
                        'class' => 'select2 form-control input-lg',
+                        'style' => 'width: 400px;',
                    ])
                }}&nbsp;
                {{ Form::button('<i class="fas fa-plus"></i> add',
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -36,6 +36,7 @@ mix.sass('resources/sass/admin/paper-dashboard.scss',
      'node_modules/animate.css/animate.css',
      'node_modules/icheck/skins/square/blue.css',
      'node_modules/select2/dist/css/select2.css',
+      'node_modules/pikaday/css/pikaday.css',
      'node_modules/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css',
      'node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css',
      'public/assets/admin/css/vendor.min.css',
@ -58,6 +59,7 @@ mix.scripts([
  'node_modules/select2/dist/js/select2.js',
  //'node_modules/leaflet/dist/leaflet.js',
  'node_modules/icheck/icheck.js',
+  'node_modules/pikaday/pikaday.js',
  'node_modules/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js',
  'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js',
  'node_modules/jquery-pjax/jquery.pjax.js',
--- a/yarn.lock
+++ b/yarn.lock
@ -4812,6 +4812,10 @@ moment-timezone@^0.4.0:
  dependencies:
    moment ">= 2.6.0"

+moment@2.x:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
+
 "moment@>= 2.6.0", moment@^2.10, moment@^2.21.0:
  version "2.21.0"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
@ -5460,6 +5464,12 @@ pify@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"

+pikaday@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.7.0.tgz#78bf26e709f7c135b674762bbab79d75ac589ab6"
+  optionalDependencies:
+    moment "2.x"
+
 pinkie-promise@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"