@extends('admin.layouts.container')

@section('content')
<!-- ------------ line chart ------------- -->
<div class="row">
    <div class="col-lg-4">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-primary">Active Queues</h6>
            </div>
            <div class="items">
                <span class="number text-primary">
                    {{$activeQueues}}
                </span>
                <div class="progress-item">
                    <p class="info"> <b class="text-primary">percentage({{round($activeQueuesPercentage)}}%)</b> </p>
                    <div class="progress"><span class="bg-primary" data-value="{{$activeQueuesPercentage}}%" style="width: {{$activeQueuesPercentage}}%"></span></div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-lg-4">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-success">Done Queues</h6>
            </div>
            <div class="items">
                <span class="number text-success">
                    {{$doneQueues}}
                </span>
                <div class="progress-item">
                    <p class="info"> <b class="text-success">percentage({{round($doneQueuesPercentage)}}%)</b> </p>
                    <div class="progress"><span class="bg-success" data-value="{{$doneQueuesPercentage}}%" style="width: {{$doneQueuesPercentage}}%"></span></div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-lg-4">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6 class="text-danger">Cancelled Queues</h6>
            </div>
            <div class="items">
                <span class="number text-danger">
                    {{$cancelledQueues}}
                </span>
                <div class="progress-item">
                    <p class="info"> <b class="text-danger">percentage({{round($cancelledQueuesPercentage)}}%)</b> </p>
                    <div class="progress"><span class="bg-danger" data-value="{{$cancelledQueuesPercentage}}%" style="width: {{$cancelledQueuesPercentage}}%"></span></div>
                </div>
            </div>

        </div>
    </div>


    <div class="col-lg-12 mt-4">
        <input type="hidden" class="merchants" value="{{$merchants}}">
        <input type="hidden" class="customers" value="{{$customers}}">
        <div class="new-users border-item">
            <div class="datatitle">
                <h5><span class="text-success">Merchants</span> && <span class="text-primary">Customers</span></h5>
            </div>
            <div class="chartjs-wrapper"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                <canvas id="chartjs-4" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@section('inner_js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<script>
    let merchants = $('.merchants').val(),
        customers = $('.customers').val();
    new Chart(document.getElementById("chartjs-4"), {
        "type": "doughnut",
        "data": {
            "labels": ["Merchant", "Customers"],
            "datasets": [{
                "label": "My First Dataset",
                "data": [merchants, customers],
                "backgroundColor": ["rgb(33, 255, 13)", "rgb(21, 97, 203)"]
            }]
        }
    });
</script>

@endsection