@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' => 'rentjournal/index', '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="35%" />
                        <col width="8%" />
                        <col width="52%" />
                        <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();']) }}
                                {{ Form::select('city', $data_city,  $request->city, ['class'=>'form-control validate[required]', 'style'=>'width:150px', 'id'=>'city', 'onChange' => 'makeList_Line();']) }}
                                {{ Form::text("address", $request->address, ["class"=>"form-control", 'style'=>'width:200px', "id"=>"address"]) }}
                            </td>

                            <td nowrap>{{ Form::label('yearmonth', 'データ取得年月', ["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('yearmonth', $data_yearmonth, $request->yearmonth, ['class'=>'form-control', 'style'=>'width:150px', 'id'=>'yearmonth']) }}</td>
                        </tr>
                        <tr>
                            <td nowrap>{{ Form::label("nearline", "沿線" ,["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::select('nearline', $data_line,  $request->nearline, ['class'=>'form-control', 'style'=>'width:200px', 'id'=>'nearline', 'onChange' => 'makeList_Station()']) }}
                                {{ Form::select('nearstation', $data_station,  $request->nearstation, ['class'=>'form-control', 'style'=>'width:200px', 'id'=>'nearstation']) }}
                            </td>

                            <td nowrap>{{ Form::label('dataclass', '物件区分', ["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('dataclass', $data_class,  $request->dataclass, ['class'=>'form-control', 'style'=>'width:150px', 'id'=>'dataclass']) }}</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-responsive">
                    <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%" />
                        <tr bgcolor="#FFFFCC">
                            <th nowrap>物件区分</th>
                            <th nowrap>タイトル</th>
                            <th nowrap>エリア1</th>
                            <th nowrap>エリア2</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>
                            <th nowrap>向き</th>
                            <th nowrap>築年数</th>
                        </tr>
                        
                                                @foreach ($datas as $data)
                                                <tr bgcolor="{{ $bgcolor }}">
                            <td nowrap>{{ $data->classname }}</td>
                            <td nowrap>{{ $data->title }}</td>
                            <td nowrap>{{ $data->area1 }}</td>
                            <td nowrap>{{ $data->area2 }}</td>
                            <td nowrap>{{ $data->near_line1 }}</td>
                            <td nowrap>{{ $data->near_station1 }}</td>
                            <td nowrap style="text-align:right">{{ $data->walk_time1 }}</td>
                            <td nowrap style="text-align:right">{{ $data->price_display }}</td>
                            <td nowrap style="text-align:right">{{ $data->manage_display }}</td>
                            <td nowrap style="text-align:right">{{ $data->deposit_display }}</td>
                            <td nowrap style="text-align:right">{{ $data->key_display }}</td>
                            <td nowrap style="text-align:right">{{ $data->warrant_display }}</td>
                            <td nowrap style="text-align:right">{{ $data->amort_display }}</td>
                            <td nowrap>{{ $data->floor_plan }}</td>
                            <td nowrap style="text-align:right">{{ $data->area_display }}</td>
                            <td nowrap>{{ $data->direct_display }}</td>
                            <td nowrap>{{ $data->age_display }}</td>
                        </tr>
                        @endforeach
                        
                    </table>

                </div><!-- /.panel-body -->
                <div align="right">
                    {!! $datas->appends(['address'=>$request->address,
                                         'pref'=>$request->pref,
                                         'city'=>$request->city,
                                         'address'=>$request->address,
                                         'yearmonth'=>$request->yearmonth,
                                         'nearline'=>$request->nearline,
                                         'nearstation'=>$request->nearstation,
                                         'dataclass'=>$request->dataclass,
                                         'download'=>'0'])->render() !!}
                </div>
                
            </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 />
                    販売開始月を広げる（1月～12月の全て選択）、全データもクリックする、住所範囲を広げる（○○市○○町→○○市）、郵便番号を利用する等の対応をしてみてください。
                </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() {
      $('#CAll').on("click",function(){
        $('input[name="startmonth[]"]').prop("checked", $(this).prop("checked"));
      });
    });
</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;
                            for(var i=0; i < len; i++){
                                $("#city").append($("<option>").val(json[i].name).text(json[i].name));
                                
                                if (i == 0) {
                                    makeList_Line()
                                }
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
    
    function makeList_Line() {
        $('select#nearline').children().remove();

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

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

            $.ajax({
                    type : "GET",
                    url  : "line",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"pref" : pref, "city" : city},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                            $("#nearline").append($("<option>").val('').text('選択してください'));
                            for(var i=0; i < len; i++){
                                $("#nearline").append($("<option>").val(json[i].name).text(json[i].name));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
    
    function makeList_Station() {
        $('select#nearstation').children().remove();

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

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

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