
<style>
    th,td{padding:6px !important}
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header custom_head">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3>Activity Report</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active">Report</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="card">

            <div class="card-body" >
                <div class="row mb-2">
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-6">
                        <div class="form-group">
                            <input type="text"  class="form-control" id="activity" name="activity" placeholder="Search Activity" autocomplete="off">

                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-2 col-2">
                        <button onclick="addKeywords()" name="" class="btn btn-info" id=""><i class="fas fa-plus"></i></button>

                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="form-group">
                            <select id="sup" class="form-control select2bs4">
                                <option value="all">-Select Supervisor-</option>
                                <?php foreach ($supList as $value) { ?>
                                    <option  value="<?= $value->id; ?>"><?= $value->name; ?> - (<?= $value->username; ?>)</option>
                                <?php } ?>
                            </select>
                        </div>

                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                        <div class="form-group">
                            <select id="dep" class="form-control select2bs4">
                                <option value="all">-Select Department-</option>
                                <?php foreach ($department as $value) { ?>
                                    <option  value="<?= $value->department ?>"><?= $value->department ?></option>
                                <?php } ?>
                            </select>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                        <button onclick="printSheet('report_sheet')" style="float: right" class="btn btn-default"><i class="fa fa-print"></i> Print</button>
                        <button onclick="loadData()" name="" style="float: right;margin-right:5px" class="btn btn-success" id="">Load Report</button>

                    </div>
                </div>
                <div id="report_sheet">
                    <div class="row mb2">
                        <div hidden=""  id="hidden_inputs"></div>
                        <div id="span_list">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="chart1"></div>
                    </div>
                    <div class="row" style="height: 450px">
                        <div class="col-md-8" id="chart2"></div>
                        <div class="col-md-4" id="">
                            <table class="table table-bordered" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Satisfaction level</th>
                                        <th>Emp Cout</th>
                                    </tr>
                                </thead>
                                <tbody id="Satisfaction_body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /.card-body -->
            <!--            <div class="card-footer">
                            Footer
                        </div>-->
            <!-- /.card-footer-->
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<div class="modal fade" id="model1" id="modal-default" style="display: none;"  aria-hidden="true" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Employee List</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="model1_body">

            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!--              <button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.content-wrapper -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="<?php echo base_url("assets/customJs/activity_report.js") ?>"></script>


