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="advertisiment">
                <img src="{{ authSer.pathImg + advertisiment.photo }}" />
            </div>

            <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-lg-6 col-md-12 col-sm-4 col-xs-12 editRowPadding-w" *ngFor="let service of externalServices">
                                    <a class="hyperLink" (click)="onGetService(service)">
                                        <div class="serviceItem-w">
                                            <img src="{{authSer.pathImg + service.photo}}" title="TITLE NEED SHOW ON HOVER"/>
                                            <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"> 
                                <div *ngIf="reportsData.length > 1"> 
                                    <ngb-carousel #myCarousel="ngbCarousel">
                                        <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
                                            <img [src]="authSer.pathImg + report.photo.photo" alt="Random first slide">
                                            <div class="carousel-caption">
                                            <h4>{{report.title}}</h4>
                                            <p class="paragraphTemplate-w" [innerHTML] = "report.description"> </p>
                                            <span class="extra d-none d-sm-none d-md-block hvr-grow" *ngIf="report.description" (click)="onExtraPage(report.id)"> تفاصيل الخبر</span>
                                            <span class="allNews d-none d-sm-none d-md-block hvr-grow" (click)="getAllNews()" *ngIf="report.description"> المزيد من الأخبار</span>
                                            </div>
                                        </ng-template>
                                    </ngb-carousel>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
                       

            <div class="eventPart-w">
                <div class="container containerPaddingEdit-w">
                    <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"/>  يعرض الأن :<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 containerPaddingEdit-w">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-4 editRowPadding-w">
                            <div class="joinUs-w">

                                <div class="joinHeader-w">
                                    إنضم إلينا
                                </div>

                                <div class="joinHeading-w">
                                    <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
                                </div>

                                <div class="dataContent">
                                    <div class="row">                                         
                                        <div id="demo" class="carousel slide" data-ride="carousel">
                                            <ul class="carousel-indicators">
                                                <li *ngFor="let join of joinUs; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                            </ul>
                                            <div class="carousel-inner">
                                                <div class="carousel-item" *ngFor="let join of joinUs; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                                    <div class="carousel-caption">
                                                        <img src="{{authSer.pathImg + join.photo}}" />
                                                        <p><span>{{join.name}}</span></p>
                                                        <p>  <span>{{join.adminstration_name ? join.adminstration_name : 'not found'}}</span></p>
                                                        <p> <span>{{join.date_of_employment_hij ? join.date_of_employment_hij : 'not found'}}</span></p>
                                                    </div>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-12 col-md-8 editRowPadding-w">
                            <div class="sharingEvent-w">
                                <div class="sharingHeader-w">
                                    <h2>مشاركه اللحظات</h2>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6" style="padding-left:5px">
                                        <div class="congeratolation">
                                            <h2>التهانى</h2>
                                        </div>
                                        <div class="content">
                                            <div id="demo1" class="carousel slide" data-ride="carousel">
                                                <ul class="carousel-indicators">
                                                    <li *ngFor="let conga of congratulations; let i = index" data-target="#demo1" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                                </ul>
                                                <div class="carousel-inner">
                                                    <div class="carousel-item" *ngFor="let conga of congratulations; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                                        <div class="carousel-caption">
                                                            <p><span>{{conga.employee_name}}</span></p>
                                                            <p class="event">{{conga.name}}</p>
                                                            <p>{{conga.created_at}}</p>
                                                        </div>   
                                                    </div>
                                                </div>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6" style="padding-right:5px">
                                        <div class="sadDead-w">
                                            <h2>التعازى</h2>
                                        </div>
                                        <div class="content">    
                                            <div id="demo2" class="carousel slide" data-ride="carousel">
                                                <ul class="carousel-indicators">
                                                    <li *ngFor="let cond of condolences; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                                </ul>
                                                <div class="carousel-inner">
                                                    <div class="carousel-item" *ngFor="let cond of condolences; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                                        <div class="carousel-caption">
                                                            <p><span>{{cond.employee_name}}</span></p>
                                                            <p class="event">{{cond.name}}</p>
                                                            <p>{{cond.created_at}}</p>
                                                        </div>   
                                                    </div>
                                                </div>
                                            </div>  
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         
            <div class="secondServices-w">
                <div class="container containerPaddingEdit-w" style="height:560px; overflow-y:auto">
                    <div class="row" style="padding:0 10px;">
                        <div class="col-12 col-sm-12 col-md-6 col-lg-4 editRowPadding-w" *ngFor="let ser of internalService">
                            <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-lg-4 col-md-4 col-sm-4 col-xs-4"  *ngFor="let field of ser['fields']">
                                            <a [attr.href]=" field.apperance == 1 ? field.link : '#' " [className]=" field.apperance == 1 ? '' : 'notAllowed-w' " style="text-decoration:none">
                                                <div class="fieldData-w text-center">
                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 0 ? '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 containerPaddingEdit-w">
                    <div class="row">
                        
                        <div class="col-12 col-md-12 col-lg-8 editRowPadding-w">
                            <div class="lastTab-w">
                                <div class="headerTab-w">
                                    أخر التعاميم
                                </div>
                                <div class="menuTab-w">
                                    <ul class="list-unstyled">
                                        <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}">التعاميم الداخليه</li>
                                        <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">التعاميم الخارجيه</li>
                                        <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">السياسات</li>
                                    </ul>
                                </div>
                                <div class="menuTabContent-w">
                                    <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
                                    <ol>
                                        <li *ngFor="let data of tabsData">
                                            {{data.name}}
                                            <span style="margin: 0 50px;">( {{data.created_at}} )</span>
                                            <button class="btn btn-default" *ngIf="data.file" type="button" style="position: absolute; background:transparent; border:none; left:45px"> <a href="{{authSer.pathImg + data.file}}" target="_blank"><i class="fas fa-download"></i></a> </button>
                                        </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 editRowPadding-w">
                            <div class="recods">
                                <div class="headerRecords-w">
                                    إحصائيات عامه - إنجازات
                                </div>
                                <div id="accordion">
                                    <div class="card" *ngFor="let achiev of achievements; let i = index">
                                        <div class="card-header" [attr.id]="'heading'+(i+1)">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                                <h4 class="panel-title">{{achiev.title}}</h4>
                                                </button>
                                            </h5>
                                        </div>
                                    
                                        <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                            <div class="card-body testBody-w">
                                                <p [innerHTML]="achiev.description"></p>
                                            </div>
                                        </div>
                                    </div>
                                </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">
                <div class="advertisiment">
                    <img src="{{ authSer.pathImg + advertisiment.photo }}" />
                </div>
            </div>
            
            <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 editRowPadding-w" *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" *ngIf="reportsData.length > 1">
                <ngb-carousel>
                    <ng-template *ngFor="let report of reportsData" ngbSlide>
                    <img src="{{authSer.pathImg + report.photo.photo}}" alt="Random first slide">
                    <div class="carousel-caption">
                        <h4>{{report.title_en}}</h4>
                        <p class="paragraphTemplate-w" [innerHTML] = "report.description_en"></p>
                        <a class="extra d-none d-sm-none d-md-block hvr-grow" (click)="onExtraPage(report.id)" style="left:15px;">Read More</a>
                        <span class="allNews d-none d-sm-none d-md-block hvr-grow" (click)="getAllNews()" *ngIf="report.description"> More From News </span>
                    </div>
                    </ng-template>
                </ngb-carousel>
                </div>
            </div>

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

        <div class="eventPart-w" style="direction:ltr">
            <div class="container" style="padding-left: 5px;">
                <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"/>   Live Now :<span>{{live_event ? live_event.name : ' now event'}}</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'}}</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" style="padding-left:5px;">
            <div class="row">
            <div class="col-12 col-sm-12 col-md-4 editRowPadding-w">
                <div class="joinUs-w" style="float:right"  [className]="authSer.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 id="demo" class="carousel slide" data-ride="carousel">
                                <ul class="carousel-indicators">
                                    <li *ngFor="let join of joinUs; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                </ul>
                                <div class="carousel-inner">
                                    <div class="carousel-item" *ngFor="let join of joinUs; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                        <div class="carousel-caption">
                                            <img src="{{authSer.pathImg + join.photo}}" />
                                            <p> Employee : <span>{{join.name_en}}</span></p>
                                            <p>  Date : <span>{{join.date_of_employment_hij ? join.date_of_employment_hij : 'not found'}}</span></p>
                                        </div>   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-8 editRowPadding-w">
                <div class="sharingEvent-w"  style="float:left">
                    <div class="sharingHeader-w">
                        <h2>Share moments</h2>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6" style="padding-right:5px">
                            <div class="congeratolation">
                                <h2>Congratulations</h2>
                            </div>
                            <div class="content">     
                                <div id="demo1" class="carousel slide" data-ride="carousel">
                                    <ul class="carousel-indicators">
                                        <li *ngFor="let conga of congratulations; let i = index" data-target="#demo1" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                    </ul>
                                    <div class="carousel-inner">
                                        <div class="carousel-item" *ngFor="let conga of congratulations; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                            <div class="carousel-caption">
                                                <p>Employee : <span>{{conga.employee_name_en}}</span></p>
                                                <p class="event">{{conga.name_en}}</p>
                                                <p>{{conga.created_at}}</p>
                                            </div>   
                                        </div>
                                    </div>
                                </div>    
                            </div>
                        
                        </div>
                        <div class="col-12 col-md-6" style="padding-left:5px">
                            <div class="sadDead-w">
                                <h2>Condolences</h2>
                            </div>
                            <div class="content">     
                                <div id="demo2" class="carousel slide" data-ride="carousel">
                                    <ul class="carousel-indicators">
                                        <li *ngFor="let cond of condolences; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
                                    </ul>
                                    <div class="carousel-inner">
                                        <div class="carousel-item" *ngFor="let cond of condolences; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                                            <div class="carousel-caption">
                                                <p>Employee : <span>{{cond.employee_name_en}}</span></p>
                                                <p class="event">{{cond.name_en}}</p>
                                                <p>{{cond.created_at}}</p>
                                            </div>   
                                        </div>
                                    </div>
                                </div>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="secondServices-w">
                <div class="container" style="height:560px; overflow-y:auto; padding-left:5px">
                    <div class="row" style="padding:0 10px;">
                        <div class="col-12 col-sm-6 col-md-4 editRowPadding-w" *ngFor="let ser of internalService">
                            <div class="contentSecondSer-w" style="float:left;">
                                <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 && authSer.isAuthenticated() ? 'iconeActive' : 'defaultIconn-w' " />
                                                    <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" style="float-left:5px;">
                <div class="row">
                    <div class="col-12 col-md-8 editRowPadding-w">
                    <div class="lastTab-w">
                        <div class="headerTab-w">
                            Latest Circulars
                        </div>
                        <div class="menuTab-w">
                        <ul class="list-unstyled">
                            <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}"> Internal Circulars</li>
                            <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">External Circulars</li>
                            <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">Policies</li>
                        </ul>
                        </div>
                        <div class="menuTabContent-w">
                        <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
                        <ol [className]="authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
                            <li *ngFor="let data of tabsData">
                                {{data.name_en}}
                                <span style="margin: 0 50px;">( {{data.created_at}} )</span>
                                <button class="btn btn-default" *ngIf="data.file" type="button" style="position: absolute; background:transparent; border:none; right:45px"> <a href="{{authSer.pathImg + data.file}}" target="_blank"><i class="fas fa-download"></i></a></button>
                            </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 editRowPadding-w">
                    <div class="recods">
                        <div class="headerRecords-w">
                            General Statistics - Achievements
                        </div>
                        <div class="recordsContent-w">
                            <div id="accordion">
                                <div class="card" *ngFor="let achiev of achievements; let i = index">
                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
                                        <h4 class="panel-title">{{achiev.title_en}}</h4>
                                        </button>
                                    </h5>
                                    </div>
                                
                                    <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
                                    <div class="card-body testBody-w">
                                        <p [innerHTML]="achiev.description_en" style="text-align:left !important"></p>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>

          
        </div>
        </div>
     </div>
    </div>
</ng-template>