@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>
                                <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 }}</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>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>
                                            </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>
                                    <tr style="display:none;">
                                        <td>
                                            笙陽QRCode
                                        </td>
                                        <td colspan="1">
                                            <input type="checkbox" id="suryan_status" value="on" name="suryan_status">
                                        </td>
                                    </tr>
                                </table>
                                <tr>
                                    {{-- QRCODE按鈕 --}}
                                    <button class="btn btn-info qrcode" style="display:none;" 
                                    data-qrcode = "data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(100)->
                                    generate("e701040205080508060105079a4dd29a4dd2021800240039")) !!}">
                                    QRcode</button>
                                </tr>
                                {{-- QRCODE MODAL --}}
                                <div class="modal fade draggable-modal" id="modal_qrcode" tabindex="-1" role="basic"
                                    aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header " style="color: #653320;">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true"></button>
                                                <h4 class="modal-title">QRCode</h4>
                                            </div>
                                            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                            <div class="modal-body form">
                                                <div style="text-align:center;">
                                                    <img id="qrcodeID" src="">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline"
                                                    data-dismiss="modal">關閉</button>
                                                {{-- <button type="button" class="btn custmBtnprimary download" name="download" value="download">下載</button> --}}
                                                <a id="download" href="" target="_blank" download="image.png">
                                                    <button type="button" class="btn custmBtnprimary">下載</button>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- **********************QRCODE JS START************************* --}}
                                <script>
                                    // 控制QRCODE JS (暫時沒用)
                                    $("#test_txt").click(function() {
                                        $.ajax({
                                            headers: {
                                                'X-CSRF-Token': '{{ csrf_token() }}'
                                            },
                                            type: 'POST',
                                            dataType: 'JSON',
                                            url: "{{ route('manage::storage::add_text') }}",
                                            data: {
                                                test_item: "test",
                                            },
                                            success: function(sendback) {
                                                sendback
                                                console.log("yeeeeeeee");
                                            },
                                            error: function(data) {
                                                console.log("nooooooo");
                                            }
                                        });
                                    })
                                    // 控制QRCODE MODAL
                                    $(document).on('click', '.qrcode', function() {
                                        $('#modal_qrcode').modal('show');
                                        $('#qrcodeID').attr('src', $(this).data('qrcode'));
                                        $('#download').attr('href', $(this).data('qrcode'));
                                    })
                                </script>
                                {{-- *********************QRCODE JS END************************** --}}
                            </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>
                                <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'
    });


    $('.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() }}",
                                suryan_status:($("#suryan_status").prop("checked") == true)?"on":"off",
                                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,
                                suryan_status:($("#suryan_status").prop("checked") == true)?"on":"off",
                                _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