@extends('adminlte::page')

@section('title', 'Tablero')

@section('content_header')
    <h1>Tablero</h1>
@stop

@section('content')
    <p>Tablero manejo Organismos de Tránsito</p>

    
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="bi bi-bar-chart-line-fill"></i>
                    Gestiones recuperación de cartera Organismos de Tránsito
            </h3>
            <div class="card-tools">
                <ul class="nav nav-pills ml-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Bar</a>                        
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#sales-chart" data-toggle="tab">Pie</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="card-body">
            <div class="tab-content p-0">
        
                <div class="chart tab-pane active" id="barChart" style="position: relative; height: 300px;">
                    <div style="width: 80%; margin: auto;">
                        <canvas id="barChart" height="100" style="height: 100px;"></canvas>                    
                    </div>    
                </div>
                <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                    <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    

@stop

@section('css')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
@endsection

@section('js')
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        var ctx = document.getElementById('barChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($labels) !!},
                datasets: { !! json_encode($datasets) !!}
                   
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
      
@stop