@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' => 'cloudfund/propsearch', '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="5%" />
                        <col width="15%" />
                        <col width="5%" />
                        <col width="15%" />
                        <tr>
                            <td nowrap>{{ Form::label("itemname", "ファンド名" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("itemname", $request->itemname, ["class"=>"form-control", "id"=>"itemname"]) }}</td>

                            <td nowrap>{{ Form::label("compname", "会社名" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("compname", $request->compname, ["class"=>"form-control", "id"=>"compname"]) }}</td>

                            <td nowrap>{{ Form::label("pref", "立地都道府県" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::select('pref', $data_pref,  $request->pref, ['class'=>'form-control', 'style'=>'width:150px', 'id'=>'pref']) }}</td>

                            <td nowrap></td>
                            <td></td>

                            <td nowrap></td>
                            <td></td>

                        </tr>
                        <tr>
                            <td nowrap>{{ Form::label("assume_share_rate", "利回り" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("assume_share_rate", $request->assume_share_rate, ["class"=>"form-control", "id"=>"assume_share_rate"]) }}</td>

                            <td nowrap>{{ Form::label("invest_unit_one", "出資単位" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("invest_unit_one", $request->invest_unit_one, ["class"=>"form-control", "id"=>"invest_unit_one"]) }}</td>

                            <td nowrap>{{ Form::label("invest_unit_total", "出資総額" ,["class"=>"control-label btn"]) }}</td>
                            <td>{{ Form::text("invest_unit_total", $request->invest_unit_total, ["class"=>"form-control", "id"=>"invest_unit_total"]) }}</td>

                            <td nowrap>{{ Form::label("operation_mode", "運用状態" ,["class"=>"control-label btn"]) }}</td>
                            <td colspan="3">
                                {{ Form::checkbox('recruit_before',  1, @in_array( 1, $request->recruit_before), ['id'=> 'recruit_before']) }}  {{ Form::label( 'recruit_before', '募集開始前', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('recruit_now',     1, @in_array( 1, $request->recruit_now), ['id'=> 'recruit_now']) }}        {{ Form::label( 'recruit_now', '募集中', ["class"=>"control-label"]) }}　
                                {{ Form::checkbox('operation_now',   1, @in_array( 1, $request->operation_now), ['id'=> 'operation_now']) }}    {{ Form::label( 'operation_now', '運用中', ["class"=>"control-label"]) }}　                                
                                {{ Form::checkbox('end_maturity',    1, @in_array( 1, $request->end_maturity), ['id'=> 'end_maturity']) }}      {{ Form::label( 'end_maturity', '満期終了', ["class"=>"control-label"]) }}　                                
                            </td>

                        </tr>
                    </table>

                    {{ Form::submit(" 検索 ", ["class"=>"btn btn-success", "onClick" => "submitProcess(0);"]) }}
                    {{ Form::hidden("download", "", ["class"=>"form-control", "id"=>"download"]) }}
                    {{ Form::hidden("company_id", $request->company_id, ["class"=>"form-control", "id"=>"company_id"]) }}
                    {{ Form::hidden("list_id", $request->list_id, ["class"=>"form-control", "id"=>"list_id"]) }}
                    {{ 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">検索結果：
                    <a href="{{ url('/cloudfund/compsearch?itemname=' . $request->itemname . '&compname=' . $request->compname . '&pref=' . $request->pref . '&assume_share_rate=' . $request->assume_share_rate . '&invest_unit_one=' . $request->invest_unit_one . '&invest_unit_total=' . $request->invest_unit_total . '&recruit_before=' . $request->recruit_before . '&recruit_now=' . $request->recruit_now . '&operation_now=' . $request->operation_now . '&end_maturity=' . $request->end_maturity . '&download=1' ) }}">TOP</a> > 
                    <a href="{{ url('/cloudfund/fundsearch?company_id=' . $request->company_id . '&itemname=' . $request->itemname . '&compname=' . $request->compname . '&pref=' . $request->pref . '&assume_share_rate=' . $request->assume_share_rate . '&invest_unit_one=' . $request->invest_unit_one . '&invest_unit_total=' . $request->invest_unit_total . '&recruit_before=' . $request->recruit_before . '&recruit_now=' . $request->recruit_now . '&operation_now=' . $request->operation_now . '&end_maturity=' . $request->end_maturity . '&download=1' ) }}">{{ $datas[0]->company_name }}</a> > 
                    {{ $datas[0]->itemname }}
                </div>
                
                <div class="panel-body">
                    <table class="table table-bordered" id="datalist">
                        <tr bgcolor="#EEEEEE">
                            <th nowrap>物件名</th>
                            <th nowrap>募集総額（単位：万円）</th>
                            <th nowrap>想定利益（単位：万円）</th>
                            <th nowrap>住所</th>
                            <th nowrap>竣工</th>
                            <th nowrap>開業</th>
                            <th nowrap>構造</th>
                            <th nowrap>階建</th>
                            <th nowrap>地階</th>
                            <th nowrap>総戸数</th>
                            <th nowrap>駐車場</th>
                            <th nowrap>総床面積㎡</th>
                            <th nowrap>敷地面積㎡</th>
                            <th nowrap>権利形態</th>
                            <th nowrap>部屋タイプ1</th>
                            <th nowrap>戸数1</th>
                            <th nowrap>部屋タイプ2</th>
                            <th nowrap>戸数2</th>
                            <th nowrap>部屋タイプ3</th>
                            <th nowrap>戸数3</th>
                            <th nowrap>部屋タイプ4</th>
                            <th nowrap>戸数4</th>
                        </tr>
                        
                        @foreach($datas as $data)
                        <tr data-href="{{ url('/cloudfund/areasearch?company_id=' . $request->company_id . '&list_id=' . $request->list_id . '&property_id=' . $data->id . '&itaemname=' . $request->itemname . '&compname=' . $request->compname . '&pref=' . $request->pref . '&assume_share_rate=' . $request->assume_share_rate . '&invest_unit_one=' . $request->invest_unit_one . '&invest_unit_total=' . $request->invest_unit_total . '&recruit_before=' . $request->recruit_before . '&recruit_now=' . $request->recruit_now . '&operation_now=' . $request->operation_now . '&end_maturity=' . $request->end_maturity . '&download=1' ) }}">
                            <td nowrap>{{ $data->property_name }}</td>
                            <td nowrap>{{ $data->total_amount }}</td>
                            <td nowrap>{{ $data->expected_profit }}</td>
                            <td nowrap>{{ $data->address }}</td>
                            <td nowrap>{{ $data->complation }}</td>
                            <td nowrap>{{ $data->opening }}</td>
                            <td nowrap>{{ $data->construction }}</td>
                            <td nowrap>{{ $data->number_floor }}</td>
                            <td nowrap>{{ $data->under_floor }}</td>
                            <td nowrap>{{ $data->number_total }}</td>
                            <td nowrap>{{ $data->parking }}</td>
                            <td nowrap>{{ $data->floor_space }}</td>
                            <td nowrap>{{ $data->area_space }}</td>
                            <td nowrap>{{ $data->rights_form }}</td>
                            <td nowrap>{{ $data->floor_type1 }}</td>
                            <td nowrap>{{ $data->unit1 }}</td>
                            <td nowrap>{{ $data->floor_type2 }}</td>
                            <td nowrap>{{ $data->unit2 }}</td>
                            <td nowrap>{{ $data->floor_type3 }}</td>
                            <td nowrap>{{ $data->unit3 }}</td>
                            <td nowrap>{{ $data->floor_type4 }}</td>
                            <td nowrap>{{ $data->unit4 }}</td>
                        </tr>
                        @endforeach
                    </table>
                </div>
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-12 -->
    </div><!-- /.row -->
    
    <div class="row">       
        <!-- 勝率 -->
        @if (count($data_chart) > 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: 40vh;"></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(@if ($data_chart[0]->assume_share_rate == '' ) {{ 0 }} @else {{ $data_chart[0]->assume_share_rate * 10 }} @endif, 1000, am4core.ease.cubicOut);
                            chart.setTimeout(randomValue, 2000);
                        }
                    </script>

                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-4 -->
        @endif
        <!-- ./勝率 -->

        @if (count($data_chart) > 0)
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">レーダーチャート</div>
                
                <div class="panel-body">

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

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

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

                    /* Create chart instance */
                    var chart = am4core.create("chartdiv1", am4charts.RadarChart);

                    /* Add data */
                    chart.data = [ {
                      "direction": "出資総額",
                      "value": @if ($data_chart[0]->invest_unit_total == '' ) {{ 0 }} @else {{ $data_chart[0]->invest_unit_total / $data_chart_avg[0]->avg_invest_unit_total * 10 }} @endif
                    }, {
                      "direction": "出資一口",
                      "value": @if ($data_chart[0]->invest_unit_one == '' ) {{ 0 }} @else {{ $data_chart[0]->invest_unit_one / $data_chart_avg[0]->avg_invest_unit_one * 10 }} @endif
                    }, {
                      "direction": "想定分配率",
                      "value": @if ($data_chart[0]->assume_share_rate == '' ) {{ 0 }} @else {{ $data_chart[0]->assume_share_rate / $data_chart_avg[0]->avg_assume_share_rate * 10 }} @endif
                    }, {
                      "direction": "募集総額",
                      "value": @if ($data_chart[0]->total_amount == '' ) {{ 0 }} @else {{ $data_chart[0]->total_amount / $data_chart_avg[0]->avg_total_amount * 100 }} @endif
                    }, {
                      "direction": "想定利益",
                      "value": @if ( $data_chart[0]->expected_profit == '') {{ 0 }} @else {{ $data_chart[0]->expected_profit / $data_chart_avg[0]->avg_expected_profit * 100 }} @endif
                    }, {
                      "direction": "総人口",
                      "value":@if ($data_chart[0]->population_total1 == '' ) {{ 0 }} @else  {{ $data_chart[0]->population_total1 / $data_chart_avg[0]->avg_population_total1 * 100 }} @endif
                    }, {
                      "direction": "20代人口",
                      "value": @if ($data_chart[0]->population_20over1 == '' ) {{ 0 }} @else {{ $data_chart[0]->population_20over1 / $data_chart_avg[0]->avg_population_20over1 * 100 }} @endif
                    }, {
                      "direction": "6歳未満人口",
                      "value": @if ($data_chart[0]->population_6under1 == '' ) {{ 0 }} @else {{ $data_chart[0]->population_6under1 / $data_chart_avg[0]->avg_population_6under1 * 100 }} @endif
                    } ];

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

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    //valueAxis.renderer.gridType = "polygons";

                    var range = categoryAxis.axisRanges.create();
                    range.category = "6歳未満人口";
                    range.endCategory = "6歳未満人口";
                    range.axisFill.fill = am4core.color("#0066CC");
                    range.axisFill.fillOpacity = 0.3;

                    var range2 = categoryAxis.axisRanges.create();
                    range2.category = "出資総額";
                    range2.endCategory = "出資総額";
                    range2.axisFill.fill = am4core.color("#0066CC");
                    range2.axisFill.fillOpacity = 0.3;

                    var range3 = categoryAxis.axisRanges.create();
                    range3.category = "出資一口";
                    range3.endCategory = "総人口";
                    range3.axisFill.fill = am4core.color("#CC3333");
                    range3.axisFill.fillOpacity = 0.3;
                    range3.locations.endCategory = 0;

                    /* Create and configure series */
                    var series = chart.series.push(new am4charts.RadarSeries());
                    series.dataFields.valueY = "value";
                    series.dataFields.categoryX = "direction";
                    series.name = "Wind direction";
                    series.strokeWidth = 3;
                    series.fillOpacity = 0.2;

                    }); // end am4core.ready()
                    </script>
                </div>
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-4 -->
        @endif

        @if (count($datas) > 0)
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">Google Map</div>
                
                <div class="panel-body">
                    
                    <div id="gmap" style="width: 100%; height: 40vh;"></div>

                    <script>
                    function initMap() {
                      var target = document.getElementById('gmap');  
                      var address = "{{ $datas[0]->address }}"; 
                      var geocoder = new google.maps.Geocoder();  

                      geocoder.geocode({ address: address }, function(results, status){
                         if (status === 'OK' && results[0]){  
                           //マップのインスタンスを変数に代入
                            var map = new google.maps.Map(target, {  
                              center: results[0].geometry.location,
                              zoom: 14
                            });

                           //マーカーの生成
                            var marker = new google.maps.Marker({
                              position: results[0].geometry.location,
                              map: map,
                              animation: google.maps.Animation.DROP
                            });

                           //情報ウィンドウの生成
                            var infoWindow = new google.maps.InfoWindow({
                              content: '{{ $datas[0]->property_name }}',
                              pixelOffset: new google.maps.Size(0, 5)
                            });

                           //マーカーにリスナーを設定
                           marker.addListener('click', function(){
                              infoWindow.open(map, marker);
                            });

                         }else{ 
                           alert('失敗しました。理由: ' + status);
                           return;
                         }
                      });
                    }
                    </script>
                    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUcGk3PsD_LGZyHi-Gq7RipKyZSkgkTto&callback=initMap" async defer></script>

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

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

</script>

<style>
table.datalist td, th {
    padding: 5px 10px;
}
table.datalist thead th {
    background: #110303;
    color: #fff;
}
table.datalist tbody tr {
    border-bottom: 1px dotted #D8D5D5;
}
table.datalist tbody td {
    border: 1px dotted #D8D5D5;
    border-width: 0px 1px;
    -webkit-transition: background-color .1s linear;
    -moz-transition: background-color .1s linear;
    transition: background-color .1s linear;
}
tbody tr:first-child {
    border-top: none;
}
tbody tr.even td {
    background: #fbfbfb;
}
tbody tr.clickable:hover td {
    background: #ecf2fa;
    cursor: pointer;
}
</style>

<script Language="JavaScript">
jQuery(function($) {
 
  //data-hrefの属性を持つtrを選択しclassにclickableを付加
  $('tr[data-href]').addClass('clickable')
   
    //クリックイベント
    .click(function(e) {
   
      //e.targetはクリックした要素自体、それがa要素以外であれば
      if(!$(e.target).is('a')){
       
        //その要素の先祖要素で一番近いtrの
        //data-href属性の値に書かれているURLに遷移する
        window.location = $(e.target).closest('tr').data('href');}
  });
});
</script>

@endsection