var app = angular.module('shipmentApp', [])
app.controller('shipmentsCtrl', function ($scope) {
    //variables:
    $scope.shipments = [
        {id: 1, name: "shipment1", transportMode: "Air"},
        {id: 2, name: 'shipment2', transportMode: 'Sea'}
    ];
    var addresses = [
        {
            id: 1,
            postcode: "2700",
            country: "HUN",
            city: "Cegléd",
            street: "Kossuth Ferenc",
            houseNumber: "2",
            type: "Consignee",
            shipment: 1
        },
        {
            id: 2,
            postcode: "1111",
            country: "HUN",
            city: "Bp",
            street: "Móricz",
            houseNumber: "10",
            type: "Shipper",
            shipment: 1
        },
        {
            id: 3,
            postcode: "1111",
            country: "HUN",
            city: "Bp",
            street: "Bakony",
            houseNumber: "10",
            type: "Consignee",
            shipment: 2
        },
        {
            id: 4,
            postcode: "1111",
            country: "HUN",
            city: "Bp",
            street: "Széchenyi",
            houseNumber: "10",
            type: "Shipper",
            shipment: 1
        },
        {
            id: 5,
            postcode: "1111",
            country: "HUN",
            city: "Bp",
            street: "Sasadi",
            houseNumber: "10",
            type: "Shipper",
            shipment: 1
        },
        {
            id: 6,
            postcode: "1111",
            country: "HUN",
            city: "Bp",
            street: "Karolina",
            houseNumber: "10",
            type: "Shipper",
            shipment: 2
        }
    ];
    var statuses = [
        {
            id: 1,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 1
        },
        {
            id: 2,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 2
        },
        {
            id: 3,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 1
        },
        {
            id: 4,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 2
        },
        {
            id: 5,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 1
        },
        {
            id: 6,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 2
        },
        {
            id: 7,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 1
        },
        {
            id: 8,
            estimatedDateTime: new Date().toDateString(),
            actualDateTime: new Date().toDateString(),
            generatedDateTime: new Date().toDateString(),
            shipment: 2
        }
    ];

    var items = [
        {id: 1, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1},
        {id: 2, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 2},
        {id: 3, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1},
        {id: 4, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 2},
        {id: 5, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1},
        {id: 6, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 2},
        {id: 7, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1},
        {id: 8, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1},
        {id: 9, type: "type", length: 10, weight: 20, height: 40, numberOfPieces: 50, shipment: 1}
    ];

    $scope.selected = "";
    $scope.returnAddresses = [];
    $scope.returnItems = [];
    $scope.returnStatuses = [];
    $scope.addressesLength = addresses.length;
    $scope.itemsLength = items.length;
    $scope.statusesLength = statuses.length;
    $scope.shipmentsLength = $scope.shipments.length;
    $scope.selectedShipmentId = 0;
    //---------end variables

    $scope.getSelected = function (shipment) {
        console.log(shipment.id);
        setSelected(shipment);
        getShipmentAddressesById(shipment.id);
        getShipmentItemsById(shipment.id);
        getShipmentStatusesById(shipment.id);
        $scope.selectedShipmentId = shipment.id;
    };

    var setSelected = function (shipment) {
        $scope.selected = "Shipment (id: " + shipment.id + " Name: " + shipment.name + " Transport mode: " + shipment.transportMode + ")";
        console.log("Set selected to: " + shipment);
    };


    var getShipmentAddressesById = function (shipmentId) {
        $scope.returnAddresses = [];
        for (var i = 0; i < addresses.length; i++) {
            console.log(addresses[i].id);
            if (shipmentId == addresses[i].shipment) {
                console.log("Push: " + addresses[i]);
                $scope.returnAddresses.push(addresses[i]);
            }
        }
        if ($scope.returnAddresses == 0 || $scope.returnAddresses == null) {
            console.log("null");
        }
        console.log($scope.returnAddresses);
    };

    var getShipmentItemsById = function (shipmentId) {
        $scope.returnItems = [];

        items.forEach(function (item) {
            if (shipmentId == item.shipment) {
                $scope.returnItems.push(item);
            }
        });
    }

    var getShipmentStatusesById = function (shipmentId) {
        $scope.returnStatuses = [];
        statuses.forEach(function (status) {
            if (shipmentId == status.shipment) {
                $scope.returnStatuses.push(status);
            }
        });
    };

    $scope.update = function (returnAddresses) {
        console.log(returnAddresses);
        $scope.returnAddresses = angular.copy(returnAddresses);
        $scope.selected = "";
    };

    $scope.update = function (returnItems) {
        console.log(returnItems);
        $scope.returnItems = angular.copy(returnItems);
        $scope.selected = "";
    };

    $scope.update = function (returnStatuses) {
        console.log(returnStatuses);
        $scope.returnStatuses = angular.copy(returnStatuses);
        $scope.selected = "";
    };


    $scope.addShipment = function (shipment) {
        var object = {id: $scope.shipments.length + 1, name: shipment.name, transportMode: shipment.transportMode};
        console.log(object);
        $scope.shipments.push(object);
        $scope.shipments.forEach(function (shipment) {
            console.log(shipment);
        });

    };

    /*    $scope.reset = function () {
     $scope.getSelected($scope.shipments.length + 1);
     };*/
    /*
     var isEmpty = function (obj) {
     if (obj == null) return true;
     if (obj.length > 0)    return false;
     if (obj.length === 0)  return true;
     return true;
     };*/


    $scope.addAddress = function (address) {
        var object = {};
        object.id = addresses.length + 1;
        object.postcode = address.postcode;
        object.country = address.country;
        object.city = address.city;
        object.street = address.street;
        object.houseNumber = address.houseNumber;
        object.type = address.type;
        object.shipment = $scope.selectedShipmentId;
        console.log(object);
        addresses.push(object);
        addresses.forEach(function (myAddress) {
            console.log(myAddress);
        });
        var frm = document.getElementsByName('myForm')[0];
        frm.reset();
        $scope.selected = "";
    };

    $scope.addItem = function (item) {
        item.shipment = $scope.selectedShipmentId;
        item.id = items.length + 1;
        var itemObject = {};

        itemObject.id = items.length + 1;
        itemObject.type = item.type;
        itemObject.length = item.length;
        itemObject.weight = item.weight;
        itemObject.height = item.height;
        itemObject.numberOfPieces = item.numberOfPieces;
        itemObject.shipment = $scope.selectedShipmentId;

        console.log(itemObject);
        items.push(itemObject);
        items.forEach(function (myAddress) {
            console.log(myAddress);
        });
        var frm = document.getElementsByName('myForm')[0];
        frm.reset();
        $scope.selected = "";
    };

    $scope.addStatus = function (status) {
        status.id = statuses.length + 1;
        status.shipment = $scope.selectedShipmentId;
        var statusObject = {};

        statusObject.id = statuses.length + 1;
        statusObject.estimatedDateTime = status.estimatedDateTime;
        statusObject.actualDateTime = status.actualDateTime;
        statusObject.generatedDateTime = status.generatedDateTime;
        statusObject.shipment = $scope.selectedShipmentId;

        console.log(statusObject);
        statuses.push(statusObject);
        var frm = document.getElementsByName('myForm')[0];
        frm.reset();
        $scope.selected = "";
    };


})
;


app.directive("formDirective", function () {
    return {
        restrict: 'E',
        //controller: 'shipmentsCtrl',
        templateUrl: 'form.html'
    };
});



//html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transport-demo app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="indexWithBootstrapController.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css">
    -
    <style>
        .highlight {
            background-color: aqua;
        }
        .highlighted {
            color: #261F1D !important;
            background-color: #E5C37E !important;
        }
        .member tr.selected {
            background-color: rgba(41, 103, 182, 0.89);
            color: #FFF;
        }

/*
        tr:hover, tr.selected {
            background-color: #FFCF8B
        }*/
    </style>

</head>


<body ng-app="shipmentApp" ng-controller="shipmentsCtrl">
<ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#home">Shipments</a></li>
    <li><a data-toggle="tab" href="#createShipment">Create Shipment</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <table class="table table-hover" id="shipmentTable" style="float:left">
            <thead>
            <tr>
                <th>shipment id</th>
                <th>shipment name</th>
                <th>shipment transport mode</th>
            </tr>
            </thead>
            <tbody class="member">
            <tr class="shipmentRow" ng-click="getSelected(shipment);" ng-repeat="shipment in shipments">
                <td>{{shipment.id}}</td>
                <td>{{shipment.name}}</td>
                <td>{{shipment.transportMode}}</td>
            </tr>
            </tbody>
        </table>
        <div class="importForm" ng-hide="selected == ''" ng-model="selected">
            <h5>{{selected}}</h5>
            <form-directive></form-directive>
        </div>
    </div>

    <div id="createShipment" class="tab-pane fade">
        <form class="navbar-form">
            <div class="form-group" ng-model="shipment">
                <input type="text" class="form-control" placeholder="Shipment name" ng-model="shipment.name"><br>
                <input type="text" class="form-control" placeholder="Shipment transport mode"
                       ng-model="shipment.transportMode"><br>
                <input id="checkbox" type="checkbox" ng-model="formData"> With details
            </div>
            <div class="importForm" ng-show="formData">
                <h5>Shipment({{shipment.name}} , {{shipment.transportMode}})</h5>
                <form-directive ng-init="shipment.id=$scope.shipments.length+1"></form-directive>


            </div>

            <button id="addShipmentBtn" type="submit" class="btn btn-default" ng-click="addShipment(shipment)">Add
                shipment
            </button>
        </form>

    </div>
</div>


<script>
    $(document).ready(function () {
        /*
         $("#shipmentTable tr").click(function () {
         var selected = $(this).hasClass("highlight");
         $("#shipmentTable tr").removeClass("highlight");
         if (!selected)
         $(this).addClass("highlight");
         });*/


/*        $("tbody tr").click(function() {
            $("table tr").css("background", "blue"); //reset to original color
            $(this).css("background", "red"); //apply the new color
        });*/
        $("#shipmentTable tr").click(function(){
            $(this).addClass("selected").siblings().removeClass("selected");
        });

    });



</script>
</body>
</html>



//form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="indexWithBootstrapController.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm">

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#addresses">Addresses</a></li>
        <li><a data-toggle="tab" href="#items">Items</a></li>
        <li><a data-toggle="tab" href="#statuses">Statuses</a></li>
    </ul>

    <div class="tab-content" style="width:450px;">
        <div id="addresses" class="tab-pane fade in active">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>postcode</th>
                    <th>country</th>
                    <th>city</th>
                    <th>street</th>
                    <th>house number</th>
                    <th>type</th>
                    <th>shipment</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>

                <div>
                    <tr ng-repeat="address in returnAddresses">
                        <td>{{address.id}}</td>
                        <td>
                            <input maxlength="4" size="4" type="text" width="10px" ng-model="address.postcode"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="address.country"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="address.city"/>
                        </td>
                        <td>
                            <input maxlength="20" size="20" type="text" ng-model="address.street"/>
                        </td>
                        <td>
                            <input maxlength="4" size="4" type="text" ng-model="address.houseNumber"/>
                        </td>
                        <td>
                            <input maxlength="9" size="10" type="text" ng-model="address.type"/>
                        </td>
                        <td>
                            {{address.shipment}}
                        </td>
                        <td></td>
                    </tr>
                </div>

                <div ng-model="address">
                    <tr>
                        <td>
                            {{address.id}}
                        </td>
                        <td>
                            <input maxlength="4" size="4" type="text" width="10px" ng-model="address.postcode"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="address.country"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="address.city"/>
                        </td>
                        <td>
                            <input maxlength="20" size="20" type="text" ng-model="address.street"/>
                        </td>
                        <td>
                            <input maxlength="4" size="4" type="text" ng-model="address.houseNumber"/>
                        </td>
                        <td>
                            <input maxlength="9" size="10" type="text" ng-model="address.type"/>
                        </td>
                        <td>
                            {{address.shipment}}
                        </td>
                        <td>
                            <button id="addressAddButton" ng-click="addAddress(address)" type="button"
                                    class="btn btn-default">Add Address
                            </button>
                        </td>
                    </tr>
                </div>

                </tbody>
            </table>

            <button id="addressesButton" ng-click="update(returnAddresses)" type="button" class="btn btn-default">Modify
                addresses
            </button>
        </div>
        <div id="items" class="tab-pane fade">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>length</th>
                    <th>weight</th>
                    <th>height</th>
                    <th>numberOfPieces</th>
                    <th>type</th>
                    <th>shipment</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <div>
                    <tr ng-repeat="item in returnItems">
                        <td> {{item.id}}</td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.length"/>
                        </td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.weight"/>
                        </td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.height"/>
                        </td>
                        <td>
                            <input maxlength="5" size="5" type="text" ng-model="item.numberOfPieces"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="item.type"/>
                        </td>
                        <td>{{item.shipment}}</td>
                        <td></td>
                    </tr>
                </div>
                <div ng-model="item">
                    <tr>
                        <td ng-model="item.id"></td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.length"/>
                        </td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.weight"/>
                        </td>
                        <td>
                            <input maxlength="6" size="6" type="text" ng-model="item.height"/>
                        </td>
                        <td>
                            <input maxlength="5" size="5" type="text" ng-model="item.numberOfPieces"/>
                        </td>
                        <td>
                            <input maxlength="20" size="10" type="text" ng-model="item.type"/>
                        </td>
                        <td ng-model="item.shipment"></td>
                        <td>
                            <button id="itemAddButton" ng-click="addItem(item)" type="button" class="btn btn-default">
                                Add Item
                            </button>
                        </td>
                    </tr>
                </div>
                </tbody>
            </table>
            <button id="itemsButton" ng-click="update(returnItems)" type="button" class="btn btn-default">Modify items
            </button>

        </div>
        <div id="statuses" class="tab-pane fade">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>estimatedDateTime</th>
                    <th>actualDateTime</th>
                    <th>generatedDateTime</th>
                    <th>shipment</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <div>
                    <tr ng-repeat="status in returnStatuses">
                        <td>{{status.id}}</td>
                        <td>
                            <input type="text" ng-model="status.estimatedDateTime"/>
                        </td>
                        <td>
                            <input type="text" ng-model="status.actualDateTime"/>
                        </td>
                        <td>
                            <input type="text" ng-model="status.generatedDateTime"/>
                        </td>
                        <td>{{status.shipment}}</td>
                        <td></td>
                    </tr>
                </div>
                <div>
                    <tr ng-model="status">
                        <td ng-model="status.id"></td>
                        <td>
                            <input type="text" ng-model="status.estimatedDateTime"/>
                        </td>
                        <td>
                            <input type="text" ng-model="status.actualDateTime"/>
                        </td>
                        <td>
                            <input type="text" ng-model="status.generatedDateTime"/>
                        </td>
                        <td ng-model="status.shipment"></td>
                        <td>
                            <button id="statusAddButton" ng-click="addStatus(status)" type="button"
                                    class="btn btn-default">Add Status
                            </button>
                        </td>
                    </tr>
                </div>
                </tbody>
            </table>
            <button id="statusesButton" ng-click="update(returnStatuses)" type="button" class="btn btn-default">Modify statuses
            </button>
        </div>
    </div>
</form>
</body>
</html>