@include('layouts.header');
@include('layouts.sidebar');


{{-- <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.5/api/sum().js"></script> --}}


<!--<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>-->


<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>


{{-- 
<link rel="stylesheet" href="assets/vendor/excel_datatable/buttons.dataTables.min.css" />
<script src="assets/vendor/excel_datatable/jszip.min.js"></script>
<script src="assets/vendor/excel_datatable/buttons.html5.min.js"></script>
<script src="assets/vendor/excel_datatable/dataTables.buttons.min.js"></script> --}}

<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />



<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>

<!--<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<script src="assets/vendor/timepicker/jquery.timepicker.min.js"></script>
-->


<style>
    /*fixed header datatable css*/
    table.fixedHeader-floating {
        background-color: white
    }

    table.fixedHeader-floating.no-footer {
        border-bottom-width: 0
    }

    table.fixedHeader-locked {
        position: absolute !important;
        background-color: white
    }

    @media print {
        table.fixedHeader-floating {
            display: none,

        }
    }

    */
    /*excel export*/



    /* div.dt-buttons {

        float: right;
        top: -60px;
    }

    .dataTables_wrapper .dataTables_filter {

        margin-right: -45px;
    }

    button.dt-button,
    div.dt-button,
    a.dt-button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        margin-right: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        font-size: 0;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        background-color: #e9e9e900;
        background-image: -webkit-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -moz-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -ms-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: -o-linear-gradient(top, #e9e9e900 0%, #e9e9e900 100%);
        background-image: linear-gradient(to bottom, #e9e9e900 0%, #e9e9e900 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#e9e9e900', EndColorStr='#e9e9e900');
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-decoration: none;
        outline: none;
    }

    .row-odd {
        border-radius: 2px;
        background: #9631312b;
        padding: 5px;
    }

    .row-even {
        border-radius: 2px;
        background: #9631315e;
        padding: 5px;
    }

    .button {
        background-color: #963131;
        color: white;
        text-align: center;
        font-size: 12px;
        padding-top: 3px;

    } */

    /* .button:hover {
        background-color: antiquewhite;
        color: #963131;
    }

    button:hover {
        background-color: white;
    } */

    /* .chart-area11 {
    margin-top: 0px;
    width: 498px;
    display: block;
    box-sizing: border-box;
    height: 325.6px;
    margin-left: -92px;
  } */

    .filter {
        width: 165px;
    }

    .ui-datepicker {
        width: 300px;
        height: 0px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
        /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/

    }

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;

    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    .ui-timepicker-standard a {
        border: 1px solid #d4d4d4;
        color: #ffffff;
        display: block;
        padding: 0.2em 0.4em;
        text-decoration: none;
        background-color: #963131;
    }

    /* .ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    background-color: #963131;
} */

    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    .ui-datepicker-calendar {
        display: none !important;
    }




    .export_excel {
        float: right;
        margin-top: -54px;
    }


    @media screen and (max-width: 640px) {
        div.dt-buttons {
            float: right !important;
            text-align: center;
        }
    }


    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }


    }

    #rhi_report_length,
    #rhi_report_filter {
        padding: 5px;
    }

    #rhi_report_filter {
        margin-right: -13px !important;
    }

    /* .kpt_report {
        display: none;
    } */

    .export {
        float: right;
        margin-top: -50px;
        border: 0;
        background-color: white;
        color: #963131;
        display: none;
    }

    /* table,
    th,
    td {
        border: 1px solid black;
    } */


    .table_head {
        font-weight: bold;
    }

    .dt-buttons {
        display: none !important;
    }
</style>

<body>
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">

    </div>
    @include ('layouts.head')


    <main id="main" class="main">

        <div class="card">
            <div class="card-body">