<?php $__env->startSection('css_page_level'); ?>
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css')); ?>" />
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page-content-wrapper'); ?>
    <div class="page-content-wrapper" id="main">
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <h3 class="page-title">
                <?php $setting = app('anlutro\LaravelSettings\Facade'); ?>
                <?php echo e($setting::get('system_name', '全方位建築智慧化管理系統')); ?> <small><?php echo e($setting::get('company_name', '新保科技')); ?></small>
            </h3>
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="index.html"><?php echo app('translator')->get('messages.homepage'); ?></a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#"><?php echo app('translator')->get('messages.visitors_manage'); ?></a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">自助訪客申請紀錄</a>
                    </li>
                </ul>
                <div class="page-toolbar">

                </div>
            </div>
            <!-- END PAGE HEADER-->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN FILTER FORM -->
                    <div class="portlet light bordered">
                        <div class="portlet-heading">
                            <div class="portlet-title">
                                <h4 class="bold">查詢條件</h4>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <?php if($errors->any()): ?>
                                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <strong>錯誤！</strong>
                                    <?php foreach($errors->all() as $error): ?>
                                        <div><?php echo e($error); ?></div>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                            <form id="filter_form" method="GET" action="<?php echo e(route('manage::guest::reception_guest_list')); ?>">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>開始日期</label>
                                            <input type="date" id="start_date" name="start_date" class="form-control"
                                                value="<?php echo e(request('start_date', date('Y-m-d', strtotime('-30 days')))); ?>">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>結束日期</label>
                                            <input type="date" id="end_date" name="end_date" class="form-control"
                                                value="<?php echo e(request('end_date', date('Y-m-d', strtotime('+30 days')))); ?>">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>&nbsp;</label>
                                            <button type="submit" class="btn btn-primary btn-block">查詢</button>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>&nbsp;</label>
                                            <a href="<?php echo e(route('manage::guest::reception_guest_list')); ?>" class="btn btn-default btn-block">重置</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- END FILTER FORM -->
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN EXAMPLE TABLE PORTLET-->
                    <div class="portlet light bordered">
                        <div class="portlet-body">
                            <table class="table table-striped table-bordered table-hover" id="table_data">
                                <thead>
                                    <tr>
                                        <td>日期</td>
                                        <td>受訪者</td>
                                        <td>公司/樓層</td>
                                        <td>姓名</td>
                                        <td>來訪時段</td>
                                        <td>報到時間</td>
                                        <td>離開時間</td>
                                        <td>來訪人數</td>
                                        <td>車牌號碼</td>
                                        <td>車位</td>
                                        <td>狀態</td>
                                        <td>動作</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($data as $one): ?>
                                        <tr>
                                            <td>
                                                <?php echo e($one->reserve_date); ?>

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

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

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

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

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

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

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

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

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

                                            </td>
                                            <td>
                                                <?php if($one->status == 0): ?>
                                                    <label class="label label-success" style="font-size: 12px;">尚未來訪</label>
                                                <?php elseif($one->status == 1): ?>
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                <?php elseif($one->status == 2): ?>
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                <?php elseif($one->status == 3): ?>
                                                    <label class="label label-success" style="font-size: 12px;">已離開</label>
                                                <?php elseif($one->status == 4): ?>
                                                    <label class="label label-default" style="font-size: 12px;">已取消</label>
                                                <?php elseif($one->status == 5): ?>
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if($one->status == 0): ?>
                                                    <div class="btn-group">
                                                        <button class="btn btn_action btn-default btn-xs dropdown-toggle"
                                                            type="button" data-toggle="dropdown" aria-expand
                                                            ed="false">
                                                            <?php echo app('translator')->get('messages.action'); ?> <i class="fa fa-angle-down"></i>
                                                        </button>
                                                        <ul class="dropdown-menu pull-right" role="menu">
                                                            <li>
                                                                <a class="btn_cancel" uid="<?php echo e($one->id); ?>"
                                                                    href="javascript:;"> 取消</a>
                                                            </li>
                                                            <li>
                                                                <a class="btn_qrcode" qrcode="<?php echo e($one->QRCode); ?>" visitcode="<?php echo e($one->visitCode); ?>"
                                                                    href="javascript:;"> 訪客QRCode</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal_show_qrcode" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content text-center">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">訪客QRCode：速通碼<span id="qrcode-number"></span></h4>
                </div>
                <div class="modal-body">
                    <div id="qrcode-img"></div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="_token" name="_token" value="<?php echo e(csrf_token()); ?>">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('plugins_page_level'); ?>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js')); ?>">
    </script>
    <script type="text/javascript"
        src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js')); ?>"></script>
    <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" src="<?php echo e(asset('assets/global/plugins/bootbox/bootbox.min.js')); ?>"></script>
    <script type="text/javascript"
        src="<?php echo e(asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js')); ?>"></script>
    <script type="text/javascript"
        src="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')); ?>"></script>
    <script type="text/javascript"
        src="<?php echo e(asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery.qrcode.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/qrcode/qrcode.js')); ?>"></script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js_page_level'); ?>
    <script type="text/javascript">
        $(document).on('click', '.btn_qrcode', function() {
            $('#qrcode-number').text(`${$(this).attr("visitcode")}`);
            // $('#qrcode-img').qrcode(`${$(this).attr("qrcode")}`);

            // 建立 QRCode
            var qr = qrcode(0, 'H'); // 0 = 自動版本, H = 高容錯
            qr.addData(`${$(this).attr("qrcode")}`);
            qr.make();

            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            var cellSize = 6;
            var margin = 25;
            var size = qr.getModuleCount() * cellSize + margin * 2;

            canvas.width = size;
            canvas.height = size;

            // 填白底
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(0, 0, size, size);

            // 畫黑色方格
            ctx.fillStyle = "#000000";
            for (var r = 0; r < qr.getModuleCount(); r++) {
                for (var c = 0; c < qr.getModuleCount(); c++) {
                    if (qr.isDark(r, c)) {
                    ctx.fillRect(c * cellSize + margin, r * cellSize + margin, cellSize, cellSize);
                    }
                }
            }

            // 轉成 PNG Base64
            document.getElementById('qrcode-img').innerHTML = '<img src="' + canvas.toDataURL("image/png") + '">'
            $('#modal_show_qrcode').modal('show');
        });
        
        $('#modal_show_qrcode').on('hidden.bs.modal', function() {
            // 避免QRCode點選不同視窗後重複出現
            $('#qrcode-img').remove();
            $('.modal-body').append("<div id='qrcode-img'></div>");

        });

        $(document).ready(function() {
            var table = $('#table_data');
            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": "<?php echo app('translator')->get('messages.datatable_no_data'); ?>",
                    "info": "<?php echo app('translator')->get('messages.display_from'); ?> _START_ <?php echo app('translator')->get('messages.display_to'); ?> _END_ <?php echo app('translator')->get('messages.then_total'); ?> _TOTAL_ <?php echo app('translator')->get('messages.records'); ?>",
                    "infoEmpty": "<?php echo app('translator')->get('messages.no_match'); ?>",
                    "infoFiltered": "(<?php echo app('translator')->get('messages.from'); ?> _MAX_ <?php echo app('translator')->get('messages.records_filter'); ?>)",
                    "lengthMenu": "<?php echo app('translator')->get('messages.show'); ?> _MENU_ <?php echo app('translator')->get('messages.records'); ?>",
                    "search": "<?php echo app('translator')->get('messages.quick_filter'); ?>:",
                    "zeroRecords": "<?php echo app('translator')->get('messages.no_data'); ?>",
                    "paginate": {
                        "previous": "<?php echo app('translator')->get('messages.last_page'); ?>",
                        "next": "<?php echo app('translator')->get('messages.next_page'); ?>",
                        "last": "<?php echo app('translator')->get('messages.lastest'); ?>",
                        "first": "<?php echo app('translator')->get('messages.most_previous'); ?>"
                    }
                },
                "aaSorting": [
                    [0, 'asc']
                ],
                "lengthMenu": [
                    [10, 20, 50, -1],
                    [10, 20, 50, "All"] // change per page values here
                ],
                // set the initial value
                "pageLength": 10,
                "autoWidth": false,
                "pagingType": "bootstrap_full_number",
            });
        });

        $(document).on('click', '.btn_cancel', function() {
            var uid = $(this).attr('uid');
            $.ajax({
                type: 'POST',
                url: "<?php echo e(route('website::guest::cancel_guest_apply')); ?>",
                dataType: 'json',
                data: {
                    id: uid,
                    _token: '<?php echo e(csrf_token()); ?>',
                },
                success: function(sendback) {
                    toastr['success']('資料已送出');
                    window.location.reload();
                },
                error: function() {
                    toastr['error']("<?php echo app('translator')->get('messages.error_need_refresh'); ?>");
                }
            });
        });

        // Date filter form submission
        $('#filter_form').on('submit', function(e) {
            e.preventDefault();

            var startDate = document.getElementById('start_date').value;
            var endDate = document.getElementById('end_date').value;

            // Validate dates
            if (!startDate || !endDate) {
                toastr['error']('請輸入開始日期和結束日期');
                return false;
            }

            var startDateTime = new Date(startDate).getTime();
            var endDateTime = new Date(endDate).getTime();

            // Check if end date is before start date
            if (endDateTime < startDateTime) {
                toastr['error']('結束日期必須晚於開始日期');
                return false;
            }

            // Check if date range exceeds 60 days
            var daysDifference = Math.floor((endDateTime - startDateTime) / (1000 * 60 * 60 * 24));
            if (daysDifference > 60) {
                toastr['error']('查詢日期區間最多只能查詢60天內資料');
                return false;
            }

            // If validation passes, submit the form
            this.submit();
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.manage', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>