@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/index', 'method' => 'POST', 'name' => 'form', 'id' => 'searchform']) }}
    <div class="row">
        <h5>不動産クラウドファンディングデータ</h5>
        <div class="col-md-12" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">検索条件</a></div>

                <div class="panel-body collapse in" id="collapseOne">
                    <table class="table">
                        <col width="5%" />
                        <col width="35%" />
                        <col width="8%" />
                        <col width="52%" />
                        <tr>
                            <td nowrap></td>
                            <td></td>

                            <td></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($datas) > 0)
    <!-- データエリア -->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">データ数</div>

                <div class="panel-body">
                    <table class="table table-bordered">
                        <col width="25%" />
                        <col width="25%" />
                        <col width="25%" />
                        <col width="25%" />
                        
                        <tr>
                            <th nowrap>調査対象</th>
                            <td nowrap>{{ $datas[0]->count }} 社</td>
                            <th nowrap>商品販売中</th>
                            <td nowrap>{{ $datas[1]->count }} 社</td>
                        </tr>
                    </table>
                </div>
                    
                <div class="panel-body">
                    <table class="table table-bordered">
                        <col width="75%" />
                        <col width="25%" />

                        <tr bgcolor="#FFFFCC">
                            <th nowrap>事業者名</th>
                            <th nowrap>商品数</th>
                        </tr>
                        
                                                @foreach ($data_fundlist as $data)
                                                <tr bgcolor="{{ $bgcolor }}">
                            <td nowrap>{{ $data->company_name }}</td>
                            <td nowrap style="text-align:right">{{ $data->count }} 件</td>
                        </tr>
                        @endforeach
                        
                    </table>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">商品情報</div>

                <div class="panel-body">
                    <table class="table table-bordered">
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        <col width="12%" />
                        
                        <tr>
                            <th nowrap>販売中</th>
                            <td nowrap>{{ $data_itemsummary[0]->count }} 社</td>
                            <th nowrap>募集中</th>
                            <td nowrap>{{ $data_itemsummary[1]->count }} 社</td>
                            <th nowrap>運用中</th>
                            <td nowrap>{{ $data_itemsummary[2]->count }} 社</td>
                            <th nowrap>平均利率</th>
                            <td nowrap>{{ $data_itemsummary[3]->count }} %</td>
                        </tr>
                    </table>
                </div>
                    
                <div class="panel-body">
                    <table class="table table-bordered">
                        <col width="75%" />
                        <col width="25%" />

                        <tr bgcolor="#FFFFCC">
                            <th nowrap>事業者名</th>
                            <th nowrap>商品利率</th>
                        </tr>
                        
                                                @foreach ($data_itemlist as $data)
                                                <tr bgcolor="{{ $bgcolor }}">
                            <td nowrap>{{ $data->company_name }}</td>
                            <td nowrap style="text-align:right">{{ $data->rate }} %</td>
                        </tr>
                        @endforeach
                        
                    </table>
                    
                </div><!-- /.panel-body -->
            </div><!-- /.panel panel-default -->
        </div><!-- /.col-md-6 -->

    </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">募集金額</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 instance
                        var chart = am4core.create("chartdiv1", am4charts.PieChart);
                        chart.exporting.menu = new am4core.ExportMenu();

                        // Add data
                        chart.data = [ 
                            @foreach ($data_pricelist as $data)
                            {
                                "name": '{{ $data->name }}',
                                "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 = "name";
                        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-4 -->
        <!-- /.募集金額 -->

        <!-- 募集期間 -->
        <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

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

                        // Add data
                        chart.data = [ 
                            @foreach ($data_periodlist as $data)
                            {
                                "name": '{{ $data->name }}',
                                "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 = "name";
                        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-4 -->
        <!-- /.募集期間 -->

        <!-- 配当 -->
        <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">配当（1年あたり）</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.PieChart);
                        chart.exporting.menu = new am4core.ExportMenu();

                        // Add data
                        chart.data = [ 
                            @foreach ($data_devidelist as $data)
                            {
                                "name": '{{ $data->name }}',
                                "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 = "name";
                        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-4 -->
        <!-- /.配当 -->
        
    </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;
    }

$(document).ready(function(){
    $(".clearForm").bind("click", function(){
        $(this.form).find("textarea, :text, radio, checkbox").val("").end().find(":checked").prop("checked", false);
        $(this.form).find("select").val("-1").end();
        makeList_Item();
        makeList_Errorcode();
    });
});
</script>

<script>
  $(function() {
    $.datepicker.setDefaults({
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        changeYear: true,  // 年選択をプルダウン化
        changeMonth: true, // 月選択をプルダウン化
        showWeek: true,
        buttonImage: "{{ asset('css/images/calendar-icon.png') }}",
        buttonText : "カレンダーから選択",
        buttonImageOnly: true,
        showOn: "both",
    });
    
    $('#ymd1').datepicker({
        onSelect: function(dat,inst){
            $('#ymd1').val($.datepicker.formatDate('yy-mm-dd',new Date(dat)))
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
    
    $('#ymd2').datepicker({
        onSelect: function(dat,inst){
            $('#ymd2').val($.datepicker.formatDate('yy-mm-dd',new Date(dat)))
        },
        beforeShow: function() {
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 99999999999999);
	    }, 0);
	},
    });
});
</script>    

<script Language="Javascript">
    // チェックボックスの全選択/解除
    $(function() {
      $('#CAll').on("click",function(){
        $('input[name="startmonth[]"]').prop("checked", $(this).prop("checked"));
      });
    });
</script>
<script Language="JavaScript">
    function makeList_City() {
        $('select#city').children().remove();

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

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

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

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

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

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

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

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

            $.ajax({
                    type : "GET",
                    url  : "station",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    async : "true",
                    data : {"pref" : pref, "city" : city, "nearline" : line},
                    scriptCharset : "UTF-8",
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                            $("#nearstation").append($("<option>").val('').text('選択してください'));
                            for(var i=0; i < len; i++){
                                $("#nearstation").append($("<option>").val(json[i].name).text(json[i].name));
                            }
                        },
                    error : function(msg, status){
                        alert('通信ができない状態です。');
                    },
            })
            .always( function(data) {
                // Lading 画像を消す
                removeLoading();
            });
        }
    }
        
    /* ------------------------------
     Loading イメージ表示関数
     引数： msg 画面に表示する文言
     ------------------------------ */
    function dispLoading(msg){
        // 引数なし（メッセージなし）を許容
        if( msg == undefined ){
            msg = "";
        }

        // 画面表示メッセージ
        var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";

        // ローディング画像が表示されていない場合のみ出力
        if($("#loading").length == 0){
            $("body").append("<div id='loading'>" + dispMsg + "</div>");
        }
    }
 
    /* ------------------------------
     Loading イメージ削除関数
     ------------------------------ */
    function removeLoading(){
        $("#loading").remove();
    }    
</script>

<style>
    #loading {
      display: table;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
      opacity: 0.8;
    }

    #loading .loadingMsg {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding-top: 140px;
      background: url("/TSON/public/img/loading.png") center center no-repeat;
    }
</style>

@endsection