@extends('layouts.default')

@section('title') {{'Dashboard '.$name}} @endsection

@section('content')
<script src="{{ asset ('/assets/js/fusioncharts/fusioncharts.js') }}"></script>
<script src="{{ asset ('/assets/js/fusioncharts/fusioncharts.theme.fusion.js') }}"></script>

<!-- Content Wrapper. Contains page content -->
    <div class="page-title d-flex align-items-center px-3 mb-1">
       <h5 class="mt-2 text-dark">Dashboard {{$name}}</h5>
       <div class="d-flex align-items-center ms-4"> <i class="bi bi-house-up me-1 icon_color"></i> {{Breadcrumbs::render('report_dashboard.index',$dashboard)}}</div>
    </div>
    <div class="container">
        <div class="row mb-3">
                
            @php 
                $graphs = json_decode($array,true); 
                $ids=[];
            @endphp
                
            @foreach($graphs as $key => $graph)

            @php array_push($ids,$graph['id']); @endphp
               <div class="col-md-{{$graph['width']}}"> 
                    <div class="card @if(($graph['report_type']=='tablebuilder') || ($graph['report_type']=='datagrid')) scrollbar overflow-scroll @endif" style="height: {{$graph['height']}}px;">
                        <span class="graph-title  text-black text-center py-2 fw-bold border-bottom bg-graph">{{$graph['caption']}}</span>
                        <div class="card-body">

                            <div class="graph-container" id="graph{{$graph['id']}}">
                                
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            @php $g_array = json_encode($ids,JSON_NUMERIC_CHECK); @endphp
            <script type="text/javascript">
              jQuery( document ).ready( function( jQuery ) {
                 var json = "{{($g_array)}}";
                 json = JSON.parse(json);

                 console.log(json);
                
                 jQuery(json).each(function(k, v) { 
                    var url = "/reports/get/"+v;
                    jQuery.ajax({
                        url: url,
                        type: "GET",
                        contentType: false, 
                        processData: false,
                        success: function (response) {
                            jQuery("#graph"+v).html(response);
                        },
                        error: function (response) {
                        },
                      });
                 });
                 //alert(json);
              });
            </script>



        </div>
    </div>
<!-- /.content-wrapper -->
@stop