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

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

<script type="text/javascript">
    $(document).ready(
        function() {               
            $.fn.autoKana('#name01', '#kana01', {
                katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
        });
    });
</script>

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

	/**
	* @param {jqObject} the field where the validation applies
	* @param {Array[String]} validation rules for this field
	* @param {int} rule index
	* @param {Map} form options
	* @return an error string if validation failed
	*/
	function checkLtNumHifn(field, rules, i, options){
		if ( !field.val().match( /^[0-9a-zA-Z\-]+$/ ) ) {
			// un match
			return "* 半角英数 記号(-)で入力してください";
		}
	}

	function checkKatakana(field, rules, i, options){
		if ( !field.val().match( /^[ァ-ヺー]+$/ ) ) {
			// un match
			return "* 全角カタカナで入力してください";
		}
	}
</script>

<div class="container">
    {{ Form::open(['url' => 'customer/update/' . $id, 'method' => 'POST', 'name' => 'form', 'id' => 'createform', 'files' => true]) }}
    {{ Form::hidden("customer_id", $datas->customer_id, ["id"=>"customer_id"]) }}
    <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="10%" />
                    <col width="90%" />
                     
                    <tr> 
                        @if ($company_id == 0)
                            <td>{{ Form::label("mobile_phone_id","作業店設定",["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('mobile_phone_id', $company, $datas->mobile_phone_id, ['class' => 'form-control', 'id' => 'mobile_phone_id', 'style' => 'width:50%;', 'onChange' => 'makeList_Company()']) }}</td>
                        @endif
                    </tr>
                    <tr>
                        <td>{{ Form::label("customer_id","顧客番号",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::text("customer_id", $datas->customer_id, ["class"=>"form-control", "id"=>"customer_id", "style" => "width:90px", "readonly"]) }}</td>
                    </tr>
                      
                    @if ($company_id <> 0)
                    <tr>
                        <td>{{ Form::hidden("company_id", $company_id) }}</td>
                        <td>{{ Form::hidden("status", $datas->status) }}</td>
                    </tr>
                    @endif
                    <tr> 
                        <td>{{ Form::label("name01","担当者名",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("name01", $datas->name01, ["class"=>"form-control validate[required]", "id"=>"name01", 'style' => 'width:25%']) }} 
                            {{ Form::text("name02", $datas->name02, ["class"=>"form-control validate[required]", "id"=>"name02", 'style' => 'width:25%']) }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("kana01","担当者名（カナ）",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("kana01", $datas->kana01, ["class"=>"form-control validate[required]", "id"=>"kana01", 'style' => 'width:25%']) }} 
                            {{ Form::text("kana02", $datas->kana02, ["class"=>"form-control validate[required]", "id"=>"kana02", 'style' => 'width:25%']) }}
                        </td>
                    </tr>
                        <td>{{ Form::label("zip01","郵便番号",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::text("zip01", $datas->zip01, ["class"=>"form-control imeoff", "id"=>"zip01", "maxlength" => "3", 'style' => 'width:10%']) }}
                            {{ Form::text("zip02", $datas->zip02, ["class"=>"form-control imeoff", "id"=>"zip02", "maxlength" => "4", 'style' => 'width:10%']) }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ Form::label("pref","住所",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::select('pref', $prefs, $datas->pref, ['class' => 'form-control', 'id' => 'pref', 'style' => 'width:25%;']) }}
                            {{ Form::text("addr01", $datas->addr01, ["class"=>"form-control", "id"=>"addr01", "style" => "width:25%"]) }}
                            {{ Form::text("addr02", $datas->addr02, ["class"=>"form-control", "id"=>"addr02", "style" => "width:25%"]) }}
                        </td>
                    </tr>
                    <tr> 
                        <td>{{ Form::label("tel01","電話番号",["class"=>"control-label btn"]) }}</td>
                        <td>
                            {{ Form::tel("tel01", $datas->tel01, ["class"=>"form-control imeoff", "id"=>"tel01", "maxlength"=>"4", 'style' => 'width:25%', "pattern"=>"\d{1,5}-\d{1,4}-\d{3,4}", 'onChange' => 'getCustomer()']) }} - 
                            {{ Form::tel("tel02", $datas->tel02, ["class"=>"form-control imeoff", "id"=>"tel02", "maxlength"=>"4", 'style' => 'width:25%', "pattern"=>"\d{1,5}-\d{1,4}-\d{3,4}", 'onChange' => 'getCustomer()']) }} - 
                            {{ Form::tel("tel03", $datas->tel03, ["class"=>"form-control imeoff", "id"=>"tel03", "maxlength"=>"4", 'style' => 'width:25%', "pattern"=>"\d{1,5}-\d{1,4}-\d{3,4}", 'onChange' => 'getCustomer()']) }}
                        </td>
                    <tr>
                    <tr> 
                        <td>{{ Form::label("email","E-Mail",["class"=>"control-label btn"]) }}</td>
                        <td>{{ Form::tel("email", $datas->email, ["class"=>"form-control imeoff", "id"=>"email", 'style' => 'width:50%']) }}</td>
                    <tr>
                </table>
                                
                <div>
                    @if ($message == "")
                        {{ Form::hidden("status", $datas->status) }}
                        {{ Form::button("更新", ["class"=>"btn btn-success", "id"=>"submit_btn"]) }}
                        {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"javascript:window.history.back(-1);return false;"]) }}
                        <!-- <a href="#" data-toggle="modal" data-target="#deleteModal{!! $datas->customer_id !!}">{!! Form::button(" 削除 ", ["class" => "btn btn-danger"]) !!}</a> -->
                    @else
                        {{ Form::button("キャンセル", ["class"=>"btn btn-default", "onClick"=>"location.href='/WASHMATE-ADMIN/public/customer/index'"]) }}
                    @endif
                    
                </div>
                
            </div><!-- /.panel-body -->
        </div><!-- /.panel panel-default -->
    </div><!-- /.col-md-12 -->
                                                                    
    
    <!-- 作業店選択ダイアログ -->
    <div class="modal fade" id="customers">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h6 class="modal-title alert alert-success">作業店選択</h6>
                </div>
                <div class="modal-body">
                    <div style="display: inline-block; width: 99%; vertical-align: top;">
                        <table class="table">
                            <tr>
                                <td></td>
                                <td>コード</td>
                                <td>作業店名</td>
                                <td>作業店名（カナ）</td>
                                <td>郵便番号</td>
                                <td>都道府県</td>
                                <td>住所</td>
                                <td>TEL</td>
                            </tr>
                            @foreach($customers as $customer)
                            <tr>
                                <td><a href="#" class="btn btn-warning" data-dismiss="modal" onClick="javascript:setCustomers('{{ $customer->id }}', '{{ $customer->code }}', '{{ $customer->name1 }}', '{{ $customer->name_phonetic }}', '{{ $customer->person }}', '{{ $customer->tel1 }}', '{{ $customer->zipcode }}', '{{ $customer->pref }}', '{{ $customer->address1 }}')">セット</a></td>
                                <td>{{ $customer->code }}</td>
                                <td>{{ $customer->name1 }}</td>
                                <td>{{ $customer->name_phonetic }}</td>
                                <td>{{ $customer->zipcode }}</td>
                                <td>{{ $customer->prefname }}</td>
                                <td>{{ $customer->address1 }}</td>
                                <td>{{ $customer->tel1 }}</td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- /.部門選択ダイアログ -->
    {!! Form::close() !!}
    
</div>
    
<script Language="JavaScript">
    // 選択された店舗情報をセットする
    function setCustomers(id, code, name1, phonetic, person, tel1, zipcode, pref, address1) {
        document.getElementById("customer_id").value = id;
        document.getElementById("customer_code").value = code;
        document.getElementById("customer_name1").value = name1;
        document.getElementById("customer_phonetic").value = phonetic;
        document.getElementById("customer_person").value = person;
        document.getElementById("tel1").value = tel1;
        document.getElementById("zipcode").value = zipcode;
        document.getElementById("pref").value = pref;
        document.getElementById("address1").value = address1;

    }
</script>

<script>
  $(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",
    });
    
    $('#contract_ymd').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#contract_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#deliver_ymd').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#deliver_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#next_ymd').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#next_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#accept_ymd').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#accept_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#complete_ymd').datepicker({
        onSelect: function(dat,inst){
            var week=$.datepicker.iso8601Week(new Date(dat));
//            $('#complete_ymd').val($.datepicker.formatDate('yyyy/mm/dd',new Date(dat))+(week<10?'0':'')+week)
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#work_ymd').datepicker({
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
        onSelect:function(selected_date) {
            document.getElementById("accept_ymd").value = selected_date;
            document.getElementById("complete_ymd").value = selected_date;
            setNextYear();            
        },
    });    
});
</script>    

<script>
/* ------------------------------
 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