<title>Banners</title>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <app-breadcrumb [title]="'Banners'" [active_item]="'Banners'">
            </app-breadcrumb>
        </div>
        <div class="col-sm-6 text-right">
            <div ngbDropdown class="btn-group">
                <div class="ml-2">
                    <a *ngIf="isWritePermission" title="{{ 'banner_tooltip_add_banner' |translate}}" href="javascript:;"
                        class="btn btn-sm btn-info filterbtn iconplusbtn" (click)="modalOpen(basicmodal)">
                        <i class="icon-plus"></i>
                    </a>
                    <button type="button" class="btn btn-info filterbtn"
                        title="{{ 'banner_tooltip_filter_banner' |translate}}" (click)="drawer.toggle();">
                        <i class="icon-filter pr-1"></i>
                        <span>{{'button_lbl_filter'| translate}}</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <mat-drawer-container class="example-container" autosize>
                <div class="card">
                    <div class="contentcard listContent">
                        <div class="row mx-0" *ngIf="banners && banners.length > 0 else NoBanner">
                            <div class="col-lg-3 col-md-6 col-sm-12 mt-2" *ngFor="let banner of banners">
                                <div>
                                    <a href="{{banner.url}}" target="_blank" class="form-control document" type="upload"
                                        id="resume">
                                        <div>
                                            <div class="fileUpload text-center">
                                                <ng-container *ngIf="banner.url && banner.url != '' else default ">
                                                    <img [src]="banner.url" (error)="banner.url = ''" height="100%"
                                                        width="100%" alt="banner">
                                                </ng-container>
                                                <ng-template #default>
                                                    <img src="../../../../assets/admin/images/default.png" height="100%"
                                                        width="100%" alt="banner">
                                                </ng-template>
                                            </div>
                                            <div class=" mt-3">
                                                {{'lbl_role'| translate}}:{{banner.roleName}}<br>
                                                {{'lbl_from_date'| translate}}:{{banner.fromDate | date}}<br>
                                                {{'lbl_to_date'| translate}}:{{banner.toDate | date}}
                                            </div>
                                            <div class="d-inline">
                                                <a *ngIf="isEditPermission"
                                                    title="{{ 'banner_tooltip_edit_banner' |translate}}"
                                                    href="javascript:;" class="btn btn-sm btn-info filterbtn"
                                                    (click)="editDialog(banner,basicmodal)">
                                                    <i class="icon-pencil"></i>
                                                </a>
                                            </div>
                                            <div class="media-body icon-state d-inline">
                                                <label title="{{ 'tooltip_lbl_change_status' |translate}}"
                                                    class="switch" style="top:22px;margin-left:4px"
                                                    *ngIf="isEditPermission">
                                                    <input type="checkbox" (click)="changeStatus(banner)"
                                                        [(ngModel)]="banner.isActive"><span class="switch-state"
                                                        [ngClass]="banner.isActive ? 'bg-success' : 'bg-secondary'"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <ng-template #NoBanner>
                            <div class="d-flex vertical-center nodata">
                            </div>
                        </ng-template>
                    </div>
                    <div class="card-footer" *ngIf="banners && banners.length > 0">
                        <ul class="pagination mb-0 float-right">
                            <li [ngClass]="{ disabled: paginate.currentPage == 1 }" class="page-item page-prev">
                                <a class="page-link" href="javascript:;" tabindex="-1"
                                    (click)="setPage(paginate.currentPage - 1)">
                                    <span>{{'button_lbl_prev'| translate}}</span>
                                </a>
                            </li>
                            <li *ngFor="let page of paginate.pages" class="page-item active"
                                [ngClass]="{ active: paginate.currentPage == page }"><a
                                    [ngClass]="{current:paginate.currentPage == page}" class="page-link"
                                    href="javascript:;" (click)="setPage(page)">{{page}}</a></li>
                            <li [ngClass]="{ disabled: paginate.currentPage === paginate.totalPages}"
                                (click)="setPage(paginate.currentPage + 1)" class="page-item page-next">
                                <a class="page-link" href="javascript:;"><span>{{'button_lbl_next'|
                                        translate}}</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <mat-drawer #drawer class="example-sidenav" mode="over" position="end">
                    <div class="col-lg-12 px-3 pt-3">
                        <div class="d-inline" style="width: 100%;"><i class="fa fa-filter"><span>{{'button_lbl_filter'|
                                    translate}}</span></i>
                            <button v class="close" aria-label="Close" (click)="drawer.toggle();">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                    <hr>
                    <div class="position px-3">
                        <div class="form-group mb-2">
                            <div class="col-form-label">{{'lbl_select_role'| translate}}</div>
                            <ng-select [items]="roles" class="js-example-basic-single p-0"
                                placeholder="{{'lbl_select_role'|translate}}" bindLabel="name" bindValue="id"
                                name="rols" [multiple]="true" [(ngModel)]="selectedRoles">
                            </ng-select>
                        </div>
                        <div>
                            <div class="col-form-label">{{'lbl_from_date'| translate}}</div>
                            <mat-form-field appearance="outline" class="d-block w-100"
                                (click)="toggleMenuService.togglePickerStyles()">
                                <input matInput [matDatepicker]="filterPickerFrom" [max]="dateTo"
                                    placeholder="{{ 'lbl_from_date' |translate}}" [(ngModel)]="dateFrom" name="fromDate"
                                    [readonly]="true" (focus)="filterPickerFrom.open()"
                                    (click)="toggleMenuService.togglePickerStyles()">
                                <mat-datepicker-toggle matSuffix [for]="filterPickerFrom"
                                    (click)="toggleMenuService.togglePickerStyles()">
                                </mat-datepicker-toggle>
                                <mat-datepicker #filterPickerFrom></mat-datepicker>
                            </mat-form-field>
                        </div>
                        <div class="col-form-label">{{'lbl_to_date'| translate}}</div>
                        <mat-form-field appearance="outline" class="d-block w-100 "
                            (click)="toggleMenuService.togglePickerStyles()">
                            <input matInput [matDatepicker]="FilterPickerTo" [max]="dateTo"
                                placeholder="{{ 'lbl_to_date' |translate}}" [(ngModel)]="dateTo" name="toDate"
                                [readonly]="true" (focus)="FilterPickerTo.open()"
                                (click)="toggleMenuService.togglePickerStyles()">
                            <mat-datepicker-toggle matSuffix [for]="FilterPickerTo"
                                (click)="toggleMenuService.togglePickerStyles()">
                            </mat-datepicker-toggle>
                            <mat-datepicker #FilterPickerTo></mat-datepicker>
                        </mat-form-field>

                    </div>

                    <div class="modal-footer px-3" style="padding-bottom: 35px;justify-content: center;">
                        <div class="float-right d-inline">
                            <button type="button" class="btn btn-secondary filterbtn"
                                title="{{ 'tooltip_lbl_clear_filter' |translate}}"
                                (click)="drawer.toggle();clearSearch()">
                                <span>{{'button_lbl_clear'| translate}}</span>
                            </button>
                            <button type="button" class="btn btn-info filterbtn"
                                title="{{ 'tooltip_lbl_filter_loans' |translate}}" (click)="drawer.toggle();setPage(1)">
                                <span>{{'lbl_search'| translate}}</span>
                            </button>
                        </div>
                    </div>
                    <div class="px-3">
                    </div>
                </mat-drawer>
            </mat-drawer-container>
        </div>
    </div>
</div>
<ng-template #basicmodal let-modal>
    <div>
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
            <button type="button" class="close" aria-label="Close" (click)="closeDialog()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form [formGroup]="bannerForm">
            <div class="modal-body pd-20">
                <div class="form-group mb-2">
                    <div class="col-form-label">{{'lbl_select_role'| translate}} <span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="roles" class="js-example-basic-single p-0"
                        placeholder="{{'lbl_select_role'|translate}}" bindLabel="name" bindValue="id" name="rols"
                        required formControlName="roleId">
                    </ng-select>
                    <mat-error
                        *ngIf="(bannerForm.get('roleId') && !bannerForm.get('roleId')!.valid && bannerForm.get('roleId')!.touched)">
                        {{'message_lbl_role_is_required'| translate}}
                    </mat-error>
                </div>

                <div class="form-group mb-2 formDatePicker">
                    <div class="col-form-label">{{'lbl_from_date'| translate}}</div>
                    <mat-form-field appearance="outline" class="d-block w-100"
                        (click)="toggleMenuService.togglePickerStyles()">
                        <input matInput [matDatepicker]="pickerFrom" placeholder="{{ 'lbl_from_date' |translate}}"
                            formControlName="fromDate" name="fromDate" [readonly]="true" (focus)="pickerFrom.open()"
                            (click)="toggleMenuService.togglePickerStyles()">
                        <mat-datepicker-toggle matSuffix [for]="pickerFrom"
                            (click)="toggleMenuService.togglePickerStyles()"></mat-datepicker-toggle>
                        <mat-datepicker #pickerFrom></mat-datepicker>
                    </mat-form-field>
                </div>

                <div class="form-group mb-2 formDatePicker">
                    <div class="col-form-label">{{'lbl_to_date'| translate}}</div>
                    <mat-form-field appearance="outline" class="d-block w-100"
                        (click)="toggleMenuService.togglePickerStyles()">
                        <input matInput [matDatepicker]="pickerTo" [max]="dateTo"
                            placeholder="{{ 'lbl_to_date' |translate}}" formControlName="toDate" name="toDate"
                            [readonly]="true" (focus)="pickerTo.open()"
                            (click)="toggleMenuService.togglePickerStyles()">
                        <mat-datepicker-toggle matSuffix [for]="pickerTo"
                            (click)="toggleMenuService.togglePickerStyles()"></mat-datepicker-toggle>
                        <mat-datepicker #pickerTo></mat-datepicker>
                    </mat-form-field>
                </div>
                <div class="form-group">
                    <label for="resume">{{'lbl_banner_image'| translate}} <span style="color: red;">*</span></label>
                    <div *ngIf="!bannerForm.get('url')!.value else Image">
                        <a class="form-control" type="upload" id="resume"
                            style="height: 140px; width: 100%; text-align: center; border-style: dashed; border-color: rgb(63, 105, 223);display: flex;align-items: center;"
                            required (click)="fileUpload.click()">
                            <div class="absolute text-center m-auto">
                                <i class="icon-plus" style="font-size:30px"></i>
                                <h4>{{'lbl_tap_to_upload_banner'| translate}}</h4>
                            </div>
                        </a>
                    </div>
                    <ng-template #Image>
                        <a class="form-control" type="upload" id="resume"
                            style="height:auto; text-align: center; display: flex;align-items: center;" required
                            (click)="fileUpload.click()">
                            <img [src]="bannerForm.get('url')!.value"
                                style="object-fit: contain; height: 200px; width: 280px;" alt="banner">
                        </a>
                    </ng-template>

                    <input type="file" #fileUpload id="bannerPic" (change)="selectedImage($event)" name="bannerPic"
                        style="display:none;" accept="image/*" />
                    <mat-error
                        *ngIf="(bannerForm.get('url') && !bannerForm.get('url')!.valid && bannerForm.get('url')!.touched)">
                        {{'message_lbl_image_is_required'| translate}}
                    </mat-error>
                </div>
            </div>
        </form>

        <div class="modal-footer">
            <button (click)="insertBanner(bannerForm)" class="btn btn-sm btn-info filterbtn">
                {{'button_lbl_save'| translate}}
            </button>

            <button (click)="closeDialog()" class="btn btn-sm btn-secondary filterbtn">
                {{'button_lbl_cancel'| translate}}
            </button>
        </div>
    </div>
</ng-template>