<div bsModal #routeDetail="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="routeDetail" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form #routeDetailForm="ngForm" role="form" novalidate enctype="multipart/form-data" class="form-validation"
                *ngIf="active" (submit)="save()">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span>{{"Route Details" | localize}}</span>
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div [class]="containerClass">
                        <div class="width-100">
                            <div class="form-group row">
                                <div class="col-lg-6 form-group-bottom">
                                    <label>Primary Zone:</label>
                                    <input type="text" class="form-control" placeholder="Zone">
                                    <span class="form-text text-muted"></span>
                                </div>
                                

                                <div class="col-lg-6 form-group-bottom">
                                    <label>Total Distance:</label>
                                   <input type="text" class="form-control">
                                    <span class="form-text text-muted"></span>
                                </div>

                                <div class="col-lg-6 form-group-bottom">
                                    <label class="">All Zones:</label>
                                    <input type="text" class="form-control" placeholder="All Zones">
                                    <span class="form-text text-muted"></span>
                                </div>
                                <div class="col-lg-6 form-group-bottom">
                                    <label for="loadDate">{{"Load Date" | localize}}</label>
                                    <input id="loadDate" #loadDateInput="ngModel" class="form-control" type="text" name="loadDate" [(ngModel)]="loadDate">
                                    <validation-messages [formCtrl]="loadDateInput"></validation-messages>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-6 form-group-bottom">
                                    <label for="departure">{{"Departed" | localize}}</label>
                                    <div class="input-group">
                                        <input id="departure" #departureInput="ngModel" class="form-control" type="text" name="departure" [(ngModel)]="departure">
                                        <validation-messages [formCtrl]="departureInput"></validation-messages>
                                        <div class="input-group-append" (click)="setDeparture()"><span class="input-group-text"> <i class="fa fa-clock padding-right-5"></i> {{departure  ? 'Remove' : 'Set'}} Departure Time</span></div>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group-bottom">
                                    <label for="completion">{{"Completed On" | localize}}</label>
                                    <div class="input-group">
                                        <input id="completion" #completionInput="ngModel" class="form-control" type="text" name="completion" [(ngModel)]="completion">
                                        <validation-messages [formCtrl]="completionInput"></validation-messages>
                                        <div class="input-group-append" (click)="setCompletion()"><span class="input-group-text"> <i class="fa fa-check padding-right-5"></i> Mark As {{completion  ? 'Uncomplete': 'Completed'}}</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-6 form-group-bottom">
                                    <label>Assigned Vehicle:</label>
                                    <div class="input-group">
                                        <select  [ngModelOptions]="{standalone: true}" class="form-control kt-select2 width-100" name="selectedVehicleId" [(ngModel)]="selectedVehicleId" data-placeholder="Select Vehicle" id="selectedVehicleId" tabindex="-1" aria-hidden="true">
                                            <option value="">None</option>
                                            <option *ngFor="let vehicle of vehicleList" value="{{vehicle.vehicleId}}" [selected]="vehicle.vehicleId == selectedVehicleId">{{vehicle.name}} {{vehicle.id}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 form-group-bottom">
                                    <label>Assigned Driver:</label>
                                    <div class="input-group">
                                        <select  [ngModelOptions]="{standalone: true}" class="form-control kt-select2 width-100" name="selectedDriverId" [(ngModel)]="selectedDriverId" data-placeholder="Select Driver" id="selectedDriverId" tabindex="-1" aria-hidden="true">
                                            <option value="">None</option>
                                            <option  *ngFor="let driver of driverList" value="{{driver.userId}}" [selected]="driver.userId == selectedDriverId">{{driver.fullName}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <div class="col-lg-6 form-group-bottom">
                                    <label for="startTime">{{"Start Time" | localize}}</label>
                                    <input id="startTime" #startTimeInput="ngModel" class="form-control" type="text" name="startTime" [(ngModel)]="startTime">
                                    <validation-messages [formCtrl]="startTimeInput"></validation-messages>
                                </div>
                                <div class="col-lg-6 form-group-bottom">
                                    <label for="endTime">{{"Finish Time" | localize}}</label>
                                    <input id="endTime" #endTimeInput="ngModel" class="form-control" type="text" name="endTime" [(ngModel)]="endTime">
                                    <validation-messages [formCtrl]="endTimeInput"></validation-messages>
                                </div>
                                <div class="col-lg-6 form-group-bottom">
                                    <label></label>
                                    <div class="input-group">
                                        <span class="kt-switch kt-switch--icon padding-top-10">
                                            <label>
                                                <input type="checkbox" [checked]="locked" name="locked" id="locked" [(ngModel)]="locked" [ngModelOptions]="{standalone: true}" (change)="updateRoute()">
                                                <span></span>
                                            </label>
                                        </span>
                                        <label class="padding-top-20 padding-left-5">Locked</label>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" [disabled]="saving" class="btn btn-secondary btn-elevate btn-pill"
                        (click)="close()">{{"Close" | localize}}</button>
                </div>
            </form>
        </div>
    </div>
</div>