<?php /* var_dump($permission); */ ?>
<?php (empty($permission) ? redirect(base_url("error404")) : ""); ?>
<?php if (!empty($this->app->is_can($permission, "view"))) { /* Can View */ ?>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <!-- Toastr -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/toastr/toastr.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/datatables-buttons/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/datatables-rowreorder/css/rowReorder.bootstrap4.min.css">
    <!-- Bootstrap-Switch  & Plugins -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>vendor/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">

    <style>
        .btn-xs {
            height: 22px;
            padding: 2px 5px;
            font-size: 12px;
            line-height: 1.5;
            /* If Placeholder of the input is moved up, rem/modify this. */
            border-radius: 3px;
        }

        .table td,
        .table th {

            font-size: 13px;
        }

        th.dt-center,
        td.dt-center {
            width: 5px;
            text-align: center;
        }

        th.dt-active,
        td.dt-active {
            width: 15px;
            text-align: center;
        }
    </style>

    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->

    <div class="col-12 pt-3">
        <div class="table-responsive m-t-40">
            <table id="mTable" class="table table-bordered table-striped table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>วันทำรายการ</th>
                        <th>ชื่อพนักงาน</th>
                        <th>ฝ่าย</th>
                        <th>ประเภท</th>
                        <th>ช่วงวันลา/วัน</th>
                        <th>สถานะ</th>
                        <th class="IsActive IsNotSort text-center"><i class="fa fa-eye"></i></th>
                        <?php if ($this->app->is_can($permission, "edit")) { ?>
                            <th class="IsNotSort text-center"><i class="fas fa-edit"></i></th>
                        <?php } ?>
                        <?php if ($this->app->is_can($permission, "approve")) { ?>
                            <th class="IsNotSort text-center"><i class="fas fa-sitemap"></i></th>
                        <?php } ?>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">ดูข้อมูล</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-xs btn-default" data-dismiss="modal">ยกเลิก</button>
                        <button type="submit" class="btn btn-xs btn-primary">บันทึก</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php if ($this->app->is_can($permission, "edit")) { ?>
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
            <form id="editForm" method="post" action="<?php echo base_url('leave/manage/edit'); ?>">
                <input type="hidden" name="id">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">แก้ไข</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-xs btn-default" data-dismiss="modal">ยกเลิก</button>
                            <button type="submit" class="btn btn-xs btn-primary">บันทึก</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal -->
    <?php } ?>

    <?php if ($this->app->is_can($permission, "approve")) { ?>
        <div class="modal fade" id="approveModal" tabindex="-1" role="dialog">
            <form id="approveForm" method="post" action="<?php echo base_url('leave/manage/approve'); ?>">
                <input type="hidden" name="id">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">อนุมัติ</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-xs btn-default" data-dismiss="modal">ยกเลิก</button>
                            <button type="submit" class="btn btn-xs btn-primary">บันทึก</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal -->
    <?php } ?>

    <!-- jQuery -->
    <script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="<?php echo base_url(); ?>vendor/jquery-ui/jquery-ui.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="<?php echo base_url(); ?>vendor/sweetalert2/sweetalert2.min.js"></script>
    <!-- DataTables  & Plugins -->
    <script src="<?php echo base_url(); ?>vendor/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/datatables-rowreorder/js/rowReorder.bootstrap4.min.js"></script>
    <!-- Bootstrap-Switch  & Plugins -->
    <script src="<?php echo base_url(); ?>vendor/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <!-- jquery-validation -->
    <script src="<?php echo base_url(); ?>vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="<?php echo base_url(); ?>vendor/jquery-validation/additional-methods.min.js"></script>

    <script type="text/javascript">
        var timestamp = '<?php echo $timestamp; ?>';
        var mTable;
        ! function(window, document, $) {
            "use strict";

            mTable = $('#mTable').DataTable({
                "colReorder": {
                    "realtime": true
                },
                "orderable": false,
                "autoWidth": false,
                //"pageLength": 10,
                "processing": true,
                "pageLength": 10,
                "stateSave": true,
                stateSaveCallback: function(settings, data) {
                    localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data))
                },
                stateLoadCallback: function(settings) {
                    return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
                },
                "language": {
                    "url": "<?php echo base_url() ?>vendor/datatables/th.json",
                    "headers": {
                        "Access-Control-Allow-Origin": "*"
                    },
                    searchPlaceholder: "<?php echo strip_tags(@$var->txt_search); ?>",
                },
                "ajax": "<?php echo base_url('leave/manage/ajax_list'); ?>",
                "deferRender": true,
                "aLengthMenu": [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                "columns": [{
                        "data": "created_at"
                    },
                    {
                        "data": {
                            "id": "id",
                            "title_name": "title_name",
                            "user_fullname": "user_fullname"
                        },
                        render: function(data, type) {
                            return data.title_name + data.user_fullname;
                        }
                    }, {
                        "data": {
                            "division_name": "division_name",
                            "section_name": "section_name"
                        },
                        render: function(data, type) {
                            return data.division_name + ' (' + data.section_name + ')';
                        }
                    }, {
                        "data": {
                            "period": "period",
                            "leavetype_name": "leavetype_name"
                        },
                        render: function(data, type) {
                            return data.leavetype_name + ' (' + data.period + ')';
                        }
                    }, {
                        "data": {
                            "leave_from": "leave_from",
                            "leave_to": "leave_to",
                            "leave_qty": "leave_qty"
                        },
                        render: function(data, type) {
                            let from = data.leave_from.split(' ');
                            let to = data.leave_to.split(' ');
                            return from[0] + ' ถึง ' + to[0] + ' (' + data.leave_qty + ' วัน)';
                        }
                    },
                    {
                        "data": {
                            "leave_status": "leave_status"
                        },
                        render: function(data, type) {
                            if (data.leave_status == 0) {
                                return '<span class="badge badge-warning">รออนุมัติ</span>';
                            } else if (data.leave_status == 1) {
                                return '<span class="badge badge-danger">ไม่อนุมัติ</span>';
                            } else if (data.leave_status == 2) {
                                return '<span class="badge badge-success">อนุมัติ</span>';
                            }
                        }
                    },
                    {
                        "data": {
                            "id": "id"
                        },
                        render: function(data, type) {
                            return '<button type="button" class="btn btn-info btn-xs" id="viewBtn" data-id="' + data.id + '" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#viewModal"><i class="fas fa-search"></i></button>';
                        }
                    },
                    <?php if ($this->app->is_can($permission, "edit")) { ?> {
                            "data": {
                                "id": "id"
                            },
                            render: function(data, type) {
                                return '<button type="button" class="btn btn-primary btn-xs" id="editBtn" data-id="' + data.id + '" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#editModal"><i class="fas fa-pencil-alt"></i></button>';
                            }
                        },
                    <?php } ?>
                    <?php if ($this->app->is_can($permission, "approve")) { ?> {
                            "data": {
                                "id": "id"
                            },
                            render: function(data, type) {
                                return '<button type="button" class="btn btn-warning btn-xs" id="editBtn" data-id="' + data.id + '" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#approveModal"><i class="fas fa-magic"></i></button>';
                            }
                        },
                    <?php } ?>
                ],
                "columnDefs": [{
                        targets: '_all'
                    },
                    {
                        "className": "dt-active",
                        "targets": "IsActive"
                    },
                    {
                        "orderable": false,
                        "className": "dt-center",
                        "targets": "IsNotSort"
                    }
                ],
            });

            function reloadTable() {
                mTable.ajax.reload();
            }

            setInterval(function() {
                $.post('<?php echo base_url('leave/manage/timestamp'); ?>',
                    function(data) {
                        if (timestamp != data) {
                            timestamp = data;
                            reloadTable();
                        }
                    });

            }, 12340);

        }(window, document, jQuery);
        $(document).ready(function() {

            <?php if ($this->app->is_can($permission, "edit")) { ?>
                $('#mTable tbody').on('click', 'tr td #editBtn', function() {
                    var $form = $('#editForm');
                    $form.find('.is-invalid,.is-valid').css('border-color', '').removeClass('is-invalid').removeClass('is-valid');
                    $form.find('.error.invalid-feedback').html('');
                    $.post("<?php echo base_url('leave/manage/ajax_data'); ?>", {
                            id: $(this).data('id')
                        },
                        function(data) {
                            $form.find('[name="id"]').val(data['id']);
                            $form.find('[name="leavemaster_name"]').val(data['leavemaster_name']);
                            $form.find('[name="leavemaster_email"]').val(data['leavemaster_email']);
                            $form.find('[name="leavemaster_description"]').html(data['leavemaster_description']);
                        }, "json");
                });
            <?php } ?>

        });

        $('#editForm').validate({
            rules: {
                leavemaster: {
                    required: true,
                },
                leavemaster_name: {
                    required: true
                },
            },
            messages: {},
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        /* Conform delete data in table */
        $('#mTable tbody').on('click', '.confirmDelete', function() {
            Swal.fire({
                title: 'คุณต้องการลบรายการนี้หรือไม่?',
                width: 300,
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#dc3545',
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    location.href = $(this).data('href');
                }
            })
        });
    </script>
<?php
} /* Can View */ ?>