<ion-header>
    <ion-toolbar mode="ios" class="sangh">
        <ion-buttons slot="start" class="back" (click)="onPrevious()">
            <ion-icon name="arrow-back-outline"></ion-icon>
        </ion-buttons>
        <ion-title class="back-btn">{{haveMemberCard ? 'Member ID card' : 'Sangh Member ID Card Form'}}</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content class="sangh">
    <ng-container *ngIf="haveMemberCard">
        <div class="member-card">
            <h3 class="card-title">
                <p> Member ID Card</p>
            </h3>
            <div class="card-content">
                <div class="header">
                    <div>
                        <ion-avatar class="profile-bg">
                            <img [src]="memberDetail?.sangh?.avatar" />
                        </ion-avatar>
                    </div>
                    <div class="sangh-content">
                        <p>
                            {{memberDetail?.sangh?.name}}
                        </p>
                        <p>
                            {{memberDetail?.sangh?.city}} <span *ngIf="memberDetail?.sangh?.state"> ,
                                {{memberDetail?.sangh?.state}}</span>
                        </p>
                    </div>
                </div>
                <div class="content">
                    <div class="info">
                        <p>Member ID : <span class="text-black">{{memberDetail?.member_id}}</span></p>
                        <p>{{memberDetail?.user?.name}}</p>
                        <p>{{currentLocation}}</p>
                    </div>
                    <div class="profile-img">
                        <img [src]="memberDetail?.profile_image" />
                    </div>
                </div>
                <div class="footer">
                    <img src="/assets/icon/favicon.png" />
                    <p>Powered by Global Jain</p>
                </div>
            </div>
        </div>
    </ng-container>

    <ng-container *ngIf="!haveMemberCard">

        <h4>Sangh Detail</h4>
        <div class="sangh-detail-card">
            <div class="card-content">
                <div class="header">
                    <div>
                        <ion-avatar class="profile-bg">
                            <img [src]="memberDetail?.sangh?.avatar" />
                        </ion-avatar>
                    </div>
                    <div class="sangh-content">
                        <p>
                            {{memberDetail?.sangh?.name}}
                        </p>
                        <p>
                            {{memberDetail?.sangh?.city}} <span *ngIf="memberDetail?.sangh?.state"> ,
                                {{memberDetail?.sangh?.state}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <h4>Member Detail</h4>

        <form [formGroup]="sanghMemberForm" novalidate class="global-form ion-padding-horizontal">

            <div class="mb-20 disable-input">
                <label position="stacked" class="normal-label mb-3">Member ID</label>
                <ion-input formControlName="memberId"></ion-input>
            </div>

            <div class="mb-20">
                <label position="stacked" class="normal-label mb-3">Full Name</label>
                <ion-input formControlName="fullName"></ion-input>
                <div
                    *ngIf="sanghMemberForm.controls.fullName.invalid && (sanghMemberForm.controls.fullName.dirty || sanghMemberForm.controls.fullName.touched)">
                    <span *ngIf="sanghMemberForm.controls.fullName.errors?.required" class="error">
                        Full name is required.
                    </span>
                </div>
            </div>

            <div class="mb-20 search">
                <label position="stacked" class="normal-label mb-3">Current Location</label>
                <input formControlName="address" #Location (click)="initAutocomplete()">
                <div
                    *ngIf="sanghMemberForm.controls.address.invalid && (sanghMemberForm.controls.address.dirty || sanghMemberForm.controls.address.touched)">
                    <span *ngIf="sanghMemberForm.controls.address.errors?.required" class="error">
                        Current Location is required.
                    </span>
                </div>
            </div>

            <div class="mb-20">
                <label position="stacked" class="normal-label  mb-3">Upload Photo for ID Card</label>
                <div class="upload-container mb-10" (click)="selectImages()">
                    <ng-container *ngIf="!sanghMemberForm?.controls?.profile_url?.value">
                        <ion-icon name="image-outline"></ion-icon>
                        <span>UPLOAD IMAGE</span>
                    </ng-container>
                    <ng-container *ngIf="sanghMemberForm?.controls?.profile_url?.value">
                        <div class="upload-preview">
                            <img [src]="sanghMemberForm?.controls?.profile_url?.value" alt="Upload profile"
                                (click)="profileView(sanghMemberForm?.controls?.profile_url?.value); $event.stopPropagation()" />
                            <ion-icon name="close-circle" (click)="removeImage(); $event.stopPropagation()"></ion-icon>
                        </div>
                    </ng-container>
                </div>
                <p>Note : Maximum allowed Image size is 2 MB.</p>
            </div>
        </form>
    </ng-container>
</ion-content>

<ion-footer class="sangh" *ngIf="!haveMemberCard">
    <ion-button mode="md" class="si" expand="block" (click)="onSubmit()" [disabled]="loader">
        <ion-spinner name="lines" *ngIf="loader"></ion-spinner>
        <span *ngIf="!loader">Submit</span>
    </ion-button>
</ion-footer>