kfmc_website/src/app/Internal-Page/internal-page-content/internal-page-content.component.html

<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">  
    <div class="container">
            <div class="contentPage-w">
                    <div class="servicesContent-w">
                            <div class="container">
                                <div class="row">
                                    
                                    <div class="col-12 col-md-4">
                                        <div class="row">
                                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
                                                <div class="serviceItem-w">
                                                    <a href="{{service.link}}" target="_blank"><img src="{{authSer.pathImg + service.photo}}" />
                                                        <p>{{service.name}}</p>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    
                                    <div class="col-12 col-md-8">
                                        <div class="slider">
                                                
                                            <ngb-carousel #myCarousel="ngbCarousel">
                                                <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
                                                    <img [src]="[authSer.pathImg + report.photo]" alt="Random first slide">
                                                    <div class="carousel-caption">
                                                    <p [innerHTML] = "report.description"></p>
                                                    <a class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</a>
                                                    </div>
                                                </ng-template>
                                            </ngb-carousel>
                                        </div>
                                    </div>
                    
                                </div>
                            </div>
                        </div>
                            
                        <div class="eventPart-w">
                            <div class="container">
                                <div class="event">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 ol-md-4">
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-4">
                                            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-4">
                                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-4">
                                            <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            
                        <div class="contentsData-w">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12 col-sm-12 col-md-4">
                                        <div class="joinUs-w">
                                            <div class="joinHeader-w">
                                                إنضم إلينا
                                            </div>
                                            <div class="joinHeading-w">
                                                <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
                                            </div>
                                            <div class="dataContent">
                                                <div class="row">
                                                    <div class="col-12 col-md-4">
                                                        <div class="joinUs-photo">
                                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-8">
                                                        <div class="profileData-w">
                                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
                                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
                                                            <p>   التاريخ :<span>{{joinUs.created_at}}</span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="col-12 col-md-8">
                                        <div class="sharingEvent-w">
                                            <div class="sharingHeader-w">
                                                <h2>مشاركه اللحظات</h2>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="congeratolation">
                                                        <h2>التهانى</h2>
                                                    </div>
                                                    <div class="content">
                                                        <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
                                                        <p class="event">{{congratulations.name}}</p>
                                                        <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-6">
                                                    <div class="sadDead-w">
                                                        <h2>التعازى</h2>
                                                    </div>
                                                    <div class="content">
                                                        <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
                                                        <p class="event">{{condolences.name}}</p>
                                                        <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                            
                        <div class="secondServices-w">
                            <div class="container" style="height:560px; overflow-y:auto">
                                <div class="row">
                                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
                                        <div class="contentSecondSer-w">
                                            <div class="headerSer-w">
                                                {{ser.name}}
                                            </div>
                                            <div class="contentSer" style="overflow:auto; overflow-x:hidden">
                                                <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
                                                    <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
                                                        <div class="fieldData-w text-center">
                                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
                                                            <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            
                        <div class="tabs">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12 col-md-8">
                                        <div class="lastTab-w">
                                            <div class="headerTab-w">
                                                أخر التعاميم
                                            </div>
                                            <div class="menuTab-w">
                                                <ul class="list-unstyled">
                                                    <li (click)="onGetData(0)">التعاميم الداخليه</li>
                                                    <li (click)="onGetData(1)">التعاميم الخارجيه</li>
                                                    <li (click)="onGetData(2)">السياسات</li>
                                                </ul>
                                            </div>
                                            <div class="menuTabContent-w">
                                                <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
                                                <ol>
                                                    <li *ngFor="let data of tabsData">{{data.name}}</li>
                                                </ol>
                                                <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="recods">
                                            <div class="headerRecords-w">
                                                إحصائيات عامه - إنجازات
                                            </div>
                                            <div class="recordsContent-w">
                                                <ol>
                                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
                                                        <p>{{achiev.title}}</p>     
                                                        <div *ngIf="i == expandedIndex">  
                                                            <div class="collapse">  
                                                                <div>  
                                                                    <p>{{achiev.title}}</p>  
                                                                    <p>{{achiev.descripton}}</p>  
                                                                </div>  
                                                            </div>  
                                                        </div>                                  
                                                    </li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        </div>
    </div> 

</ng-template>

    


<ng-template #englishTemplate>
  <div class="servicesContent-w">
    <div class="container">
      <div class="row">

        <div class="col-12 col-md-4">
          <div class="row">
            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
              <div class="serviceItem-w">
                <a href="{{service.link}}" target="_blank">
                  <img src="{{authSer.pathImg + service.photo}}" />
                  <p>{{service.name_en}}</p>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-8">
          <div class="slider">
            <ngb-carousel>
              <ng-template *ngFor="let report of reportsData" ngbSlide>
                <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
                <div class="carousel-caption">
                  <p [innerHTML] = "report.description_en"></p>
                  <a class="extra" (click)="onExtraPage(report.id)">More</a>
                </div>
              </ng-template>
            </ngb-carousel>
          </div>
        </div>

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

  <div class="eventPart-w">
    <div class="container">
      <div class="event">
        <div class="row">
          <div class="col-12 col-sm-12 ol-md-4">
          </div>
          <div class="col-12 col-sm-12 col-md-4">
            <p class="now"> <img src="../../../assets/image/live.png" style="margin-left:20px;"/>   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
          </div>
          <div class="col-12 col-sm-12 col-md-4">
            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
          </div>
            <div class="col-12 col-sm-12 col-md-4">
                <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> Lecture Table</p>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="contentsData-w">
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-4">
          <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
            <div class="joinHeader-w">
              Join Us
            </div>
            <div class="joinHeading-w">
              <h2>Welcome to join the medical center</h2>
            </div>
            <div class="dataContent">
              <div class="row">
                <div class="col-12 col-md-4">
                  <div class="joinUs-photo">
                    <img src="{{authSer.pathImg + joinUs.photo}}" />
                  </div>
                </div>
                <div class="col-12 col-md-8">
                  <div class="profileData-w">
                    <p> Employee : <span>{{joinUs.name_en}}</span></p>
                    <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
                    <p> Date : <span>{{joinUs.created_at ? joinUs.created_at : 'not found'}}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-8">
          <div class="sharingEvent-w">
            <div class="sharingHeader-w">
              <h2>Share moments</h2>
            </div>
            <div class="row">
              <div class="col-12 col-md-6">
                <div class="congeratolation">
                  <h2>Congratulations</h2>
                </div>
                <div class="content">
                  <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
                  <p class="event">{{congratulations.name_en}}</p>
                  <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="sadDead-w">
                  <h2>Condolences</h2>
                </div>
                <div class="content">
                  <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
                  <p class="event">{{condolences.name_en}}</p>
                  <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="secondServices-w">
                <div class="container" style="height:560px; overflow-y:auto">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
                            <div class="contentSecondSer-w">
                                <div class="headerSer-w">
                                    {{ser.name_en}}
                                </div>
                                <div class="contentSer" style="overflow:auto; overflow-x:hidden">
                                    <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
                                        <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
                                            <div class="fieldData-w text-center">
                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
                                                <p style="color:#767676; font-size:13px;">{{field.name_en ? field.name_en : 'إضافه خدمه'}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
       <div class="tabs">
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-8">
                <div class="lastTab-w">
                  <div class="headerTab-w">
                      Latest Circulars
                  </div>
                  <div class="menuTab-w">
                    <ul class="list-unstyled">
                        <li (click)="onGetData(0)"> Internal Circulars</li>
                        <li (click)="onGetData(1)">External Circulars</li>
                        <li (click)="onGetData(2)">Policies</li>
                    </ul>
                  </div>
                  <div class="menuTabContent-w">
                    <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
                    <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
                        <li *ngFor="let data of tabsData">{{data.name_en}}</li>
                    </ol>
                    <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px; border:none;">more</button>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="recods">
                    <div class="headerRecords-w">
                        General Statistics - Achievements
                    </div>
                    <div class="recordsContent-w">
                      <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
                        <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
                            <p>{{achiev.title_en}}</p>     
                            <div *ngIf="i == expandedIndex">  
                                <div class="collapse">  
                                    <div>  
                                        <p>{{achiev.title_en}}</p>  
                                        <p>{{achiev.descripton_en}}</p>  
                                    </div>  
                                </div>  
                            </div>                                  
                        </li>
                      </ol>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>