Hoherberg Ski School Frontend Code Challenge Series #1 - Reservations Build

App environment: 
- ASP.Net MVC

Basic requirements for this challenge: 
- Build ASP.Net MVC application based on storyboard design
- Need load data from separated JSON by using simple library
- Create endpoints that can be re-usable when we swap with proper REST API on next development phase

Challenge Overview
Hoherberg Ski School is very excited to see how the application look on real life based on previous winning storyboard. This web application need build using ASP.Net MVC with focus on desktop resolution only. 

This is the 1st of a Frontend Code Challenge Series to create the Hoherberg Ski School web application. For this challenge we need you  create a "base structure" and focus specifically on the Reservation section and and code must be reusable on the next Hoherberg Ski School Code Challenge Series. As part of this challenge we also need you create mockup JSON files for all endpoints, the plan is to make REST API services easy to swap with actual REST API later. 

Good luck and let's discuss any questions you have. See you in the challenge forum!

Technology Stack

• ASP.Net MVC
• HTML5
• CSS3
• Javascript
• Jquery
• Do not use Bootstrap!

Deployment environment requirements

• localhost 
• live site

Challenge Assets: 
Source File: https://drive.google.com/open?id=0BxNVnWK-ZGA6bl80eVdjVWZDTVk 
Fonts: https://fonts.google.com/?selection.family=Roboto:300,400,500 
Ragnar: Check challenge forum to see the url. 

Notes: 

• Adobe XD is free and cross-platform (MacOS and Windows)
• You can download Adobe XD for FREE here: https://www.adobe.com/products/xd.html

General Requirements:

• You must use ASP.Net MVC for this base of app
• Getting started on ASP.Net MVC here: https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=macos 
• You can choose some ASP.Net MVC library to help build your submission. As long they are open source. 
• Suggest best practice developing this application on ASP.NET MVC. You can start read this article and implement on your submission: https://www.codemag.com/article/1405071/10-Good-Practices-for-ASP.NET-MVC-Apps 
• You may use open source frameworks/libraries (MIT or similar licensed). Let us know if need confirmation. You can start from this url: https://github.com/quozd/awesome-dotnet 
• Use SCSS variables and mixins from the global stylesheets.
• Make sure you submission support unit testings
• Right now you can set min-width for 1366px as storyboard screen, but application must support fluid width.
• Important: Application performance must fast and lightweight! Keep in mind when you build the app. 

Using the JSON Mock Service

• We need you build JSON files Mock service to populate data to the demo applications. 
• Suggest solution that will works for ASP.Net MVC
• We just received completed Docker and MySql from previous, you need follow and capture details about table and structure from our repo: https://gitlab.com/alta-ski/architecture/tree/master/docker 
• The plan is we need keep use remain endpoints when swap with the actual REST API from client
• Let us if you need some clarifications related the endpoints and JSON structure
• For this challenge requirements, only need build the mentioned screenshots below: 

Individual Requirements
1). Login 
Screenshot: 01_Login_A.png

• This will be a simple login to capture username and password
• Display Remember Me and Forgot Password links
• On input focus need display the gold border (Screenshot: 01_Login_B.png)
• Create validation error, also update border to red (Screenshot: 01_Login_C.png)

2). Reservation Check-In 
Screenshot: 02_Check_In_A.png

• This is Reservation Check in page
• Welcome message need displayed on on the right side
• Click Logout button need take to Login page
• Match active/inactive state for navigation menu
• Important: Remove Capacity from the menu navigation on your submission
• Create New Reservation need take to separate page, explained below
• Availability widget on top displays the Adult/Child availability information on a daily basis. Need able to collapse and expand the widget. 
• Hovering on a cell needs to display tooltips for Instructor availability and skill level (Screenshot: 02_Check_In_B.png)
• Datepicker need support range selection (Screenshot: 02_Check_In_C.png)
• Match datepicker styling
• Reset and Apply button need disable before user pick the date
• This is after user select the date range (Screenshot: 02_Check_In_D.png)
• After click Apply need load data on the right side based selected range. 
• Need able to scrolling horizontally 
• Below the user can see the table list
• Each column needs to be filter with those different filter for datepicker, input, timepicker, dropdown (Screenshot: 02_Check_In_E.png)
• This is how timepicker look, match the 15 minutes increment (Screenshot: 02_Check_In_F_1.png)
• Match the selected style (Screenshot: 02_Check_In_F_2.png)
• Click on table row will expand Customer Information and Reservation Information (Screenshot: 02_Check_In_G.png)
• Just need one row expanded at a time
• Cancel Reservation needs to load confirmation with additional buttons for Refund Credit Card, Capture Booking Fee and Cancel (Screenshot: 02_Check_In_H.png)
• Notice that modal window by default need centered, but user need able to move the modal window
• Click close or cancel need hide the modal window
• Clicking the Update button needs to display the update contact form (Screenshot: 02_Check_In_I.png)
• Clicking the Check-In button needs to load the success message and barcode (Screenshot: 02_Check_In_J.png)
• Make sure you use barcode library not just using the image based
• Edit Reservation needs to take the user to a separate page explained below
• Click Create New reservation, need load this selection window before go to Create New Reservation (Screenshot: 02_Check_In_K.png)
• Result dropdown place on top(Screenshot: 02_Check_In_L.png)
• Collapsed state for Availability Manager (Screenshot: 02_Check_In_M.png)

3). Create Reservation
Create reservation will display options for Private Lessons, Group Lessons, and Learn to Ski (Screenshot: 03_Create_Reservation_A.png)

Private Lesson

• This is a Private Lesson page look (Screenshot: 03_Create_Reservation_B.png)
• Need able to change the type by click the the dropdown below breadcrumb
• Availability widget placed on top like on another page
• Step Wizard placed below the Availability widget
• There are some steps needed when create new reservation: 

Step 1 - Skier Information

• This is form look after user filled some values on Step Wizard (Screenshot: 03_Create_Reservation_C_1.png)
• Need the ability to search for an existing Skier by click the view match link 
• There’s a modal window to find the Skier (Screenshot: 03_Create_Reservation_C_2.png)
• Modal window need moveable
• Add Skier needs to return data to the Step Wizard page
• Capture this screen when data not found  (Screenshot: 03_Create_Reservation_C_3.png)
• After filled all forms then, Next button become enabled to take to Step 2
• This flyout show up click arrow on the right side of Private Lesson (Screenshot: 03_Create_Reservation_D.png)
• Need able to make browser auto scroll when change to next step

Step 2 - Select Date

• Step 2 need expand another Reservation Date/Time section 
• This is how dropdown look after click the dropdown button to change the Create New Reservation Type (Screenshot: 03_Create_Reservation_D.png) 
• Under Reservation Date/Time, we need the ability to add multiple date (Screenshot: 03_Create_Reservation_E.png)
• This date picker, need able to select multiple dates. Also need able to select just 1 day only. 
• After select date, step changes to Step 3  (Screenshot: 03_Create_Reservation_F.png)
• Need able to make browser auto scroll when change to next step

Step 3 - Reservation Details

• Then user need pick the P-Code, start time and start time (Screenshot: 03_Create_Reservation_G.png)
• Click add button need render the row with those multi selected date with same P-Code, Start time, end time, status and delete button
• Calendar timeline displayed on the right side to view availability on selected date (Screenshot: 03_Create_Reservation_H.png)
• Make sure the row aligned
• No need display row if date not exists
• User need able to delete the row
• Need able to add another row (Screenshot: 03_Create_Reservation_I.png)
• Need ability to add additional Skiers
• There will be Skier history data in this page
• Reservation Details contains the meeting details, note and taken by
• Skier details contains current Skier information, need ability to pull data for the existing skier
• Contact details will be for parent contact information 
• After Add Reservation button active, click the button need load the success message (Screenshot: 03_Create_Reservation_J.png)
• Click on the cart button need view the total amount details 
• Next button become enabled after filled all data and take to Step 4

Group Lesson

• Create new Reservation screen for Group Lesson little bit different than the Private Lesson (Screenshot: 03_Create_Reservation_K.png)
• Create different page when user change to Learn to Ski or Packages option
• Match storyboard content (Screenshot: 03_Create_Reservation_L.png)
• Reservations Date/Times use different structure (Screenshot: 03_Create_Reservation_M.png)
• Reservations Details only have Location Details and Contact Details (Screenshot: 03_Create_Reservation_N.png)
• Click Add Reservation button need load success message (Screenshot: 03_Create_Reservation_O.png)
• Click Book button need load this message (Screenshot: 03_Create_Reservation_P.png)

Warning Message

• We need create logic to detect when if additional skier has a higher level than the main skier. This is only triggered if user click Book or Add Reservation  (Screenshot: 03_Create_Reservation_Q_1_Warning.png)
• Error message displayed on top (Screenshot: 03_Create_Reservation_Q_2_Warning.png)

Step 4 - Booking Details 
Screenshot: 04_Booking_A.png

• This is for a booking summary screen look
• Create separate page set when user change to Private Lessons, Group Lesson, Learn To Ski or Packages
• This is sample with more row on Booking Summary (Screenshot: 04_Booking_B.png)
• Cart needs to display the number of bookings
• Display booking summary information 
• There will be a checkbox to send an email to the Skier (send confirmation email)
• Need ability to waive the booking fee
• Add notes to the booking receipt/ confirmation email
• After filled the fee amount need load Credit Card & Billing Address information displayed on the bottom (Screenshot: 04_Booking_C.png)
• After filled Credit Card Information need make the Book button enable 
• Checkboxes for, has the cancellation policy been explained to the client. (Screenshot: 04_Booking_D.png)
• This is how Booking Summary look for Group Lesson (Screenshot: 04_Booking_E.png)
• Click Delete button need load confirmation (Screenshot: 04_Booking_F.png)
• Clicking Book needs to load the success message

5). Edit Reservations
Screenshot: 04_Edit_Reservation_A.png

• User lands on this Edit screen from the Booking page
• Need the ability to edit the Reservation information
• Notice that some information, like Credit card details, is not editable
• Click Save button need load this green banner message (Screenshot: 04_Edit_Reservation_B.png)

Final Submission Guidelines

Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:  
- Chrome, 
- Edge, 
- Safari, 
- Firefox

What To Submit?
- Create clear documentation about how to set up your submission locally and on live site. 
- Upload your submission to live site for client review, Include the link on your README.md