@extends('modules.head')
@section('contenido')

<section class="hp">
    @if(Auth::user()->rol_id == 10)
    <aside>
        @if( isset($bd->rol_id) == 9 )
        <h3>Monthly overview of {{ $bd->first_name }} {{ $bd->last_name }}:</h3><br>
        @endif
        <div>
            <span>
                <a href="/home#statistics" class="btn btnAdd">Go back</a>
            </span>
                        @foreach($business_developers as $bd)
            @if($bd->id != $id)
            <span>
                <a href="/see-businessDev/{{ $bd->id }}" class="btn btnAdd">{{ $bd->first_name }} {{ $bd->last_name }}</a>
            </span>
            @endif
            @endforeach
        </div>
        @include('layouts.bd')
        @yield('my-content')
    </aside>
    @endif
</section>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{ asset('js/business-dev-sales-director/main.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/business-dev-dashboard.css') }}" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    // Graphs logic library
    const canvas = document.getElementById('donut_goal_chart');
    const el = document.querySelector(".goal_meter_container");
    let goal_total = el.dataset.goalTotal;
    let goal_achieved = el.dataset.goalAchieved;
    let goal_missing = goal_total - goal_achieved;
    if (goal_achieved >= 100) {
        goal_missing = 0;
    }
    const data = {
        labels: [
            `${goal_achieved}%  Achieved`, `${goal_missing.toFixed(1)}%  To Achieve`
        ],
        datasets: [{
            label: 'Achieved',
            data: [goal_achieved, goal_missing],
            backgroundColor: [
                '#B3F6A8',
                '#D9D9D9',
            ],
            cutout: '75%'
        }]
    };

    let goalMeterChart = new Chart(canvas, {
        type: 'doughnut',
        data: data
    });

    $(document).ready(function() {
        // Hiding the branch selector when SD sees specific BD
        $('#selectHeader').hide();

        // Once SD selects a BD, this function populates current month of stats regarding the BD
        if (window.location.href.indexOf("see-businessDev") > -1) {
            triggerCurrentMonthStats();
        }
    });
</script>
@endsection