@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;
    }

    .clickable-card:hover {
        background-color: #f8f9fa; /* Slightly lighter background on hover */
        transform: translateY(-5px); /* Slight lift effect */
        transition: all 0.2s ease; /* Smooth transition */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
    }
</style>

{{-- Table index start --}}
@foreach($users as $users)
<h1 class="mb-4 gradient-text">Welcome, {{$users -> userfirstname}}</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;">
            @foreach($departmentNames as $index => $departmentName)
                <div 
                    class="option-header" 
                    style="background-color: #f8f9fa; cursor: pointer; border-top: 1px solid #dee2e6;" 
                    onclick="selectOption({{ $index + 1 }})">
                    <div class="d-flex align-items-center p-3">
                        <p class="mb-0">{{ $departmentName }} DEPARTMENT</p>
                    </div>
                </div>
            @endforeach
        </div>

        <div id="contentContainer" class="card-body">
            @foreach($departmentNames as $index => $departmentName)
                <div 
                    id="content{{ $index + 1 }}" 
                    class="content" 
                    style="{{ $index == 0 ? 'display: block;' : 'display: none;' }}">
                    <h5>
                        {{ $departmentName }}: 
                        {{ isset($checkinsByDepartment[$departmentName]) ? $checkinsByDepartment[$departmentName] : 0 }} / 
                        {{ $departmentCounts[$index] }}
                    </h5>

                </div>
            @endforeach
        </div>


    </div>
</div>










<div class="col-12 col-sm-2">
        <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-3">
        <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">Staff On Leave</h4>
            </div>
            <div class="card-body">
                <h5>{{$leavetoday}}</h5>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-3">
    <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="#outsideradius">
        <div class="card-header">
            <h4 class="mb-0">Outside Radius</h4>
        </div>
        <div class="card-body">
            <h5>{{ $totalCheckinsOutsideRadius }}</h5>
        </div>
    </div>
</div>


<div class="modal fade" id="outsideradius" tabindex="-1" role="dialog" aria-labelledby="outsideradiusLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document"> <!-- modal-lg class added -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="outsideradiusLabel">Check-ins Outside Radius</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Table of Check-ins Outside Radius -->
                <table class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Check-in Time</th>
                            <th>Reason</th>
                            <th>Other Reason</th>
                            <th>Location</th> <!-- Added column for Location -->
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($checkinsOutsideRadius as $checkin)
                            <tr>
                                <td>{{ $checkin->userfirstname }}</td>
                                <td>{{ $checkin->checkin_address }}</td>
                                <td>{{ $checkin->checkin_created_at }}</td>
                                <td>{{ $checkin->checkin_reason }}</td>
                                <td>{{ $checkin->checkin_other_reason }}</td>
                                <td>
                                    <!-- Combine latitude and longitude and make it clickable to open Google Maps -->
                                    <a href="https://www.google.com/maps?q={{ $checkin->checkin_lat }},{{ $checkin->checkin_lng }}" target="_blank">
                                        {{ $checkin->checkin_lat }}, {{ $checkin->checkin_lng }}
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </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">
                        <div><b>{{ $leave->employee_first_name }}</b></div>
                            <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; cursor: pointer;"></canvas>
                </div>
                <script src="chart.js"></script>
            </div>
        </div>
    </div>
</div>















<script>
function toggleOptions() {
    const optionsContainer = document.getElementById('optionsContainer');
    const icon = document.getElementById('mainIcon');
    
    // Toggle visibility of dropdown
    if (optionsContainer.style.display === 'none') {
        optionsContainer.style.display = 'block';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    } else {
        optionsContainer.style.display = 'none';
        icon.classList.remove('fa-chevron-up');
        icon.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>
    const departmentNames = <br />
<b>Warning</b>:  Undefined variable $departmentNames in <b>C:\laragon\www\attendpro-laravel-20251021\resources\views\admins\dashboardadmin.blade.php</b> on line <b>292</b><br />
null;
    const departmentCounts = <br />
<b>Warning</b>:  Undefined variable $departmentCounts in <b>C:\laragon\www\attendpro-laravel-20251021\resources\views\admins\dashboardadmin.blade.php</b> on line <b>293</b><br />
null;
</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', 'December'], // 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
        });

   


        new Chart(pie, {
    type: 'pie', // Chart type: pie
    data: {
        labels: departmentNames, // Use dynamic department names
        datasets: [{
            data: departmentCounts, // Use dynamic employee counts
            borderColor: [
                'rgba(75, 192, 192, 0.5)',
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 167, 99, 0.5)',
                'rgba(54, 162, 235, 0.5)', // Blue
                'rgba(153, 102, 255, 0.5)', // Purple
                'rgba(75, 192, 75, 0.5)'    // Green
            ],
            backgroundColor: [
                'rgba(75, 192, 192, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 167, 99, 0.2)',
                'rgba(54, 162, 235, 0.2)', // Blue
                'rgba(153, 102, 255, 0.2)', // Purple
                'rgba(75, 192, 75, 0.2)'    // Green
            ],
            hoverBackgroundColor: [
                'rgba(75, 192, 192, 0.5)',
                'rgba(255, 99, 132, 0.5)',
                'rgba(255, 167, 99, 0.5)',
                'rgba(54, 162, 235, 0.5)', // Blue
                'rgba(153, 102, 255, 0.5)', // Purple
                'rgba(75, 192, 75, 0.5)'    // Green
            ]
        }]
    },
    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