@extends('layout.manage')

@section('css_page_level')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" />
@endsection

@section('page-content-wrapper')
    <div class="page-content-wrapper" id="main">
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <h3 class="page-title">
                @inject('setting', 'anlutro\LaravelSettings\Facade')
                {{ $setting::get('system_name', '全方位建築智慧化管理系統') }} <small>{{ $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">@lang('messages.homepage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">@lang('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 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>
                                    @foreach ($data as $one)
                                        <tr>
                                            <td>
                                                {{ $one->reserve_date }}
                                            </td>
                                            <td>
                                                {{ $one->user_name }}
                                            </td>
                                            <td>
                                                {{ $one->com_name }}
                                            </td>
                                            <td>
                                                {{ $one->guest_name }}
                                            </td>
                                            <td>
                                                {{ $one->time_start }} - {{ $one->time_end }}
                                            </td>
                                            <td>
                                                {{ $one->checkin }}
                                            </td>
                                            <td>
                                                {{ $one->checkout }}
                                            </td>
                                            <td>
                                                {{ $one->amount }}
                                            </td>
                                            <td>
                                                {{ $one->code }}
                                            </td>
                                            <td>
                                                {{ $one->location }}
                                            </td>
                                            <td>
                                                @if ($one->status == 0)
                                                    <label class="label label-success" style="font-size: 12px;">尚未來訪</label>
                                                @elseif($one->status == 1)
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                @elseif($one->status == 2)
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                @elseif($one->status == 3)
                                                    <label class="label label-success" style="font-size: 12px;">已離開</label>
                                                @elseif($one->status == 4)
                                                    <label class="label label-default" style="font-size: 12px;">已取消</label>
                                                @elseif($one->status == 5)
                                                    <label class="label label-info" style="font-size: 12px;">已報到</label>
                                                @endif
                                            </td>
                                            <td>
                                                @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">
                                                            @lang('messages.action') <i class="fa fa-angle-down"></i>
                                                        </button>
                                                        <ul class="dropdown-menu pull-right" role="menu">
                                                            <li>
                                                                <a class="btn_cancel" uid="{{ $one->id }}"
                                                                    href="javascript:;"> 取消</a>
                                                            </li>
                                                            <li>
                                                                <a class="btn_qrcode" qrcode="{{ $one->QRCode }}" visitcode="{{ $one->visitCode }}"
                                                                    href="javascript:;"> 訪客QRCode</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @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="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
    <script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}">
    </script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}">
    </script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/jquery.qrcode.min.js') }}"></script>
@endsection

@section('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")}`);
            $('#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": "@lang('messages.datatable_no_data')",
                    "info": "@lang('messages.display_from') _START_ @lang('messages.display_to') _END_ @lang('messages.then_total') _TOTAL_ @lang('messages.records')",
                    "infoEmpty": "@lang('messages.no_match')",
                    "infoFiltered": "(@lang('messages.from') _MAX_ @lang('messages.records_filter'))",
                    "lengthMenu": "@lang('messages.show') _MENU_ @lang('messages.records')",
                    "search": "@lang('messages.quick_filter'):",
                    "zeroRecords": "@lang('messages.no_data')",
                    "paginate": {
                        "previous": "@lang('messages.last_page')",
                        "next": "@lang('messages.next_page')",
                        "last": "@lang('messages.lastest')",
                        "first": "@lang('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: "{{ route('website::guest::cancel_guest_apply') }}",
                dataType: 'json',
                data: {
                    id: uid,
                    _token: '{{ csrf_token() }}',
                },
                success: function(sendback) {
                    toastr['success']('資料已送出');
                    window.location.reload();
                },
                error: function() {
                    toastr['error']("@lang('messages.error_need_refresh')");
                }
            });
        });
    </script>
@endsection