<!--
  ~ Copyright 2020 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kogito Travel Agency</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="jumbotron">
        <h1>Kogito Travel Agency</h1>

        <p>Plan your next trip with Kogito Travel Agency, it's easy and fast!</p>
    </div>
    <div class="page-header">
        <div class="btn-group pull-right" role="group" style="padding-top: 10px;">
            <button class="btn btn-primary" onclick="load();">
                <span class="glyphicon glyphicon-refresh"></span> Refresh
            </button>
            <button class="btn btn-primary product-add" data-action="add" data-toggle="modal"
                    data-target="#productModal">
                <span class="glyphicon glyphicon-plus"></span> Plan new trip
            </button>
        </div>
        <h1>Travels</h1>
    </div>
    <div class="row">
        <div class="col-md-12">

            <table class="table">
                <thead>
                <tr>
                    <th>Code</th>
                    <th>Traveller name</th>
                    <th>Destination</th>
                    <th>Dates</th>
                    <th>Visa required</th>
                    <th>Visa approved</th>
                    <th>Hotel</th>
                    <th>Flight</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody id="content">
                <!-- filled using Ajax -->
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<script>
    const graphql = '{config:property('kogito.dataindex.http.url') or 'http://localhost:8180'}/graphql';

    $(function () {
        $.ajaxSetup({
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        $(function () {
            $("#tripBegin").datepicker({
                dateFormat: "yy-mm-dd"
            });
            $("#tripEnd").datepicker({
                dateFormat: "yy-mm-dd"
            });
        });
        load();
        initModal();

        if ("WebSocket" in window) {

           // Let us open a web socket
           var ws = new WebSocket('{config:property('kogito.dataindex.ws.url') or 'ws://localhost:8180'}/graphql');

           ws.onopen = function() {
              // Web Socket is connected, send data using send()
               ws.send('{"id" : "1", "type" : "connection_init"}');
           };

           ws.onmessage = function (evt) {
              var received_msg = evt.data;
              let jsonObject = JSON.parse(received_msg);
               if(jsonObject.type === 'connection_ack'){
                   ws.send('{"id" : "2", "type" : "start", "payload" : { "query" : "subscription { TravelsUpdated { id, traveller { lastName, firstName, email, nationality } trip { city, country, begin, end, visaRequired } hotel { name, bookingNumber, phone, address { street } } flight { flightNumber, departure, arrival } visaApplication { approved } metadata { processInstances { businessKey, state } } } }"}}');
               } else if(jsonObject.type === 'data') {
                   var val = jsonObject.payload.data.TravelsUpdated;

                   var existing = document.getElementById(val.id);
                   if (existing != null) {
                       existing.remove();
                   }

                   appendDataRow(null, val);
               }
           };

           ws.onclose = function() {

              // websocket is closed.
           };
        }
    });

    function create(travelRequest) {
        var key = makeid();
        $.post("/travels?businessKey=" + key, travelRequest, function () {
            load();
        }, "json");
    }

    function makeid() {
        var result = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < 6; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }

    function remove(id) {
        $.ajax({
            method: "DELETE",
            url: "/travels/" + id
        }).done(function () {

        });
    }

    function submitVisaApplication() {

        var application = {
            country: $("#visa_destinationCountry").val(),
            city: $("#visa_destinationCity").val(),
            firstName: $("#visa_firstName").val(),
            lastName: $("#visa_lastName").val(),
            duration: Number($("#visa_duration").val()),
            passportNumber: $("#visa_passportNumber").val(),
            nationality: $("#visa_nationality").val()
        };
        var visaApplicationRequest = JSON.stringify(\{visaApplication: application\});

        $.post("/travels/" + $("#visa_p_id").val() + "/VisaApplication/" + $("#visa_t_id").val(), visaApplicationRequest, function () {

        }, "json");
    }

    function completeTask(id, taskName, taskId) {
        $.post("/travels/" + id + "/" + taskName + "/" + taskId, JSON.stringify({}), function () {

        }, "json");
    }

    function load() {
        $("#content").children().remove();
        var query = "{ \"query\": \"" +
                "{ Travels { " +
                "id " +
                "traveller { lastName, firstName, email, nationality } " +
                "trip { city, country, begin, end, visaRequired } " +
                "hotel { name, bookingNumber, phone, address { street } } " +
                "flight { flightNumber, departure, arrival } " +
                "visaApplication { approved } " +
                "metadata { processInstances { state, businessKey } } " +
                "}}\"" +
                "}";
        $.ajax({
            type: 'POST',
            url: graphql,
            data: query,
            success: function (data) {
                $.each(data.data["Travels"], function (key, val) {
                    appendDataRow(key, val);
                });
                initCallbacks();
            }
        });
    }

    function appendDataRow(key, val) {
      var active = $.grep(val.metadata.processInstances, function (pi) {
          return pi.state == "ACTIVE"
      }).length > 0;
      var html =
              "<tr id='" + val.id + "' class='" + (active ? "" : "active") + "'>" +
              "<td>" + val.metadata.processInstances[0].businessKey + "</td>" +
              "<td>" + val.traveller.lastName + ", " + val.traveller.firstName + "</td>" +
              "<td>" + val.trip.country + ", " + val.trip.city + "</td>" +
              "<td>" + val.trip.begin.substring(0, 10) + " - " + val.trip.end.substring(0, 10) + "</td>" +
              "<td>" + (val.trip.visaRequired ? 'Yes' : 'No') + "</td>" +
              "<td>" + (val.visaApplication != null ? (val.visaApplication.approved ? 'Yes' : 'No') : 'N/A')+ "</td>" +
              "<td>" + (val.hotel != null ? val.hotel.name : '') + "</td>" +
              "<td>" + (val.flight != null ? val.flight.flightNumber : '') + "</td>" +
              "<td>" +
              "<button class='btn btn-primary btn-sm' " +
              "data-toggle='modal' " +
              "data-target='#detailsModal' " +
              "data-firstname='" + val.traveller.firstName + "' " +
              "data-lastname='" + val.traveller.lastName + "' " +
              "data-email='" + val.traveller.email + "' " +
              "data-nationality='" + val.traveller.nationality + "' " +
              "data-country='" + val.trip.country + "' " +
              "data-city='" + val.trip.city + "' " +
              "data-begin='" + val.trip.begin.substring(0, 10) + "' " +
              "data-end='" + val.trip.end.substring(0, 10) + "' " +
              "data-hotelname='" + (val.hotel != null ? val.hotel.name : "") + "' " +
              "data-address='" + (val.hotel != null ? val.hotel.address.street : "") + "' " +
              "data-bookingnumber='" + (val.hotel != null ? val.hotel.bookingNumber : "") + "' " +
              "data-phone='" + (val.hotel != null ? val.hotel.phone : "") + "' " +
              "data-flightnumber='" + (val.flight != null ? val.flight.flightNumber : "") + "' " +
              "data-arrival='" + (val.flight != null ? val.flight.arrival : "") + "' " +
              "data-departure='" + (val.flight != null ? val.flight.departure : "") + "' " +
              "data-id='" + val.id + "'>" +
              "   <span>Details</span>" +
              "</button>&nbsp;";
      if (active) {
          html +=
                  "<button class='btn btn-primary btn-sm' " +
                  "data-toggle='modal' " +
                  "data-target='#tasksModal' " +
                  "data-firstname='" + val.traveller.firstName + "' " +
                  "data-lastname='" + val.traveller.lastName + "' " +
                  "data-id='" + val.id + "'>" +
                  "   <span>Tasks</span>" +
                  "</button>&nbsp;" +
                  "<button class='btn btn-danger btn-sm product-delete' data-id='" + val.id + "'>" +
                  "   <span>Cancel</span>" +
                  "</button>";
      }
      html += "</td></tr>";
      $(html).appendTo("#content");
    }

    function initCallbacks() {
        $(".product-delete").unbind().click(function () {
            var id = $(this).data("id");
            remove(id);
        });

    }

    function initModal() {
        $("#productModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var productAction = $("#productAction");
            productAction.unbind();
            var modal = $(this);
            modal.find('.modal-title').text("Plan new trip");
            modal.find('#firstName').val("");
            modal.find('#lastName').val("");
            modal.find('#email').val("");
            modal.find('#nationality').val("");

            modal.find('#street').val("");
            modal.find('#city').val("");
            modal.find('#zipCode').val("");
            modal.find('#country').val("");

            modal.find('#destinationCountry').val("");
            modal.find('#destinationCity').val("");
            modal.find('#tripBegin').val("");
            modal.find('#tripEnd').val("");

            productAction.click(function () {

                var address = {
                    street: $("#street").val(),
                    city: $("#city").val(),
                    zipCode: $("#zipCode").val(),
                    country: $("#country").val()
                };
                var traveller = {
                    firstName: $("#firstName").val(),
                    lastName: $("#lastName").val(),
                    email: $("#email").val(),
                    nationality: $("#nationality").val(),
                    address: address
                };
                var trip = {
                    country: $("#destinationCountry").val(),
                    city: $("#destinationCity").val(),
                    begin: $("#tripBegin").val() + 'T00:00:00.000+02:00',
                    end: $("#tripEnd").val() + 'T00:00:00.000+02:00'
                };
                var travelRequest = JSON.stringify(\{traveller: traveller, trip: trip\});

                create(travelRequest);
                $('#productModal').modal('toggle');
            });

        })

        $("#detailsModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Details of travel for " + button.data("lastname") + ", " + button.data("firstname"));
            modal.find('#firstName').val(button.data("firstname"));
            modal.find('#lastName').val(button.data("lastname"));
            modal.find('#email').val(button.data("email"));
            modal.find('#nationality').val(button.data("nationality"));

            modal.find('#destinationCountry').val(button.data("country"));
            modal.find('#destinationCity').val(button.data("city"));
            modal.find('#tripBegin').val(button.data("begin"));
            modal.find('#tripEnd').val(button.data("end"));

            modal.find('#hotelname').val(button.data("hotelname"));
            modal.find('#bookingNumber').val(button.data("bookingnumber"));
            modal.find('#address').val(button.data("address"));
            modal.find('#phone').val(button.data("phone"));

            modal.find('#flightNumber').val(button.data("flightnumber"));
            modal.find('#departure').val(button.data("departure"));
            modal.find('#arrival').val(button.data("arrival"));
        })

        $("#tasksModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Tasks for " + button.data("lastname") + ", " + button.data("firstname"));

            $("#taskscontent").children().remove();
            $.getJSON("/travels/" + id + "/tasks", function (data) {
                $.each(data, function (key, val) {
                    if ("VisaApplication" == val.name) {
                        $("<tr><td>" + val.name + "</td>" +
                                "<td>" +
                                "<button class='btn btn-primary btn-sm' " +
                                "data-dismiss=\"modal\" " +
                                "data-toggle='modal' " +
                                "data-target='#visaApplicationModal' " +
                                "data-id='" + id + "' " +
                                "data-taskid='" + val.id + "'>" +
                                "   <span>Apply</span>" +
                                "</button>" +
                                "</td>" +
                                "</tr>").appendTo("#taskscontent");
                    } else {
                        $("<tr><td>" + val.name + "</td>" +
                                "<td>" +
                                "<button class='btn btn-primary btn-sm' onclick=\"completeTask('" + id + "', '" + val.name + "', '" + val.id + "')\" data-dismiss=\"modal\" " +
                                "   <span>Complete</span>" +
                                "</button>" +
                                "</td>" +
                                "</tr>").appendTo("#taskscontent");
                    }
                });

            })

            $("#visaApplicationModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);

                var id = button.data('id');
                var taskid = button.data('taskid');
                var modal = $(this);
                modal.find('.modal-title').text("Visa application");

                $.getJSON("/travels/" + id + "/VisaApplication/" + taskid, function (data) {

                    $("#visa_firstName").val(data.parameters.traveller.firstName);
                    $("#visa_lastName").val(data.parameters.traveller.lastName);
                    $("#visa_email").val(data.parameters.traveller.email);
                    $("#visa_nationality").val(data.parameters.traveller.nationality);

                    $("#visa_destinationCity").val(data.parameters.trip.city);
                    $("#visa_destinationCountry").val(data.parameters.trip.country);
                    $("#visa_tripBegin").val(data.parameters.trip.begin);
                    $("#visa_tripEnd").val(data.parameters.trip.end);

                    $("#visa_p_id").val(id);
                    $("#visa_t_id").val(taskid);

                    $("#visa_passportNumber").val('');
                    $("#visa_duration").val('');
                });

            })
        })
    }
</script>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="productModalTitle">Plan new trip</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <h3>Traveller</h3>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label for="firstName">First Name</label> <input type="text" class="form-control" id="firstName" name="firstName" required>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label> <input type="text" class="form-control" id="lastName" name="lastName" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label> <input type="text" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="nationality">Nationality</label>
                                <select class="form-control" id="nationality"
                                        name="nationality">
                                    <option value="Brazilian">Brazilian</option>
                                    <option value="Polish">Polish</option>
                                    <option value="US">US</option>
                                    <option value="German">German</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label for="street">Street</label> <input type="email"
                                                                          class="form-control" id="street" name="street" required>
                            </div>
                            <div class="form-group">
                                <label for="city">City</label> <input type="text"
                                                                      class="form-control" id="city" name="city" required>
                            </div>
                            <div class="form-group">
                                <label for="zipCode">Zip code</label> <input type="text"
                                                                             class="form-control" id="zipCode" name="zipCode" required>
                            </div>
                            <div class="form-group">
                                <label for="country">Country</label>
                                <select class="form-control" id="country" name="country">
                                    <option value="Brazil">Brazil</option>
                                    <option value="Poland">Poland</option>
                                    <option value="US">US</option>
                                    <option value="Germany">Germany</option>
                                </select>
                            </div>
                        </div>

                        <h3>Trip</h3>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label for="destinationCountry">Country</label> <input type="text"
                                                                                       class="form-control" id="destinationCountry" name="destinationCountry" required>
                            </div>
                            <div class="form-group">
                                <label for="destinationCity">City</label> <input type="text"
                                                                                 class="form-control" id="destinationCity" name="destinationCity" required>
                            </div>
                            <div class="form-group">
                                <label for="tripBegin">Begin at</label> <input type="text"
                                                                               class="form-control" id="tripBegin" name="tripBegin" required>
                            </div>
                            <div class="form-group">
                                <label for="tripEnd">End at</label> <input
                                    type="text" class="form-control" id="tripEnd"
                                    name="tripEnd" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">Cancel
                            </button>
                            <button type="button" id="productAction" class="btn btn-primary">Book your trip</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Traveller</h3>
                            </div>
                            <div class="form-group">
                                <label for="firstName">First Name</label> <input type="text"
                                                                                 class="form-control" id="firstName" name="firstName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label> <input type="text"
                                                                               class="form-control" id="lastName" name="lastName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label> <input type="text"
                                                                        class="form-control" id="email" name="email" readonly>
                            </div>
                            <div class="form-group">
                                <label for="nationality">Nationality</label> <input
                                    type="text" class="form-control" id="nationality"
                                    name="form-control" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Trip</h3>
                            </div>
                            <div class="form-group">
                                <label for="destinationCountry">Country</label> <input type="text"
                                                                                       class="form-control" id="destinationCountry" name="destinationCountry" readonly>
                            </div>
                            <div class="form-group">
                                <label for="destinationCity">City</label> <input type="text"
                                                                                 class="form-control" id="destinationCity" name="destinationCity" readonly>
                            </div>
                            <div class="form-group">
                                <label for="tripBegin">Begin at</label> <input type="text"
                                                                               class="form-control" id="tripBegin" name="tripBegin" readonly>
                            </div>
                            <div class="form-group">
                                <label for="tripEnd">End at</label> <input
                                    type="text" class="form-control" id="tripEnd"
                                    name="tripEnd" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Hotel</h3>
                            </div>
                            <div class="form-group">
                                <label for="hotelname">Name</label> <input type="text" class="form-control" id="hotelname" name="hotelname" readonly>
                            </div>
                            <div class="form-group">
                                <label for="bookingNumber">Booking Number</label> <input type="text" class="form-control" id="bookingNumber" name="bookingNumber" readonly>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label> <input type="text" class="form-control" id="address" name="address" readonly>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone</label> <input type="text" class="form-control" id="phone" name="phone" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Flight</h3>
                            </div>
                            <div class="form-group">
                                <label for="flightNumber">Flight number</label> <input type="email" class="form-control" id="flightNumber" name="flightNumber" readonly>
                            </div>
                            <div class="form-group">
                                <label for="departure">Departure</label> <input type="text" class="form-control" id="departure" name="departure" readonly>
                            </div>
                            <div class="form-group">
                                <label for="arrival">Arrival</label> <input type="text" class="form-control" id="arrival" name="arrival" readonly>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="tasksModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-md-12">
                            <h1>Tasks</h1>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Task name</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody id="taskscontent">
                                <!-- filled using Ajax -->
                                </tbody>
                            </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="visaApplicationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Visa application</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <input type="hidden" id="visa_p_id"/>
                        <input type="hidden" id="visa_t_id"/>
                        <div class="col-md-12">
                            <h1>Visa application</h1>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Traveller</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_firstName">First Name</label> <input type="text"
                                                                                      class="form-control" id="visa_firstName" name="visa_firstName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_lastName">Last Name</label> <input type="text"
                                                                                    class="form-control" id="visa_lastName" name="visa_lastName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_email">Email</label> <input type="text"
                                                                             class="form-control" id="visa_email" name="visa_email" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_nationality">Nationality</label> <input
                                    type="text" class="form-control" id="visa_nationality"
                                    name="visa_nationality" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Trip</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_destinationCountry">Country</label> <input type="text"
                                                                                            class="form-control" id="visa_destinationCountry" name="visa_destinationCountry" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_destinationCity">City</label> <input type="text"
                                                                                      class="form-control" id="visa_destinationCity" name="visa_destinationCity" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_tripBegin">Begin at</label> <input type="text"
                                                                                    class="form-control" id="visa_tripBegin" name="visa_tripBegin" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_tripEnd">End at</label> <input
                                    type="text" class="form-control" id="visa_tripEnd"
                                    name="visa_tripEnd" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Visa details</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_passportNumber">Passport number</label> <input type="text"
                                                                                                class="form-control" id="visa_passportNumber" name="visa_passportNumber">
                            </div>
                            <div class="form-group">
                                <label for="visa_duration">Duration</label> <input type="text"
                                                                                   class="form-control" id="visa_duration" name="visa_duration">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submitVisaApplication()">Submit application</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
