@extends('layouts.main')

@section('content')
<!-- Resources -->
<script src="{{ asset('js/amcharts4/core.js') }}"></script>
<script src="{{ asset('js/amcharts4/charts.js') }}"></script>
<script src="{{ asset('js/amcharts4/themes/animated.js') }}"></script>

<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' => 'rentanalyse/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="15%" />
                        <col width="5%" />
                        <col width="15%" />
                        <col width="5%" />
                        <col width="15%" />
                        <col width="35%" />
                        <tr>
                            <td nowrap>{{ Form::label("address", "住所" ,["class"=>"control-label btn"]) }}</td>
                            <td colspan="3">
                                {{ 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("nearline", "沿線" ,["class"=>"control-label btn"]) }}</td>
                            <td colspan="2">
                                {{ Form::select('nearline', $data_line,  $request->nearline, ['class'=>'form-control', 'style'=>'width:49%', 'id'=>'nearline', 'onChange' => 'makeList_Station()']) }}
                                {{ Form::select('nearstation', $data_station,  $request->nearstation, ['class'=>'form-control', 'style'=>'width:49%', 'id'=>'nearstation']) }}<br />
								※沿線にはバス路線も含まれます
                            </td>
                        </tr>
                        <tr>
                            <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>

                            <td>{{ Form::label("saleprice", "希望賃料" ,["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::text("saleprice", $request->saleprice, ["class"=>"form-control validate[required,custom[number]]", "id"=>"saleprice", "style"=>"width:100px"]) }} 円<br />
                                ※コンマ無しで入力してください。<br />（例5.5万円→55000）
                            </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>
                            <td></td>
                        </tr>
                        <tr>
                            <td nowrap>{{ Form::label("floortype", "部屋タイプ" ,["class"=>"control-label btn"]) }}</td>
                            <td colspan="6">
                                                                @foreach ($data_floor as $data)
                                                                        {{ Form::checkbox('floor[]',  $data, @in_array( $data, $request->floor), ['class' => "validate[minCheckbox[1]]", 'id'=> 'floortype' . $i]) }}
                                    {{ Form::label( 'floortype' . $i, $data, ["class"=>"control-label"]) }}　
                                @endforeach
                            </td>
                        </tr>
                    </table>

                    {{ Form::submit(" 検索 ", ["class"=>"btn btn-success", "onClick" => "submitProcess(0);"]) }}
                    {{ 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($data_summary) > 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 table-responsive">
                    <table class="table">
                        <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%" />
                        <col width="5%" />
                        <tr>
                            <th>データ数</th>
                            <td>{{ number_format($data_summary[0]->datacount) }} 件</td>
                            <th>平均徒歩時間</th>
                            <td>{{ number_format($data_summary[0]->walktime) }} 分</td>
                            <th>平均賃料</th>
                            <td>{{ number_format($data_summary[0]->price) }} 円</td>
                            <th>平均管理費</th>
                            <td>{{ number_format($data_summary[0]->manage) }} 円</td>
                            <th>平均敷金</th>
                            <td>{{ number_format($data_summary[0]->deposit) }} 円</td>
                            <th>平均礼金</th>
                            <td>{{ number_format($data_summary[0]->keymoney) }} 円</td>
                            <th>平均保証金</th>
                            <td>{{ number_format($data_summary[0]->warrant) }} 円</td>
                            <th>平均面積</th>
                            <td>{{ number_format($data_summary[0]->area) }} m&sup2;</td>
                            <th>平均築年数</th>
                            <td>{{ number_format($data_summary[0]->age) }} 年</td>
                        </tr>
                    </table>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    <!-- ./サマリーエリア -->

    <!-- グラフエリア -->
    <div class="row">
        <!-- 間取別平均賃料 -->
        <div class="col-md-6" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">部屋タイプ別平均賃料</a>
                </div>
                
                <div class="panel-body collapse in" id="collapse1">
                    <!-- HTML -->
                    <div id="chartdiv1" style="width: 100%; height: 1250px;"></div>

                    <!-- Chart code -->
                    <script>
                    am4core.ready(function() {

                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    // Create chart instance
                    var chart = am4core.create("chartdiv1", am4charts.XYChart3D);
                    chart.exporting.menu = new am4core.ExportMenu();
                    
                    // Add data
                    chart.data = [
                        @foreach ($data_floorprice as $data)
                        {
                            "floor_plan": '{{ $data->floor_plan }}',
                            "price": {{ $data->price }},
                            "color": chart.colors.next()
                        }, 
                        @endforeach
                    ];

                    // Create axes
                    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
                    categoryAxis.dataFields.category = "floor_plan";
                    categoryAxis.numberFormatter.numberFormat = "#";
                    categoryAxis.renderer.inversed = true;

                    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); 
                    valueAxis.numberFormatter = new am4core.NumberFormatter();
                    valueAxis.numberFormatter.numberFormat = "#,##0"; 

                    // Create series
                    var series = chart.series.push(new am4charts.ColumnSeries3D());
                    series.numberFormatter.numberFormat = "#,##0"; 
                    series.dataFields.valueX = "price";
                    series.dataFields.categoryY = "floor_plan";
                    series.name = "price";
                    series.columns.template.propertyFields.fill = "color";
                    series.columns.template.tooltipText = "{valueX}";
                    series.columns.template.column3D.stroke = am4core.color("#fff");
                    series.columns.template.column3D.strokeOpacity = 0.2;

                    var valueLabel = series.bullets.push(new am4charts.LabelBullet());
                    valueLabel.label.text = "{price}";
                    valueLabel.label.fontSize = 14;
                    }); // end am4core.ready()
                    </script>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->
        <!-- ./間取別平均賃料 -->
        
        <!-- 勝率 -->
        <div class="col-md-6" id="accordion2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2">AI予測勝率（％）</a>
                </div>

                <div class="panel-body collapse in" id="collapse2">

                    <!-- HTML -->
                    <div id="chartdiv2" style="width: 100%; height: 32vh;"></div>

                    <!-- Chart code -->
                    <script>
                        // Themes begin
                        am4core.useTheme(am4themes_animated);
                        // Themes end

                        // create chart
                        var chart = am4core.create("chartdiv2", am4charts.GaugeChart);
                        chart.exporting.menu = new am4core.ExportMenu();
                        chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

                        chart.innerRadius = -25;

                        var axis = chart.xAxes.push(new am4charts.ValueAxis());
                        axis.min = 0;
                        axis.max = 100;
                        axis.strictMinMax = true;
                        axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
                        axis.renderer.grid.template.strokeOpacity = 0.3;

                        var colorSet = new am4core.ColorSet();

                        var range0 = axis.axisRanges.create();
                        range0.value = 0;
                        range0.endValue = 50;
                        range0.axisFill.fillOpacity = 1;
                        range0.axisFill.fill = colorSet.getIndex(0);
                        range0.axisFill.zIndex = - 1;

                        var range1 = axis.axisRanges.create();
                        range1.value = 50;
                        range1.endValue = 80;
                        range1.axisFill.fillOpacity = 1;
                        range1.axisFill.fill = colorSet.getIndex(2);
                        range1.axisFill.zIndex = -1;

                        var range2 = axis.axisRanges.create();
                        range2.value = 80;
                        range2.endValue = 100;
                        range2.axisFill.fillOpacity = 1;
                        range2.axisFill.fill = colorSet.getIndex(4);
                        range2.axisFill.zIndex = -1;

                        var hand = chart.hands.push(new am4charts.ClockHand());

                        // using chart.setTimeout method as the timeout will be disposed together with a chart
                        chart.setTimeout(randomValue, 2000);

                        function randomValue() {
//                            hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut);
                            hand.showValue({{$data_winrate}}, 1000, am4core.ease.cubicOut);
                            chart.setTimeout(randomValue, 2000);
                        }
                    </script>

                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->
        <!-- ./勝率 -->
        
        <!-- 部屋タイプ別利回り -->
        <div class="col-md-6" id="accordion3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3">部屋タイプ別利回り（％）</a>
                </div>
                
                <div class="panel-body collapse in" id="collapse3">
                    <!-- HTML -->
                    <div id="chartdiv3" style="width: 100%; height: 35vh;"></div>

                    <!-- Chart code -->
                    <script>
                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    var chart = am4core.create("chartdiv3", am4charts.XYChart);
                    chart.exporting.menu = new am4core.ExportMenu();

                    // Create axes
                    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                    categoryAxis.dataFields.category = "floor";
                    categoryAxis.renderer.grid.template.location = 0;
                    categoryAxis.renderer.minGridDistance = 30;

                    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
                      if (target.dataItem && target.dataItem.index & 2 == 2) {
//                        return dy + 25;
                        return dy;
                      }
                      return dy;
                    });

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

                    // Create series
                    var series = chart.series.push(new am4charts.ColumnSeries());
                    series.dataFields.valueY = "yield";
                    series.dataFields.categoryX = "floor";
                    series.name = "利回り";
                    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
                    series.columns.template.fillOpacity = 0.8;

                    var columnTemplate = series.columns.template;
                    columnTemplate.strokeWidth = 2;
                    columnTemplate.strokeOpacity = 1;

                    chart.data = [
                        @foreach ($data_yield as $data)
                        {
                            "floor":"{{ $data->floor }}",
                            "yield":"{{ $data->yield }}",
                        },
                        @endforeach
                    ];
                    </script>
                        凡例：<br />
			1:1K/1DK/1LDK<br />
        		2:2K/2DK/2LDK<br />
			3:3K/3DK/3LDK<br />
			4:4K/4DK/4LDK<br />
			5:5K/5DK/5LDK<br />
			6:その他
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->
        <!-- ./部屋タイプ別利回り -->

        <!-- 徒歩時間別平均賃料 -->
        <div class="col-md-6" id="accordion4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion4" href="#collapse4">徒歩時間（分）別平均賃料（円）</a>
                </div>
                
                <div class="panel-body collapse in" id="collapse4">
                    <!-- HTML -->
                    <div id="chartdiv4" style="width: 100%; height: 35vh;"></div>

                    <!-- Chart code -->
                    <script>
                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    var chart = am4core.create("chartdiv4", am4charts.XYChart);
                    chart.exporting.menu = new am4core.ExportMenu();

                    var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
                    valueAxisX.renderer.ticks.template.disabled = true;
                    valueAxisX.renderer.axisFills.template.disabled = true;

                    var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
                    valueAxisY.renderer.ticks.template.disabled = true;
                    valueAxisY.renderer.axisFills.template.disabled = true;

                    var series = chart.series.push(new am4charts.LineSeries());
                    series.dataFields.valueX = "x";
                    series.dataFields.valueY = "y";
                    series.dataFields.value = "value";
                    series.strokeOpacity = 0;
                    series.sequencedInterpolation = true;
                    series.tooltip.pointerOrientation = "vertical";

                    var bullet = series.bullets.push(new am4charts.CircleBullet());
                    bullet.fill = am4core.color("#ff0000");
                    bullet.propertyFields.fill = "color";
                    bullet.strokeOpacity = 0;
                    bullet.strokeWidth = 2;
                    bullet.fillOpacity = 0.5;
                    bullet.stroke = am4core.color("#ffffff");
                    bullet.hiddenState.properties.opacity = 0;
                    bullet.circle.tooltipText = "徒歩時間: {valueX.value}分\n平均賃料:{valueY.value}円";

                    var outline = chart.plotContainer.createChild(am4core.Circle);
                    outline.fillOpacity = 0;
                    outline.strokeOpacity = 0.8;
                    outline.stroke = am4core.color("#ff0000");
                    outline.strokeWidth = 2;
                    outline.hide(0);

                    var blurFilter = new am4core.BlurFilter();
                    outline.filters.push(blurFilter);

                    var hoverState = bullet.states.create("hover");
                    hoverState.properties.fillOpacity = 1;
                    hoverState.properties.strokeOpacity = 1;

                    series.heatRules.push({ target: bullet.circle, min: 3, max: 3, property: "radius" });

                    bullet.circle.adapter.add("tooltipY", function (tooltipY, target) {
                        return -target.radius;
                    })

                    chart.cursor = new am4charts.XYCursor();
                    chart.cursor.behavior = "zoomXY";

                    chart.scrollbarX = new am4core.Scrollbar();
                    chart.scrollbarY = new am4core.Scrollbar();

                    chart.data = [
                                                    ];
                    </script>
        
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->
        <!-- ./徒歩時間別平均賃料 -->
        
        <!-- 平均賃料＆平均面積推移 -->
        <div class="col-md-6" id="accordion5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion5" href="#collapse5">平均賃料（円）＆平均面積推移（㎡）</a>
                </div>

                <div class="panel-body collapse in" id="collapse5">

                    <!-- HTML -->
                    <div id="chartdiv5" style="width: 100%; height: 35vh;"></div>

                    <!-- Chart code -->
                    <script>
                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    // Create chart instance
                    var chart = am4core.create("chartdiv5", am4charts.XYChart);
                    chart.exporting.menu = new am4core.ExportMenu();

                    // Data for both series
                    var data = [ 
                                                    ];

                    /* Create axes */
                    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                    categoryAxis.dataFields.category = "yearmonth";
                    categoryAxis.renderer.minGridDistance = 30;

                    /* Create value axis */
                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

                    /* Create series */
                    var columnSeries = chart.series.push(new am4charts.ColumnSeries());
                    columnSeries.name = "平均賃料";
                    columnSeries.dataFields.valueY = "income";
                    columnSeries.dataFields.categoryX = "yearmonth";

                    columnSeries.columns.template.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
                    columnSeries.columns.template.propertyFields.stroke = "stroke";
                    columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
                    columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
                    columnSeries.tooltip.label.textAlign = "middle";
                    columnSeries.yAxis = valueAxis;

                    var paretoValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    paretoValueAxis.renderer.opposite = true;
                    paretoValueAxis.renderer.grid.template.disabled = true;
                    paretoValueAxis.cursorTooltipEnabled = false;

                    var lineSeries = chart.series.push(new am4charts.LineSeries());
                    lineSeries.name = "面積";
                    lineSeries.dataFields.valueY = "expenses";
                    lineSeries.dataFields.categoryX = "yearmonth";
                    lineSeries.yAxis = paretoValueAxis;

                    lineSeries.stroke = am4core.color("#fdd400");
                    lineSeries.strokeWidth = 3;
                    lineSeries.propertyFields.strokeDasharray = "lineDash";
                    lineSeries.tooltip.label.textAlign = "middle";

                    var bullet = lineSeries.bullets.push(new am4charts.Bullet());
                    bullet.fill = am4core.color("#fdd400"); // tooltips grab fill from parent by default
                    bullet.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    var circle = bullet.createChild(am4core.Circle);
                    circle.radius = 4;
                    circle.fill = am4core.color("#fff");
                    circle.strokeWidth = 3;

                    chart.data = data;
                    </script>

                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
        <!-- 平均賃料推移 -->
        
    </div><!-- /.row -->
    
    <div class="row">
        <!-- 間取別件数 -->
        <div class="col-md-6" id="accordion6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion6" href="#collapse6">部屋タイプ別件数（件）</a>
                </div>

                <div class="panel-body collapse in" id="collapse6">

                    <!-- HTML -->
                    <div id="chartdiv6" style="width: 100%; height: 35vh;"></div>

                    <!-- Chart code -->
                    <script>
                        // Themes begin
                        am4core.useTheme(am4themes_animated);
                        // Themes end

                        // Create chart instance
                        var chart = am4core.create("chartdiv6", am4charts.PieChart);
                        chart.exporting.menu = new am4core.ExportMenu();

                        // Add data
                        chart.data = [ 
                            @foreach ($data_floorprice as $data)
                            {
                                "floor_plan": '{{ $data->floor_plan }}',
                                "count": {{ $data->count }},
                                "color": chart.colors.next()
                            }, 
                            @endforeach
                        ];

                        // Add and configure Series
                        var pieSeries = chart.series.push(new am4charts.PieSeries());
                        pieSeries.dataFields.value = "count";
                        pieSeries.dataFields.category = "floor_plan";
                        pieSeries.slices.template.stroke = am4core.color("#fff");
                        pieSeries.slices.template.strokeWidth = 2;
                        pieSeries.slices.template.strokeOpacity = 1;

                        // This creates initial animation
                        pieSeries.hiddenState.properties.opacity = 1;
                        pieSeries.hiddenState.properties.endAngle = -90;
                        pieSeries.hiddenState.properties.startAngle = -90;
                        
                        pieSeries.labels.template.disabled = true;
                        pieSeries.ticks.template.disabled = true;
                    </script>

                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
        
        <!-- 築年数別平均賃料下落率 -->
        <div class="col-md-6" id="accordion7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion7" href="#collapse7">建物築年別平均賃料下落率（％）</a>
                </div>
                
                <div class="panel-body collapse in" id="collapse7">
                    <!-- HTML -->
                    <div id="chartdiv7" style="width: 100%; height: 35vh;"></div>

                    <!-- Chart code -->
                    <script>
                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    var chart = am4core.create("chartdiv7", am4charts.XYChart);
                    chart.exporting.menu = new am4core.ExportMenu();

                    // Create axes
                    var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
                    valueAxisX.title.text = '経過年数';
                    valueAxisX.renderer.minGridDistance = 40;

                    // Create value axis
                    var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
                    valueAxisY.title.text = '変化率';

                    // Create series
                    var lineSeries = chart.series.push(new am4charts.LineSeries());
                    lineSeries.dataFields.valueY = "y";
                    lineSeries.dataFields.valueX = "x";
                    lineSeries.strokeOpacity = 0;

                    // Add a bullet
                    var bullet = lineSeries.bullets.push(new am4charts.Bullet());
                    bullet.tooltipText = "[#000 font-size: 15px]建物築年 {valueX} 年:\n[/][#000 font-size: 15px]変化率 {valueY} % [/] [#000]{additional}[/]"

                    // Add a triangle to act as am arrow
                    var arrow = bullet.createChild(am4core.Triangle);
                    arrow.horizontalCenter = "middle";
                    arrow.verticalCenter = "middle";
                    arrow.strokeWidth = 0;
                    arrow.fill = chart.colors.getIndex(0);
                    arrow.direction = "top";
                    arrow.width = 12;
                    arrow.height = 12;

                    //scrollbars
                    chart.scrollbarX = new am4core.Scrollbar();
                    chart.scrollbarY = new am4core.Scrollbar();

                    chart.data = [
                                                    ];

                    //add the trendlines
                    var trend = chart.series.push(new am4charts.LineSeries());
                    trend.dataFields.valueY = "value2";
                    trend.dataFields.valueX = "value";
                    trend.strokeWidth = 2
                    trend.stroke = chart.colors.getIndex(0);
                    trend.strokeOpacity = 0.7;
                    trend.data = [
                      { "value": 0, "value2": 0 },
                      { "value": {{ $lastX }}, "value2": {{ $lastY }} }
                    ];
                    </script>

                    <div style="text-align:center">下落率（%）={{ $rateinc }} × 年</div>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->
        <!-- ./築年数別平均賃料 -->
        
    </div><!-- /.row -->
    
    
    
    <!-- データ未存在時 -->
    @elseif (count($data_summary) == 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() {
      $('#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