Untitled

<body class="">
    <div class="wrapper ">
        <div class="sidebar" data-color="azure" data-image="../assets/img/menu.jpg">

            <div class="logo">
                <!-- <img src="../assets/img/logo.png" style="width: 100px;" alt=""> -->
                <h4 class="card-title text-center">Apps School</h4>
            </div>
            <div class="sidebar-wrapper">
                <div class="container" style="padding-top: 30px;">
                    <div class="card card-profile">
                        <div class="card-avatar">
                            <a href="javascript:;">
                                <img class="img" src="../assets/img/faces/marc.jpg" />
                            </a>
                        </div>
                        <div class="card-body">
                            <h4 class="card-title">Alec Thompson</h4>
                            <h6 class="card-category text-gray">CEO / Co-Founder</h6>


                        </div>
                    </div>
                </div>
                <ul class="nav">

                    <li class="nav-item  ">
                        <a class="nav-link" routerLink="/index">
                            <i class="material-icons">home</i>
                            <p>Dashboard</p>
                        </a>
                    </li>


                    <li class="nav-item ">
                        <a class="nav-link" routerLink="/file-user">
                            <i class="material-icons">people</i>
                            <p>Data Siswa</p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" routerLink="/file-attandance">
                            <i class="material-icons">edit</i>
                            <p>Data Absensi</p>
                        </a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" routerLink="/schedule">
                            <i class="material-icons">book</i>
                            <p>Data Pelajaran</p>
                        </a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="./file_class.html">
                            <i class="material-icons">dashboard</i>
                            <p>Data Kelas</p>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="main-panel">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
                <div class="container-fluid">

                    <div class="navbar-wrapper">
                        <a class="navbar-brand" href="javascript:;">Data Absensi</a>
                    </div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                        <span class="navbar-toggler-icon icon-bar"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end">

                        <ul class="navbar-nav">


                            <li class="nav-item dropdown">
                                <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">notifications</i>
                                    <span class="notification">5</span>
                                    <p class="d-lg-none d-md-block">
                                        Some Actions
                                    </p>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                                    <a class="dropdown-item" href="#">Mike John responded to your email</a>
                                    <a class="dropdown-item" href="#">You have 5 new tasks</a>
                                    <a class="dropdown-item" href="#">You're now friend with Andrew</a>
                                    <a class="dropdown-item" href="#">Another Notification</a>
                                    <a class="dropdown-item" href="#">Another One</a>
                                </div>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="javascript:;" id="navbarDropdownProfile"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">setting</i>
                                    <p class="d-lg-none d-md-block">
                                        Account
                                    </p>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
                                    <a class="dropdown-item" href="#">Profile</a>
                                    <a class="dropdown-item" href="#">Settings</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Log out</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="content">
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">

                                <div class="card-header card-header-primary">
                                    <h2 class="card-title ">Data Absensi</h2>


                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">

                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <input type="text" value="" class="form-control"
                                                        placeholder="Pilih Kelas" data-toggle="dropdown"
                                                        value="{{ classroomName }}"
                                                        href="javascript:;" role="button" aria-haspopup="true"
                                                        aria-expanded="false" readonly>

                                                    <div class="dropdown-menu" style="width: 100%;">
                                                        <a class="nav-link dropdown-toggle"
                                                            *ngFor="let classroom of classroomList"
                                                            class="dropdown-item" href="javascript:;"
                                                            (click)="onChoose(classroom)">
                                                            {{ classroom.classroom_name }}
                                                        </a>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label>Tanggal awal</label>
                                                    <input type="date" class="form-control" name="text"
                                                        [(ngModel)]="startTime" [ngModelOptions]="{ standalone: true}">


                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label>Tanggal akhir
                                                    </label>
                                                    <input type="date" class="form-control" name="text2"
                                                        [(ngModel)]="endTime" [ngModelOptions]="{ standalone: true}">
                                                </div>

                                            </div>
                                            <button type="submit" (click)="showAttandancesByParams()"
                                                class="btn btn-info btn-round ">
                                                Cari
                                                <div class="ripple-container"></div>
                                            </button>
                                        </div>
                                        <div ng-If="taskStatus">
                                            <div class="row">

                                                <div class="col-md-5">
                                                </div>
                                                <div class="col-md-6" style="margin-left: 70px;">

                                                    <button (click)="exportExcel()" class="btn btn-warning btn-round"
                                                        style="float: right !important;" id="recap"> <i
                                                            class="material-icons">print</i>
                                                        Download Excel</button>
                                                </div>
                                            </div>
                                            <table class="table mt-5" id="excel-table">
                                                <tr>
                                                    <th>
                                                        No
                                                    </th>
                                                    <th>
                                                        Nama murid
                                                    </th>
                                                    <th>
                                                        Keterangan
                                                    </th>
                                                    <th>
                                                        Nama guru
                                                    </th>
                                                    <th>
                                                        Tanggal
                                                    </th>
                                                    <th>
                                                        Ruangan/kelas
                                                    </th>
                                                    <th>
                                                        Mata Pelajaran
                                                    </th>

                                                </tr>

                                                <tr *ngFor="let attendance of attendanceList | paginate: { itemsPerPage: 10, currentPage: p }; let i=index">
                                                    <td>
                                                        {{ i + 1 }}
                                                    </td>
                                                    <td>
                                                        {{ attendance.users_name }}
                                                    </td>
                                                    <td class="text-danger" *ngIf="attendance.attandance_status == 2">
                                                        Sakit
                                                    </td>
                                                    <td class="text-warning" *ngIf="attendance.attandance_status == 3">
                                                        Izin
                                                    </td>
                                                    <td>
                                                        {{ attendance.teachers_name }}
                                                    </td>
                                                    <td class="text-dark">

                                                        {{ attendance.attandance_time }}
                                                    </td>
                                                    <td class="text-dark">
                                                        {{ attendance.classroom_name }}
                                                    </td>
                                                    <td class="text-dark">
                                                        {{ attendance.lessons_name }}
                                                    </td>
                                                </tr>

                                            </table>
                                            <div *ngIf="emptyData">
                                                <div class="text-center">

                                                    <img src="../../../assets/img/undraw_empty_xct9.svg" alt=""
                                                        style="width: 250px;">
                                                    <h4 class="text-info">Pilih <strong>kelas</strong> dan
                                                        <strong>tanggal</strong> terlebih
                                                        dahulu</h4>
                                                </div>

                                            </div>
                                            <nav aria-label="Page navigation example" style="float: right;">
                                                <ul class="pagination">

                                                <pagination-controls (pageChange)="p = $event"></pagination-controls>
                                                </ul>
                                            </nav>
                                        </div>


                                        <!-- Modal -->
                                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">Hapus</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        Apakah anda yakin ingin menghapus data ini?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-danger"
                                                            data-dismiss="modal">Hapus</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Close modal -->


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


    </div>
</body>