<title>Region</title>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <app-breadcrumb [title]="'Region'" [active_item]="'Region'">
            </app-breadcrumb>
        </div>
        <div class="col-sm-6 text-right">
            <div ngbDropdown class="btn-group">
                <div class="ml-2">
                    <button type="button" class="btn btn-info filterbtn"
                        title="{{ 'tooltip_lbl_download_csv' |translate}}" (click)="downloadCsv()">
                        <i class="icon-download pr-1"></i>
                        <span>{{'lbl_downLoad_csv'| translate}}</span>
                    </button>
                    <input #fileInput style="display: none;" accept=".csv" type="file" (change)="updateData($event)" />
                    <button type="button" class="btn btn-info filterbtn"
                        title="{{ 'tooltip_lbl_upload_csv' |translate}}" (click)="fileInput.click()">
                        <i class="icon-upload pr-1"></i>
                        <span>Upload</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="card table-tbl-responsive" >
                <div class="row mx-0">
                    <div class="col-md-3 px-0 border-right">
                        <ng-container *ngIf="countries.length > 0; else noData">
                            <div class="table-responsive  border-top userlist-table">
                                <table class="table table-striped" aria-label="">
                                    <thead class="header-tbl">
                                        <tr>
                                            <th>Countries</th>
                                            <th>
                                                <button type="button" class="btn btn-icons btn-primary float-right"
                                                    (click)="modalOpen(countryModal)">
                                                    <span class="fa fa-plus"></span>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-border-bottom-0">
                                        <tr *ngFor="let data of countries; let i = index">
                                            <td>
                                                <div class="ml-3">
                                                    <input class="form-check-input" type="checkbox" [value]="data.id"
                                                        name="forCountry_{{i}}" id="forCountry_{{i}}"
                                                        (change)="getState($event)" [checked]="data.isSelected" />
                                                    <span class="fw-normal" style="margin-left: 5px">{{ data.name
                                                        }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <a class="btn btn-sm btn-icon item-edit" href="" id="editbtn"
                                                    title="edit" data-bs-toggle="modal" data-bs-target="#editModal"
                                                    (click)="editCountry(countryModal,data)">
                                                    <i class="fa fa-pen"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </ng-container>
                        <ng-template #noData>
                            <div class="d-flex vertical-center nodata">
                            </div>
                        </ng-template>

                        <div class="card-footer p-3" *ngIf="countries && countries.length > 0">
                            <ul class="pagination float-right">
                                <li [ngClass]="{ disabled: countryPaginate.currentPage == 1 }"
                                    class="page-item page-prev">
                                    <a class="page-link" href="javascript:;" tabindex="-1"
                                        (click)="getCountries(countryPaginate.currentPage - 1)">
                                        <span>{{'button_lbl_prev'|translate}}</span>
                                    </a>
                                </li>
                                <li *ngFor="let page of countryPaginate.pages" class="page-item active"
                                    [ngClass]="{ active: countryPaginate.currentPage == page }"><a
                                        [ngClass]="{current:countryPaginate.currentPage == page}" class="page-link"
                                        href="javascript:;" (click)="getCountries(page)">{{page}}</a></li>
                                <li [ngClass]="{ disabled: countryPaginate.currentPage === countryPaginate.totalPages}"
                                    (click)="getCountries(countryPaginate.currentPage + 1)" class="page-item page-next">
                                    <a class="page-link" href="javascript:;"><span>{{'button_lbl_next'|
                                            translate}}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 px-0 border-right">
                        <div class="table-responsive table-region text-nowrap">
                            <ng-container>
                                <div class="table-responsive  border-top userlist-table">
                                    <table class="table table-striped" aria-label="">
                                        <thead class="header-tbl">
                                            <tr>
                                                <th>States</th>
                                                <th>
                                                    <button type="button" class="btn btn-icons btn-primary float-right"
                                                        (click)="modalOpen(stateModal)">
                                                        <span class="fa fa-plus"></span>
                                                    </button>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0" *ngIf="states.length > 0; else noData">
                                            <tr *ngFor="let data of states; let i = index">
                                                <td>
                                                    <div class="ml-3">
                                                        <input class="form-check-input" type="checkbox"
                                                            [value]="data.id" name="forState_{{i}}" id="forState_{{i}}"
                                                            (change)="getDistrict($event)"
                                                            [checked]="data.isSelected" />
                                                        <span class="fw-normal" style="margin-left: 5px">{{ data.name
                                                            }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <a class="btn btn-sm btn-icon item-edit float-right" href=""
                                                        id="editbtn" title="edit" data-bs-toggle="modal"
                                                        data-bs-target="#editModal"
                                                        (click)="editState(stateModal,data)">
                                                        <i class="fa fa-pen"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </ng-container>
                            <ng-template #noData>
                                <div class="d-flex vertical-center nodata">
                                </div>
                            </ng-template>
                        </div>

                        <div class="card-footer p-3" *ngIf="states && states.length > 0">
                            <ul class="pagination float-right">
                                <li [ngClass]="{ disabled: statePaginate.currentPage == 1 }"
                                    class="page-item page-prev">
                                    <a class="page-link" href="javascript:;" tabindex="-1"
                                        (click)="getState(null,statePaginate.currentPage - 1)">
                                        <span>{{'button_lbl_prev'|translate}}</span>
                                    </a>
                                </li>
                                <li *ngFor="let page of statePaginate.pages" class="page-item active"
                                    [ngClass]="{ active: statePaginate.currentPage == page }"><a
                                        [ngClass]="{current:statePaginate.currentPage == page}" class="page-link"
                                        href="javascript:;" (click)="getState(null,page)">{{page}}</a></li>
                                <li [ngClass]="{ disabled: statePaginate.currentPage === statePaginate.totalPages}"
                                    (click)="getState(null,statePaginate.currentPage + 1)" class="page-item page-next">
                                    <a class="page-link" href="javascript:;"><span>{{'button_lbl_next'|
                                            translate}}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 px-0 border-right">
                        <div class="table-responsive table-region text-nowrap">
                            <ng-container>
                                <div class="table-responsive  border-top userlist-table">
                                    <table class="table table-striped" aria-label="">
                                        <thead class="header-tbl">
                                            <tr>
                                                <th>Districts</th>
                                                <th>
                                                    <button type="button" class="btn btn-icons btn-primary  float-right"
                                                        (click)="modalOpen(districtModal)">
                                                        <span class="fa fa-plus"></span>
                                                    </button>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0" *ngIf="districts.length > 0; else noData">
                                            <tr *ngFor="let data of districts; let i = index">
                                                <td>
                                                    <div class="ml-3">
                                                        <input class="form-check-input" type="checkbox"
                                                            [value]="data.id" name="forVendor_{{i}}"
                                                            id="forVendor_{{i}}" (change)="getCity($event)"
                                                            [checked]="data.isSelected" />
                                                        <span class="fw-normal" style="margin-left: 5px">{{ data.name
                                                            }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <a class="btn btn-sm btn-icon item-edit float-right" href=""
                                                        id="editbtn" title="edit" data-bs-toggle="modal"
                                                        data-bs-target="#editModal"
                                                        (click)="editDistrict(districtModal,data)">
                                                        <i class="fa fa-pen"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </ng-container>
                            <ng-template #noData>
                                <div class="d-flex vertical-center nodata">
                                </div>
                            </ng-template>
                        </div>

                        <div class="card-footer p-3" *ngIf="states && states.length > 0">
                            <ul class="pagination float-right">
                                <li [ngClass]="{ disabled: districtPaginate.currentPage == 1 }"
                                    class="page-item page-prev">
                                    <a class="page-link" href="javascript:;" tabindex="-1"
                                        (click)="getDistrict(null,districtPaginate.currentPage - 1)">
                                        <span>{{'button_lbl_prev'|translate}}</span>
                                    </a>
                                </li>
                                <li *ngFor="let page of districtPaginate.pages" class="page-item active"
                                    [ngClass]="{ active: districtPaginate.currentPage == page }"><a
                                        [ngClass]="{current:districtPaginate.currentPage == page}" class="page-link"
                                        href="javascript:;" (click)="getDistrict(null,page)">{{page}}</a></li>
                                <li [ngClass]="{ disabled: districtPaginate.currentPage === districtPaginate.totalPages}"
                                    (click)="getDistrict(null,districtPaginate.currentPage + 1)"
                                    class="page-item page-next">
                                    <a class="page-link" href="javascript:;"><span>{{'button_lbl_next'|
                                            translate}}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 px-0">
                        <div class="table-responsive table-region text-nowrap">
                            <ng-container>
                                <div class="table-responsive  border-top userlist-table">
                                    <table class="table table-striped" aria-label="">
                                        <thead class="header-tbl">
                                            <tr>
                                                <th>Cities</th>
                                                <th>
                                                    <button type="button" class="btn btn-icons btn-primary float-right"
                                                        data-bs-toggle="modal" data-bs-target="#modalCenter"
                                                        (click)="modalOpen(cityModal)">
                                                        <span class="fa fa-plus"></span>
                                                    </button>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0" *ngIf="cities.length > 0; else noData">
                                            <tr *ngFor="let data of cities; let i = index">
                                                <td>
                                                    <!-- <input class="form-check-input" type="checkbox" value="1"
                                                        name="forVendor" id="forVendor" [(ngModel)]="selectedCity" /> -->
                                                    <span class="fw-normal" style="margin-left: 5px">{{ data.name
                                                        }} - {{data.pincode}}</span>
                                                </td>
                                                <td>
                                                    <a class="btn btn-sm btn-icon item-edit float-right" href=""
                                                        id="editbtn" title="edit" data-bs-toggle="modal"
                                                        data-bs-target="#editModal" (click)="editCity(cityModal,data)">
                                                        <i class="fa fa-pen"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </ng-container>
                            <ng-template #noData>
                                <div class="d-flex vertical-center nodata">
                                </div>
                            </ng-template>
                        </div>

                        <div class="card-footer p-3" *ngIf="cities && cities.length > 0">
                            <ul class="pagination float-right">
                                <li [ngClass]="{ disabled: cityPaginate.currentPage == 1 }" class="page-item page-prev">
                                    <a class="page-link" href="javascript:;" tabindex="-1"
                                        (click)="getCity(null,cityPaginate.currentPage - 1)">
                                        <span>{{'button_lbl_prev'|translate}}</span>
                                    </a>
                                </li>
                                <li *ngFor="let page of cityPaginate.pages" class="page-item active"
                                    [ngClass]="{ active: cityPaginate.currentPage == page }"><a
                                        [ngClass]="{current:cityPaginate.currentPage == page}" class="page-link"
                                        href="javascript:;" (click)="getCity(null,page)">{{page}}</a></li>
                                <li [ngClass]="{ disabled: cityPaginate.currentPage === cityPaginate.totalPages}"
                                    (click)="getCity(null,cityPaginate.currentPage + 1)" class="page-item page-next">
                                    <a class="page-link" href="javascript:;"><span>{{'button_lbl_next'|
                                            translate}}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<ng-template #countryModal let-modal>
    <div>
        <form #countryForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">
                    <ng-container *ngIf="country.id else Add">Edit Country</ng-container>
                    <ng-template #Add>Add Country</ng-template>
                </h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-20">

                <div class="form-group">
                    <label for="name">Name<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="name" [(ngModel)]="country.name" required
                        #Name="ngModel" name="name">
                    <!-- <mat-error *ngIf="Name.valid && Name!.touched">
                        Name is required
                    </mat-error> -->
                    <mat-error *ngIf="(Name.touched) && (Name.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">IsoCode<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" name="isoCode" [(ngModel)]="country.isoCode" required
                        onlyAlphabets #Iso="ngModel">
                    <mat-error *ngIf="(Iso.touched) && (Iso.errors?.['required'])">
                        IsoCode is required
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">IsoCode3<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" name="isoCode3" [(ngModel)]="country.isoCode3" required
                        onlyAlphabets #IsoCode3="ngModel">
                    <mat-error *ngIf="(IsoCode3.touched) && (IsoCode3.errors?.['required'])">
                        IsoCode3 is required
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">DialCode<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" name="dialCode" [(ngModel)]="country.dialCode">
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-info filterbtn" (click)="saveCountry(countryForm)">
                    {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-sm btn-secondary filterbtn" (click)="closeDialog()">
                    {{'button_lbl_cancel'| translate}}
                </button>
            </div>
        </form>
    </div>
</ng-template>
<ng-template #stateModal let-modal>
    <div>
        <form #stateForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">
                    <ng-container *ngIf="state.id else Add">Edit State</ng-container>
                    <ng-template #Add>Add State</ng-template>
                </h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-20">
                <div class="form-group">
                    <div class="col-form-label">Select Country<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="countries" class="js-example-basic-single p-0" placeholder="Select Country"
                        bindLabel="name" bindValue="id" required name="selectedCountry" [(ngModel)]="state.countryId"
                        #Country="ngModel">
                    </ng-select>
                    <mat-error *ngIf="(Country.touched) && (Country.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">Name<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="name" [(ngModel)]="state.name" required onlyAlphabets
                        #Name="ngModel" name="name">
                    <mat-error *ngIf="(Name.touched) && (Name.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-info filterbtn" (click)="saveState(stateForm)">
                    {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-sm btn-secondary filterbtn" (click)="closeDialog()">
                    {{'button_lbl_cancel'| translate}}
                </button>
            </div>
        </form>
    </div>
</ng-template>
<ng-template #districtModal let-modal>
    <div>
        <form #districtForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">
                    <ng-container *ngIf="district.id else Add">Edit District</ng-container>
                    <ng-template #Add>Add District</ng-template>
                </h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-20">
                <div class="form-group">
                    <div class="col-form-label">Select Country<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="countries" class="js-example-basic-single p-0" placeholder="Select Country"
                        bindLabel="name" bindValue="id" required name="selected Country"
                        [(ngModel)]="district.countryId" #CountryId="ngModel" (change)="getSelectedState($event)">
                    </ng-select>
                    <mat-error *ngIf="(CountryId.touched) && (CountryId.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <div class="col-form-label">Select State<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="selectedStates" class="js-example-basic-single p-0" placeholder="Select State"
                        bindLabel="name" bindValue="id" required name="selected State" [(ngModel)]="district.stateId"
                        #StateId="ngModel">
                    </ng-select>
                    <mat-error *ngIf="(StateId.touched) && (StateId.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">Name<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="name" [(ngModel)]="district.name" required onlyAlphabets
                        #Name="ngModel" name="name">
                    <mat-error *ngIf="(Name.touched) && (Name.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-info filterbtn" (click)="saveDistrict(districtForm)">
                    {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-sm btn-secondary filterbtn" (click)="closeDialog()">
                    {{'button_lbl_cancel'| translate}}
                </button>
            </div>
        </form>
    </div>
</ng-template>
<ng-template #cityModal let-modal>
    <div>
        <form #cityForm="ngForm">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">
                    <ng-container *ngIf="city.id else Add">Edit City</ng-container>
                    <ng-template #Add>Add City</ng-template>
                </h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pd-20">
                <div class="form-group">
                    <div class="col-form-label">Select Country<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="countries" class="js-example-basic-single p-0" placeholder="Select Country"
                        bindLabel="name" bindValue="id" required [(ngModel)]="city.countryId" #CountryId="ngModel"
                        (change)="getSelectedState($event)" name="citycountry">
                    </ng-select>
                    <mat-error *ngIf="(CountryId.touched) && (CountryId.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <div class="col-form-label">Select State<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="selectedStates" class="js-example-basic-single p-0" placeholder="Select State"
                        bindLabel="name" bindValue="id" required name="selected State" [(ngModel)]="city.stateId"
                        #StateId="ngModel" (change)="getSelectedDistrict($event)">
                    </ng-select>
                    <mat-error *ngIf="(StateId.touched) && (StateId.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>

                <div class="form-group">
                    <div class="col-form-label">Select District<span style="color: red;">*</span>
                    </div>
                    <ng-select [items]="selectedDistricts" class="js-example-basic-single p-0"
                        placeholder="Select District" bindLabel="name" bindValue="id" required name="selected District"
                        [(ngModel)]="city.districtId" #DistrictId="ngModel">
                    </ng-select>
                    <mat-error *ngIf="(DistrictId.touched) && (DistrictId.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">Name<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="name" [(ngModel)]="city.name" required onlyAlphabets
                        #Name="ngModel" name="name">
                    <mat-error *ngIf="(Name.touched) && (Name.errors?.['required'])">
                        {{'message_lbl_name_is_required'| translate}}
                    </mat-error>
                </div>
                <div class="form-group">
                    <label for="name">Pincode<span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="pin" [(ngModel)]="city.pincode" required
                        #Pincode="ngModel" name="pincode" maxlength="6" onlyNumbers>
                    <mat-error *ngIf="(Pincode.touched) && (Pincode.errors?.['required'])">
                        {{'message_lbl_pincode_is_required'| translate}}
                    </mat-error>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-info filterbtn" (click)="saveCity(cityForm)">
                    {{'button_lbl_save'| translate}}
                </button>
                <button class="btn btn-sm btn-secondary filterbtn" (click)="closeDialog()">
                    {{'button_lbl_cancel'| translate}}
                </button>
            </div>
        </form>
    </div>
</ng-template>