@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(['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="8%" />
                        <col width="52%" />
                        <col width="5%" />
                        <col width="15%" />
                        <col width="5%" />
                        <col width="15%" />
                        <tr>
                            <td>{{ Form::label("address", "住所" ,["class"=>"control-label btn"]) }}</td>
                            <td>
                                {{ Form::select('pref', $data_pref,  $request->pref, ['class'=>'form-control validate[required]', 'style'=>'width:150px', '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"]) }}<br />
                                ※地名表記が複数ある場合はそれぞれお試しください　例）条と條、が丘とヶ丘　等
                            </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 />（例3500万円→3500）
                            </td>

                            <td>{{ Form::label("period", "販売希望期間" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('period', ['1～3カ月', '4～6カ月', '7～9カ月', '10～12か月', '13カ月以上'],  $request->period, ['class'=>'form-control', 'id'=>'period', "style"=>"width:100px"]) }}</td>
                        </tr>
                        <tr>
                            <td>{{  Form::checkbox('CAll', 1, null, ['id' => 'CAll'])}} {{ Form::label('CAll', '販売開始月', ["class"=>"control-label"]) }}</td>
                            <td colspan="4">
                                {{ 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>
                            
                            <td></td>
                        </tr>
                    </table>

                    {{ Form::submit(" 検索 ", ["class"=>"btn btn-success"]) }}　
                        
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    {!! Form::close() !!}
    <!-- ./検索エリア -->

    @if (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">検索結果 (2016年4月から先月まで)</div>

                <div class="panel-body table-responsive">
                    <table class="table">
                        <col width="8%" />
                        <col width="12%" />
                        <col width="8%" />
                        <col width="12%" />
                        <col width="8%" />
                        <col width="52%" />
                        <tr>
                            <th>物件数</th>
                            <td>
                                                                {{ number_format($total_count) }} 戸
                            </td>
                            <th>物件数(年平均)</th>
                            <td>{{ number_format($avg_count) }} 戸 / 年</td>
                            <th></th>
                            <td></td>
                        </tr>
                    </table>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    <!-- ./サマリーエリア -->
    
    <!-- 平均値エリア -->
    <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="6%" />
                        <col width="10%" />
                        <col width="6%" />
                        <col width="10%" />
                        <col width="6%" />
                        <col width="10%" />
                        <col width="6%" />
                        <col width="10%" />
                        <col width="6%" />
                        <col width="10%" />
                        <col width="6%" />
                        <col width="10%" />
                        
                        <tr>
                            <th>売出価格</th>
                            <td>
                                                                {{ number_format($total_price_st) }} 円
                            </td>
                            <th>契約価格</th>
                            <td>
                                                                {{ number_format($total_price_ed) }} 円
                            </td>
                            <th>割引率</th>
                            <td>
                                {{ number_format( (($total_price_st - $total_price_ed) / $total_price_st * 100), 2) }} ％
                            </td>
                            <th>値引額</th>
                            <td>
                                {{ number_format( $total_price_st - $total_price_ed, 0) }} 円
                            </td>
                            <th>値引物件率</th>
                            <td>
                                                                {{ number_format($value, 2) }} ％
                            </td>
                            <th>駅からの時間</th>
                            <td>
                                                                徒歩 {{ number_format($value, 2) }} 分
                            </td>
                        </tr>
                            
                        <tr>
                            <th>販売期間</th>
                            <td>
                                                                {{ number_format($value, 1) }} か月
                            </td>
                            <th>土地面積</th>
                            <td>
                                                                {{ number_format($value, 2) }} ㎡
                            </td>
                            <th>建物面積</th>
                            <td>
                                                                {{ number_format($value, 2) }} ㎡
                            </td>
                            
                            <th></th>
                            <td></td>
                            <th></th>
                            <td></td>
                            <th></th>
                            <td></td>
                        </tr>
                    </table>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    <!-- ./平均値エリア -->
    
    <!-- グラフエリア -->
    <div class="row">
        <!-- 勝率 -->
        <div class="col-md-4" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">AI予測勝率（％）</a>
                </div>

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

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

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

                        // create chart
                        var chart = am4core.create("chartdiv1", 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-12 -->
        
        <!-- 土地面積・売出価格 -->
        @if ($browserFlg == 0) 
        <div class="col-md-4" id="accordion2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse2">土地面積（㎡）/売出価格（円）</a>
                </div>

                <div class="panel-body collapse in" id="collapse2">
                    
                    <!-- HTML -->
                    <div id="chartdiv2" style="width: 100%; height: 35vh;"></div>

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

                    var chart = am4core.create("chartdiv2", 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 = "[bold]{title}:[/]\n土地面積: {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-12 -->
        @endif
        
        <!-- 契約価格（円）・平均徒歩時間（分）推移 -->
        <div class="col-md-4" 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

                    // Create chart instance
                    var chart = am4core.create("chartdiv3", 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 = "year";
                    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 = "year";

                    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 = "year";
                    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-4" 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

                    // Create chart instance
                    var chart = am4core.create("chartdiv4", 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 = "year";
                    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 = "year";

                    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";

                    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 = "year";
                    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 class="col-md-4" 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.PieChart);
                        chart.exporting.menu = new am4core.ExportMenu();

                        // Add data
                        chart.data = [ 
                                                    ];

                        // Add and configure Series
                        var pieSeries = chart.series.push(new am4charts.PieSeries());
                        pieSeries.dataFields.value = "count";
                        pieSeries.dataFields.category = "period";
                        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 -->
        
        <!-- 徒歩時間・売出価格 -->
        @if ($browserFlg == 0) 
        <div class="col-md-4" 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

                    var chart = am4core.create("chartdiv6", 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 = "[bold]{title}:[/]\n徒歩時間: {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-12 -->
        @endif
        
    </div><!-- /.row -->
    
    <div class="row">
        <!-- 月別価格 -->
        <div class="col-md-12" 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: 45vh;"></div>

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

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

                    // Add data
                    chart.data = [
                        @foreach($data_monthly as $data)
                        {
                            "yearmonth":  "{{ $data->yearmonth }}",
                            "price_st": {{ $data->price_st }},
                            "price_ed": {{ $data->price_ed }},
                            "land_area": {{ $data->land_area }},
                            "build_area": {{ $data->build_area }},
                        }, 
                        @endforeach
                    ];

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

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    valueAxis.title.text = "価格";

                    // Create series
                    var series = chart.series.push(new am4charts.ColumnSeries3D());
                    series.dataFields.valueY = "price_ed";
                    series.dataFields.categoryX = "yearmonth";
                    series.name = "契約価格";
                    series.clustered = false;
                    series.columns.template.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    series.columns.template.fillOpacity = 0.9;

                    var series2 = chart.series.push(new am4charts.ColumnSeries3D());
                    series2.dataFields.valueY = "price_st";
                    series2.dataFields.categoryX = "yearmonth";
                    series2.name = "売出価格";
                    series2.clustered = false;
                    series2.columns.template.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    
                    var paretoValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    paretoValueAxis.renderer.opposite = true;
                    paretoValueAxis.renderer.grid.template.disabled = true;
                    paretoValueAxis.cursorTooltipEnabled = false;
                    paretoValueAxis.title.text = "面積";

                    var lineSeries = chart.series.push(new am4charts.LineSeries());
                    lineSeries.name = "土地面積";
                    lineSeries.dataFields.valueY = "land_area";
                    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;

                    var lineSeries2 = chart.series.push(new am4charts.LineSeries());
                    lineSeries2.name = "建物面積";
                    lineSeries2.dataFields.valueY = "build_area";
                    lineSeries2.dataFields.categoryX = "yearmonth";
                    lineSeries2.yAxis = paretoValueAxis;

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

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

                    </script>

                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    
    <div class="row">
        <!-- 月別販売・新規数 -->
        <div class="col-md-12" id="accordion8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion8" href="#collapse8">月別販売・新規物件数、景気DI値（内閣府）推移</a>
                </div>
                <div class="panel-body collapse in" id="collapse8">

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

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

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

                    // Add data
                    chart.data = [
                        @foreach($data_di as $data)
                        {
                            "yearmonth":  "{{ $data->yearmonth }}",
                            "new_count": {{ $data->new_count }},
                            "sale_count": {{ $data->sale_count }},
                            "di_total": {{ $data->di_total }},
                            "di_house": {{ $data->di_house }},
                        }, 
                        @endforeach
                    ];

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

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    valueAxis.title.text = "物件数";

                    // Create series
                    var series = chart.series.push(new am4charts.ColumnSeries3D());
                    series.dataFields.valueY = "sale_count";
                    series.dataFields.categoryX = "yearmonth";
                    series.name = "売却物件数";
                    series.clustered = false;
                    series.columns.template.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    series.columns.template.fillOpacity = 0.9;

                    var series2 = chart.series.push(new am4charts.ColumnSeries3D());
                    series2.dataFields.valueY = "new_count";
                    series2.dataFields.categoryX = "yearmonth";
                    series2.name = "新規物件数";
                    series2.clustered = false;
                    series2.columns.template.tooltipText = "[#000 font-size: 15px]{name} in {categoryX}:\n[/][#000 font-size: 20px]{valueY}[/] [#000]{additional}[/]"
                    
                    var paretoValueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    paretoValueAxis.renderer.opposite = true;
                    paretoValueAxis.renderer.grid.template.disabled = true;
                    paretoValueAxis.cursorTooltipEnabled = false;
                    paretoValueAxis.title.text = "景気DI値";

                    var lineSeries = chart.series.push(new am4charts.LineSeries());
                    lineSeries.name = "景気DI値（合計）";
                    lineSeries.dataFields.valueY = "di_total";
                    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;

                    var lineSeries2 = chart.series.push(new am4charts.LineSeries());
                    lineSeries2.name = "景気DI値（住宅関連）";
                    lineSeries2.dataFields.valueY = "di_house";
                    lineSeries2.dataFields.categoryX = "yearmonth";
                    lineSeries2.yAxis = paretoValueAxis;

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

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

                    </script>

                </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 />
                    販売開始月を広げる（1月～12月の全て選択）、住所範囲を広げる（○○市○○町→○○市）等の対応をしてみてください。
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    
    <!-- データ未存在時 -->
    @else
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">検索手順</div>
                <div class="panel-body">
                    ・住所欄、販売希望価格を入力してください。<br />
                    ・住所は市、区単位から、～市～町、～市～区～町という具合に、もう一段階ブレイクダウンした単位まで入力可能です。<br />
                    ・2016年4月から検索時までの収集データを利用しています。<br />
                    ・「住所で対象となるデータがありません」の表示が出るときは、販売開始月を広げる（1月～12月の全て選択）、全データもクリックする、住所範囲を広げる（○○市○○町→○○市）等の対応をしてみてください。<br />
                    ・販売希望価格は円単位で、コンマ無しで入力してください。（例3500万円→3500）
                    ・販売希望期間は希望する期間を選択してください。<br />
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    @endif
    
</div><!-- /.container -->

<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