<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        width: 16% !important;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .table-responsive {
        overflow-x: visible; 
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('view_ntf'); ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3 dateFilterDiv">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <div class="form-group input-group width-230">
                        <span class="input-group-addon bg-success facalender"><i class="fa fa-calendar"></i></span>
                        <input id="Calender_Date_Filter" name="Calender_Date_Filter" class="form-control calenderInput">
                    </div>
                </div>
                <div class="col-md-3 ">
                    <label><?php echo CommonLanguage::getMessage('type') ?></label>
                    <div class="form-group input-group width-230">
                        <span class="input-group-addon bg-success "><i class="fa fa-search"></i></span>
                        <select class="full-width filter_type" id="filter_type" data-init-plugin="select2">
                            <option value=""  selected><?php echo CommonLanguage::getMessage('select') ?></option>
                            <!--<option value="sec"><?php echo CommonLanguage::getMessage('sec') ?></option>-->
                            <!--<option value="tr"><?php echo CommonLanguage::getMessage('training') ?></option>-->
                            <!--<option value="exam"><?php echo CommonLanguage::getMessage('exam') ?></option>-->
                            <option value="annoucement"><?php echo CommonLanguage::getMessage('annoucement') ?></option>
                            <option value="absence"><?php echo CommonLanguage::getMessage('absence') ?></option>
                            <option value="leave"><?php echo CommonLanguage::getMessage('leave') ?></option>
                            <option value="deduction"><?php echo CommonLanguage::getMessage('deduction') ?></option>
                            <option value="overtime"><?php echo CommonLanguage::getMessage('overtime') ?></option>
                            <option value="advance"><?php echo CommonLanguage::getMessage('advance_payment') ?></option>
                            <!--<option value="Know"><?php echo CommonLanguage::getMessage('Knowledge') ?></option>-->
                            <!--<option value="doc"><?php echo CommonLanguage::getMessage('documentation') ?></option>-->
                        </select>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <label><?php echo CommonLanguage::getMessage('status') ?></label>
                    <div class="form-group input-group width-230">
                        <span class="input-group-addon bg-success "><i class="fa fa-book"></i></span>
                        <select class="full-width read_ntf" id="read_ntf" data-init-plugin="select2">
                            <option value="0" selected><?php echo CommonLanguage::getMessage('unread') ?></option>
                            <option value="1"><?php echo CommonLanguage::getMessage('read') ?></option>
                            <option value="2"><?php echo CommonLanguage::getMessage('finish') ?></option>
                            <option value="3" ><?php echo CommonLanguage::getMessage('All') ?></option>
                        </select>
                    </div>
                </div>



                <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                    <thead>
                    <th  class="text-center"><?php print CommonLanguage::getMessage('ntf_name'); ?></th>
                    <th  class="text-center"><?php print CommonLanguage::getMessage('type'); ?></th>
                    <th  class="text-center"><?php print CommonLanguage::getMessage('Date'); ?></th>
                    <th  class="text-center"><?php print CommonLanguage::getMessage('Action'); ?></th>



                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<div class="modal fade bs-example-modal-md" id="modal_ntf" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:50%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('view_ntf_details'); ?></h4>

            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="col-md-12" style="margin-top: 20px;">
                                <p> <strong class="Name"></strong> </p>
                                <div class="row Details">

                                </div>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " id="close_modal" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
            </div>
        </div>
    </div>
</div>




<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('view_ntf')) ?>,
            tr = <?php echo json_encode(CommonLanguage::getMessage('tr')) ?>,
            exam = <?php echo json_encode(CommonLanguage::getMessage('exam')) ?>,
            from_date = <?php echo json_encode($from_date) ?>,
            to_date = <?php echo json_encode($to_date) ?>,
            doc = <?php echo json_encode(CommonLanguage::getMessage('doc')) ?>;
    $(function () {

        $('#Calender_Date_Filter').daterangepicker({
            autoApply: true,
            singleDatePicker: false,
            showDropdowns: true,
            locale: {format: 'YYYY-MM-DD'},
            startDate: from_date,
            endDate: to_date,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            startDate = start.format('YYYY-MM-DD');
            endDate = end.format('YYYY-MM-DD');
        });
        changeRequest();
        $('#filter_type,#Calender_Date_Filter,#read_ntf').on('change', function () {
            changeRequest();
        });
        function changeRequest() {
            var Data = {
                filter_type: $('#filter_type').val(),
                filter_date: $('#Calender_Date_Filter').val(),
                read_ntf: $('#read_ntf').val()
            }
            RebuildDataTable(title, [0, 1, 2], 'HRMAjax/viewNtfsrequest', {Data});
        }

        $('#tableWithSearch tbody').on('click', '.finish', function () {
            var task_id = $(this).attr('data-id');
            $.ajax({
                url: 'HRMAjax/doneStatusTaskRequest',
                data: {task_id: task_id},
                complete: function (v1, v2) {
                    if (v2 == 'success') {
                        changeRequest();
                    }
                }
            });

        });



        $('#tableWithSearch tbody').on('click', '.view', function () {
            var task_id = $(this).attr('data-id'),
                    task_status = $(this).attr('task_status'),
                    main_id = $(this).attr('main_id'),
                    main_type = $(this).attr('main_type');
            task_status = (task_status == 0 ? 1 : task_status);
            $.ajax({
                url: 'HRMAjax/updateStatusTaskRequest',
                data: {task_id: task_id, task_status: 1}
            });
            if (main_type == 'tr' || main_type == 'exam' || main_type == 'doc') {
                $('#modal_ntf').modal('show');
                $.ajax({
                    url: 'HRMAjax/getNtfDetailsRequest',
                    dataType: "json",
                    data: {main_id: main_id, main_type: main_type},
                    complete: function (v1, v2) {
                        if (v2 == 'success') {
                            var Data = v1.responseJSON;
                            var Details = "";
                            var name = main_type == 'tr' ? tr : (main_type == 'exam' ? exam : doc);
                            $("#modal_ntf").find(".Name").text(name);
                            if (main_type == 'tr' || main_type == 'exam') {
                                for (var i = 0; i < Data.length; i++) {
                                    Details += "<p>" + Data[i]['date_set'] + " / " + Data[i]['from_time'] + "  " + Data[i]['to_time'] + "</p>";
                                }
                            } else {
                                Details += "<p>" + Data[0]['date_set'] + " </p> <p>" + Data[0]['from_time'] + " <a target='_blank' href='" + site_link + "uploads/AllDocuments/" + Data[0]['to_time'] + "'><i class='fa fa-eye'></i></a></p>";
                            }
                            $("#modal_ntf").find(".Details").append(Details);
                        } else {
                            alert('error');
                        }
                    }
                });
            }

        });
        $('button[data-dismiss="modal"]').on('click', function () {
            setTimeout(function () {
                $("#modal_ntf").find(".Details").empty();
                ;
            }, 1000);
        });
    });

</script>

