@extends('layouts.app')

@section('content')
<style>
    .performance-section {
        margin-bottom: 0px;
    }

    .performance-section .card {
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }

    .performance-section .card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .card-inside-title {
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        background-color: #f8f9fa;
    }

    .card-inside-title h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .d-flex {
        display: flex !important;
    }
    .justify-content-between {
        justify-content: space-between !important;
    }
    .align-items-center {
        align-items: center !important;
    }
    .mb-0 {
        margin-bottom: 0 !important;
    }

    .expander {
        transition: transform 0.3s ease;
    }

    .panel-content {
        padding: 20px;
    }

    .export-button {
        background-color: #2196F3;
        color: #fff;
        padding: 8px 16px;
        margin-right: 0;
        text-decoration: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        border: none;
        font-size: 13px;
        font-weight: 500;
        outline: none;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        display: inline-block;
    }

    .export-button:hover {
        background-color: #1976D2;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .export-button:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    }

    .table-responsive {
        padding: 0;
        margin: 0;
    }

    .performance-table {
        margin-bottom: 0;
    }

    .performance-table thead {
        background-color: #f5f5f5;
        border-bottom: 2px solid #ddd;
    }

    .performance-table thead th {
        padding: 12px 8px;
        font-weight: 600;
        font-size: 13px;
        color: #555;
        white-space: nowrap;
        text-align: center;
    }

    .performance-table tbody td {
        padding: 10px 8px;
        font-size: 13px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }

    .performance-table tbody tr:hover {
        background-color: #f9f9f9;
    }

    .performance-table tbody tr:last-child td {
        border-bottom: 1px solid #ddd;
    }

    .no-records {
        text-align: center;
        padding: 30px !important;
        color: #999;
        font-style: italic;
    }

    .summary-table {
        margin-bottom: 0;
        width: 100%;
    }

    .summary-table thead th {
        padding: 12px 8px;
        font-weight: 600;
        font-size: 13px;
        color: #555;
        white-space: nowrap;
        text-align: center;
        background-color: #f5f5f5;
        border-bottom: 2px solid #ddd;
    }

    .summary-table tbody td {
        padding: 10px 12px;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
        text-align: center;
    }

    .summary-table tbody tr:hover {
        background-color: #f9f9f9;
    }

    .summary-table tbody tr:last-child td {
        border-bottom: 1px solid #ddd;
    }

    .summary-label {
        font-weight: 500;
        color: #333;
        width: 60%;
    }

    .summary-value {
        text-align: right;
        font-weight: 600;
        color: #2196F3;
    }

    @media (max-width: 768px) {
        .performance-table thead th,
        .performance-table tbody td {
            padding: 8px 4px;
            font-size: 12px;
        }
        .summary-table thead th,
        .summary-table tbody td {
            padding: 8px 4px;
            font-size: 12px;
        }
        .export-button {
            padding: 6px 12px;
            font-size: 11px;
        }
        .card-inside-title {
            padding: 10px;
        }
        .card-inside-title h2 {
            font-size: 14px;
        }
    }
</style>

<div class="row">
    <!-- Filter Area -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        {!! $filter_area !!}
    </div>

    <!-- Performance Summary Section -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 performance-section">
        <div class="card" data-collapsible="true">
            <div class="header card-inside-title d-flex justify-content-between align-items-center">
                <h2 class="pointer mb-0">
                    {{ __('Performance Summary') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
                <button class="export-button" id="out_summary_sheet">
                    <i class="fa fa-download"></i> {{ __('Export') }}
                </button>
            </div>
            <div class="body panel-content">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-center align-middle summary-table">
                        <thead>
                            <tr>
                                <th>{{ __('All Calls') }}</th>
                                <th>{{ __('Answered') }}</th>
                                <th>{{ __('NO ANSWER') }}</th>
                                <th>{{ __('BUSY') }}</th>
                                <th>{{ __('FAILED') }}</th>
                                <th>{{ __('Total Duration') }}</th>
                                <th>{{ __('Avg Duration') }}</th>
                                <th>{{ __('Total talk time') }}</th>
                                <th>{{ __('Avg talk time') }}</th>
                                <th>{{ __('Agents Processed') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-bold">{{ $performance_total->total_calls }}</td>
                                <td class="fw-bold">{{ $performance_total->answered_calls }}</td>
                                <td class="fw-bold">{{ $performance_total->no_answered_calls }}</td>
                                <td class="fw-bold">{{ $performance_total->busy_calls }}</td>
                                <td class="fw-bold">{{ $performance_total->failed_calls }}</td>
                                <td class="fw-bold">{{ $performance_total->total_duration }}</td>
                                <td class="fw-bold">{{ $performance_total->average_duration }}</td>
                                <td class="fw-bold">{{ $performance_total->total_billsec }}</td>
                                <td class="fw-bold">{{ $performance_total->average_billsec }}</td>
                                <td class="fw-bold">{{ $performance_total->total_users }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Grouped by Agent Section -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 performance-section">
        <div class="card" data-collapsible="true">
            <div class="header card-inside-title d-flex justify-content-between align-items-center">
                <h2 class="pointer mb-0">
                    {{ __('Agents Performance') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
                <button class="export-button" id="out_agent_by_agent_sheet">
                    <i class="fa fa-download"></i> {{ __('Export') }}
                </button>
            </div>
            <div class="body panel-content">
                <div class="table-responsive">
                    <table class="table table-striped performance-table">
                        <thead>
                            <tr>
                                <th>{{ __('Ext.') }}</th>
                                @if(!empty($user_code_enabled))
                                    <th>{{ __('Code') }}</th>
                                @endif
                                <th>{{ __('Agent Name') }}</th>
                                <th>{{ __('Total') }}</th>
                                <th>{{ __('ANSWERED') }}</th>
                                <th>{{ __('NO ANSWER') }}</th>
                                <th>{{ __('BUSY') }}</th>
                                <th>{{ __('FAILED') }}</th>
                                <th>{{ __('Total Duration') }}</th>
                                <th>{{ __('Avg duration') }}</th>
                                <th>{{ __('Total talk time') }}</th>
                                <th>{{ __('Avg talk time') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($performance_data_by_agent))
                                @foreach($performance_data_by_agent as $row)
                                    <tr>
                                        <td>{{ $row->cnum }}</td>
                                        @if(!empty($user_code_enabled))
                                            <td>{{ $row->userCode }}</td>
                                        @endif
                                        <td>{{ $row->userName }}</td>
                                        <td>{{ $row->total_calls }}</td>
                                        <td>{{ $row->answered_calls }}</td>
                                        <td>{{ $row->no_answered_calls }}</td>
                                        <td>{{ $row->busy_calls }}</td>
                                        <td>{{ $row->failed_calls }}</td>
                                        <td>{{ $row->total_duration }}</td>
                                        <td>{{ $row->average_duration }}</td>
                                        <td>{{ $row->total_billsec }}</td>
                                        <td>{{ $row->average_billsec }}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="{{ !empty($user_code_enabled) ? 12 : 11 }}" class="no-records">{{ __('No records found') }}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance by Date Section -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 performance-section">
        <div class="card" data-collapsible="true">
            <div class="header card-inside-title d-flex justify-content-between align-items-center">
                <h2 class="pointer mb-0">
                    {{ __('Agents Performance (By Date)') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
                <button class="export-button" id="out_agent_sheet">
                    <i class="fa fa-download"></i> {{ __('Export') }}
                </button>
            </div>
            <div class="body panel-content">
                <div class="table-responsive">
                    <table class="table table-striped performance-table">
                        <thead>
                            <tr>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Ext.') }}</th>
                                <th>{{ __('Agent Name') }}</th>
                                <th>{{ __('Total') }}</th>
                                <th>{{ __('ANSWERED') }}</th>
                                <th>{{ __('NO ANSWER') }}</th>
                                <th>{{ __('BUSY') }}</th>
                                <th>{{ __('FAILED') }}</th>
                                <th>{{ __('Total Duration') }}</th>
                                <th>{{ __('Avg duration') }}</th>
                                <th>{{ __('Total talk time') }}</th>
                                <th>{{ __('Avg talk time') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($performance_data))
                                @foreach($performance_data as $row)
                                    <tr>
                                        <td>{{ $row->call_date }}</td>
                                        <td>{{ $row->cnum }}</td>
                                        <td>{{ $row->userName }}</td>
                                        <td>{{ $row->total_calls }}</td>
                                        <td>{{ $row->answered_calls }}</td>
                                        <td>{{ $row->no_answered_calls }}</td>
                                        <td>{{ $row->busy_calls }}</td>
                                        <td>{{ $row->failed_calls }}</td>
                                        <td>{{ $row->total_duration }}</td>
                                        <td>{{ $row->average_duration }}</td>
                                        <td>{{ $row->total_billsec }}</td>
                                        <td>{{ $row->average_billsec }}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="12" class="no-records">{{ __('No records found') }}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
    <script>
        /**
         * Performance Report Export Handler
         */
        const PerformanceExport = {
            /**
             * Generic export handler for POST-based exports
             */
            exportData: function(endpoint, filename, data) {
                fetch(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify(data),
                })
                .then(response => {
                    if (response.ok) {
                        return response.blob();
                    }
                    throw new Error(`Server error: ${response.status}`);
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => {
                    console.error('Export error:', error);
                    alert('{{ __("Error during export") }}');
                });
            },

            /**
             * Export agent data (by date)
             */
            exportAgentByDate: function() {
                this.exportData(
                    'outperformance/out_agent_sheet',
                    'OutAgentSheet.xlsx',
                    {
                        daterange: '{{ implode(" - ", $conds) }}',
                        performance_data: JSON.stringify(@json($performance_data)),
                    }
                );
            },

            /**
             * Export agent aggregated data
             */
            exportAgentAggregated: function() {
                this.exportData(
                    'outperformance/out_agent_by_agent_sheet',
                    'OutAgentByAgentSheet.xlsx',
                    {
                        daterange: '{{ implode(" - ", $conds) }}',
                        performance_data: JSON.stringify(@json($performance_data_by_agent)),
                        user_code_enabled: {{ $user_code_enabled ? 1 : 0 }},
                    }
                );
            },

            /**
             * Export summary data
             */
            exportSummary: function() {
                @php
                    $conds_combined = implode(' - ', $conds);
                @endphp
                const url = 'outperformance/out_summary_sheet?' +
                    'daterange={{ urlencode($conds_combined) }}&' +
                    'performance_total=' + encodeURIComponent(JSON.stringify(@json($performance_total)));

                fetch(url)
                    .then(response => {
                        if (response.ok) {
                            return response.blob();
                        }
                        throw new Error(`Server error: ${response.status}`);
                    })
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.href = url;
                        link.download = 'OutTotalSummarySheet.xlsx';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(url);
                    })
                    .catch(error => {
                        console.error('Export error:', error);
                        alert('{{ __("Error during export") }}');
                    });
            }
        };

        /**
         * Initialize Export Handlers
         */
        $(document).ready(function() {
            // Export button handlers
            $('#out_agent_sheet').on('click', function(e) {
                e.preventDefault();
                PerformanceExport.exportAgentByDate();
            });

            $('#out_agent_by_agent_sheet').on('click', function(e) {
                e.preventDefault();
                PerformanceExport.exportAgentAggregated();
            });

            $('#out_summary_sheet').on('click', function(e) {
                e.preventDefault();
                PerformanceExport.exportSummary();
            });

            // Initialize date range picker
            if ($('input[name="daterange"]').length) {
                $('input[name="daterange"]').daterangepicker({
                    timePicker: true,
                    timePicker24Hour: true,
                    timePickerIncrement: 1,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm:ss'
                    }
                });
            }

            // Smooth collapsible animation
            $('.card[data-collapsible="true"] .pointer').on('click', function() {
                const card = $(this).closest('.card');
                const expander = $(this).find('.expander i');
                const content = card.find('.panel-content');

                content.slideToggle(300, function() {
                    expander.toggleClass('fa-angle-up fa-angle-down');
                });
            });
        });
    </script>
@endpush