@extends('layouts.appv2')

@section('content')

<style>
    .nav-tabs .nav-link {
        transition: background-color 0.3s, color 0.3s;
    }

    .nav-tabs .nav-link:hover {
        background-color: #f0f0f0;
        color: black;
    }

    .nav-tabs .nav-link.active {
        background-color: white;
        color: #9e1a1a;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .nav-tabs .nav-link i {
        margin-right: 5px;
    }
</style>

{{-- Table index start --}}
@foreach($users as $users)
<h1 class="mb-4 gradient-text">Welcome, {{$users -> employee_first_name}}</h1>
@endforeach
<div class="row">

    <div class="col-12 col-sm-4">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-header main-header" style="border-radius: 20px 20px 0 0; cursor: pointer;" onclick="toggleOptions()">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Attendances</h4>
                    <i class="fas fa-chevron-down" id="mainIcon"></i>
                </div>
            </div>

            <div id="optionsContainer" style="display: none;">
                <div class="option-header" style="background-color: #f8f9fa; cursor: pointer; border-top: 1px solid #dee2e6;" onclick="selectOption(1)">
                    <div class="d-flex align-items-center p-3">
                        <p class="mb-0">Management Department</p>
                    </div>
                </div>

                <div class="option-header" style="background-color: #f8f9fa; cursor: pointer; border-top: 1px solid #dee2e6;" onclick="selectOption(2)">
                    <div class="d-flex align-items-center p-3">
                        <p class="mb-0">Operation Department</p>
                    </div>
                </div>

                <div class="option-header" style="background-color: #f8f9fa; cursor: pointer; border-top: 1px solid #dee2e6;" onclick="selectOption(3)">
                    <div class="d-flex align-items-center p-3">
                        <p class="mb-0">Sales Department</p>
                    </div>
                </div>


            </div>

            <div id="contentContainer" class="card-body">
                <div id="content1" class="content">
                    <h5>Management Department : {{$checkcount1}} / {{$department1}}</h5>
                </div>
                <div id="content2" class="content" style="display: none;">
                    <h5>Operation Department : {{$checkcount2}} / {{$department2}}</h5>
                </div>
                <div id="content3" class="content" style="display: none;">
                    <h5>Sales Department : {{$checkcount3}} / {{$department3}}</h5>
                </div>

            </div>
        </div>
    </div>








    <div class="col-12 col-sm-4">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-header">
                <h4 class="mb-0">Total Staff</h4>
            </div>
            <div class="card-body">
                <h5>{{$totalemployee}} Staff</h5>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-4">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer;" data-toggle="modal" data-target="#staffLeaveModal">
            <div class="card-header">
                <h4 class="mb-0">Leaving Staff Today</h4>
            </div>
            <div class="card-body">
                <h5>{{$leavetoday}}</h5>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="staffLeaveModal" tabindex="-1" role="dialog" aria-labelledby="staffLeaveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staffLeaveModalLabel">Staff Leave</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @forelse($leave as $leave)
                    <tr class="border-bottom" style="cursor: pointer;">
                        <td class="align-middle text-left">
                            <b>{{ $leave->username }}</b><br>
                            <span class="text-primary">
                                <strong>{{ $leave->leavetype_name }}</strong> : {{ $leave->total_days }} DAYS
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <strong colspan="8" class="text-center text-danger">No staff take a leave today</strong>
                    </tr>
                    @endforelse
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>








</div>

<div class="row">
    <div class="col-12 col-sm-8">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-body">
                <h3 class="mb-4">Statistic Graph</h3>

                <div class="chart-container">
                    <canvas id="myChart" style="height:360px;"></canvas>
                </div>
                <script src="chart.js"></script>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-4">
        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-body">
                <h3 class="mb-4">Staff in Department</h3>

                <div class="chart-container">
                    <canvas id="myPie" style="height:auto;"></canvas>
                </div>
                <script src="chart.js"></script>
            </div>
        </div>
    </div>
</div>















<script>
    function toggleOptions() {
        const optionsContainer = document.getElementById('optionsContainer');
        const mainIcon = document.getElementById('mainIcon');

        if (optionsContainer.style.display === 'none' || optionsContainer.style.display === '') {
            optionsContainer.style.display = 'block';
            mainIcon.classList.remove('fa-chevron-down');
            mainIcon.classList.add('fa-chevron-up');
        } else {
            optionsContainer.style.display = 'none';
            mainIcon.classList.remove('fa-chevron-up');
            mainIcon.classList.add('fa-chevron-down');
        }
    }

    function selectOption(optionNumber) {
        const contents = document.querySelectorAll('#contentContainer .content');

        contents.forEach(content => {
            content.style.display = 'none';
        });

        const selectedContent = document.getElementById(`content${optionNumber}`);
        if (selectedContent) {
            selectedContent.style.display = 'block';
        }

        document.getElementById('optionsContainer').style.display = 'none';
        document.getElementById('mainIcon').classList.remove('fa-chevron-up');
        document.getElementById('mainIcon').classList.add('fa-chevron-down');
    }
</script>


<script type="text/javascript">
    // Initialize the chart
    document.addEventListener('DOMContentLoaded', function() {
        // Get the canvas elements
        const ctx = document.getElementById('myChart').getContext('2d');
        const pie = document.getElementById('myPie').getContext('2d');

        // Define chart data for both charts
        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dicember'], // X-axis labels
            datasets: [{
                    label: 'Staff Absent', // Legend label
                    data: [{{ implode(',', $leaveCounts) }}], // Y-axis data points
                    backgroundColor: 'rgba(75, 192, 192, 0.2)', // Line fill color
                    borderColor: 'rgba(75, 192, 192, 1)', // Line border color
                    borderWidth: 1, // Border width
                    tension: 0.4,
                },
                // {
                //     label: 'Operation Department', // Legend label for the second line
                //     data: [45, 49, 60, 70, 46, 50, 45, 49, 60, 70, 46, 50], // Y-axis data points for the second line
                //     backgroundColor: 'rgba(255, 99, 132, 0.2)', // Line fill color for the second line
                //     borderColor: 'rgba(255, 99, 132, 1)', // Line border color for the second line
                //     borderWidth: 1, // Border width
                //     tension: 0.4
                // },
                // {
                //     label: 'Sales Department', // Legend label for the second line
                //     data: [40, 55, 70, 75, 30, 60, 40, 55, 70, 75, 30, 60], // Y-axis data points for the second line
                //     backgroundColor: 'rgba(255, 167, 99, 0.2)', // Line fill color for the second line
                //     borderColor: 'rgba(255, 167, 99, 1)', // Line border color for the second line
                //     borderWidth: 1, // Border width
                //     tension: 0.4
                // }
            ]
        };

        // Chart options (same for both charts)
        const options = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true // Start Y-axis at zero
                }
            }
        };

        // Create the line chart
        new Chart(ctx, {
            type: 'line', // Chart type: line
            data: data,
            options: options
        });

        const departmentCounts = [
            @json($department1),
            @json($department2),
            @json($department3)
        ];
        new Chart(pie, {
            type: 'pie', // Chart type: pie
            data: {
                labels: ['Management', 'Operation', 'Sales'], // Pie chart labels
                datasets: [{
                    data: departmentCounts, // Pie chart data points
                    borderColor: ['rgba(75, 192, 192, 0.5)', 'rgba(255, 99, 132, 0.5)', 'rgba(255, 167, 99, 0.5)'],
                    backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 167, 99, 0.2)'], // Colors for slices
                    hoverBackgroundColor: ['rgba(75, 192, 192, 0.5)', 'rgba(255, 99, 132, 0.5)', 'rgba(255, 167, 99, 0.5)'] // Hover colors
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                const total = tooltipItem.dataset.data.reduce((sum, value) => sum + value, 0); // Calculate total
                                const currentValue = tooltipItem.raw; // Get current value
                                const percentage = ((currentValue / total) * 100).toFixed(2); // Calculate percentage
                                return tooltipItem.label + ': ' + currentValue + ' staff (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });
    });
</script>
<script src="{{ asset('newtemplate/vendor/chart.js/Chart.min.js')}}"></script>
<script src="{{ asset('newtemplate/js/demo/chart-area-demo.js')}}"></script>
<script src="{{ asset('newtemplate/js/demo/chart-pie-demo.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection