@extends('layouts.app')

@section('content')

<div class="row">
    {!! $filter_area !!}
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card collapsible">
            <div id="dashboard_tickets" class="header card-inside-title">
                <h2 class="pointer">
                    Attendance
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content">
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12 mt-4">
                    <h4>Attendance Summary</h4>
                    <!-- Chart Container -->
                    <div style="margin-bottom: 40px;">
                        <canvas id="attendanceChart" height="80"></canvas>
                    </div>
                    <!-- End Chart Container -->
                    <table class="table table-bordered table-striped data-table-summary">
                        <thead class="thead-light">
                            <tr>
                                <th>Agent</th>
                                @if(!empty($user_code_enabled))
                                    <th>Code</th>
                                @endif
                                <th>Email</th>
                                <th>Pause</th>
                                <th>Reachable</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12 mt-4">
                    <h4>Attendance Logs</h4>
                    <table class="table table-bordered table-striped data-table">
                        <thead class="thead-light">
                            <tr>
                                <th>Agent</th>
                                <th>Email</th>
                                <th>Log Name</th>
                                <th>Description</th>
                                <th>Duration</th>
                                <th class="th-sort-asc">Time</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

                <h4>Attendance Calendar</h4>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        {!! $fullCalendar->generate() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Pause Reasons -->
<div class="modal fade" id="pauseReasonsModal" tabindex="-1" role="dialog" aria-labelledby="pauseReasonsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pauseReasonsModalLabel">Pause Reasons - <span id="userName"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="pauseReasonsTable">
                        <thead class="thead-light">
                            <tr>
                                <th>Reason</th>
                                <th>Duration</th>
                                <th>Percentage</th>
                            </tr>
                        </thead>
                        <tbody id="pauseReasonsBody">
                        </tbody>
                        <tfoot>
                            <tr class="table-info">
                                <th>Total Pause</th>
                                <th id="totalPauseDuration"></th>
                                <th>100%</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('css-up')
<link href="{{ asset('css/fullcalendar.print.css') }}" rel="stylesheet" media="print">
<link href="{{ asset('css/fullcalendar.css') }}" rel="stylesheet">
<style>
    .pause-duration-cell {
        position: relative;
        padding-right: 80px !important;
    }
    
    .btn-pause-details {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: #17a2b8;
        border: 1px solid #17a2b8;
        color: white;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-pause-details:hover {
        background: #138496;
        border-color: #138496;
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .btn-pause-details:disabled {
        background: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
        transform: translateY(-50%);
    }
</style>
@endpush

@push('scripts')
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    @php
        $params_combined = 'daterange='.implode(' - ',$conds) ."&user_ext=".$user_ext."&group_ext=".$group_ext;
    @endphp
    
    $(function () {
        $('input[name="daterange"]').daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 1,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss'
            }
        });

        // DataTable for Attendance Logs
        $('.data-table').DataTable({
            dom: 'lBfrtip',
            processing: true,
            serverSide: true,
            pageLength: 50,
            lengthMenu: [10, 25, 50, 100 ,1000],
            order: [[5, 'desc']],
            ajax: "{{ route('reporting.attendance').'?' }}{!! $params_combined !!}",
            columns: [
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'log_name', name: 'log_name'},
                {data: 'description', name: 'description'},
                {data: 'duration', name: 'duration'},
                {data: 'created_at', name: 'created_at', searchable: false},
            ],
            buttons: [
                'copy', 'excelHtml5'
            ]
        });

        // DataTable for Attendance Summary
        $('.data-table-summary').DataTable({
            dom: 'lBfrtip',
            processing: true,
            serverSide: true,
            pageLength: 50,
            lengthMenu: [10, 25, 50, 100 ,1000],
            ajax: "{{ route('reporting.attendance.summary').'?' }}{!! $params_combined !!}",
            columns: [
                {data: 'name', name: 'name'},
                @if(!empty($user_code_enabled))
                {data: 'code', name: 'code'},
                @endif
                {data: 'email', name: 'email'},
                {
                    data: 'pause_formatted', 
                    name: 'Pause',
                    render: function(data, type, row) {
                        if (type === 'display') {
                            var hasReasons = row.pause_reasons && Object.keys(row.pause_reasons).length > 0;
                            var buttonHtml = '';
                            
                            if (hasReasons) {
                                buttonHtml = '<button class="btn btn-sm btn-info btn-pause-details" ' +
                                    'data-user-name="' + row.name + '" ' +
                                    'data-pause-reasons=\'' + JSON.stringify(row.pause_reasons) + '\' ' +
                                    'data-total-pause="' + data + '">' +
                                    'Details' +
                                    '</button>';
                            } else {
                                buttonHtml = '<button class="btn btn-sm btn-info btn-pause-details" disabled>' +
                                    'Details' +
                                    '</button>';
                            }
                            
                            return '<div class="pause-duration-cell">' +
                                   data +
                                   buttonHtml +
                                   '</div>';
                        }
                        return data;
                    }
                },
                {data: 'Reachable_formatted', name: 'Reachable'},
                {data: 'total_formatted', name: 'Total'},
            ],
            buttons: [
                'copy',
                {
                    extend: 'excelHtml5',
                    // Export the clean cell values only. The "Details" button is
                    // rendered only for the 'display' orthogonal type, so by
                    // exporting with the 'export' type the button (and its text)
                    // stays out of the Excel file while remaining in the UI.
                    exportOptions: {
                        orthogonal: 'export'
                    }
                }
            ]
        });

        // Event handler for pause details buttons
        $(document).on('click', '.btn-pause-details:not(:disabled)', function() {
            var userName = $(this).data('user-name');
            var pauseReasons = $(this).data('pause-reasons');
            var totalPause = $(this).data('total-pause');
            
            showPauseReasonsModal(userName, pauseReasons, totalPause);
        });

        // Function to show pause reasons modal
        function showPauseReasonsModal(userName, pauseReasons, totalPause) {
            $('#userName').text(userName);
            $('#totalPauseDuration').text(totalPause);
            
            var tbody = $('#pauseReasonsBody');
            tbody.empty();
            
            // Convert to array if object
            var reasonsArray = Array.isArray(pauseReasons) ? pauseReasons : Object.values(pauseReasons);
            
            // Calculate total seconds for percentage
            var totalSeconds = 0;
            reasonsArray.forEach(function(reason) {
                if (reason && reason.duration) {
                    totalSeconds += reason.duration;
                }
            });
            
            // Sort by duration (descending)
            reasonsArray.sort(function(a, b) {
                return (b.duration || 0) - (a.duration || 0);
            });
            
            // Add rows to table
            reasonsArray.forEach(function(reason) {
                if (reason && reason.reason) {
                    var duration = reason.formatted_duration || '00:00:00';
                    var percentage = totalSeconds > 0 ? ((reason.duration / totalSeconds) * 100).toFixed(1) : '0.0';
                    
                    var row = '<tr>' +
                              '<td>' + reason.reason + '</td>' +
                              '<td>' + duration + '</td>' +
                              '<td>' + percentage + '%</td>' +
                              '</tr>';
                    tbody.append(row);
                }
            });
            
            $('#pauseReasonsModal').modal('show');
        }

        // Chart.js for Attendance Summary
        function timeStringToSeconds(timeStr) {
            var parts = timeStr.split(':');
            return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseInt(parts[2], 10);
        }

        function secondsToTimeString(seconds) {
            var h = Math.floor(seconds / 3600);
            var m = Math.floor((seconds % 3600) / 60);
            var s = seconds % 60;
            return [h, m, s].map(function(v) { return v < 10 ? '0' + v : v; }).join(':');
        }

        function renderAttendanceChart(data) {
            var ctx = document.getElementById('attendanceChart').getContext('2d');
            var labels = [];
            var reachable = [];
            var pause = [];
            // Only include users with at least one non-zero value
            data.forEach(function(item) {
                var reachableSec = timeStringToSeconds(item.Reachable_formatted);
                var pauseSec = timeStringToSeconds(item.pause_formatted);
                if (reachableSec > 0 || pauseSec > 0) {
                    labels.push(item.name);
                    reachable.push(reachableSec);
                    pause.push(pauseSec);
                }
            });

            // Create gradients for bars
            var gradientReachable = ctx.createLinearGradient(0, 0, 0, 400);
            gradientReachable.addColorStop(0, 'rgba(54, 162, 235, 0.9)');
            gradientReachable.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
            var gradientPause = ctx.createLinearGradient(0, 0, 0, 400);
            gradientPause.addColorStop(0, 'rgba(255, 206, 86, 0.9)');
            gradientPause.addColorStop(1, 'rgba(255, 206, 86, 0.4)');

            // Destroy previous chart if exists
            if(window.attendanceChartInstance) {
                window.attendanceChartInstance.destroy();
            }

            window.attendanceChartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Reachable',
                            backgroundColor: gradientReachable,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 2,
                            borderRadius: 8,
                            data: reachable,
                            hoverBackgroundColor: 'rgba(54, 162, 235, 1)',
                            datalabels: {
                                anchor: 'end',
                                align: 'end'
                            }
                        },
                        {
                            label: 'Pause',
                            backgroundColor: gradientPause,
                            borderColor: 'rgba(255, 206, 86, 1)',
                            borderWidth: 2,
                            borderRadius: 8,
                            data: pause,
                            hoverBackgroundColor: 'rgba(255, 206, 86, 1)',
                            datalabels: {
                                anchor: 'end',
                                align: 'end'
                            }
                        }
                    ]
                },
                options: {
                    responsive: true,
                    animation: {
                        duration: 1200,
                        easing: 'easeOutBounce'
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var label = context.dataset.label || '';
                                    var value = context.parsed.y !== undefined ? context.parsed.y : context.parsed;
                                    // Hide tooltip if value is zero
                                    if (value === 0) return '';
                                    return label + ': ' + secondsToTimeString(value);
                                }
                            }
                        },
                        datalabels: {
                            color: '#222',
                            font: {
                                weight: 'normal'
                            },
                            formatter: function(value) {
                                // Hide label if value is zero
                                if (value === 0) return '';
                                return secondsToTimeString(value);
                            }
                        },
                        title: {
                            display: false,
                            text: 'User Attendance: Reachable vs Pause',
                            font: {
                                size: 18
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 13
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Duration (HH:mm:ss)'
                            },
                            ticks: {
                                callback: function(value) {
                                    // Hide 00:00:00 on y-axis except for zero line
                                    if (value === 0) return '00:00:00';
                                    return secondsToTimeString(value);
                                },
                                font: {
                                    size: 13
                                }
                            },
                            grid: {
                                color: 'rgba(200,200,200,0.2)'
                            }
                        }
                    }
                },
                plugins: [ChartDataLabels]
            });
        }

        // Load ChartDataLabels plugin
        $.getScript('https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js', function() {
            // Fetch summary data for chart after plugin is loaded
            $.ajax({
                url: "{{ route('reporting.attendance.summary').'?' }}{!! $params_combined !!}",
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    var data = response.data || [];
                    renderAttendanceChart(data);
                }
            });
        });
    });
</script>

<script src="{{ asset('js/fullcalendar.js') }}"></script>
<script src="{{ asset('js/locale-all.js') }}"></script>
<script>
    window.EVENT_CREATE_URL = "{!!  route('calendar.events.create',['mode'=>'modal','calendar_id' => $calendar->id,'afterAction' => 'refreshCalendar'])  !!}";
</script>

@if(config('fullcalendar.enable_gcal'))
    <script src="{{ asset('js/gcal.js') }}"></script>
@endif

<script src="{!! Module::asset('calendar:js/BAP_Calendar.js') !!}"></script>
@endpush