@extends('layouts.main')
@section('content')

<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/handsontable.full.css') }}">
<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/handsontable.formula.css') }}">
<link media="screen" rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.css') }}">
<script type="text/javascript" src="{{ asset('js/handsontable.full.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/handsontable.formula.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src='{{ asset('js/ajaxzip3.js') }}'></script>

<script type="text/javascript" src="{{ asset('js/ruleJS.all.full.js') }}"></script>

<script type="text/javascript">
	jQuery(document).ready(function(){
	   jQuery("#createform").validationEngine();
	});
</script>

<div class="container">
    {{ Form::open(['url' => 'callcenter/create/', 'method' => 'POST', 'name' => 'form', 'id' => 'createform', 'files' => true]) }}
    <h5>電話受付情報</h5>
    <!-- データエリア -->
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">電話受付情報（新規登録）</h3>
            </div>

            {{-- 通知メッセージ --}}
            @if ($message <> "")
                <div class="message">
                    {{ Form::label("message", $message, ["class"=>"form-control btn-success btn"]) }}
                </div>
            @endif

            @if (session()->has('errors'))
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
                    
            <div class="panel-body">
                <table class="table">
                    <col width="8%" />
                    <col width="12%" />
                    <col width="8%" />
                    <col width="12%" />
                    <col width="8%" />
                    <col width="52%" />
                    
                    <tr>
                        <td>{{ Form::label("code","作業連番",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("code", "", ["class"=>"form-control", "id"=>"code", "style"=>"width:120px", "readonly"]) }}</td>
                        <td>{{ Form::label("accept_ymd","受付日",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("accept_ymd", date("Y/m/d"), ["class"=>"form-control", "id"=>"accept_ymd", "style"=>"width:120px"]) }}</td>
                        <td>{{ Form::label("accrual_ymd","発生日",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("accrual_ymd", date("Y/m/d"), ["class"=>"form-control", "id"=>"accrual_ymd", "style"=>"width:120px"]) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("company_tel","電話元TEL",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("company_tel", "", ["class"=>"form-control", "id"=>"company_tel", "maxlength"=>"14", 'onChange' => 'getCompany()', 'list'=>'company_tel_list']) }}
                            <datalist id="company_tel_list">
                                @foreach($company_datas as $datas)
                                <option value="{!! $datas->company_tel !!}">
                                @endforeach
                            </datalist>
                        </td>
                        <td>{{ Form::label("company_username","電話元担当者",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("company_username", "", ["class"=>"form-control", "id"=>"company_username", 'list'=>'company_username_list']) }}
                            <datalist id="company_username_list">
                                @foreach($company_datas as $datas)
                                <option value="{!! $datas->company_username !!}">
                                @endforeach
                            </datalist>
                        </td>
                        <td>{{ Form::label("company_name","電話元名称",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("company_name", "", ["class"=>"form-control", "id"=>"company_name", 'list'=>'company_name_list']) }}
                            <datalist id="company_name_list">
                                @foreach($company_datas as $datas)
                                <option value="{!! $datas->company_name !!}">
                                @endforeach
                            </datalist>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("agency_name", "販売店名", ["class"=>"control-label btn"]) }}</td>
                        <td colspan="5">
                            {{ Form::text("agency_name", "", ["class"=>"form-control", "id"=>"agency_name", "list"=>"agency_name_list"]) }}
                            <datalist id="agency_name_list">
                                @foreach($agency_datas as $datas)
                                <option value="{!! $datas->agency_name !!}">
                                @endforeach
                            </datalist>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("customer_tel","ユーザーTEL",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::tel("customer_tel", "", ["class"=>"form-control", "id"=>"customer_tel", "maxlength"=>"12", "pattern"=>"\d{1,5}-\d{1,4}-\d{3,4}", 'onChange' => 'getCustomer()']) }}</td>
                        <td>{{ Form::label("customer_username","ユーザー担当者",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("customer_username", "", ["class"=>"form-control", "id"=>"customer_username"]) }}</td>
                        <td>{{ Form::label("customer_name","ユーザー名称",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("customer_name", "", ["class"=>"form-control", "id"=>"customer_name"]) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("customer_address", "ユーザー住所", ["class"=>"control-label btn"]) }}</td>
                        <td colspan="5">
                            {{ Form::tel("customer_zipcode", "", ["class"=>"form-control", "id"=>"customer_zipcode", "style"=>"width:7%", "maxlength" => "8", "pattern"=>"\d{3}-\d{4}", "onKeyUp"=>"AjaxZip3.zip2addr(this,'','customer_pref','customer_address1');"]) }}
                            {{ Form::select('customer_pref', $pref_datas, "", ['class' => 'form-control', 'id' => 'customer_pref', "style"=>"width:10%"]) }}
                            {{ Form::text("customer_address1", "", ["class"=>"form-control", "id"=>"customer_address1", "style"=>"width:40%"]) }}
                            {{ Form::text("customer_address2", "", ["class"=>"form-control", "id"=>"customer_address2", "style"=>"width:40%"]) }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("item_name","機種",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::select('item_name', $item_datas, "", ['class' => 'form-control validate[required]', 'id' => 'item_name', 'onChange' => 'makeList_Errorcode()']) }}</td>
                        <td>{{ Form::label("machine_no","機番",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("machine_no", "", ["class"=>"form-control validate[required]", "id"=>"machine_no", "style"=>"width:120px"]) }}</td>
                        <td>{{ Form::label("deliver_ymd","納入日",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("deliver_ymd", "", ["class"=>"form-control", "id"=>"deliver_ymd", "style"=>"width:120px"]) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("request_info", "依頼内容", ["class"=>"control-label btn"]) }}</td>
                        <td colspan="5">{{ Form::textarea("request_info", "", ["class"=>"form-control", "id"=>"request_info", 'rows' => '4']) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("error_code","エラーコード",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::select('error_code', $error_codes, "", ['class' => 'form-control', 'id' => 'error_code']) }}</td>
                        <td>{{ Form::label("visit_date","訪問希望日",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("visit_date", "", ["class"=>"form-control", "id"=>"visit_date", "style"=>"width:120px"]) }}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("memo", "特記事項", ["class"=>"control-label btn"]) }}</td>
                        <td colspan="5">{{ Form::textarea("memo", "", ["class"=>"form-control", "id"=>"memo", 'rows' => '4']) }}</td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("service_name","依頼先名称",["class"=>"control-label btn"]) }}</td>
                        <td colspan="5">
                            {{ Form::text('service_name', "", ['class' => 'form-control', 'id' => 'service_name', 'list'=>'service_name_list']) }}
                            <datalist id="service_name_list">
                                @foreach($service_datas as $datas)
                                <option value="{!! $datas->service_name !!}">
                                @endforeach
                            </datalist>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("reception_name", "電話受付者", ["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("reception_name", $request->reception_name, ["class"=>"form-control", "id"=>"reception_name"]) }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
                
                {{ Form::hidden("id", "", ["id"=>"id"]) }}
                {{ Form::hidden("status", 1, ["id"=>"status"]) }}
                {{ Form::hidden("item_id", "", ["id"=>"item_id"]) }}
                {{ Form::hidden("company_id", "", ["id"=>"company_id"]) }}
                {{ Form::hidden("agency_id", 0, ["id"=>"agency_id"]) }}
                {{ Form::hidden("customer_id", 0, ["id"=>"customer_id"]) }}
                {{ Form::hidden("machine_id", "", ["id"=>"machine_id"]) }}
                {{ Form::hidden("company_div", 0, ["id"=>"company_div"]) }}

                @if ($message == "")
                    {{ Form::button("　登録　", ["class"=>"btn btn-success", "id"=>"submit_btn"]) }}
                    {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"javascript:window.history.back(-1);return false;"]) }}
                @else
                    {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"location.href='/ICS/public/callcenter/index'"]) }}
                @endif

                {{ Form::close() }}
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
    <!-- /.データエリア -->
</div>
    
<script Language="JavaScript">
    // 電話元TEL入力後に顧客情報を取得する
    function getCompany() {
        var tel = $("#company_tel").val();

        // 初期値セット
        $("#company_div").val('');
        $("#company_id").val('');
        $("#company_name").val('');
        $("#agency_id").val('');
        $("#agency_name").val('');
        $("#customer_id").val('');
        $("#customer_name").val('');
        $("#customer_zipcode").val('');
        $("#customer_pref").val('');
        $("#customer_address1").val('');
        $("#customer_address2").val('');
        $("#customer_tel").val('');
        $("#item_id").val('');
        $("#item_name").val('');
        $("#machine_id").val('');
        $("#machine_no").val('');
        $("#deliver_ymd").val('');
        
        $("select#error_code").children().remove();
        $("#error_code").append($("<option>").val("0").text("◆エラー内容を選択◆"));
/*        
        $("select#service_name").children().remove();
        $("#service_name").append($("<option>").val("0").text("◆依頼先情報を選択◆"));
*/        

        if (tel == "") {
            window.alert("電話元TELを入力してください");
        } else {
            // 処理前に Loading 画像を表示
            dispLoading("処理中...");

            $.ajax({
                    type : "GET",
                    url  : "company",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"company_tel" : tel},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        if (json.length > 0) {
                            $("#company_div").val(json[0].company_div);
                            $("#company_id").val(json[0].company_id);
                            $("#company_name").val(json[0].company_name);
                            $("#agency_id").val(json[0].agency_id);
                            $("#agency_name").val(json[0].agency_name);
                            $("#customer_id").val(json[0].customer_id);
                            $("#customer_name").val(json[0].customer_name);
                            $("#customer_zipcode").val(json[0].zipcode);
                            $("#customer_pref").val(json[0].pref);
                            $("#customer_address1").val(json[0].address1);
                            $("#customer_address2").val(json[0].address2);
                            $("#customer_tel").val(json[0].tel1);
                            $("#item_name").val(json[0].item_id);
                            $("#item_id").val(json[0].item_id);
                            $("#machine_id").val(json[0].machine_id);
                            $("#machine_no").val(json[0].machine_no);
                            $("#deliver_ymd").val(json[0].deliver_ymd);
                                                        
                            // エラーコードを取得
                            if (json[0].item_id) {
                                makeList_Errorcode();
                            }
                            
                            // 依頼先を取得
/*                            
                            if (json[0].agency_id) {
                                makeList_Service();
                            }
*/            
                        }
                    }, 
                    error : function(msg, status){
                        alert('データが取得できませんでした。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }

    // ユーザーTEL入力後に顧客情報を取得する
    function getCustomer() {
        var tel = $("#customer_tel").val();

        // 初期値セット
        $("#agency_id").val('');
        $("#agency_name").val('');
        $("#customer_id").val('');
        $("#customer_name").val('');
        $("#customer_zipcode").val('');
        $("#customer_pref").val('');
        $("#customer_address1").val('');
        $("#customer_address2").val('');
        $("#machines_div").val('');
        $("#item_id").val('');
        $("#item_name").val('');
        $("#machine_id").val('');
        $("#machine_no").val('');
        $("#deliver_ymd").val('');

        $("select#error_code").children().remove();
        $("#error_code").append($("<option>").val("0").text("◆エラー内容を選択◆"));
/*        
        $("select#service_name").children().remove();
        $("#service_name").append($("<option>").val("0").text("◆依頼先情報を選択◆"));
*/        

        if (tel == "") {
            window.alert("ユーザーTELを入力してください");
        } else {
            // 処理前に Loading 画像を表示
            dispLoading("処理中...");

            $.ajax({
                    type : "GET",
                    url  : "customer",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"customer_tel" : tel},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        if (json.length > 0) {
                            $("#agency_id").val(json[0].agency_id);
                            $("#agency_name").val(json[0].agency_name);
                            $("#customer_id").val(json[0].customer_id);
                            $("#customer_name").val(json[0].name1);
                            $("#customer_zipcode").val(json[0].zipcode);
                            $("#customer_pref").val(json[0].pref);
                            $("#customer_address1").val(json[0].address1);
                            $("#customer_address2").val(json[0].address2);
                            $("#item_name").val(json[0].item_id);
                            $("#item_id").val(json[0].item_id);
                            $("#machine_id").val(json[0].machine_id);
                            $("#machine_no").val(json[0].machine_no);
                            $("#deliver_ymd").val(json[0].deliver_ymd);
                                                        
                            // エラーコードを取得
                            if (json[0].item_id) {
                                makeList_Errorcode();
                            }
                            
                            // 依頼先を取得
/*                            
                            if (json[0].agency_id) {
                                makeList_Service();
                            }
*/            
                        }
                    }, 
                    error : function(msg, status){
                        alert('データが取得できませんでした。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }

    // 機種選択後、エラーコードを取得する
    function makeList_Errorcode() {
        $('select#error_code').children().remove();
        $("#error_code").append($("<option>").val("0").text("◆エラー内容を選択◆"));

        var item_id = $("#item_name").val();

        if (item_id == "") {
            window.alert("機種を設定してください");
        } else {
            // 処理前に Loading 画像を表示
            dispLoading("処理中...");

            $.ajax({
                    type : "GET",
                    url  : "errorcode",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"item_id" : item_id},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                            for(var i=0; i < len; i++){
                                $("#error_code").append($("<option>").val(json[i].id).text(json[i].contents));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }

    // 代理店選択後、依頼先を取得する
    function makeList_Service() {
        $('select#service_name').children().remove();
        $("#service_name").append($("<option>").val("0").text("◆依頼先情報を選択◆"));

        var company_id = $("#agency_name").val();

        if (company_id == "") {
            window.alert("代理店を設定してください");
        } else {
            // 処理前に Loading 画像を表示
            dispLoading("処理中...");

            $.ajax({
                    type : "GET",
                    url  : "service",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"company_id" : company_id},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                            for(var i=0; i < len; i++){
                                $("#service_name").append($("<option>").val(json[i].id).text(json[i].name));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
</script>

<script Language="JavaScript">
  $(function() {
    $.datepicker.setDefaults({
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        changeYear: true,  // 年選択をプルダウン化
        changeMonth: true, // 月選択をプルダウン化
        showWeek: true,
        buttonImage: "{{ asset('css/images/calendar-icon.png') }}",
        buttonText : "カレンダーから選択",
        buttonImageOnly: true,
        showOn: "both",
    });
    
    $('#accept_ymd').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    $('#accrual_ymd').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    $('#deliver_ymd').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    $('#visit_date').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
});
</script>    

<script Language="JavaScript">
/* ------------------------------
 Loading イメージ表示関数
 引数： msg 画面に表示する文言
 ------------------------------ */
function dispLoading(msg){
    // 引数なし（メッセージなし）を許容
    if( msg == undefined ){
        msg = "";
    }
    
    // 画面表示メッセージ
    var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
    
    // ローディング画像が表示されていない場合のみ出力
    if($("#loading").length == 0){
        $("body").append("<div id='loading'>" + dispMsg + "</div>");
    }
}
 
/* ------------------------------
 Loading イメージ削除関数
 ------------------------------ */
function removeLoading(){
    $("#loading").remove();
}    
</script>

<style>
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("/ICS/public/img/loading.png") center center no-repeat;
}
</style>

<script>
jQuery( document ).ready( function() {
    jQuery( '#createform' ).validationEngine();
    jQuery( '#submit_btn' ).click( function() {
        if ( ! $( '#createform' ).validationEngine( 'validate' ) ) {
            // validate失敗
        } else {
            document.form.submit();
        }
        return false;
    } );
} );
</script>
@endsection