@extends('layout.front')
@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.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-switch/css/bootstrap-switch.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('css/magic-check.css') }}"/>
<style type="text/css">
    .data_table tr td {
        padding: 10px;
    }
    .span_red {
        color: red;
    }
    .tr_show{
        display: none;
    }
</style>
@endsection
@section('page-content')
    <div class="wrap-fluid" id="paper-bg">
        <div class="row">
            <div class="col-lg-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title" style="padding-bottom:0px;"><i class="fontello-doc"></i>
                            <span style="font-size:130%;">自助訪客申請</span>
                        </h3>
                    </div>
                    <div class="box-body">
                        <div class="box-body">
                            <blockquote>
                                {{-- #4060 --}}
                                <h5>Step 1. 受訪者資訊</h5>
                            </blockquote>
                            <ol>
                                <select id="user_id" class="selectpicker" data-live-search="true" data-size="8" data-dropup-auto="false" title="未選擇">
                                    @foreach($user as $one)
                                    <option value="{{$one->id}}">{{$one->name}} - {{$one->nickname}} - {{$one->tel}} - {{$one->groupid}}</option>
                                    @endforeach
                                </select>
                            </ol>
                        </div>
                        <div class="box-body">
                            <blockquote>
                                <h5>Step 2. 日期選擇</h5>
                            </blockquote>
                            <ol>
                                <table>
                                    <tr>
                                        <td>

                                        </td>
                                        <td>
                                            <div class="input-group date form_datetime date-picker" data-date-format="yyyy-mm-dd">
                                                <input type="text" id="reserve_date" readonly class="form-control">
                                                <span class="input-group-btn">
                                                    <button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                                                </span>
                                            </div><br>
                                            <button class="btn btn-primary" id="check">查詢預約公設</button><br>
                                            <div id="append"></div>
                                        </td>
                                    </tr>
                                </table>
                            </ol>
                        </div>

                        

                        <div class="box-body">
                            <blockquote>
                                <h5>Step 3. 客戶資訊</h5>
                            </blockquote>
                            <ol>
                                <table class="data_table" style="width: 70%;">
                                    <tr>
                                        <td style="width: 8%;">
                                            公司名稱
                                        </td>
                                        <td>
                                            <input type="text" id="com_name" class="form-control" placeholder="請輸入公司名稱">
                                        </td>
                                        <td style="width: 8%;">
                                            姓名<span class="span_red"> * </span>
                                        </td>
                                        <td>
                                            <input type="text" id="guest_name" class="form-control" placeholder="請輸入姓名">
                                        </td>
                                        <td style="width: 8%;">
                                            來訪時段<span class="span_red"> * </span>
                                        </td>
                                        <td>
                                            <select id="reserve_time" class="selectpicker" data-live-search="true" data-size="8" data-dropup-auto="false" title="未選擇" multiple data-max-options="2" data-min-options="2">
                                                <option>00:00</option>
                                                <option>01:00</option>
                                                <option>02:00</option>
                                                <option>03:00</option>
                                                <option>04:00</option>
                                                <option>05:00</option>
                                                <option>06:00</option>
                                                <option>07:00</option>
                                                <option>08:00</option>
                                                <option>09:00</option>
                                                <option>10:00</option>
                                                <option>11:00</option>
                                                <option>12:00</option>
                                                <option>13:00</option>
                                                <option>14:00</option>
                                                <option>15:00</option>
                                                <option>16:00</option>
                                                <option>17:00</option>
                                                <option>18:00</option>
                                                <option>19:00</option>
                                                <option>20:00</option>
                                                <option>21:00</option>
                                                <option>22:00</option>
                                                <option>23:00</option>
                                                {{-- 24:00無法傳送 --}}
                                                <option>23:59</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            聯絡電話<span class="span_red"> * </span>
                                        </td>
                                        <td>
                                            <input type="text" id="guest_phone" class="form-control" placeholder="請輸入聯絡電話">
                                        </td>
                                        <td>
                                            來訪人數<span class="span_red"> * </span>
                                        </td>
                                        <td>
                                            <input type="text" id="amount" class="form-control" placeholder="請輸入來訪人數">
                                        </td>
                                        <td>
                                            職稱
                                        </td>
                                        <td>
                                            <input type="text" id="title" class="form-control" placeholder="請輸入職稱">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            拜訪地點
                                        </td>
                                        <td>
                                            <input type="text" id="place" class="form-control" disabled value = {{isset($address) ? $address : ''}}>
                                            {{-- <select id="place" class="selectpicker" data-dropup-auto="false">
                                                <option value="八德">八德</option>
                                                <option value="宏匯">宏匯</option>
									            <option value="I-Tower">I-Tower</option> 
                                            </select> --}}
                                        </td>
                                        <td>
                                            填寫原因
                                        </td>
                                        <td colspan="3">
                                            <input type="text" id="reason" class="form-control" placeholder="請輸入拜訪原因">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            信箱<span class="span_red"> * </span>
                                        </td>
                                        <td colspan="1">
                                            <input type="text" id="email" class="form-control" placeholder="請輸入信箱">
                                        </td>
                                    </tr>
                                </table>
                            </ol>
                        </div>
                        <div class="box-body" id="parking">
                            <blockquote>
                                <h5>Step 4. 停車位申請</h5>
                            </blockquote>
                            <ol>
                                <table class="data_table" style="width: 70%;">
                                    <tr>
                                        <td>
                                            輸入車牌
                                        </td>
                                        <td>
                                            <input type="text" id="code" class="form-control" placeholder="請輸入車牌號碼">
                                        </td>
                                        <td>
                                            停車車位號
                                        </td>
                                        <td>
                                            <select id="location" class="selectpicker" data-live-search="true" data-size="8" data-dropup-auto="false" disabled="true" title="請選擇車位">


                                            </select>
                                        </td>
                                    </tr>
                                </table>
                            </ol>
                        </div>
                        <div class="box-body">
                            <blockquote>
                                <h5 id="step-5">Step 5. 迎賓看板</h5>
                            </blockquote>
                            <ol>
                                <table class="data_table" style="width: 70%;border: ">
                                    <tr>
                                        <td colspan="2">
                                            <input class="magic-checkbox" type="checkbox" name="digital_type" id="digital_type">
                                            <label for="digital_type">申請(每行限定最多十個字)</label>
                                        </td>
                                    </tr>
                                    <tr class="tr_show">
                                        <td style="width: 8%;">歡迎</td>
                                        <td><input type="text" id="digital_title" class="form-control" placeholder="(請填寫公司名稱或空白)"></td>
                                    </tr>
                                    <tr class="tr_show">
                                        <td style="width: 8%;"></td>
                                        <td><input type="text" id="digital_content" class="form-control" placeholder="(請填寫來訪者名稱或空白)"></td>
                                    </tr>
                                </table>
                            </ol>
                        </div>
                        <div class="box-body">
                            <blockquote>
                                {{-- Bob再找對應的commit --}}
                                <h5>Step 6. 請選擇會議室</h5>
                            </blockquote>
                            <ol>
                                <select id="meeting_room" class="selectpicker" data-live-search="true" data-size="8" data-dropup-auto="false" title="未選擇">
                                    @foreach($inst as $one)
                                    <option value="{{$one->id}}" id="{{$one->id}}">{{$one->name}}</option>
                                    @endforeach
                                </select>
                            </ol>
                        </div>
                        <div class="box-body" style="padding-bottom: 8vh;">
                            <button id="btn_submit" class="btn pull-right" onclick="this.disabled=true">送出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.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-datepicker/locales/bootstrap-datepicker.zh-TW.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

<script type="text/javascript">


$(document).ready(function() {

          
				$("#check").click(function() {
                    $('#append').empty();
                        var  checkValue=$( "#user_id" ).val();  //獲取Select選到的Value
                        var  checkText=$( "#user_id" ).find( "option:selected" ).text();  //獲取Select選到的text
                        var  check_date_Value=$( "#reserve_date" ).val();  //獲取Select選到的Value
                        
                    if(checkValue!="" && checkText!= "未選擇" && check_date_Value!=""){
                        // $("#check").removeAttr("disabled");  //移除按鈕禁用
                        // $("#check").attr("disabled",false); //設定按鈕可用

                        let url = '/wu1n/api/test';
                        //console.log(checkValue);
                        //console.log(checkText);
                        //console.log(check_date_Value);
                          $.ajax({
                              type : 'POST',
                              url : url,
                              data : {
                                  user_id : checkValue,
                                  Text: checkText,
                                  reserve_date : check_date_Value,
                     
                              },
                              success : function(res){
                                //console.log(res.length);
                                  console.log(res);
                                        if(res == ""){
                                            toastr['error']('查無資料，請重新整理後再次操作');
                                            let html ='<h3>'+ '查無資料' +'</h3>';

                                             $('#append').append(html);
                                             $('#append').selectpicker('refresh');
                                        }else{

					    toastr['success']('取得查詢資料');
                                            $.each(res, function( index, value ) {
                                             //console.log(value.length);

                                             let idList = value.inst_id; // 11 表示公設的id號
                                             let time_start = value.time_section;
                                             let option_id = $("#"+idList).text();//取回前端會議室下拉選單的值
                                            // console.log(option_id);

                                              let staff ='<span><h3>'+ option_id +'</h3></span>';
                                              let time ='<h4>'+ time_start +'</h4>';
                                             $('#append').append(staff);
                                             $('#append').append(time);
                                             $('#append').selectpicker('refresh');
                                             });


                                        }

                              },
                              error : function(res){
                                  toastr['error']('查無資料，請重新整理後再次操作');
                                   //console.log(res);

                                        $('#btn_submit').prop('disabled',false);
                              }
                          });
                    }else{
                        // $("#check").attr("disabled","true");//送出按鈕先禁用
                        alert('請選擇受訪者資訊及日期');
                    }
                    

                    //
				    
			    });

             
	});


    $('.date-picker').datepicker({
        orientation: "left",
        autoclose: true,
        dateFormat: 'yyyy-mm-dd',
        startDate: "today",
        todayHighlight: true,
        language: 'zh-TW'
    });

    $(document).on('change','#place',function(){
        if($('#place').val() != '八德'){
            $('#parking').css('display','none');
            $('#step-5').html("Step 4. 迎賓看板");
        }else{
            $('#parking').css('display','block');
            $('#step-5').html("Step 5. 迎賓看板");
        }
    });

    $(document).on('change','#digital_type',function(){
        if($('#digital_type').prop("checked")){
            $('.tr_show').show(500);
        }else{
            $('.tr_show').hide(500);
        }
    });

    $(document).on('change','#reserve_time',function(){
        if($('#reserve_date').val() != '' && $('#reserve_time').val().length == 2){
           $.ajax({
                type : 'POST',
                url : '{{action('Website\GuestController@check_garage')}}',
                data : {
                    user_id : $('#user_id').val(),
                    reserve_date : $('#reserve_date').val(),
                    reserve_time : $('#reserve_time').val(),
                    _token : "{{ csrf_token() }}"
                },
                success : function(sendback){
                    $('#location').html('');
                    $.each(sendback.garage_array, function( index, value ) {
                        var selectTitle = '<option data-hidden="true" value="" disable>'+'請選擇車位'+'</option>';
                        var html ='<option>'+value.name+'</option>';
                        $('#location').append(selectTitle);
                        $('#location').append(html);
                        $('#location').selectpicker('refresh');
                    });
                }
            });
            $('#location').attr('disabled', false);
            $('#location').selectpicker('refresh');
        }
    });

    $(document).on('change','#reserve_date',function(){
        if($('#reserve_time').val() != null){
            if($('#reserve_time').val().length == 2){
                console.log("有時間");
                $.ajax({
                    type : 'POST',
                    url : '{{action('Website\GuestController@check_garage')}}',
                    data : {
                        user_id : $('#user_id').val(),
                        reserve_date : $('#reserve_date').val(),
                        reserve_time : $('#reserve_time').val(),
                        _token : "{{ csrf_token() }}"
                    },
                    success : function(sendback){
                        $('#location').html('');
                        $.each(sendback.garage_array, function( index, value ) {
                            console.log(value.name);
                            var selectTitle = '<option data-hidden="true" value="" disable>'+'請選擇車位'+'</option>';
                            var html ='<option>'+value.name+'</option>';
                            $('#location').append(selectTitle);
                            $('#location').append(html);
                            $('#location').selectpicker('refresh');
                        });
                    }
                });
                $('#location').attr('disabled', false);
                $('#location').selectpicker('refresh');
            }else{
                console.log("沒時間");
                $('#location').attr('disabled', true);
                $('#location').selectpicker('refresh');
            }
        }
    });

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

        var check_digital = false;
        var digital_type = 0;
        var digital_title = "";
        var digital_content = "";
        if ($('#digital_type').prop("checked")) {
            digital_type = 1;
            if (($('#digital_title').val() != '') || ($('#digital_content').val() != '')) {
                check_digital = true;
                digital_title = ($('#digital_title').val()!= '')?($('#digital_title').val()):"";
                digital_content = ($('#digital_content').val()!= '')?($('#digital_content').val()):"";
            }else{
                check_digital = false;
            }
        }else{
            digital_type = 0;
            check_digital = true;
        }
        if(($('#user_id').val() != '') && ($('#reserve_date').val() != '') && 
           ($('#reserve_time').val() != '') && ($('#guest_name').val() != '') && 
           ($('#guest_phone').val() != '') && ($('#amount').val() != '') && 
           ($('#email').val() != '') && check_digital){
            var time = $('#reserve_time').val();

            if(!Array.isArray(time)){
                $('#btn_submit').prop('disabled',false);
                toastr['error']('請選擇來訪區段');
            }else{
                if(time.length > 1){
                    console.log("code");
                    console.log($('#code').val());
                    console.log("location");
                    console.log($('#location').val());
                    if( ($('#code').val() == '' && $('#location').val() == '') || ($('#code').val() == '' && $('#location').val() == null)){
                        $.ajax({
                            type : 'POST',
                            url : '{{action('Website\GuestController@save_guest_apply')}}',
                            data : {
                                user_id : $('#user_id').val(),
                                reserve_date : $('#reserve_date').val(),
                                com_name : $('#com_name').val(),
                                guest_name : $('#guest_name').val(),
                                reserve_time : $('#reserve_time').val(),
                                guest_phone : $('#guest_phone').val(),
                                email : $('#email').val(),
                                amount : $('#amount').val(),
                                reason : $('#reason').val(),
                                title : $('#title').val(),
                                code : $('#code').val(),
                                location : $('#location').val(),
                                place : $('#place').val(),
                                digital_type : digital_type,
                                digital_title : digital_title,
                                digital_content : digital_content,
                                _token : "{{ csrf_token() }}",
                                meeting_room : $('#meeting_room').val()
                            },
                            success : function(sendback){
                                toastr['success']('訪客申請送出成功');
                                window.location.reload();
                            },
                            error : function(sendback){
                                toastr['error']('資料送出失敗，請重新整理後再次操作');
                                $('#btn_submit').prop('disabled',false);
                            }
                        });

                    }else if($('#code').val() != ''  && ($('#location').val() != '' && $('#location').val() != null) ){

                        $.ajax({
                            type : 'POST',
                            url : '{{action('Website\GuestController@save_guest_apply')}}',
                            data : {
                                user_id : $('#user_id').val(),
                                reserve_date : $('#reserve_date').val(),
                                com_name : $('#com_name').val(),
                                guest_name : $('#guest_name').val(),
                                reserve_time : $('#reserve_time').val(),
                                guest_phone : $('#guest_phone').val(),
                                email : $('#email').val(),
                                amount : $('#amount').val(),
                                reason : $('#reason').val(),
                                title : $('#title').val(),
                                code : $('#code').val(),
                                location : $('#location').val(),
                                place : $('#place').val(),
                                digital_type : digital_type,
                                digital_title : digital_title,
                                digital_content : digital_content,
                                _token : "{{ csrf_token() }}",
                                meeting_room : $('#meeting_room').val()
                            },
                            success : function(sendback){
                                toastr['success']('訪客申請送出成功');
                                window.location.reload();
                            },
                            error : function(sendback){
                                if(sendback.responseJSON.message == ''){
                                    toastr['error']('資料送出失敗，請重新整理後再次操作');
                                    $('#btn_submit').prop('disabled',false);

                                }else{
                                    toastr['error'](sendback.responseJSON.message);
                                    $('#btn_submit').prop('disabled',false);

                                }

                            }
                        });

                    }
                    else{
                        toastr['error']('請輸入車牌或車位');
                        $('#btn_submit').prop('disabled',false);
                    }

                }else{
                    toastr['warning']('來訪區段需選擇兩個時間點');
                    $('#btn_submit').prop('disabled',false);
                }
            }
        }else{
            toastr['error']('欄位請勿空白');
            $('#btn_submit').prop('disabled',false);
        }
    });

</script>
@endsection