<ngx-spinner type="ball-scale-multiple"></ngx-spinner>
<div class="w-full" style="margin-bottom: 200px; overflow-y: auto;">
    <h1 class="dashbord-title ml-5 text-5xl">Demande de signature</h1>

        <div class="flex mt-5 " >
            <div class="w-96 ...">  
    
       
                <ul class="item-drag pl-10">
                    <li class="mt-5">
                        <h4>Destinataires : </h4>
                        <div class="sm:col-span-2 mt-5 pr-5">
                            <div class="mt-2">
                                  <fieldset>
                                    <div class="mt-6 space-y-3">
                                      <div class="flex items-center item-label gap-x-3" *ngFor="let item of signataireForm.demande.destinataires, let i = index">
                                        <label for="push-everything" class="block font-medium leading-6 text-gray-900" style="width: 85%;">
                                            <p>Destinataire : <span class="font-semibold">{{item.email}}</span></p>
                                            <p>Type de destination : <span class="font-semibold">{{item.role}}</span></p>
                                            <p>Rôle du destinataire : <span class="font-semibold">{{item.envoie}}</span></p>
                                        </label>
                                        <input id="push-everything" [(ngModel)]="indexUser" [value]="i" name="notifications{{i}}" (change)="onOptionChange(i)" type="radio" class="h-4 w-4 border-gray-300">
                                      </div>
                               
                                    </div>
                                  </fieldset>
                            </div>
                          </div>
                
                    </li>
                </ul>
                
            </div>
            <div class="w-3/5 ...">
                <div class="flex flex-wrap justify-center"
                cdkDropList
                #originList="cdkDropList"
                [cdkDropListData]="origin">
    
                <button #drags class="btn-drag mt-4 mr-4" (cdkDragMoved)="selected(0)" (cdkDragEnded)="testMe($event, 0)" *ngIf="destinataireSelected.role == 'Signataire'" cdkDrag>
                    <img class="ml-1" src="./assets/img/pen_sm.svg">
                    <span>Signature</span>
                </button>
                <button #drags class="btn-drag mt-4 mr-4" (cdkDragMoved)="selected(1)" (cdkDragEnded)="testMe($event, 1)"  *ngIf="destinataireSelected.role == 'Signataire'" cdkDrag>
                    <img class="ml-1" src="./assets/img/cachet.svg">
                    <span>Cachet</span>
                </button>
                <button #drags class="btn-drag mt-4 mr-4" (cdkDragMoved)="selected(2)" (cdkDragEnded)="testMe($event, 2)" *ngIf="destinataireSelected.role == 'Signataire'" cdkDrag>
                    <img class="ml-1" src="./assets/img/user.svg">
                    <span>Nom et prénom</span>
                </button>
                <button #drags class="btn-drag mt-4 mr-4" (cdkDragMoved)="selected(3)" (cdkDragEnded)="testMe($event, 3)" *ngIf="destinataireSelected.role == 'Signataire'" cdkDrag>
                    <img class="ml-1" src="./assets/img/calendar.svg">
                    <span>Date de signataire</span>
                </button>
                
                <button #drags class="btn-drag mt-4 mr-4" (cdkDragMoved)="selected(4)" (cdkDragEnded)="testMe($event, 4)" *ngIf="destinataireSelected.role == 'Validateur'" cdkDrag>
                    <img class="ml-1" src="./assets/img/checked.svg">
                    <span>Bouton de validation</span>
                </button>
    
          
            </div>
                <div class="mt-6 flex items-center justify-center gap-x-6 mr-6">
                    <!DOCTYPE html>
                    <html lang="en">
            
                    <body>
                        <div class="w-full pdf-container pt-5">
                     
                            <div id="parentDiv" class="image-pdf mt-10" [style.background-image]="'url('+images[indexPage]+')'" >
                                    <div id="container">
                                    </div>          
                                </div>
                     
                
                            <div class="mt-6 flex items-center justify-center gap-x-6 mr-6">
                                <nz-pagination   [nzPageIndex]="paginationIndex" [nzTotal]="paginationTotal" (nzPageIndexChange)="nextPage($event)"   [nzPageSize]="1"></nz-pagination>
                            </div>
                        </div>
                    </body>
                    </html>
               
                </div>
              
            </div>
            <div class="w-64 mt-6 ...">
                <div class="mt-6 flex gap-x-6 mr-6">
                    <div class="w-full mt-10 contenair-image">
                            <p style="
                            font-size: 12px;
                            font-weight: 700;
                            line-height: 16.37px;
                            ">Page {{paginationIndex}}</p>
                            <div class="mt-6" *ngFor="let item of images; let i=index">
                                <img style="width:auto; height: auto; gap: 0px; opacity: 0px; cursor: pointer;"  [src]="item" (click)="nextPage(i+1)">
                            </div>
                    </div>
                </div>
                
            </div>
    
    
    
        </div>
        <div class="mt-6 flex items-center justify-end gap-x-6">
            <button (click)="executerMethodeParent()"  class="flex mt-5 justify-center px-3 py-3 font-semibold leading-6 text-white shadow-sm justify-self-end" style="color: #07674D; height: 49px; width: 300px; border: #07674D 1px solid; border-radius: 8px; font-size: 16px;" >
                <i nz-icon class="mr-2 mt-1" nzType="arrow-left" nzTheme="outline"></i>
                Revenir à l'étape précédente
             </button>
            <button (click)="isVisibleRecap = true" class="flex mt-5 justify-center px-3 py-3 font-semibold leading-6 text-white shadow-sm justify-self-end" style="background-color: #07674D; height: 49px; width: 280px; border-radius: 8px; font-size: 16px;" >
               CONTINUE
            </button>
        </div>
   

</div>






<nz-modal style="border-radius: 8px;" [(nzVisible)]="isVisible" nzWidth="599px" [nzFooter]="null"  [nzClosable]="false">
    <ng-container *nzModalContent >
      <img src="./assets/img/Success.png">
    </ng-container>
  </nz-modal>



  <nz-modal style="border-radius: 8px;" [(nzVisible)]="isVisibleRecap" nzWidth="860px"  [nzClosable]="false" [nzFooter]="modalFooter">

    <ng-container *nzModalContent>
        <div class="w-full pt-3 pl-5">
            <h1 style="font-weight: 700; line-height: 32px; font-size: 24px;">Récapitulatif de la demande</h1>
            
            <h4 class="description-title mt-6">Type de document :</h4>
            <p class="ml-6 description-p mt-2">{{signataireForm.demande.typeDocument.name}} </p>

            <h4 class="description-title mt-4">Envoyé le :</h4>
            <p class="ml-6 description-p mt-2">Le {{today | date:'yyyy-MM-dd'}} </p>

            <h4 class="description-title mt-4">Date d'expiration :</h4>
            <p class="ml-6 description-p mt-2">Le {{signataireForm.demande.expirationDate | date:'yyyy-MM-dd'}}</p>

            <h4 class="description-title mt-4">Priorité :</h4>
            <p class="ml-6 description-p mt-2">{{signataireForm.demande.priority}} </p>

            <h4 class="description-title mt-4">Statut :</h4>
            <p  class="ml-6 description-p mt-2">En attente</p>

            <h4 class="description-title mt-4">Les destinataires :</h4>
            <div class="sm:col-span-2 mt-5 pr-5">
                <div class="mt-2">
                      <fieldset>
                        <div class="space-y-3">
                          <div class="flex items-center shadow-sm item-label-recap gap-x-3" *ngFor="let item of signataireForm.demande.destinataires, let i = index">
                            <label for="push-everything" class="block font-medium leading-6 text-gray-900" style="width: 100%;">
                                <p>Destinataire : <span class="font-semibold">{{item.email}}</span></p>
                                <p>Type de destination : <span class="font-semibold">{{item.role}}</span></p>
                                <p>Rôle du destinataire : <span class="font-semibold">{{item.envoie}}</span></p>
                            </label>
                          </div>
                   
                        </div>
                      </fieldset>
                </div>
              </div>
              <h4 class="description-title mt-4">Message :</h4>
              <div class="sm:col-span-2 pr-5 w-2/3 ">
                  <p  class="ml-6 description-p mt-2">
                    {{signataireForm.demande.message}}
                  </p>
              </div>
        </div>
    </ng-container>
  
    <ng-template #modalFooter>
        <div class="flex items-center justify-end gap-x-6 mb-3">
            <button (click)="handleCancel()"  class="flex mt-5 justify-center px-3 py-3 font-semibold leading-6 text-white shadow-sm justify-self-end" style="color: #07674D; height: 47px; width: 280px; border: #07674D 1px solid; border-radius: 8px; font-size: 16px;" >
                <i nz-icon class="mr-2 mt-1" nzType="arrow-left" nzTheme="outline"></i>
                Modifier la demande
             </button>
            <button (click)="addDemande()" class="flex mt-5 justify-center px-3 py-3 font-semibold leading-6 text-white shadow-sm justify-self-end" style="background-color: #07674D; height: 47px; width: 280px; border-radius: 8px; font-size: 16px;" >
                Confirmer l’envoi
            </button>
        </div>    
    </ng-template>
  </nz-modal>