<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    div.scrollmenu {
        width: 98vw;
    }
    .title-label{
        font-size: 20px;
        width: 27vw;
        position:absolute;
        left: 50%;
        margin-left: -13.5vw;
        text-align: center;
    }
    div.dataTables_paginate {
        float: right;
        margin-right: 2vw;
    }
    div.dataTables_info {
        float: left;
        margin-left: 5vw;
    }
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=0; initial-scale=1.0; width=device-width; maximum-scale=1.0;">
    <link href="ico/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/bootstrap.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/style.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/typicons.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('front/css/font-awesome.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('front/js/tip/tooltipster.css')); ?>">
    <script type='text/javascript' src="<?php echo e(asset('front/js/jquery.js')); ?>"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
</head>
<body>
    <div style="width: 100vw;">
        <form action="<?php echo e($url); ?>" method="post">
            <div style="padding-top: 1vh;">
                <button type="submit" class="btn btn-info pull-left" style="margin-bottom: 3vh;margin-left: 1vw;">返回總覽</button>
                <label class="title-label" style="">未取寄物</label>
            </div>
        </form>
    </div>
    <div class="row scrollmenu" style="margin-top: 5px;">
        <table class="table table-striped table-bordered table-hover" id="table_keeper" style="margin-left: 20px;">
            <thead>
                <tr class="info">
                    <th style="display: none;">
                        編號
                    </th>
                    <th style="width: 38%;">
                        寄件人
                    </th>
                    <th style="width: 30%;">
                        類別
                    </th>
                    <th>
                        拜訪時間
                    </th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($keeper as $one): ?>
                <tr>
                    <td style="display: none;">
                        <?php echo e($one->id); ?>

                    </td>
                    <td>
                        <?php echo e($one->guest_in_id); ?>

                    </td>
                    <td>
                        <?php echo e($one->keeper_class); ?>

                    </td>
                    <td>
                        <?php echo e($one->created_at); ?>

                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js')); ?>"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var table = $('#table_keeper');
            var oTable = table.dataTable({
                // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                "language": {
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                    "emptyTable": "尚無未取寄物",
                    "info": "顯示第 _START_ 到第 _END_ 則 共有 _TOTAL_ 則",
                    "infoEmpty": "",
                    "lengthMenu": "顯示 _MENU_ 則",
                    "zeroRecords": "查無資料",
                },
                "aaSorting": [[2,'desc']],
                "pageLength": 10,
                "searching": false,
                "dom": "Bfrtip",
                "bPaginate": false,
                "info": false,
                "pagingType": "bootstrap_full_number",
            });

            $('#table_keeper tbody').on('click', 'tr', function(){
                var data = $('#table_keeper').DataTable().row( this ).data();
                window.location.replace('<?php echo e($data_url); ?>' + '&kid=' + data[0] + '&uid=' + '<?php echo e($user_id); ?>');
            });
        });
    </script>
</body>
</html>