<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ get_asset('dist/css/c3.min.css') }}" />
    <link rel="stylesheet" href="{{ get_asset('dist/css/all.min.css')}}">
    <link rel="stylesheet" href="{{ get_asset('dist/css/adminlte.min.css')}}">
    <link rel="stylesheet" href="{{ get_asset('dist/css/style.css')}}" />
    <style>
        .content-wrapper>* {
            font-family: 'poppins', 'arial';
        }

        .card-tools-custom {
            float: right;
            margin-right: 0.15rem;
            margin-top: 0.5rem;
        }

        .card-tools-right {
            /* float: right; */
            text-align: right
        }


        .icon-custom {
            right: 2rem !important;
            top: 2rem !important;
        }

        .bg-purple {
            background-color: purple !important;
        }
    </style>

</head>

<body>
    <div class="container-fluid">

        <div class="clearfix"></div>
        @if(!is_null($metric))
        <h1>{{ $metric->name }} metric</h1>
        @if($metric->configurations->chart_type == "gauge_chart")
        <div class="col-lg-3 col-6">
            <div class="small-box bg-white">
                <h6 class="float-left pt-2 pl-2" style="font-size:0.8rem">{{ $metric->name }}</h6>
                <div class="clearfix"></div>
                <div class="inner" style="padding: 0">
                    <div id="{{ Str::of($metric->name)->kebab() }}"></div>
                </div>
                <div style="height: 30px">
                </div>

            </div>
        </div>
        @else
        <div class="col-lg-3 col-6">

            <div class="small-box {{ $metric->getMetricBgColor() }}">
                <div class="inner">
                    @if($metric->getResourceConfiguration('compare_with') != "no_comparison")
                    <span style="margin-left: 1rem;font-size:small">
                        @if(!in_array($metric->getResourceConfiguration('display_format'),['percentage','percentage_of_total']))
                        {{ $metric->data['change'] }}
                        @endif
                        (
                        @if(!is_numeric($metric->data['trend']))
                        {{$metric->data['trend'] }}%
                        @elseif($metric->data['trend_direction'] == "positive")
                        ↑{{$metric->data['trend'] }}%
                        @elseif($metric->data['trend_direction'] == "negative")
                        ↓{{$metric->data['trend'] }}%
                        @endif
                        )</span>
                    @endif
                    <h3 @if($metric->getResourceConfiguration('compare_with') == "no_comparison")
                        class="mt-4" @endif>{{ $metric->data['original_metric'] }}</h3>
                    <p>{{ $metric->name }}</p>

                </div>
                @if($metric->configurations->chart_type == "info_box_with_icon")
                <div class="icon">
                    <i class="fas {{ $metric->info_box_icon }} icon-custom"></i>
                </div>
                @endif
                <div style="height: 30px">
                </div>
            </div>
        </div>
        @endif


        @endif



    </div>
    <script src="{{ get_asset('dist/js/jquery.min.js')}}"></script>
    <script src="{{ get_asset('dist/js/moment.min.js')}}"></script>
    <script src="{{ get_asset('dist/js/d3.v5.min.js')}}"></script>
    <script src="{{ get_asset('dist/js/c3.min.js')}}"></script>
    <script src="{{ get_asset('dist/js/metrics.js')}}"></script>
    <script>
        {!! $metric->script !!}
    </script>

</body>
</htm>
