@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="card" data-collapsible="true">
            <div id="dashboard_tickets" class="header card-inside-title">
                <h2 class="pointer">
                    {{ __('Incoming VS Outgoing Counter') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content context">
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12">
                    {!! $overall_chart->container() !!}
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="card" data-collapsible="true">
            <div id="dashboard_tickets" class="header card-inside-title">
                <h2 class="pointer">
                    {{ __('Incoming VS Outgoing Duration') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content context">
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12">
                    {!! $duration_chart->container() !!}
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
    {!! $overall_chart->script() !!}
    {!! $duration_chart->script() !!}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
    <script>
        console.log('hello');
    </script>
@endpush