@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-Bmr4K6NW';

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

            $('.required_column').blur(function() {
                
                var chk = true;
                $.each($('.required_column'), function(key,value) {
                    // console.log(this.value);
                    if(empty(this.value)) chk = false;
                })

                if(chk)
                    $('#send').prop('disabled',false);
                else 
                    $('#send').prop('disabled',true);
            })

            $('#date,#start_time,#end_time').blur(function() {

                if(empty($('#date').val()) || empty($('#start_time').val()) || empty($('#end_time').val())) 
                {
                    $('#conference_room_id').find('option').prop('disabled',true);
                } else {

                    $('#conference_room_id').find('option').prop('disabled',false);
                    $('#conference_room_id').val('');

                   $.ajax({
                        url: '{{ url('ajax/get_used_conference_room') }}',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data:{
                            book_date: $('#date').val(),
                            book_start_time: $('#start_time').val(),
                            book_end_time: $('#end_time').val(),
                        },
                        datatype: 'json',
                        async: true,
                        cache: false,
                        success:function(data,textStatus,jqXHR)
                        {
                            console.log(data);
                            if(isJson(data))
                            {
                                var json = JSON.parse(data);
                                if(json.status)
                                {
                                    $.each(json.data.list,function(k,v) {
                                        // console.log(v.conference_room_id);
                                        $("#conference_room_id").find("option[value='"+v.conference_room_id+"']").prop('disabled',true);
                                    })
                                }
                            }
                        },
                        error:ajaxError
                    });
                }

            })


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

                $(this).prop('disabled',true);

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

                var st = new Date($('#date').val()+' '+$('#start_time').val()+':00');
                var et = new Date($('#date').val()+' '+$('#end_time').val()+':00');

                var diff = parseInt(et - st)/(3600*1000);
                if(diff<1) {
                    alert("預訂時間過短，請重新選擇");
                    $(this).prop('disabled',false);
                    return;
                }

                $.ajax({
                    url: '{{ url('ajax/add_booking_record') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data:{
                        date: $('#date').val(),
                        start_time: $('#start_time').val(),
                        end_time: $('#end_time').val(),
                        conference_room_id: $('#conference_room_id').val(),
                        notify: $('#notify').val(),
                        email: $('#email').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
                });

            })

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

                window.location.href = '{{ URL::to('/record') }}';

            })
        });

    </script>

    <style type="text/css">
        
        li {
            font-size: 28px
        }

        .booking-title {
            font-size: 72px;
            font-weight:bold;
            line-height: 68px;
        }

        .booking-title img{
            width: 92px
        }

    </style>

    <div class="container-fluid" style="margin-top: 8%;">
        <input type='hidden' class='input-column' id="user_id" />
        <div class="row booking-title">
            <div class="col-8 d-flex align-items-center justify-content-center" >
                <span>天澤股份有限公司</span>
            </div>
            <div class="col-2 d-flex flex-column align-items-center justify-content-center">
                <span>10</span>
                <span style="font-size: 32px;">可用時數</span>
            </div>
            <div class="col-2 d-flex align-items-center justify-content-center" id="btn_record">
                <img src="{{ asset('image/reservation.png') }}">
            </div>
        </div>
        <div class="row"  style="margin-top: 8%;">
            <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 required_column' id="date" name="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-4">
                <div class='input-div align-middle'>
                    <input type='time' class='input-column required_column' id="start_time" name="start_time" placeholder='' />
                </div>
            </div>
             <div class="col-2">
                <div class='title d-flex align-items-center'>
                    <span>結束:</span>
                </div>
            </div>
            <div class="col-4">
                <div class='input-div align-middle'>
                    <input type='time' class='input-column required_column' id="end_time" name="end_time" placeholder='' />
                </div>
            </div>
        </div>
        <div class="row">
             <div class="col-3">
                <div class='title d-flex align-items-center'>
                    <span>會議室:</span>
                </div>
            </div>
            <div class="col-6">
                <select class='form-control required_column' id="conference_room_id" name="conference_room_id" style="height: 112px;font-size: 36px;">
                    <option value="">請選擇</option>
                    @for($d=0;$d<count($data);$d++)
                        @php $row = $data[$d] @endphp
                        <option value="{{ $row['id'] }}" disabled>{{ $row['name'].'('.$row['people'].'人)' }}</option>
                    @endfor
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <div class='title d-flex align-items-center'>
                    <span>提醒:</span>
                </div>
            </div>
            <div class="col-6">
                <select class='form-control' id="notify" name="notify" style="height: 112px;font-size: 36px;">
                    <option value="">請選擇</option>
                    <option value="5">5分鐘前</option>
                    <option value="10">10分鐘前</option>
                    <option value="15">15分鐘前</option>
                    <option value="30">30分鐘前</option>
                    <option value="60">1小時前</option>
                    <option value="120">2小時前</option>
                    <option value="1440">1天前</option>
                    <option value="2880">2天前</option>
                    <option value="10080">1週前</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <div class='title d-flex align-items-center'>
                    <span>通知對象:</span>
                </div>
            </div>
            <div class="col-9">
                <div class='input-div align-middle'>
                    <input type='text' class='input-column' id="email" name="email" placeholder='例:***@gmail.com; ***@gmail.com' />
                </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 btn-lg btn-danger" id="send" disabled>確定預訂</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h1>使用條款</h1>
                <ul>
                    <li>請配合準時離場，不得提早進入或超時使用</li>
                    <li>請愛惜空間內所有裝潢設備，若您留下髒亂的環境或造成家具損毀，需額外支付清潔維護費用。</li>
                    <li>在公共區域等候時應保持輕聲細語，請勿大聲喧嘩。</li>
                    <li>不可將空間內家具搬離空間。</li>
                </ul>
            </div>
        </div>
    </div>

@endsection