<ion-view view-title="Wildshield" hide-nav-bar="true">
    <ion-content>
        <ion-refresher
            pulling-text="Skúšam zresetovať aplikáciu..."
            refreshing-text="{{vm.resetAppResult}}"
            on-refresh="vm.resetApp()"
            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 ng-controller="SearchCtrl as vmm" ng-if="vm.showFinder" class="fadein fadeout">
            <div class="finder" ng-class="!(vmm.result | isEmpty) ? 'noBottomBorder' : {}">  
                <div>
                    <input type="text" placeholder="evidenčné č."  ng-keypress="vmm.dirty = true" ng-model="vmm.evidenceNumber">
                    <a class="" color-picker="" color-mode="name" model-mode="name" ng-model="vmm.carColor" 
                       modal-title="Určite farbu karosérie" header-footer-class="bar-light colorBar" color-box="{{vmm.carColor}}" named-colors="vmm.colorsOffer">
                        {{vmm.carColor || &apos;farba&apos; }}  
                    </a>
                    <button class="button button-assertive" ng-click="vmm.doSearch()" ng-disabled="!vmm.evidenceNumber || !vmm.carColor">
                        Hľadať
                    </button>   
                </div>
                <i class="ion icon ion-close" ng-if="vmm.dirty" ng-click="vmm.doClear()"></i>
            </div>
            <div class="finder_results list">
                <ion-spinner icon="ripple" ng-if="vmm.searchLoading"></ion-spinner>
                <div ng-if="!(vmm.result | isEmpty)">
                    <div class="item item-avatar item-icon-right ink ink-dark" ng-if="!vmm.result.notFound" ng-click="vmm.selectCar(vmm.result.id)">
                        <img ng-src="{{vmm.result.photo || 'img/car.png'}}">
                        <h2 ng-click="vm.goToProfile(vmm.result.user)"><b>{{vmm.result.evidenceNumber}}</b></h2>
                        <p>{{vmm.result.brand || 'Nezadané'}} {{vmm.result.model || 'Nezadané'}}</p>
                        <i class="icon ion-checkmark-circled" ng-class="{'unselectedCar': !vmm.selected, 'selectedCar': vmm.selected}"></i>
                    </div>
                    <div class="error" ng-if="vmm.result.notFound">
                        <h2>{{vmm.result.error}}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="cfTools">
            <a class="cfTool" ng-click="vm.slider.slideTo(0, 200)" ng-class="{'active' :  vm.slider.activeIndex === 0}">
                <i class="icon ion-speakerphone"></i>
            </a>
            <a class="cfTool" ng-click="vm.slider.slideTo(1, 200)" ng-class="{'active' :   vm.slider.activeIndex === 1}">
                <i class="icon ion-radio-waves"></i>
            </a>
        </div>
        <ion-slides options="vm.sliderOptions" slider="vm.slider">         
            <ion-slide-page>
                <div class="wraperSlider">
                    <h4>Notificator</h4>
                    <div class="sliderContent">
                        <p>Vyhľadajte vozidlo, vyberte situáciu, poprípade pridajte správu, fotku alebo GPS lokalizáciu a pošlite okamžité upozornenie danému vodičovi.</p>
                        <div class="notificatorOptions">
                            <div>
                                <label>
                                    Papuča
                                    <input type="radio" class="option-input radio"  value="clamp" ng-model="vm.notification.situation" />
                                </label>
                                <label>
                                    Odťah
                                    <input type="radio" class="option-input radio"   value="towing"  ng-model="vm.notification.situation" />
                                </label>
                            </div>
                            <div>
                                <label> 
                                    <input type="radio" class="option-input radio"   value="accident"  ng-model="vm.notification.situation" />     
                                    Nehoda                       
                                </label>
                                <label>
                                    <input type="radio" class="option-input radio"   value="vagabonds" ng-model="vm.notification.situation" />
                                    Vagabundi
                                </label>
                            </div>
                        </div>
                        <label class="item item-input addMessage">
                            <textarea rows="1" maxlength="100" ng-model="vm.notification.message" placeholder="Napíšte ďalšie informácie..."></textarea>
                        </label>
                        <div class="cordovaTools">
                            <li ng-class="{'cordovaTool': !vm.takePhoto, 'cordovaTool is-checked': vm.takePhoto}" 
                                ng-click="!vm.takePhoto ? vm.makePhoto() : vm.cancelPhoto()"><i class="icon ion-android-camera"></i></li>
                           
                            <li ng-class="{'cordovaTool': !vm.notification.identity, 'cordovaTool is-checked': vm.notification.identity}" 
                                ng-click="vm.notification.identity = !vm.notification.identity" ng-init="vm.notification.identity = true"><i class="icon ion-person"></i></li>
                           
                            <li ng-class="{'cordovaTool': !vm.sendGPS, 'cordovaTool is-checked': vm.sendGPS}" 
                                ng-click="!vm.sendGPS ? vm.attachGPSToNotification() : vm.cancelGPS()">
                                
                                <i class="icon ion-location" ng-hide="vm.atachGPSloading"></i>
                                <ion-spinner icon="ripple" ng-if="vm.atachGPSloading"></ion-spinner>
                            </li>
                        </div>
                        <div class="notificatorUI">
                            <div class="error" ng-if="vm.gpsAtachError || vm.photoError ">
                                <h2>{{vm.gpsError}}</h2>
                                <h2>{{vm.photoError}}</h2>
                            </div>  
                        </div>
                        <button class="button button-assertive button-full" ng-click="vm.send()">
                            <ion-spinner icon="ripple" ng-if="vm.sendingNotification"></ion-spinner>
                            {{!vm.sendingNotification ? vm.sendingNotificationResult : ""}}
                        </button>  
                        <button class="button button-stable button-full" ng-click="vm.initNewNotification()">Zrušiť</button>
                    </div>
                </div>
            </ion-slide-page>   

            <ion-slide-page>
                <div class="wraperSlider">                
                    <h4 class="toolTitle">Polícia</h4>
                    <div class="sliderContent">
                        <p>Vyberte situáciu, zvoľte rozsah oblasti a pošlite všetkým vodičom okamžité upozornenie.</p>
                        <label>
                              <input type="radio" class="option-input radio"  value="parking_tickets" ng-model="vm.publicAlert.situation" />
                              Kontrola parkovacích lístkov
                        </label>
                        <div class="areaLocationResult" ng-if="vm.areaRanger !== null">
                            <div class="row">
                                <div class="col col-10">
                                    <i class="icon ion-radio-waves"></i>
                                </div>
                                <div class="col col-90" style="color: #fff" ng-if="vm.publicAlert.drivers.length > 0">
                                    V okruhu {{vm.areaRanger}}m od vašej polohy parkujú {{vm.publicAlert.drivers.length}} vodiči.
                                </div>
                                <div class="col col-90" style="color: #fff" ng-if="vm.publicAlert.drivers.length === 0" ng-click="vm.cancelArea()">
                                    V okruhu {{vm.areaRanger}}m od vašej polohy neparkuje momentálne žiadny prihlásený vodič. Preto nie je možné poslať upozornenie.
                                </div>
                            </div>
                        </div>
                        <button class="button button-full button-assertive" ng-click="vm.sendAreaNotification()" ng-if="vm.publicAlert.drivers.length > 0">
                            Upozorniť ich
                        </button> 
                        <button class="button button-full button-stable" ng-click="vm.setAreaOfParkingTickets()" ng-disabled="vm.publicAlert.situation === null">
                            {{vm.publicAlert.drivers.length > 0 ? "Lokalizovať znova" : "Lokalizovať"}}
                        </button>
                        <button class="button button-full button-dark" ng-click="vm.cancelArea()" ng-if="vm.publicAlert.drivers.length > 0">
                            Zrušiť
                        </button> 
                        <p ng-if="!(vm.areaResult | isEmpty)"><i class="icon" ng-class="vm.areaResult.icon"> </i> {{vm.areaResult.message}}</p>
                        <p ng-if="vm.gpsAreaError"><i class="icon ion-location"> </i> {{vm.gpsError}}</p>
                        <p style="text-align: center"><ion-spinner icon="ripple" ng-if="vm.areaGPSloading"></ion-spinner></p>
                    </div>
                </div>
            </ion-slide-page>   
        </ion-slides>
    </ion-content>
</ion-view>
