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 order-2 order-sm-2 order-md-1">
                            <div class="row">
                                <div class="col-6 col-md-6" *ngFor="let service of externalServices">
                                    <a class="hyperLink" href="{{service.link}}">
                                        <div class="serviceItem-w">
                                            <img src="{{authSer.pathImg + service.photo}}" />
                                            <p>{{service.name}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
                            <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 class="paragraphTemplate-w" [innerHTML] = "report.description"></p>
                                        <span class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</span>
                                        </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 col-md-12 col-lg-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-12 col-lg-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-12 col-lg-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-12 col-lg-4">
                                            <div class="joinUs-photo">
                                                <img src="{{authSer.pathImg + joinUs.photo}}" />
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-12 col-lg-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']">
                                          <a href="{{ field.apperance == 1 ? field.link : '' }}" style="text-decoration:none">
                                            <div class="fieldData-w text-center">
                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 1 ? 'iconeActive' : ''" />
                                                <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                            </div>
                                          </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tabs">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-md-12 col-lg-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-12 col-lg-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="container">
  <div class="contentPage-w">
    <div class="servicesContent-w" style="direction:ltr">
      <div class="container">
        <div class="row">

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

          <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
            <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 class="paragraphTemplate-w" [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" style="direction:ltr">
      <div class="container">
        <div class="event">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-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-12 col-lg-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-12 col-lg-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" style="direction:ltr">
      <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-12 col-lg-4">
                    <div class="joinUs-photo">
                      <img src="{{authSer.pathImg + joinUs.photo}}" />
                    </div>
                  </div>
                  <div class="col-12 col-md-12 col-lg-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']">
                                            <a href="{{ field.apperance == 1 ? field.link : '' }}" style="text-decoration:none">
                                              <div class="fieldData-w text-center">
                                                  <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 1 ? 'iconeActive' : ''" />
                                                  <p style="color:#767676; font-size:13px;">{{field.name_en ? field.name_en : 'إضافه خدمه'}}</p>
                                              </div>
                                            </a>
                                          </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>
  </div>
</div>
</ng-template>