@extends('dashboard_layout')
<!-- end #header -->

<!-- begin #sidebar -->
@section('content')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		
<!-- Starts Main Container -->
<div class="main-container">

    @if(Session::has('submit-status'))
      <div class="alert alert-success"><p>{{ Session::get('submit-status') }}</p></div>
    @endif
		
    <div class="common-page">
        <div class="common-panel">
            <div class="profile-info">
                <div class="profile-info-box">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                            <div class="username-info text-center">
                                <!-- <span class="circle"></span> -->
                                <span>{{$fetch_user_details[0]['user_name']}}</span>
                            </div>
                            <div class="row">
                                <div class="col-md-5 col-sm-5">
                                    <div class="left-panel-info">
                                        <span><strong>Name:</strong> {{$fetch_user_details[0]['first_name']}} {{$fetch_user_details[0]['last_name']}}</span><br />
                                        @if($fetch_user_details[0]['id'] == Auth::guard('crypto')->user()->id)
                                        <span><strong>Email:</strong> {{$fetch_user_details[0]['email']}}</span><br />
                                        @endif
                                        <span><strong>Captain:</strong> @if(!empty($fetch_user_details[0]['captain_name'])){{$fetch_user_details[0]['captain_name']}}@endif</span>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-2"></div>
                                <div class="col-md-5 col-sm-5">
                                    <div class="right-panel-info">
                                        <span><strong>Country:</strong> {{$country_name}}</span><br />
                                        <span><strong>City:</strong> {{$fetch_user_details[0]['city']}}</span><br />
                                    </div>
                                </div>
                            </div>
                            @if($fetch_user_details[0]['id'] == Auth::guard('crypto')->user()->id)
                            <div class="text-center">
                                <a href="/edit_profile" class="view-all">Edit</a><br />
                                <a href="/change_pass" class="view-all">Change Password</a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="share-widget profile-main">
                    @foreach($fetch_all_group_coin as $key => $value)
                        @if((count($value['trade_coin']) > 0) || (count($value['long_coin']) > 0))
                            <div class="float-tile">
                                <div class="widget-tile overview-tile">
                                    <h4>{{$value['group_name']}} Overview</h4>
                                    @if(count($value['trade_coin']) > 0)<div id="trade_chart_{{$key}}" class="pie-margin"></div>@endif
                                    @if(count($value['long_coin']) > 0)<div id="long_chart_{{$key}}" class="pie-margin" @if(count($value['trade_coin']) > 0)style="opacity: 0;"@endif></div>@endif
                                    @if((count($value['trade_coin']) > 0) && (count($value['long_coin']) > 0))
                                    <a href="javascript:void(0);" id="btn_trade_{{$key}}" onclick="show_trade_{{$key}}();" class="view-all" style="opacity: 0;">View Trade</a>
                                    <a href="javascript:void(0);" id="btn_long_{{$key}}" class="view-all" onclick="show_long_{{$key}}();">View Long</a>
                                    @endif
                                    <script type="text/javascript">
                                        // Load google charts (trade)
                                        google.charts.load('current', {'packages':['corechart']});
                                        google.charts.setOnLoadCallback(tradeChart_{{$key}});

                                        // Draw the chart and set the chart values
                                        function tradeChart_{{$key}}() {
                                            var trade_data_{{$key}} = google.visualization.arrayToDataTable([
                                                ['Trade Coin', 'Total No of Chips'],
                                                @foreach($value['trade_coin'] as $trade_coin)
                                                ['{{$trade_coin['coin_name']}} ({{$trade_coin['tot_chip_value']}})', {{$trade_coin['tot_chip_value']}}],
                                                @endforeach
                                            ]);

                                            // Optional; add a title and set the width and height of the chart
                                            var trade_options_{{$key}} = {pieSliceText: 'none', pieHole: 0.5, title: 'Transactions (Trade)', 'backgroundColor':'none', 'width': '100%', 'height': '100%', chartArea: { left: "3%", top: "3%",height: "94%",width: "94%"}, legend: {alignment: 'center'}};
                                            //pieHole: 0.5, is3D: true,

                                            // Display the chart inside the <div> element with id="trade_chart"
                                            var chart = new google.visualization.PieChart(document.getElementById('trade_chart_{{$key}}'));
                                            chart.draw(trade_data_{{$key}}, trade_options_{{$key}});
                                        }
                                        // end google charts (trade)

                                        // Load google charts (long)
                                        google.charts.setOnLoadCallback(longChart_{{$key}});

                                        // Draw the chart and set the chart values
                                        function longChart_{{$key}}() {
                                            var long_data_{{$key}} = google.visualization.arrayToDataTable([
                                                ['Long Coin', 'Total No of Chips'],
                                                @foreach($value['long_coin'] as $long_coin)
                                                ['{{$long_coin['coin_name']}} ({{$long_coin['tot_chip_value']}})', {{$long_coin['tot_chip_value']}}],
                                                @endforeach
                                            ]);
                                            // 'backgroundColor':'none'
                                            // Optional; add a title and set the width and height of the chart
                                            var long_options_{{$key}} = {pieSliceText: 'none', pieHole: 0.5, title: 'Transactions (Long)', 'backgroundColor':'none', 'width': '100%', 'height': '100%', chartArea: { left: "3%", top: "3%",height: "94%",width: "94%"}, legend: {alignment: 'center'}};
                                            //pieHole: 0.5, is3D: true,

                                            // Display the chart inside the <div> element with id="trade_chart"
                                            var chart = new google.visualization.PieChart(document.getElementById('long_chart_{{$key}}'));
                                            chart.draw(long_data_{{$key}}, long_options_{{$key}});
                                        }
                                        // end google charts (long)
                                    </script>
                                    <script type="text/javascript">
                                        function show_long_{{$key}}() {
                                            $('#trade_chart_{{$key}}').css({
                                                'opacity': 0,
                                                'height': 0
                                            });
                                            $('#long_chart_{{$key}}').css({
                                                'opacity': 1,
                                                'height': 'auto'
                                            });
                                            $('#btn_trade_{{$key}}').css({
                                                'opacity': 1,
                                                'height': 'auto'
                                            });
                                            $('#btn_long_{{$key}}').css({
                                                'opacity': 0,
                                                'height': 0
                                            });
                                        }

                                        function show_trade_{{$key}}() {
                                            $('#trade_chart_{{$key}}').css({
                                                'opacity': 1,
                                                'height': 'auto'
                                            });
                                            $('#long_chart_{{$key}}').css({
                                                'opacity': 0,
                                                'height': 0
                                            });
                                            $('#btn_trade_{{$key}}').css({
                                                'opacity': 0,
                                                'height': 0
                                            });
                                            $('#btn_long_{{$key}}').css({
                                                'opacity': 1,
                                                'height': 'auto'
                                            });
                                        }
                                    </script>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
            <div class="profile-info">
                <div class="row">
                    <div class="col-md-5 custom-col-md-5">
                        <div class="profile-info-box">
                            <div class="sailor-info text-center">
                                <span class="span-txt1">Sailors</span>
                                <span class="span-txt2">{{$sailors_name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection