<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-3">
    <h1 class="h3 mb-0 text-gray-800">{{'REPORT_TRACKING.TITLE' | translate}}</h1>
</div>
<form class="form-group" name="reportTrackingForm" ng-submit="createReport(reportTrackingForm.$valid)">
    <div class="row">
        <div class="col-12 form-group" ng-show="isLoading">
            <div class="d-inline-block" ng-bind-html="loadPath"></div>
        </div>
        <div class="col-12 form-group" ng-show="!isLoading">
            <div class="d-inline-block text-truncate" ng-bind-html="filePath"></div>

            <div class="d-inline-block text-truncate" ng-bind-html="sentFiles"></div>

            <div ng-show="listFolder.length > 0" class="d-inline-block text-truncate" ng-bind-html="separator"></div>
            <div ng-show="listFolder.length > 0" class="dropdown no-arrow d-inline-block">
                <a class="dropdown-toggle" data-toggle="dropdown"
                   href="#" role="button"
                   title="{{'COMMON.SHOW_PATH'| translate}}"
                   id="folderList">
                    <i class="fas fa-ellipsis-h text-dark"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-left shadow animated--fade-in">
                    <a class="dropdown-item pointer-cursor"
                       ng-repeat="item in listFolder"
                       ui-sref="myEmail({folder_id:item.folder_id})">
                        <span class="d-block text-truncate max-width-150">{{item.name}}</span>
                    </a>
                </div>
            </div>
            <div ng-show="folderBefor" class="d-inline-block text-truncate max-width-450"
                 ng-bind-html="folderBefor"></div>
            <div class="d-inline-block text-truncate max-width-450" title="{{fileInfo.title}}"
                 ng-bind-html="fileName"></div>
        </div>

        <div class="col-12 col-lg-6 col-xl-5 form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <label class="input-group-text">{{'REPORT_TRACKING.DATE_RANGE' |
                        translate}}</label>
                </div>
                <input class="form-control date-picker" date-range-picker
                       maxlength="23"
                       name="daterange3"
                       ng-i18next="[placeholder]placeholder.date_report"
                       ng-model="optsDate.date"
                       options="optsDate.options"
                       required="optsDate.date" type="text"
                       ng-class="{'is-invalid' : optsDate.date.endDate === undefined || optsDate.date.startDate === undefined}"
                />
                <div class="input-group-append">
                    <button class="btn btn-secondary rounded-right"
                            date-range-picker
                            name="daterange4"
                            ng-model="optsDate.date" options="optsDate.options"
                            type="button">
                        <i class="far fa-calendar-check"></i>
                    </button>
                </div>
                <div class="invalid-feedback">
                    <div ng-if="!(reportTrackingForm.daterange3.$error.required)">{{'REPORT_TRACKING.INVALID_DATE' |
                        translate}}
                    </div>
                    <div ng-if="reportTrackingForm.daterange3.$error.required">{{'INPUT_ERROR.REQUIRED' | translate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-xl-2 form-group">
            <button class="btn btn-primary btn-block text-center"
                    ng-disabled="optsDate.date.endDate === undefined || optsDate.date.startDate === undefined"
                    type="submit">
                <span>{{'REPORT_TRACKING.CREATE_REPORT' | translate}}</span>
            </button>
        </div>

        <!--View Online And downloads -->
        <div class="col-12 form-group">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-6 col-sm-7 d-flex align-items-center">
                            <i class="fa fa-bar-chart-o fa-fw"></i>
                            <span>{{'REPORT_TRACKING.ONLINE_VIEWS_AND_DOWNLOADS_TITLE' | translate}}</span>
                        </div>
                        <div class="col-6 col-sm-5 d-flex align-items-center">
                            <div class="input-group d-flex justify-content-end">
                                <select class="border rounded-left tool-bar-padding pointer-cursor"
                                        ng-change="pageChanged()" ng-model="paging.pageSizeView">
                                    <option value="5">5</option>
                                    <!-- <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option> -->
                                </select>
                                <div class="input-group-prepend">
                                    <label class="input-group-text rounded-right">{{'COMMON.RECORDS'
                                        | translate}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!--Headers-->
                    <div class="row bg-white py-2 mx-0 border-bottom">
                        <div class="col-4 col-md-6 col-lg-4 d-block text-gray-500">
                            <span class="pointer-cursor pl-2" ng-click="doSort('mail_address')">{{'REPORT_TRACKING.EMAIL' | translate}}</span>
                            <i class="fa fa-sort-down pointer-cursor" ng-click="doSort('mail_address')"
                               ng-if="!isSort && predicate =='mail_address'"></i>
                            <i class="fa fa-sort-up pointer-cursor" ng-click="doSort('mail_address')"
                               ng-if="isSort && predicate =='mail_address'"></i>
                            <i class="fa fa-sort pointer-cursor" ng-click="doSort('mail_address')"
                               ng-if="predicate !=='mail_address'"></i>
                        </div>
                        <div class="col-4 col-md-4 col-lg-4 d-block text-gray-500">
                            <span class="pointer-cursor" ng-click="doSort('date_time')">{{'REPORT_TRACKING.DATE_TIME' | translate}}</span>
                            <i class="fa fa-sort-down pointer-cursor" ncol-md-4g-click="doSort('date_time')"
                               ng-if="!isSort && predicate =='date_time'"></i>
                            <i class="fa fa-sort-up pointer-cursor" ng-click="doSort('date_time')"
                               ng-if="isSort && predicate =='date_time'"></i>
                            <i class="fa fa-sort pointer-cursor" ng-click="doSort('date_time')"
                               ng-if="predicate !=='date_time'"></i>
                        </div>
                        <div class="col-lg-2 d-none d-lg-block text-gray-500">
                            <span class="pointer-cursor" ng-click="doSort('ip_address')">{{'REPORT_TRACKING.IP' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSort('ip_address')"
                               ng-if="!isSort && predicate =='ip_address'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSort('ip_address')"
                               ng-if="isSort && predicate =='ip_address'"></i>
                            <i class="fa fa-sort pointer-cursor" ng-click="doSort('ip_address')"
                               ng-if="predicate !=='ip_address'"></i>
                        </div>
                        <div class="col-4 col-md-2 col-lg-2 d-block text-gray-500">
                            <span class="pointer-cursor" ng-click="doSort('type')">{{'REPORT_TRACKING.TYPE' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor" ng-click="doSort('type')"
                               ng-if="!isSort && predicate =='type'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor" ng-click="doSort('type')"
                               ng-if="isSort && predicate =='type'"></i>
                            <i class="fa fa-sort pointer-cursor" ng-click="doSort('type')"
                               ng-if="predicate !=='type'"></i>
                        </div>
                    </div>
                    <!--Draw data-->
                    <div class="hover-table">
                        <div class="row bg-white py-2 mx-0 border-bottom py-2"
                             ng-repeat="trackingView in listTrackingViews">
                            <div class="col-4 col-md-6 col-lg-4 d-flex justify-content-start align-items-center"
                                 title="{{trackingView.mail_address}}">
                                <span class="text-truncate"
                                      ng-show="trackingView.mail_address !== null || trackingView.mail_address !== ''">{{trackingView.mail_address}}</span>
                                <span ng-show="!trackingView.mail_address">N/A</span>
                            </div>
                            <div class="col-4 col-md-4 col-lg-4 d-flex justify-content-start align-items-center">
                                <span>{{formatDateTime(trackingView.date_time)}}</span>
                            </div>
                            <div class="col-lg-2 d-none d-lg-flex justify-content-start align-items-center">
                                <span class="col-form-label">{{trackingView.ip_address}}</span>
                            </div>
                            <div class="col-4 col-md-2 col-lg-2 d-flex justify-content-start align-items-center">
                                    <span ng-switch on="trackingView.type">
                                        <span class="badge badge-info col-form-label"
                                              ng-switch-when="0">{{'COMMON.DOWNLOAD' | translate}}</span>
                                        <span class="badge badge-success col-form-label"
                                              ng-switch-when="1">{{'COMMON.VIEW' | translate}}</span>
                                        <span class="badge badge-light col-form-label" ng-switch-default>No data</span>
                                    </span>
                            </div>
                        </div>
                    </div>
                    <div class="row bg-white py-2 bd-top mx-0"
                         ng-if="listTrackingViews.length === 0">
                        <div class="col-12 text-center">
                            <span>{{'COMMON.NO_RECORDS' | translate}}</span>
                        </div>
                    </div>
                    <!--Draw pagination-->
                    <div class="row form-group d-flex justify-content-end mt-2">
                        <ul boundary-links="true"
                            class="pagination"
                            first-text="&laquo;"
                            last-text="&raquo;"
                            next-text="&rsaquo;"
                            ng-change="pageChanged()"
                            ng-model="paging.currentPage"
                            ng-show="listTrackingViews.length > 0"
                            items-per-page="paging.pageSizeView"
                            previous-text="&lsaquo;"
                            total-items="totalItems"
                            max-size='5'
                            uib-pagination></ul>
                    </div>
                </div>
            </div>
        </div>

        <!--Downloaded file access -->
        <div class="col-12 form-group" ng-if="fileType == 1">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-6 col-sm-7 col-lg-4 d-flex align-items-center">
                            <i class="fa fa-bar-chart-o fa-fw"></i> <span>{{'REPORT_TRACKING.DOWNLOADED_FILE_ACCESS_TITLE' | translate}}</span>
                        </div>
                        <div class="col-lg-4 d-none d-lg-flex align-items-center">
                                <span class="ml-3"><i aria-hidden="true"
                                                      class="fa fa-envelope text-danger"></i> = {{'REPORT_TRACKING.NOT_OPENED' | translate}}</span>
                            <span class="pl-3"><i aria-hidden="true" class="fa fa-envelope-open"></i> = {{'REPORT_TRACKING.OPENED' | translate}}</span>
                        </div>
                        <div class="col-6 col-sm-5 col-lg-4 d-flex align-items-center">
                            <div class="input-group d-flex justify-content-end">
                                <select class="border rounded-left tool-bar-padding pointer-cursor"
                                        ng-change="pageChangedOpen()"
                                        ng-model="paging.pageSizeOpen">
                                    <option value="5">5</option>
                                    <!-- <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option> -->
                                </select>
                                <div class="input-group-prepend">
                                    <label class="input-group-text rounded-right">{{'COMMON.RECORDS'
                                        | translate}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!--Headers-->
                    <div class="row bg-white py-2 mx-0 border-bottom">
                        <div class="col-6 col-md-6 col-lg-3 d-block text-gray-500">
                                <span class="pointer-cursor"
                                      ng-click="doSortOpen('mail_address')">{{'REPORT_TRACKING.EMAIL' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSortOpen('mail_address')"
                               ng-if="!isSortOpen && predicateOpen =='mail_address'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSortOpen('mail_address')"
                               ng-if="isSortOpen && predicateOpen =='mail_address'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                               ng-click="doSortOpen('mail_address')" ng-if="predicateOpen !=='mail_address'"></i>
                        </div>
                        <div class="col-3 col-md-4 col-lg-3 d-block text-gray-500 text-center">
                                <span class="pointer-cursor"
                                      ng-click="doSortOpen('status')">{{'REPORT_TRACKING.OPEN_STATUS' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSortOpen('status')"
                               ng-if="!isSortOpen && predicateOpen =='status'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSortOpen('status')"
                               ng-if="isSortOpen && predicateOpen =='status'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor" ng-click="doSortOpen('status')"
                               ng-if="predicateOpen !=='status'"></i>
                        </div>
                        <div class="col-lg-2 d-none d-lg-block text-gray-500">
                                <span class="pointer-cursor"
                                      ng-click="doSortOpen('open_time')">{{'REPORT_TRACKING.LAST_OPENED' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSortOpen('open_time')"
                               ng-if="!isSortOpen && predicateOpen =='open_time'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSortOpen('open_time')"
                               ng-if="isSortOpen && predicateOpen =='open_time'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                               ng-click="doSortOpen('open_time')"
                               ng-if="predicateOpen !=='open_time'"></i>
                        </div>
                        <div class="d-none col-lg-2 d-lg-block text-gray-500">
                            <span class="pointer-cursor" ng-click="doSortOpen('ip_address')">{{'REPORT_TRACKING.IP' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSortOpen('ip_address')"
                               ng-if="!isSortOpen && predicateOpen =='ip_address'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSortOpen('ip_address')"
                               ng-if="isSortOpen && predicateOpen =='ip_address'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                               ng-click="doSortOpen('ip_address')"
                               ng-if="predicateOpen !=='ip_address'"></i>
                        </div>
                        <div class="col-3 col-md-2 col-lg-2"></div>
                    </div>
                    <!--Draw data-->
                    <div class="hover-table">
                        <div class="row bg-white mx-0 py-2"
                             ng-repeat="trackingOpen in listTrackingOpens">
                            <div class="col-6 col-md-6 col-lg-3 d-flex justify-content-start align-items-center"
                                 title="{{trackingOpen.mail_address}}">
                                <div class="text-truncate">{{trackingOpen.mail_address}}</div>
                            </div>
                            <div class="col-3 col-md-4 col-lg-3 d-flex justify-content-center align-items-center">
                                <div class="col-form-label hidden-xs">
                                         <span ng-if="!trackingOpen.open_time">
                                             <i aria-hidden="true" class="fa fa-envelope text-danger"></i>
                                         </span>
                                    <span ng-if="trackingOpen.open_time">
                                             <i aria-hidden="true" class="fa fa-envelope-open"></i>
                                         </span>
                                </div>
                            </div>
                            <div class="col-lg-2 d-none d-lg-flex justify-content-start align-items-center">
                                <div class="col-form-label hidden-sm">
                                    <span ng-if="!trackingOpen.open_time">N/A</span>
                                    <span ng-if="trackingOpen.open_time">{{formatDateTime(trackingOpen.open_time)}}</span>
                                </div>
                            </div>
                            <div class="col-lg-2 d-none d-lg-flex justify-content-start align-items-center">
                                <div class="col-form-label hidden-sm">
                                    <span ng-if="!trackingOpen.ip_address">N/A</span>
                                    <span ng-if="trackingOpen.ip_address">{{trackingOpen.ip_address}}</span>
                                </div>
                            </div>
                            <div class="col-3 col-md-2 col-lg-2">
                                <button class="btn btn-sm btn-danger" type="button"
                                        ng-click="showConfirmRevokeMember(trackingOpen.address_book_id, fileId, folderId, projectId)">
                                    {{'REPORT_TRACKING.BTN_REVOKE' | translate}}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row bg-white py-2 bd-top mx-0"
                         ng-if="listTrackingOpens.length === 0">
                        <div class="col-12 text-center">
                            <span>{{'COMMON.NO_RECORDS' | translate}}</span>
                        </div>
                    </div>

                    <!--Draw pagination-->
                    <div class="col-12 form-group d-flex justify-content-end mt-2">
                        <ul boundary-links="true"
                            class="pagination"
                            first-text="&laquo;"
                            last-text="&raquo;"
                            next-text="&rsaquo;"
                            ng-change="pageChangedOpen()"
                            ng-model="paging.currentPageOpen"
                            ng-show="listTrackingOpens.length > 0"
                            items-per-page="paging.pageSizeOpen"
                            previous-text="&lsaquo;"
                            total-items="totalItemsOpen"
                            max-size='5'
                            uib-pagination></ul>
                    </div>

                </div>
            </div>
        </div>


        <!--Draw Chart-->
        <div class="col-12 form-group" ng-if="fileType ==1">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-bar-chart-o fa-fw"></i>
                    <span>{{'REPORT_TRACKING.CHART_TITLE' | translate}}</span>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-sm-10 offset-sm-1">
                            <canvas width="500" height="200"
                                    chart-colors="ColorBar" chart-data="data"
                                    chart-dataset-override="DataSetOverride" chart-labels="labels"
                                    chart-options="options"
                                    class="chart chart-bar"
                                    id="bar">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
