@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">
                    {{ __('Missed Calls') }}
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content">
                <!-- Charts Row with equal height -->
                <div class="row" id="chartsContainer" style="display: flex; gap: 20px;">
                    <!-- Status Chart Card -->
                    <div class="col-lg-6 col-md-6 col-sm-12" style="display: flex; flex-direction: column;">
                        <div class="card h-100" style="display: flex; flex-direction: column; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                            <!-- Card Header with improved styling -->
                            <div class="card-header" style="background-color: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #dee2e6; border-radius: 8px 8px 0 0; display: flex; align-items: center;">
                                <h4 style="margin: 0; font-size: 16px; font-weight: 600; color: #333;">{{ __('Missed by Status') }}</h4>
                            </div>
                            <!-- Card Body with flex layout -->
                            <div class="card-body" style="padding: 20px; flex: 1; display: flex; flex-direction: column;">
                                <div class="row" style="flex: 1; margin: 0; display: flex; gap: 15px;">
                                    <!-- Chart Section -->
                                    <div class="col-md-7" style="display: flex; flex-direction: column; padding: 0;">
                                        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
                                            <canvas id="statusChart" style="max-width: 100%;"></canvas>
                                        </div>
                                    </div>
                                    <!-- Table Section -->
                                    <div class="col-md-5" style="display: flex; flex-direction: column; padding: 0; gap: 10px;">
                                        <!-- Export Button -->
                                        <button class="btn btn-success" onclick="exportTableToExcel('statusTable', 'Missed_by_Status')" style="width: 100%; padding: 10px 15px; font-size: 13px; font-weight: 500; border-radius: 6px; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                            <i class="fa fa-download" style="margin-right: 6px;"></i> Export Excel
                                        </button>
                                        <!-- Table with scrollable container -->
                                        <div style="flex: 1; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px; background-color: #fff;">
                                            <table class="table" id="statusTable" style="margin: 0; font-size: 13px;">
                                                <thead style="background-color: #f8f9fa; position: sticky; top: 0;">
                                                    <tr style="border-bottom: 2px solid #dee2e6;">
                                                        <th style="padding: 12px 10px; font-weight: 600; color: #333; text-align: left; border: none;">{{ __('Status') }}</th>
                                                        <th style="padding: 12px 10px; font-weight: 600; color: #333; text-align: right; border: none;">{{ __('Count') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="statusTableBody">
                                                    <tr style="border-bottom: 1px solid #dee2e6;">
                                                        <td colspan="2" style="padding: 20px 10px; text-align: center; color: #999;">{{ __('Loading...') }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Reason Chart Card -->
                    <div class="col-lg-6 col-md-6 col-sm-12" style="display: flex; flex-direction: column;">
                        <div class="card h-100" style="display: flex; flex-direction: column; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                            <!-- Card Header with improved styling -->
                            <div class="card-header" style="background-color: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #dee2e6; border-radius: 8px 8px 0 0; display: flex; align-items: center;">
                                <h4 style="margin: 0; font-size: 16px; font-weight: 600; color: #333;">{{ __('Missed by Reason') }}</h4>
                            </div>
                            <!-- Card Body with flex layout -->
                            <div class="card-body" style="padding: 20px; flex: 1; display: flex; flex-direction: column;">
                                <div class="row" style="flex: 1; margin: 0; display: flex; gap: 15px;">
                                    <!-- Chart Section -->
                                    <div class="col-md-7" style="display: flex; flex-direction: column; padding: 0;">
                                        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
                                            <canvas id="reasonChart" style="max-width: 100%;"></canvas>
                                        </div>
                                    </div>
                                    <!-- Table Section -->
                                    <div class="col-md-5" style="display: flex; flex-direction: column; padding: 0; gap: 10px;">
                                        <!-- Export Button -->
                                        <button class="btn btn-success" onclick="exportTableToExcel('reasonTable', 'Missed_by_Reason')" style="width: 100%; padding: 10px 15px; font-size: 13px; font-weight: 500; border-radius: 6px; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                            <i class="fa fa-download" style="margin-right: 6px;"></i> Export Excel
                                        </button>
                                        <!-- Table with scrollable container -->
                                        <div style="flex: 1; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px; background-color: #fff;">
                                            <table class="table" id="reasonTable" style="margin: 0; font-size: 13px;">
                                                <thead style="background-color: #f8f9fa; position: sticky; top: 0;">
                                                    <tr style="border-bottom: 2px solid #dee2e6;">
                                                        <th style="padding: 12px 10px; font-weight: 600; color: #333; text-align: left; border: none;">{{ __('Reason') }}</th>
                                                        <th style="padding: 12px 10px; font-weight: 600; color: #333; text-align: right; border: none;">{{ __('Count') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="reasonTableBody">
                                                    <tr style="border-bottom: 1px solid #dee2e6;">
                                                        <td colspan="2" style="padding: 20px 10px; text-align: center; color: #999;">{{ __('Loading...') }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12">
                    <table class="table users table-sortable data-table">
                        <Thead>
                            <tr>
                                <th class="th-sort-asc">{{ __('Time') }}</th>
                                <th>{{ __('Queue') }}</th>
                                <th>{{ __('Queue Name') }}</th>
                                <th>{{ __('Number') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Ringtime') }}</th>
                                <th>{{ __('Reason') }}</th>
                                <th>{{ __('Ring Details') }}</th>
                                <th>{{ __('Action') }}</th>
                            </tr>
                        </Thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="ringDetailsModal" tabindex="-1" role="dialog" aria-labelledby="ringDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ringDetailsModalLabel">Call Analysis Details</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 id="missedCallInfo"></div>
                
                <ul class="nav nav-tabs" id="callDetailsTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="ring-tab" data-toggle="tab" href="#ring" role="tab">
                            Ring Attempts
                            <span id="ringDetailsCount" style="display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;background-color:#dc3545;color:#fff;margin-left:0.25rem;">0</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="inbound-tab" data-toggle="tab" href="#inbound" role="tab">
                            Active Inbound Calls
                            <span id="inboundCallsCount" style="display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;background-color:#dc3545;color:#fff;margin-left:0.25rem;">0</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="outbound-tab" data-toggle="tab" href="#outbound" role="tab">
                            Active Outbound Calls
                            <span id="outboundCallsCount" style="display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;background-color:#dc3545;color:#fff;margin-left:0.25rem;">0</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="missed-tab" data-toggle="tab" href="#missed" role="tab">
                            Active Missed Calls
                            <span id="missedCallsCount" style="display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;background-color:#dc3545;color:#fff;margin-left:0.25rem;">0</span>
                        </a>
                    </li>
                </ul>
                
                <div class="tab-content" id="callDetailsTabsContent">
                    <div class="tab-pane fade show active" id="ring" role="tabpanel">
                        <table class="table table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Agent</th>
                                    <th>Event</th>
                                    <th>Ring Duration</th>
                                    <th>Time</th>
                                </tr>
                            </thead>
                            <tbody id="ringDetailsBody"></tbody>
                        </table>
                    </div>
                    
                    <div class="tab-pane fade" id="inbound" role="tabpanel">
                        <table class="table table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Time</th>
                                    <th>Agent</th>
                                    <th>Number</th>
                                    <th>DID/Channel</th>
                                    <th>Duration</th>
                                </tr>
                            </thead>
                            <tbody id="inboundCallsBody"></tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade" id="outbound" role="tabpanel">
                        <table class="table table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Time</th>
                                    <th>Agent</th>
                                    <th>Number</th>
                                    <th>Dialed Thru</th>
                                    <th>Duration</th>
                                    <th>Disposition</th>
                                </tr>
                            </thead>
                            <tbody id="outboundCallsBody"></tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade" id="missed" role="tabpanel">
                        <table class="table table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Agent</th>
                                    <th>Event</th>
                                    <th>Ring Duration</th>
                                    <th>Time</th>
                                </tr>
                            </thead>
                            <tbody id="missedCallsBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

<script>
    var agentNames = @json($agent_names);
    var statusChart = null;
    var reasonChart = null;
</script>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<style>
    /* Enhanced Export Button Styling */
    .btn-success:hover {
        background-color: #218838;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    .btn-success:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Table row hover effect */
    #statusTableBody tr:hover,
    #reasonTableBody tr:hover {
        background-color: #f8f9fa;
    }

    /* Chart container styling */
    #chartsContainer {
        margin-bottom: 20px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        #chartsContainer {
            flex-direction: column;
        }

        .col-md-7, .col-md-5 {
            width: 100% !important;
        }
    }
</style>
<script>
    @php
        $conds_combined = 'daterange='.implode(' - ',$conds);
    @endphp
    $(function () {
        $('input[name="daterange"]').daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 1,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss'
            }
        }).on('apply.daterangepicker', function() {
            loadChartData();
            $('.data-table').DataTable().ajax.reload();
        });
        // Load chart data
        loadChartData();
        
        let table = $('.data-table').DataTable({
            dom: 'Bfrtip',
            order: [[0, 'desc']],
            ajax: "{{ route('reporting.missed').'?' }}{!! $conds_combined !!}",
            columns: [
                {data: 'call_time', name: 'call_time', searchable: false},
                {data: 'enter_queuename', name: 'queuename'},
                {data: 'queue_description', name: 'queue_description'},
                {
                    data: 'caller_number',
                    name: 'caller_number',
                    orderable: false,
                    render: function (data) {
                        return data ? data.replace("+2", "") : '';
                    }
                },
                {data: 'event', name: 'event'},
                {data: 'ringtime', name: 'ringtime', render: function (wait) {
                    var date = new Date(null);
                    date.setSeconds(wait ?? 0);
                    return date.toISOString().substr(11, 8);
                }},
                {data: 'status', name: 'status'},
                {data: 'ring_details', name: 'ring_details'},
                {data: 'action', name: 'action'},
            ],
            buttons: ['copy', 'excelHtml5']
        });

        // Hide other tabs' content when a specific tab is selected
        $('#callDetailsTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('.tab-pane').removeClass('show active'); // Hide all tabs
            $($(e.target).attr('href')).addClass('show active'); // Show the selected tab
        });
    });

    function showRingDetails(callid) {
        $.ajax({
            url: "{{ url('reporting/getRingDetails') }}/" + callid,
            method: 'GET',
            success: function(response) {

                $('#ringDetailsCount').text(response.ring_detailss_count);
                $('#inboundCallsCount').text(response.inbound_calls_count);
                $('#outboundCallsCount').text(response.outbound_calls_count);

                // Display ring details
                $('#ringDetailsBody').empty();
                if (response.ring_details && response.ring_details.length > 0) {

                    function extractExtension(agentString) {
                        if (!agentString) return null;
                        const match = agentString.match(/Local\/(\d+)@/);
                        return match ? match[1] : null;
                    }

                    response.ring_details.forEach(function(detail) {

                        let ext = extractExtension(detail.agent);
                        let agentName = agentNames[ext] ?? detail.agent;

                        $('#ringDetailsBody').append(`
                            <tr>
                                <td>${agentName}</td>
                                <td>${detail.event}</td>
                                <td>${formatDuration(detail.data1)}</td>
                                <td>${detail.time}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#ringDetailsBody').append(`
                        <tr><td colspan="4" class="text-center">No agents available for this missed call</td></tr>
                    `);
                }

                // Display inbound calls during this period
                $('#inboundCallsBody').empty();
                if (response.inbound_calls && response.inbound_calls.length > 0) {

                    function extractExtension(agentString) {
                        if (!agentString) return null;
                        const match = agentString.match(/Local\/(\d+)@/);
                        return match ? match[1] : null;
                    }

                    response.inbound_calls.forEach(function(call) {

                        let ext = extractExtension(call.agent);

                        let agentName = agentNames[ext] ?? call.agent;

                        $('#inboundCallsBody').append(`
                            <tr>
                                <td>${call.enter_time || call.time}</td>
                                <td>${agentName}</td>
                                <td>${call.src || 'N/A'}</td>
                                <td>${call.did || 'N/A'}</td>
                                <td>${(function(total_duration) {
                                    var date = new Date(null);
                                    date.setSeconds(total_duration);
                                    return date.toISOString().substr(11, 8);
                                })(call.total_duration)}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#inboundCallsBody').append(`
                        <tr><td colspan="6" class="text-center">No inbound calls during this missed call period</td></tr>
                    `);
                }

                // Display outbound calls
                $('#outboundCallsBody').empty();
                if (response.outbound_calls && response.outbound_calls.length > 0) {
                    response.outbound_calls.forEach(function(call) {
                        $('#outboundCallsBody').append(`
                            <tr>
                                <td>${call.calldate}</td>
                                <td>${call.agent_name || 'N/A'}</td>
                                <td>${call.dst}</td>
                                <td>${call.src}</td>
                                <td>${(function(duration) {
                                    var date = new Date(null);
                                    date.setSeconds(duration);
                                    return date.toISOString().substr(11, 8);
                                })(call.duration)}</td>
                                <td>${call.disposition}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#outboundCallsBody').append(`
                        <tr><td colspan="8" class="text-center">No outbound calls during this missed call period</td></tr>
                    `);
                }

                // Display active missed calls (same columns as ring_details)
                $('#missedCallsCount').text(response.active_missed_calls_count || 0);
                $('#missedCallsBody').empty();
                if (response.active_missed_calls && response.active_missed_calls.length > 0) {
                    response.active_missed_calls.forEach(function(detail) {
                        $('#missedCallsBody').append(`
                            <tr>
                                <td>${detail.agent || 'N/A'}</td>
                                <td>${detail.event}</td>
                                <td>${formatDuration(detail.data1)}</td>
                                <td>${detail.time}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#missedCallsBody').append(`
                        <tr><td colspan="5" class="text-center">No active missed calls during this period</td></tr>
                    `);
                }

                $('#ringDetailsModal').modal('show');
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }

    // Helper function to format duration
    function formatDuration(seconds) {
        if (!seconds) return '00:00:00';
        seconds = seconds / 1000; // Convert from milliseconds to seconds if necessary
        const date = new Date(null);
        date.setSeconds(seconds);
        return date.toISOString().substr(11, 8);
    }

    function missedLink(event, num) {
        var textarea = document.createElement("textarea");
        textarea.value = num;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        var url = 'missedDone/' + num;
        fetch(url)
            .then(response => {
                if (response) {
                    $('.data-table').DataTable().ajax.reload();
                    loadChartData();
                } else {
                    console.error('Error:', response.status);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    function loadChartData() {
        $.ajax({
            url: "{{ route('reporting.call.stats') }}",
            method: 'GET',
            data: {
                daterange: $('input[name="daterange"]').val()
            },
            success: function(response) {
                initializeCharts(response);
            },
            error: function(xhr, status, error) {
                console.error('Error loading chart data:', error);
            }
        });
    }

    function initializeCharts(data) {
        const ctx1 = document.getElementById('statusChart').getContext('2d');
        const ctx2 = document.getElementById('reasonChart').getContext('2d');

        // Colors palette
        const colors = [
            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
            '#FF9F40', '#FF6384', '#C9CBCF', '#4BC0C0', '#FF6384',
            '#36A2EB', '#FFCE56', '#FF9F40', '#9966FF', '#4BC0C0'
        ];

        // Destroy existing charts if they exist
        if (statusChart) statusChart.destroy();
        if (reasonChart) reasonChart.destroy();

        // Status Chart
        statusChart = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: data.status_data.labels,
                datasets: [{
                    data: data.status_data.counts,
                    backgroundColor: colors.slice(0, data.status_data.labels.length),
                    borderColor: '#fff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = (value / total * 100).toFixed(1);
                                return label + ': ' + value + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });

        // Populate Status Table
        let statusTableHtml = '';
        if (data.status_data.labels.length > 0) {
            data.status_data.labels.forEach((label, index) => {
                const count = data.status_data.counts[index];
                statusTableHtml += `
                    <tr style="border-bottom: 1px solid #dee2e6; transition: background-color 0.2s ease;">
                        <td style="padding: 12px 10px; text-align: left; border: none; color: #333;">${label}</td>
                        <td style="padding: 12px 10px; text-align: right; border: none; color: #333; font-weight: 600;"><span style="background-color: #e7f3ff; padding: 4px 10px; border-radius: 4px; color: #0066cc;">${count}</span></td>
                    </tr>
                `;
            });
        } else {
            statusTableHtml = '<tr style="border-bottom: 1px solid #dee2e6;"><td colspan="2" style="padding: 20px 10px; text-align: center; color: #999;border: none;">No data</td></tr>';
        }
        $('#statusTableBody').html(statusTableHtml);

        // Reason Chart
        reasonChart = new Chart(ctx2, {
            type: 'pie',
            data: {
                labels: data.reason_data.labels,
                datasets: [{
                    data: data.reason_data.counts,
                    backgroundColor: colors.slice(0, data.reason_data.labels.length),
                    borderColor: '#fff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = (value / total * 100).toFixed(1);
                                return label + ': ' + value + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });

        // Populate Reason Table
        let reasonTableHtml = '';
        if (data.reason_data.labels.length > 0) {
            data.reason_data.labels.forEach((label, index) => {
                const count = data.reason_data.counts[index];
                reasonTableHtml += `
                    <tr style="border-bottom: 1px solid #dee2e6; transition: background-color 0.2s ease;">
                        <td style="padding: 12px 10px; text-align: left; border: none; color: #333;">${label}</td>
                        <td style="padding: 12px 10px; text-align: right; border: none; color: #333; font-weight: 600;"><span style="background-color: #fff4e7; padding: 4px 10px; border-radius: 4px; color: #ff9800;">${count}</span></td>
                    </tr>
                `;
            });
        } else {
            reasonTableHtml = '<tr style="border-bottom: 1px solid #dee2e6;"><td colspan="2" style="padding: 20px 10px; text-align: center; color: #999;border: none;">No data</td></tr>';
        }
        $('#reasonTableBody').html(reasonTableHtml);
    }

    function exportTableToExcel(tableId, filename) {
        const table = document.getElementById(tableId);
        
        if (!table) {
            console.error('Table not found');
            return;
        }

        // Create a workbook
        const ws = XLSX.utils.table_to_sheet(table);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Data");
        
        // Generate filename with date
        const date = new Date().toISOString().split('T')[0];
        const fullFilename = `${filename}_${date}.xlsx`;
        
        // Trigger download
        XLSX.writeFile(wb, fullFilename);
    }
</script>
@endpush