@extends('template')
@section('title',"訪客登記")
@section('content_title',"訪客登記")

@section('content')

    <script src="{{ asset('js/liff.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/liff.css') }}">

    <script type="text/javascript">

        // var liffId = '{{ env('LIFF_ID') }}';
        var liffId = '1655920661-0wX84z9Z';

        liff.init({ liffId: liffId }).then(()=>{
            if(liff.isLoggedIn()) {
                
                liff.getProfile().then(function(profile) {
                    // console.log(profile);
                    $('#user_id').val(profile.userId);
                });
                
            } else {
                // liff.login();
            }
        }).catch((err) => {
            // Error happens during initialization
            // console.log(err.code, err.message);
            alert(err.message);
        });
        
        $(function(){

            $('#send').click(function() {

                if(empty($('#user_id').val())) {
                    alert("User ID 為空");
                    return;
                }

                $.ajax({
                    url: '{{ url('ajax/add_visitor') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data:{
                        registration_date: $('#registration_date').val(),
                        registration_time: $('#registration_time').val(),
                        name: $('#name').val(),
                        units: $('#units').val(),
                        people: $('#people').val(),
                        user_id: $('#user_id').val(),
                    },
                    datatype: 'json',
                    async: true,
                    cache: false,
                    success:function(data,textStatus,jqXHR)
                    {
                        // console.log(data);
                        if(isJson(data))
                        {
                            var json = JSON.parse(data);
                            alert(json.msg);
                            if(json.status)
                            {
                                location.reload();
                            }
                        }
                    },
                    error:ajaxError
                });

            })
        });

    </script>

    <div class="container-fluid" style="margin-top: 8%;">
        <input type='hidden' class='input-column' id="user_id" />
        <div class="row">
            <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>日期</span>
                </div>
            </div>
            <div class="col-10">
            	<div class='input-div align-middle'>
                    <input type='date' class='input-column' id="registration_date" name="registration_date" placeholder='' />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>時間:</span>
                </div>
            </div>
            <div class="col-10">
                <div class='input-div align-middle'>
                    <input type='time' class='input-column' id="registration_time" name="registration_time" placeholder='' />
                </div>
            </div>
        </div>
        <div class="row">
             <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>姓名:</span>
                </div>
            </div>
            <div class="col-10">
                <div class='input-div align-middle'>
                    <input type='text' class='input-column' id="name" name="name" placeholder='來訪者姓名 (一位代表即可)' />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>單位:</span>
                </div>
            </div>
            <div class="col-10">
                <div class='input-div align-middle'>
                    <input type='text' class='input-column' id="units" name="units" placeholder='來訪單位' />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>人數:</span>
                </div>
            </div>
            <div class="col-10">
                <div class='input-div align-middle'>
                    <input type='number' class='input-column' id="people" name="people" placeholder='來訪人數' value="1" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class='title d-flex align-items-center justify-content-center'>
                    <button type="button" class="btn-lg btn-danger" id="send">登記完成</button>
                </div>
            </div>
        </div>
    </div>

@endsection