@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/mapsearch', '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">Google Map</div>
                
                <div class="panel-body">
                    
                    <div id="gmap" style="width: 100%; height: 50vh;"></div>

                    <script>
                    function initMap() {
                        var i = 0;
                        var map;
                        var marker = [];
                        var infoWindow = [];
                        
                        var target = document.getElementById('gmap');  
                        var geocoder = new google.maps.Geocoder();  
                        geocoder.geocode({ address: "愛知県名古屋市中村区名駅3-22-8" }, function(results, status) {
                            if (status === 'OK' && results[0]) {  
                                //マップのインスタンスを変数に代入
                                map = new google.maps.Map(target, {  
                                    center: results[0].geometry.location,
                                    zoom: 5
                                });
                            }
                        });

                        @for ($i = 0; $i < count($datas); $i++)
                            geocoder.geocode({ address: "{{ $datas[$i]->address }}" }, function(results, status) {
                            if (status === 'OK' && results[0]) {  
                                //マーカーの生成
                                marker[{{ $i }}] = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: map,
                                    animation: google.maps.Animation.DROP
                                });

                                //情報ウィンドウの生成
                                infoWindow[{{ $i }}] = new google.maps.InfoWindow({
                                    content: "<a href={{ url('/cloudfund/propsearch?list_id=' . $datas[$i]->fundlist_id . '&company_id=' . $datas[$i]->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[$i]->property_name }}</a>",
                                    pixelOffset: new google.maps.Size(0, 5)
                                });
                                
                                //マーカーにリスナーを設定
                                marker[{{ $i }}].addListener('click', function(){
                                    infoWindow[{{ $i }}].open(map, marker[{{ $i }}]);
                                });
                            }
                            
                        });
                    
                        @endfor
                    }
                    </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-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 />
                </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