<ion-view view-title="My profile" hide-nav-bar="true">
    <ion-content>
        <ion-refresher
            pulling-text="Obnoviť..."
            on-refresh="vm.doRefresh()"
            spinner="ripple">
        </ion-refresher>
            <div class="newNotif fadein fadeout" ng-if="vm.newNotif" ng-click="vm.newNotif = false">
            <p>Máte nové upozornenie</p>
        </div>
        <div class="addNewCar" ng-if="!vm.isDriver" >
            <p>Momentálne nie je váš účet spojený so žiadnym vozidlom. Aby ste mohli prijímať upozornenia o vašom vozidle, musíte si ho najskôr pridať.
                <a ng-click='vm.addYourCar = !vm.addYourCar'> {{!vm.addYourCar ? " Pridať " : ""}} </a>
            </p>
            <form ng-submit="vm.addNewCar()" ng-if='vm.addYourCar' name="vm.addCarForm">
                <div class="row">
                    <div class="col">
                        <label class="item item-input">
                            <input id="evidenceNumber" name="evidenceNumber" type="text" placeholder="Evidenčné číslo" ng-model="vm.newCar.evidenceNumber">
                        </label>
                    </div>
                    <div class="col color">
                        <a color-picker="" color-mode="name" model-mode="name" ng-model="vm.newCar.color" 
                           modal-title="Zvoľte farbu vášho vozidla" color-box="{{vm.newCar.color}}" named-colors="vm.colorsOffer">
                            {{vm.newCar.color|| &apos;Farba vozidla&apos; }} 
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label class="item item-input">
                            <input id="brand" name="brand" type="text" placeholder="Značka" ng-model="vm.newCar.brand">
                        </label>
                    </div>
                    <div class="col">
                        <label class="item item-input">
                            <input id="model" name="model" type="text" placeholder="Model" ng-model="vm.newCar.model">
                        </label>
                    </div>
                </div>
                <h2 ng-if="!(vm.result | isEmpty)">
                    {{vm.result.message}}
                </h2>
                <ion-spinner icon="ripple" ng-if="vm.addCarLoading"></ion-spinner>
                <button class="button button-assertive button-full" type="submit" ng-disabled="!vm.newCar.evidenceNumber || !vm.newCar.color">
                    Pridať
                </button>
                <button class="button  button-dark button-full" type="button" ng-click="vm.resetForm()">
                    Zrušiť
                </button>
            </form>
        </div>
        <div ng-if="vm.isDriver">
            <div class="userInfo" style="border: none;">
                <div class="carPhoto">
                    <img ng-src="{{vm.car.photo || 'img/car.png'}}" ng-click="carInfoForm.$visible ? vm.uploadPhoto() :{}"/>
                </div>
                <div class="description">
                    <div>
                        <h3>{{ vm.car.evidenceNumber || "Evidenčné č."}}</h3>
                    </div> 
                    <div>
                        <h4 ng-style="{'color': vm.car.hex}">{{vm.car.color|| "Farba"}}
                        </h4>
                    </div>  
                </div>
            </div>
            <div class="garrage">
                <form editable-form name="carInfoForm" onbeforesave="vm.updateCarDetails()">
                    <div>
                        <p>
                            <span class="title">Značka</span>
                            <a  editable-text="vm.car.brand "> {{ vm.car.brand || 'zadať'}}</a>
                        </p>
                        <p>
                            <span class="title">Model</span>
                            <a editable-text="vm.car.model "> {{ vm.car.model || 'zadať'}}</a> 
                        </p>
                    </div>  
                    <div>
                        <p>
                            <span class="title">Adresa</span>
                            <i class="icon ion-location" ng-if="carInfoForm.$visible && (vm.car.homeStreet === null) && (vm.homeStreetError === false)" ng-click="vm.getHomeStreet()"> </i> 
                            <a editable-text="vm.car.homeStreet" e-ng-readonly="vm.car.homeStreet != null ? true : false" e-ng-if="vm.homeStreetError === false"> 
                                {{ vm.car.homeStreet || 'nezadaná'}}</a>
                            <span ng-if="vm.homeStreetError" class="homeStreetError" ng-click="vm.deleteGPSError(1)"><i class="icon ion-refresh"> </i> GPS Error</span>
                        </p>
                        <p>
                            <span class="title">TK a EK</span>
                            <a class="buttonAsHref" ng-click="carInfoForm.$visible ? vm.openCalendar() : vm.stkDisplayChange()" ng-init="vm.selection = 'true'" ng-switch on="vm.selection"
                               ng-class="vm.car.stk != null ? 'filled' : 'unfilled'">
                                <span ng-switch-when="true">{{(vm.car.stk| date:"dd.MM.yyyy") || 'nezadané'}}</span>
                                <span ng-switch-when="false">ostáva {{vm.daysToStk}} dní</span>
                            </a>
                        </p>
                    </div>

                    <div class="editTools">
                        <button class="icon ion-android-create" ng-click="carInfoForm.$show()" ng-if="!carInfoForm.$visible" type="button"></button>
                        <span ng-if="carInfoForm.$visible">
                            <button class="icon ion-checkmark" ng-disabled="carInfoForm.$waiting" type="submit" ng-click="vm.deleteGPSError(1)"></button>
                            <button class="icon ion-close" ng-disabled="carInfoForm.$waiting" ng-click="carInfoForm.$cancel(); vm.deleteGPSError(1)" type="button"></button>           
                        </span>
                    </div>
                </form>  
            </div>
            <div class="garrageAlert">
                <div class="devadesatPercent">
                    <div class="row" ng-if="vm.stkAlert">
                        <div class="col col-10">
                            <i class="icon ion-clipboard"></i>
                        </div>
                        <div class="col col-90">
                            <h3 class="assertive">Blíži sa koniec EK a TK vášho vozidla.</h3>
                        </div>
                    </div>
                    <div class="row" ng-if="!(vm.lastParkingHistory | isEmpty)">
                        <div class="col col-10">
                            <i class="icon ion-grid"></i>
                        </div>
                        <div class="col col-90">
                            <h3 class="assertive" ng-if="vm.lastParkingHistory.isData">Naposledy ste parkovali dňa {{vm.lastParkingHistory.from| date:"dd.MM.yyyy"}} o {{vm.lastParkingHistory.from| date:"HH:mm"}} na ulici {{vm.lastParkingHistory.street}}.</h3>
                            <h3 class="assertive" ng-if="!vm.lastParkingHistory.isData">Nie je známa žiadna vaša história parkovania.</h3>
                        </div>
                    </div>
                </div>
            </div>     
            <div class="secureMeWrapper">
                <div>
                    <button class="button ink" 
                            ng-click="!vm.startSecure ? vm.insertStreetByGPS() : vm.unsecureMe()" 
                            ng-model="vm.startSecure" 
                            ng-class="vm.startSecure ? 'enabled' : ''">
                        {{!vm.startSecure ? "ZABEZPEČIŤ VOZIDLO" : "ZABEZPEČENÉ"}}
                    </button> 
                </div>
                <div class="secureMeDataLoader" ng-if="vm.loadingSecureMeData">
                    <ion-spinner icon="ripple"></ion-spinner>
                </div>
                <div class="currentPosition">
                    <div ng-if="vm.startSecure">
                        <div class="row" ng-if="!(vm.parkingData.location | isEmpty)">
                            <div class="col col-10">
                                    <div class="progress-wrapper">
                            <div
                                round-progress
                                max="2"
                                current="vm.hours"
                                color="#848484"
                                bgcolor="transparent"
                                radius="135"
                                semi="isSemi"
                                rounded="rounded"
                                clockwise="clockwise"
                                responsive="responsive"
                                stroke="67.5"
                                animation="easeOutCubic">

                                <div
                                    round-progress
                                    max="59"
                                    current="vm.minutes"
                                    color="#A5A5A5"
                                    bgcolor="transparent"
                                    radius="135"
                                    semi="isSemi"
                                    rounded="rounded"
                                    clockwise="clockwise"
                                    responsive="responsive"
                                    stroke="67.5"
                                    animation="easeOutCubic"
                                    offset="inherit">
                                </div>
                            </div>     
                        </div>
                            </div>
                            <div class="col col-90">
                                <p><b>Od </b> {{(vm.parkingData.from | date:"dd.MM.yyyy HH:mm") || "neznáme"}}</p>
                                <p><b>Do </b> {{(vm.parkingData.to | date:"dd.MM.yyyy HH:mm")|| "neznáme"}}</p>
                            </div>
                        </div>
                        <div class="row" ng-if="!(vm.parkingLocation | isEmpty)">
                            <div class="col col-10">
                                <i class="icon ion-location"></i>
                            </div>
                            <div class="col col-90">
                                <p><b>Ulica </b> {{vm.parkingData.location["route"]|| "chyba"}}</p>
                                <p><b>Mesto </b> {{vm.parkingData.location["locality"]|| "neznáme"}}</p>
                                <p><b>Krajina </b> {{vm.parkingData.location["country"]|| "neznáme"}}</p>
                            </div>
                        </div>
                        <div class="row" ng-if="!(vm.streetCleaning | isEmpty)">
                            <div class="col col-10">
                                <i class="icon ion-social-buffer"></i>
                            </div>
                            <div class="col col-90">
                                <h3 class='assertive'>POZOR! BLOKOVÉ ČISTENIE</h3>
                                <p><b>Od </b> {{vm.streetCleaning["from"]|| "neznáme"}} | <b>Do </b> {{vm.streetCleaning ["to"]|| "neznáme"}}</p>
                            </div>
                        </div>
                        <div class="row" ng-if="!(vm.noStreetcleaning | isEmpty)">
                            <div class="col col-10">
                                <i class="icon ion-social-buffer"></i>
                            </div>
                            <div class="col col-90">
                                <h3 style="color: #A5A5A5"
                                    ng-bind-html="vm.noStreetcleaning.info + ' ' +
                                                    (vm.noStreetcleaning.streetNotFound ? ' <i class=&quot;icon ion-refresh&quot;></i>' : '')">
                                </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col col-10">
                                <i class="icon ion-fireball"></i>
                            </div>
                            <div class="col col-90">
                                <h3 style="color: #A5A5A5" ng-if="vm.streetHistory | isEmpty">Táto ulica nemá žiadnu históriu pokút a priestupkov.</h3>
                                <li ng-repeat="(key, value) in vm.streetHistory | countBy: 'situation'" ng-if="!(vm.streetHistory | isEmpty)">
                                    <b>{{ vm.formatSituation(key)}}</b> {{ value}} krát
                                </li>
                            </div>
                        </div>
                    </div>
                    <div ng-if="vm.secureMeError">
                        <div class="row">
                            <div class="col col-10">
                                <i class="icon ion-location"></i>
                            </div>
                            <div class="col col-90">
                                <h5>Nie je možné Vás lokalizovať!</h5>
                                <p>Skúste to znova alebo zadajte ulicu ručne.</p>
                                <div class="finder">  
                                    <input type="text" placeholder="Ulica" ng-model="typedStreet" style="width: 100%">
                                    <button class="button button-assertive" ng-click="vm.insertStreetManually(typedStreet)" ng-disabled="!typedStreet">
                                        Hľadať
                                    </button>   
                                </div>
                            </div>
                        </div>
                        <div ng-if="!(vm.streetResults | isEmpty)">
                            <ion-list ng-hide="vm.streetResults.error">
                                <ion-radio ng-repeat="street in vm.streetResults" ng-value="street" ng-click="vm.getGPSGeocode(street)">
                                    <p>{{street.formatted_address}}</p>
                                </ion-radio>
                            </ion-list>
                            <h5 class="assertive" ng-if="vm.streetResults.error">Ulica s týmtom názvom sa nenašla!</h5>
                        </div>
                    </div>
                </div>
            </div>        
            <div ng-controller="NotificationsCtrl as vmm">
                <div class="newestNotifs" ng-if="vmm.receivedNotifications.news.length > 0">
                    <ion-list can-swipe="true">
                        <ion-item ng-repeat="not in vmm.receivedNotifications.news" class="">
                            <div class="row">
                                <div class="col col-10">
                                    {{not.trust}}
                                </div>
                                <div class="col col-90" style="color: #fff">
                                    {{not.situation}}
                                    <span class="item-note">
                                        {{not.datetime| date : "d.M.yy HH:mm"}}
                                    </span>
                                </div>
                                <ion-option-button class="button-light" ng-if="not.type === '2'" ng-click="vm.showDistance(not.geo)">
                                    <i class="icon ion-map"></i>
                                </ion-option-button>
                            </div>
                        </ion-item>
                    </ion-list>
                </div>
                <h5>POSLEDNÉ NEBEZPEČENSTVÁ</h5>
                <div class="notifications-container" ng-hide="vmm.load.isLoadingNow()" >
                    <ion-list can-swipe="false">
                        <ion-item ng-repeat="not in vmm.receivedNotifications.nots" 
                                  ng-class="{'unseen' : !not.rated}">
                            <div class="row">
                                <div class="col col-10 fromTrust">
                                    {{not.trust|| "N"}}
                                </div>
                                <div class="col col-52">
                                    <h2>{{not.situation}}</h2>
                                    <p class="kurziva">{{(not.message| limitTo: 30)}}{{not.message.length > 30 ? '...' : ''}}</p>
                                    <label>
                                        {{not.datetime| date : "d.M.yy HH:mm"}}
                                    </label>
                                </div>
                                <div class="col col-10">
                                    <i class="icon ion-gear-b"
                                       ng-click="vmm.showInfo(0, not)"
                                       ></i> 
                                </div>
                                <div class="col col-10">
                                    <i class="icon ion-image" 
                                       ng-class="not.photo === '' ? 'done' : {}"
                                       ng-click="vmm.showInfo(1, not.photo)"
                                       ></i> 
                                </div>
                                <div class="col col-10">
                                    <i class="icon ion-location" 
                                       ng-class="not.geo === null ? 'done' : {}"
                                       ng-click="vmm.showInfo(2, not.geo)"
                                       ></i> 
                                </div> 
                                <div class="col col-10">
                                    <i class="icon ion-person"
                                       ng-class="not.identity === null ? 'done' : {}"
                                       ng-click="vm.goToProfile(not)"
                                       ></i> 
                                </div>
                                <div class="col col-10">
                                    <i class="icon ion-shuffle"
                                       ng-class="not.type === '1' ? 'done' : {}"></i> 
                                </div>
                            </div>
                        </ion-item>
                    </ion-list>
                    <p class="loadMore" ng-if="vmm.receivedNotifications.nots.length === 0">
                        Zatiaľ ste nedostali žiadne upozornenie. Vaše vozidlo bolo asi vždy v bezpečí :).
                    </p>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>
