@include('layouts.header')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<div class="container">
     @if(session('role') == 4)
        <div class="col-3">
            <a href="{{ url('branch') }}" target="_self" class="btn btn-primary">Branch</a>
        </div>
     @endif
     
     <div class="circle">
         @if($eData->Gender == 'Male') 
            <i class="ico m_icon"></i>
            @else
            <i class="ico f_icon"></i>
         @endif
            <div class="text-info">  
                @if($eData) 
                    <b>{{ $eData->FirstName }}</b>
                    <div class="clr">{{ $eData->Department }}
                        <span>{{ $eData->Designation }}</span></div>
                @endif
            </div>
        </div>
        <hr>
        @if(session('role') != 6)
           <div class="box-wrapper">
                <div class="sbox">
                     <i class="isize active_icon"></i><p>Total Teammates<a href="{{ url('total') }}" target="_self"> {{ $final['Total'] }}</a></p>
                </div>
                <div class="sbox">
                     <i class="isize m_icon"></i><p>Male Employee<a href="#" target="_self">{{ $final['TotalMale'] }}</a></p>
                </div>
                <div class="sbox">
                    <i class="isize f_icon"></i><p>Female Employee<a href="#" target="_self">{{ $final['TotalFemale'] }}</a></p>
                </div>
            </div>
            
             <div class="box-wrapper">
                <span>Present Employees</span>
                <canvas id="mygraph"></canvas>
            </div>
    </div>
    @endif
</div>

<script type="text/javascript">
    // Use Laravel Blade to inject PHP data into JavaScript
    const fPHP = @json($final);

    if (Object.keys(fPHP).length > 0) {
        const das = fPHP; // Assuming a single object in array

        const ctx = document.getElementById('mygraph').getContext('2d');
        new Chart(ctx, {
            type: 'bar', // You can use 'line', 'pie', etc.
            data: {
                labels: ['Male', 'Female'], // X-axis labels
                datasets: [{
                    label: 'Gender Counts',
                    data: [das.TotalMale, das.TotalFemale], // Y-axis data
                    backgroundColor: ['#D3D3D3', '#29F19c'],
                    borderWidth: 2
                }]
            },
            options: {
                indexAxis: 'y', // Switch to horizontal bar chart
                scales: {
                    x: {
                        beginAtZero: true
                    },
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    } else {
        console.error('No data available to display the chart.');
    }
</script>