@extends('layouts.main')

@section('content')
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#searchform").validationEngine();
    });
</script>

<style>
    @media screen and (max-width: 768px) {
        td, th {
            width:100%;
            display:block;
        }
    }
</style>   

<div class="container">
    <!-- 検索エリア -->
    {{ Form::open(['url' => 'journal/areatrend', 'method' => 'POST', 'name' => 'form', 'id' => 'searchform']) }}
    <div class="row">
        <h5>分譲住宅販売データ動向</h5>
        <div class="col-md-12" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">検索条件</a></div>

                <div class="panel-body collapse in" id="collapseOne">
                    <table class="table">
                        <col width="5%" />
                        <col width="10%" />
                        <col width="8%" />
                        <col width="77%" />
                        <tr>
                            <td nowrap>{{ Form::label("address", "都道府県" ,["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::select('pref', $data_pref,  $request->pref, ['class'=>'form-control validate[required]', 'style'=>'width:120px', 'id'=>'pref', 'onChange' => 'makeList_City()']) }}
                            </td>

                            <td nowrap>{{ Form::label('yearmonth', 'データ取得年月', ["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text('yearmonth', $request->yearmonth, ["class"=>"form-control validate[required]", "id"=>"yearmonth", "style"=>"width:130px"]) }}</td>

                        </tr>
                    </table>

                    {{ Form::submit(" 検索 ", ["class"=>"btn btn-success", "onClick" => "submitProcess(0);"]) }}
                    {{ Form::submit("CSVダウンロード ", ["class" => "btn btn-warning csv", "onClick" => "submitProcess(1);"]) }}
                    {{ Form::hidden("download", "", ["class"=>"form-control", "id"=>"download"]) }}
                    {{ Form::button("クリア", ["class"=>"btn btn-default clearForm"]) }}
                        
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    {!! Form::close() !!}
    <!-- ./検索エリア -->

    @if (count($datas) > 0)
    <!-- データエリア -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">検索結果</div>

                <div class="panel-body">
                    <table class="table table-bordered">
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <tr bgcolor="#FFFFCC">
                            <th nowrap>都道府県</th>
                            <th nowrap>市区郡名</th>
                            <th nowrap>先々月物件数</th>
                            <th nowrap>先々月販売数</th>
                            <th nowrap>先々月販売割合</th>
                            <th nowrap>先月物件数</th>
                            <th nowrap>先月販売数</th>
                            <th nowrap>先月販売割合</th>
                            <th nowrap>今月物件数</th>
                            <th nowrap>今月販売数</th>
                            <th nowrap>今月販売割合</th>
                            <th nowrap></th>
                        </tr>
                        
                        @foreach ($datas as $data)
                        <tr>
                            <td nowrap>{{ $data->area1 }}</td>
                            <td nowrap>{{ $data->area2 }}</td>
                            <td nowrap align="right">{{ $data->active_count_01 }}</td>
                            <td nowrap align="right">{{ $data->sale_count_01 }}</td>
                            <td nowrap align="right">{{ $data->sale_ratio_01 }}</td>
                            <td nowrap align="right">{{ $data->active_count_02 }}</td>
                            <td nowrap align="right">{{ $data->sale_count_02 }}</td>
                            <td nowrap align="right">{{ $data->sale_ratio_02 }}</td>
                            <td nowrap align="right">{{ $data->active_count_03 }}</td>
                            <td nowrap align="right">{{ $data->sale_count_03 }}</td>
                            <td nowrap align="right">{{ $data->sale_ratio_03 }}</td>
                            <td nowrap></th>
                        </tr>
                        @endforeach
                        
                    </table>
                    
                </div><!-- /.panel-body -->                
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    <!-- ./データエリア -->

    
    
    <!-- データ未存在時 -->
    @elseif (count($datas) == 0 and $_SERVER["REQUEST_METHOD"] == "POST" )
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">検索結果</div>
                <div class="panel-body">
                    対象となるデータがありません<br />
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    
    @endif
    
</div><!-- /.container -->

<script Language="JavaScript">
    // submitボタン押下時
    function submitProcess(value) {
        document.getElementById("download").value = value;
    }

$(document).ready(function(){
    $(".clearForm").bind("click", function(){
        $(this.form).find("textarea, :text, radio, checkbox").val("").end().find(":checked").prop("checked", false);
        $(this.form).find("select").val("-1").end();
        makeList_Item();
        makeList_Errorcode();
    });
});
</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",
    });
    
    $('#yearmonth').datepicker({
        onSelect: function(dat,inst){
            $('#yearmonth').val($.datepicker.formatDate('yy-mm',new Date(dat)))
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
});
</script>    

<script Language="JavaScript">
    function makeList_City() {
        $('select#city').children().remove();

        var pref = $("select#pref").val();

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

            $.ajax({
                    type : "GET",
                    url  : "city",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"pref" : pref},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                            var len = json.length;
                            $("#city").append($("<option>").val('').text('選択してください'));

                            for(var i=0; i < len; i++){
                                $("#city").append($("<option>").val(json[i].name).text(json[i].name));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
    /* ------------------------------
     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("/TSON/public/img/loading.png") center center no-repeat;
    }
</style>

@endsection