@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/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']) }}
                                {{ Form::text("address", $request->address, ["class"=>"form-control", 'style'=>'width:200px', "id"=>"address"]) }}
                            </td>

                            <td nowrap>{{  Form::checkbox('CAll', 1, null, ['id' => 'CAll'])}} {{ Form::label('CAll', '販売開始月', ["class"=>"control-label"]) }}</td>
                            <td>
                                {{ Form::checkbox('startmonth[]',  1, @in_array( "1", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 1]) }} {{ Form::label( 1, ' 1月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  2, @in_array( "2", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 2]) }} {{ Form::label( 2, ' 2月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  3, @in_array( "3", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 3]) }} {{ Form::label( 3, ' 3月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  4, @in_array( "4", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 4]) }} {{ Form::label( 4, ' 4月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  5, @in_array( "5", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 5]) }} {{ Form::label( 5, ' 5月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  6, @in_array( "6", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 6]) }} {{ Form::label( 6, ' 6月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  7, @in_array( "7", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 7]) }} {{ Form::label( 7, ' 7月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  8, @in_array( "8", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 8]) }} {{ Form::label( 8, ' 8月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]',  9, @in_array( "9", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=> 9]) }} {{ Form::label( 9, ' 9月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]', 10, @in_array("10", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=>10]) }} {{ Form::label(10, '10月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]', 11, @in_array("11", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=>11]) }} {{ Form::label(11, '11月', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('startmonth[]', 12, @in_array("12", $request->startmonth), ['class' => 'validate[minCheckbox[1]]', 'id'=>12]) }} {{ Form::label(12, '12月', ["class"=>"control-label"]) }}　
                            </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%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                        <col width="5%" />
                            @if (Auth::user()->company_id == 1 or Auth::user()->company_id == 2)
                            <col width="5%" />
                            <col width="5%" />
                        @endif
                        <tr bgcolor="#FFFFCC">
                            <th nowrap>販売開始日</th>
                            <th nowrap>販売終了日</th>
                            <th nowrap>販売期間</th>
                            <th nowrap>物件名</th>
                            <th nowrap>エリア1</th>
                            <th nowrap>エリア2</th>
                            <th nowrap>郵便番号</th>
                            @if (Auth::user()->company_id == 1 or Auth::user()->company_id == 2)
                                <th nowrap>住所</th>
                            @endif
                            <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>
                            @if (Auth::user()->company_id == 1 or Auth::user()->company_id == 2)
                                <th nowrap>特徴</th>
                                <th nowrap>会社名</th>
                            @endif
                        </tr>
                        
                                                @foreach ($datas as $data)
                                                <tr bgcolor="{{ $bgcolor }}">
                            <td nowrap>{{ $data->date_st }}</td>
                            <td nowrap>{{ $data->date_ed }}</td>
                            <td nowrap style="text-align:right">{{ $data->sale_age }}</td>
                            <td nowrap>{{ $data->title }}</td>
                            <td nowrap>{{ $data->area1 }}</td>
                            <td nowrap>{{ $data->area2 }}</td>
                            <td nowrap>{{ $data->zipcode }}</td>
                            @if (Auth::user()->company_id == 1 or Auth::user()->company_id == 2)
                                <td nowrap>{{ $data->address }}</td>
                            @endif
                            <td nowrap>{{ $data->near_line }}</td>
                            <td nowrap>{{ $data->near_station }}</td>
                            <td nowrap style="text-align:right">{{ $data->walk_time }}</td>
                            <td nowrap>{{ $data->percel_name }}</td>
                            <td nowrap>{{ $data->floor_plan }}</td>
                            <td nowrap style="text-align:right">{{ $data->land_area }}</td>
                            <td nowrap style="text-align:right">{{ $data->build_area }}</td>
                            <td nowrap style="text-align:right">{{ number_format($data->price_st) }}</td>
                            <td nowrap style="text-align:right">{{ number_format($data->price_ed) }}</td>
                            @if (Auth::user()->company_id == 1 or Auth::user()->company_id == 2)
                                <td nowrap>{{ $data->description }}</td>
                                <td nowrap>{{ $data->sales_company }}</td>
                            @endif
                        </tr>
                        @endforeach
                        
                    </table>
                    
                </div><!-- /.panel-body -->
                <div align="right">
                    {!! $datas->appends(['address'=>$request->address,
                                         'pref'=>$request->pref,
                                         'city'=>$request->city,
                                         'address'=>$request->address,
                                         'startmonth'=>$request->startmonth,
                                         'ymd1'=>$request->ymd1,
                                         'ymd2'=>$request->ymd2,
                                         '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",
    });
    
    $('#ymd1').datepicker({
        onSelect: function(dat,inst){
            $('#ymd1').val($.datepicker.formatDate('yy-mm-dd',new Date(dat)))
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#ymd2').datepicker({
        onSelect: function(dat,inst){
            $('#ymd2').val($.datepicker.formatDate('yy-mm-dd',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