@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!-- App Header -->
                    @include('layouts.appheader')
                    <div class="containersection">
                        <!-- Page Header -->
                        <div class="page-header">
                            <div class="page-leftheader"></div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader"></div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision mb-6">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Queued Calls</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="calllogsfiltersec col-lg-12 col-md-12 col-sm-12">
                                                        <form id="filterForm">
                                                            <div class="row filterrow">
                                                                <div class="filterformdiv calllogsfilter1 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Campaign Names </label>
                                                                        <select name="call_name" id="call_name" class="form-control select2 select2-show-search">
                                                                            <option value="">Select Name</option>
                                                                            @foreach($uniqueNames as $uniqueName)
                                                                                <option value="{{ $uniqueName }}" {{ request('call_name') == $uniqueName ? 'selected' : '' }}>
                                                                                    {{ $uniqueName }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="filterformdiv calllogsfilter2 col-lg-3 col-md-6 col-sm-12 col-md-12">
                                                                    <div class="form-group">
                                                                    <label class="form-label d-flex"> Filter by <span class="material-symbols-outlined">supervisor_account</span> Assistant  / <span class="material-symbols-outlined">Automation</span> Workflow <span class="text-red">*</span></label>
                                                                    <select name="assistantId" class="form-control select2 select2-show-search select2a">
                                                                        <option value="" style="color: #868a91;">Select Assistant/Workflow</option>
                                                                        @foreach ($assistants as $assistant)
                                                                            <option value="A_{{ $assistant['id'] }}" data-type="assistant">{{ $assistant['name'] }}</option>
                                                                        @endforeach
                                                                        @foreach ($workflows as $workflow)
                                                                            <option value="W_{{ $workflow['id'] }}" data-type="workflow">{{ $workflow['name'] }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                </div>
                                                                <div class="filterformdiv calllogsfilter3 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Phone Number </label>
                                                                        <select name="phoneNumberId" id="phoneNumberId" class="form-control select2 select2-show-search">
                                                                            <option value="">Select Phone Number</option>
                                                                            @foreach($numbers as $number)
                                                                                <option value="{{ $number['id'] }}" {{ request('phoneNumberId') == $number['id'] ? 'selected' : '' }}>
                                                                                    {{ $number['formatted'] }} ( {{$number['name']}} )
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                @php
                                                                    $fromDate = $firstDate ?? request('createdAtGe');
                                                                    $toDate = $lastDate ?? request('createdAtLe');
                                                                @endphp
                                                                <div class="filterformdiv calllogsfilter4 col-lg-3 col-md-6 col-sm-12 mb-0 schedule">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Date : From </label>
                                                                        <div class="input-group">
                                                                            <!-- <input type="text" name="createdAtGe" id="earliestAt1" class="form-control" placeholder="Select From Date" value="{{ request('createdAtGe') }}"/> -->
                                                                            <input type="text" name="createdAtGe" id="earliestAt1" class="form-control" placeholder="Select From Date" value="{{ $fromDate }}"/>
                                                                            <div class="input-group-prepend datepickerprepend">
                                                                                <span class="input-group-text">
                                                                                    <i class="fe fe-calendar"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="filterformdiv calllogsfilter5 col-lg-3 col-md-6 col-sm-12 mb-0 schedule">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Date : To </label>
                                                                        <div class="input-group">
                                                                            <!-- <input type="text" name="createdAtLe" id="earliestAt2" class="form-control" placeholder="Select To Date" value="{{ request('createdAtLe') }}"/> -->
                                                                            <input type="text" name="createdAtLe" id="earliestAt2" class="form-control" placeholder="Select To Date" value="{{ $toDate }}"/>
                                                                            <div class="input-group-prepend datepickerprepend">
                                                                                <span class="input-group-text">
                                                                                    <i class="fe fe-calendar"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="filterformbtn calllogsfilter6 col-lg-3 col-md-12 col-sm-12 mb-0">
                                                                    <div class="form-group">
                                                                        <button class="filterbtn" type="submit">Apply Filters</button>
                                                                        <a class="clearbtn" href="{{ route('user.call_logs' ) }}">Clear</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="calllogdetails1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="row">
                                                <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <div class="card carddivision">
                                                        <div class="card-body cardbody">
                                                            <div class="infocalllist">
                                                                <ul>
                                                                    <li>
                                                                        <div class="form-check form-switch custom-toggle">
                                                                            <input class="form-check-input" type="checkbox" id="autoRefreshSwitch">
                                                                            <label class="form-check-label" for="autoRefreshSwitch" id="autoRefreshLabel">
                                                                                Enable Auto Refresh (Every {{ env('AUTO_REFRESH_INTERVAL_MINS', 5) }} min)
                                                                            </label>
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <button class="refreshbutton" data-placement="bottom" data-toggle="tooltip" title="Refresh"><i class="fe fe-refresh-cw" id="manualRefresh"></i></button>
                                                                    </li>
                                                                    <li>
                                                                        <button class="helpbutton" data-placement="bottom" data-toggle="tooltip" data-custom-class="wide-tooltip" title="Only a portion of the data is currently visible. Due to the high volume of records, only the first {{ env('FETCH_LIMIT') }} results are displayed. To view additional data, please adjust your date range or apply additional filters.">
                                                                        <span class="d-flex"><i class="fe fe-help-circle" ></i>&nbsp;&nbsp;<span class="helpspan">Help</span></span>
                                                                        </button>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="calllogtab col-lg-12 col-md-12 col-sm-12 col-md-1 px-0">
                                                                <ul class="nav nav-tabs calllogtabs mx-1" id="callTabs" role="tablist">
                                                                    <li class="nav-item" role="presentation">
                                                                        <button class="nav-link active" id="list-tab" data-toggle="tab" data-target="#queuecallsTab" type="button" role="tab" aria-controls="queuecallsTab" aria-selected="true"><i class="fe fe-book-open"></i>Queued Calls</button>
                                                                    </li>
                                                                    <li class="nav-item" role="presentation">
                                                                        <button class="nav-link" id="details-tab" data-toggle="tab" data-target="#errorcallsTab" type="button" role="tab" aria-controls="errorcallsTab" aria-selected="false"><i class="fe fe-bar-chart-2"></i>Error Calls</button>
                                                                    </li>
                                                                </ul>
                                                                <div class="tab-content callqueuetab">
                                                                    <div class="tab-pane fade show active" id="queuecallsTab" role="tabpanel">
                                                                        <div class="infocalllist1">
                                                                            <ul>
                                                                                <li>
                                                                                    <button id="bulkDeleteBtn" style="padding: 9px 13px 8px 13px;" disabled>
                                                                                        <span class="d-flex"><i class="fe fe-trash"></i>&nbsp;&nbsp;<span class="priorspan">Delete Selected</span></span>
                                                                                    </button>
                                                                                </li>
                                                                                <li>
                                                                                    <button id="bulkPrioritizeBtn" style="padding: 9px 13px 8px 13px;" disabled>
                                                                                        <span class="d-flex"><i class="fe fe-list"></i>&nbsp;&nbsp;<span class="priorspan">Prioritise Selected</span></span>
                                                                                    </button>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                        <div id="table-wrapper" class="table-responsive commtlb">
                                                                            <table id="example2" class="table table-bordered text-nowrap tablelistingsec">
                                                                                <thead>
                                                                                    <tr>
                                                                                        <th class="text-center">
                                                                                            <input type="checkbox" id="select-all" />
                                                                                        </th>
                                                                                        <th>Campaign Name</th>
                                                                                        <th>Assistant / Workflow</th>
                                                                                        <th>Phone Number</th>
                                                                                        <th>Dialed Number</th>
                                                                                        <th>Type</th>
                                                                                        <!-- <th>Priority</th> -->
                                                                                        <th class="text-center">Queued At</th>
                                                                                        
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                    
                                                                                </tbody>
                                                                            </table>
                                                                            <div id="copyToast"><i class="fe fe-info"></i>&nbsp; ID copied to clipboard!</div>
                                                                        </div>
                                                                        <!-- Mobile View for Queued Calls -->
                                                                        <div class="mobile-card-view">
                                                                            <div class="mobile-controls">
                                                                                <div class="entries-control">
                                                                                    <label class="mb-0">
                                                                                        <select id="mobile-entries-queue">
                                                                                            <option value="10">10</option>
                                                                                            <option value="25">25</option>
                                                                                            <option value="50">50</option>
                                                                                            <option value="100">100</option>
                                                                                        </select>
                                                                                    </label>
                                                                                </div>
                                                                                <div class="search-control">
                                                                                    <input type="text" id="mobile-search-queue" placeholder="Search">
                                                                                </div>
                                                                            </div>
                                                                            <div id="mobile-cards-container-queue">
                                                                                <!-- Cards populated by JavaScript -->
                                                                            </div>
                                                                            <div class="mobile-info">
                                                                                <span id="entries-info-queue">Showing entries</span>
                                                                            </div>
                                                                            <div class="mobile-pagination" id="mobile-pagination-queue"></div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="errorcallsTab" role="tabpanel">
                                                                        <div id="table-wrapper" class="table-responsive commtlb">
                                                                            <table id="example3" class="table table-bordered text-nowrap tablelistingsec">
                                                                                <thead>
                                                                                    <tr>
                                                                                        <th>Campaign Name</th>
                                                                                        <th>Assistant / Workflow</th>
                                                                                        <th>Phone Number</th>
                                                                                        <th>Dialed Number</th>
                                                                                        <th>Type</th>
                                                                                        <!-- <th>Priority</th> -->
                                                                                        <th>response</th>
                                                                                        <th class="text-center">Processed At</th>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                    
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                        <!-- Mobile View for Error Calls -->
                                                                        <div class="mobile-card-view">
                                                                            <div class="mobile-controls">
                                                                                <div class="entries-control">
                                                                                    <label class="mb-0">
                                                                                        <select id="mobile-entries-error">
                                                                                            <option value="10">10</option>
                                                                                            <option value="25">25</option>
                                                                                            <option value="50">50</option>
                                                                                            <option value="100">100</option>
                                                                                        </select>
                                                                                    </label>
                                                                                </div>
                                                                                <div class="search-control">
                                                                                    <input type="text" id="mobile-search-error" placeholder="Search">
                                                                                </div>
                                                                            </div>
                                                                            <div id="mobile-cards-container-error">
                                                                                <!-- Cards populated by JavaScript -->
                                                                            </div>
                                                                            <div class="mobile-info">
                                                                                <span id="entries-info-error">Showing entries</span>
                                                                            </div>
                                                                            <div class="mobile-pagination" id="mobile-pagination-error"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="calllogdetails2 col-lg-12 col-md-12 col-sm-12 col-xs-12" id="callDetailsModal">
                                            <div class="card carddivision">
                                                <div class="card-header mb-1 px-4">
                                                    <div class="card-title">
                                                        Call Details 
                                                        <button id="closeCallDetails"><i class="fe fe-arrow-right-circle"></i></button>
                                                    </div>
                                                </div>
                                                <div class="card-body cardbody pb-0">
                                                    <div class="qcallsright col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                        <div class="d-flex mb-2">
                                                            <div class="cleftsec"><span class="material-symbols-outlined">person</span></div>
                                                            <div class="crightsec">
                                                                <p>Campaign Name</p>
                                                                <a id="c_name"></a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex mb-2">
                                                            <div class="cleftsec"><span class="material-symbols-outlined">supervisor_account</span></div>
                                                            <div class="crightsec">
                                                                <p>Assistant / Workflow</p>
                                                                <a id="a_w"> </a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex mb-2">
                                                            <div class="cleftsec"><span class="material-symbols-outlined">deskphone</span></div>
                                                            <div class="crightsec">
                                                                <p>Phone Number</p>
                                                                <a id="from_number"> </a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex mb-2">
                                                            <div class="cleftsec"><span class="material-symbols-outlined">phone_forwarded</span></div>
                                                            <div class="crightsec">
                                                                <p>Dialed Number</p>
                                                                <a id="to_number"> </a>
                                                            </div>
                                                        </div>
                                                        <div id="showerror" class="showerr" style="display:none;"></div>
                                                    </div>
                                                    <div class="card-header mb-1 px-0">
                                                        <div class="card-title">
                                                            Modifiers
                                                        </div>
                                                    </div>
                                                    <div class="qcallsright col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                        <div class="transcriptsec col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                                            <div id="transcriptText"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End App Content -->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>
@include('includes.jslinks_common')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    const historyLimitDays = {{ Auth::user()->customer->history_limit ?? 0 }};
    const today = new Date();
    const minDate = new Date();
    minDate.setDate(today.getDate() - historyLimitDays);
    flatpickr("#earliestAt1", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        time_24hr: true,
        maxDate: today,
        minDate: historyLimitDays > 0 ? minDate : null,
        disableMobile: true
    });
    flatpickr("#earliestAt2", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        time_24hr: true,
        maxDate: today,
        minDate: historyLimitDays > 0 ? minDate : null,
        disableMobile: true
    });
    $(document).ready(function() {
        $('.datepickerprepend').click(function() {
            var inputId = $(this).siblings('input').attr('id');
            $('#'+ inputId)[0]._flatpickr.open();
            
        });
    });
</script>
<!-- Date and Time Format -->
<script>
    function formatToLocalTime(utcTimeString) {
        const date = new Date(utcTimeString);
        return date.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            //timeZoneName: 'short',
            hour12: false
        });
    }
    document.querySelectorAll('[data-utc-time]').forEach(el => {
        const utc = el.getAttribute('data-utc-time');
        const dataId = el.getAttribute('data-id');

        if (utc && dataId) {
            const span = document.getElementById(dataId);
            if (span) {
                span.textContent = formatToLocalTime(utc);
            }
        }
    });
</script>
<!-- Copy Toaster -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const table = document.getElementById('example2');

        table.addEventListener('click', function (e) {
            if (e.target.classList.contains('copy-id')) {
                e.stopPropagation(); // prevent row click
                const fullId = e.target.getAttribute('data-full-id');

                navigator.clipboard.writeText(fullId).then(() => {
                    showCopyToast();
                });
            }
    });
    function showCopyToast() {
        const toast = document.getElementById('copyToast');
        toast.style.display = 'block';
        setTimeout(() => {
            toast.style.opacity = '1';
        }, 10);

        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 300);
        }, 1500);
    }
});
</script>
<script>
    // Select 2 script
    $(document).ready(function () {
        function toggleFocusClass($select) {
            const selectedVal = $select.val();
            const $selection = $select.next('.select2-container').find('.select2-selection');
            if (selectedVal) {
                $selection.addClass('selectfocus');
            } else {
                $selection.removeClass('selectfocus');
            }
        }
        $(document).on('change','.select2',function(){
            toggleFocusClass($(this));
        });
        toggleFocusClass($('.select2'));

        // $('.select2').select2({
        //     placeholder: "Please Select",
        //     minimumResultsForSearch: '',
        //     width: '100%',
        //     allowClear: true
        // });
    });
    function setMobileSearchPlaceholder(tableId) {
        const input = $(tableId+'_wrapper input[type="search"]');
        if (window.innerWidth <= 767) {
        input.attr('placeholder', 'search');
        } else {
        input.attr('placeholder', '');
        }
    }
    let dataTableQueue; // for #example2 (queue calls)
    let dataTableError; // for #example3 (error calls)
    let selectedCallIds = new Set();
    function initDataTable(filters = {}, source = null) {
        const tableId = (source === 'errorcalls') ? '#example3' : '#example2';
       // if (dataTable) dataTable.destroy();
        if (source === 'errorcalls' && $.fn.DataTable.isDataTable('#example3')) {
            $('#example3').DataTable().destroy();
        } else if ($.fn.DataTable.isDataTable('#example2')) {
            $('#example2').DataTable().destroy();
        }

        const includeCheckbox = source !== 'errorcalls';

        const dtInstance = $(tableId).DataTable({
            processing: true,
            responsive: true,
            initComplete: function () {
                setMobileSearchPlaceholder(tableId);
                // Optional: update on resize
                $(window).on('resize', function () {
                    setMobileSearchPlaceholder(tableId);
                });
            },
            language: {
                processing: " ",
                loadingRecords: `
                    <div class="text-center">
                        <div class="spinner-border text-success" role="status">
                        </div>
                    </div>
                </div>
            `,
            emptyTable: "No records available"
        },
        serverSide: false, // set to false since you're handling all logic in controller
        ajax: {
            url: "{{ route('user.call_queues.data') }}",
            method: 'GET',
            data: { ...filters, source: source },
            dataSrc: function(response) {
                const pickerFrom = document.querySelector('#earliestAt1')._flatpickr;
                const pickerTo = document.querySelector('#earliestAt2')._flatpickr;

                if (response.firstDate && pickerFrom) {
                    pickerFrom.setDate(response.firstDate, true);
                }
                if (response.lastDate && pickerTo) {
                    pickerTo.setDate(response.lastDate, true);
                }

                return response.data;
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                let msg = "An unexpected error occurred.";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }

                // Optional: fallback message in DataTable
                $(tableId + ' tbody').html(`<tr><td colspan="7" class="text-center text-danger">${msg}</td></tr>`);
            }
        },
        scrollX: true,
        order: [],
        columns: [
            ...(includeCheckbox
                ? [{
                    data: null,
                    orderable: false,
                    searchable: false,
                    className: 'select-checkbox text-center',
                    render: function (data, type, row) {
                        return `<input type="checkbox" class="row-checkbox" data-id="${row.id}" />`;
                    }
                }]
                : []
            ),
            // { data: 'name', name: 'name'}
            // Newly added
            { data: 'name', name: 'name',
                render: function(data, type, row) {
                    if(data === 'N/A'){
                        return `<span class="campname">${data}</span>`;
                    } else{
                        return `<span class="campname"><span class="material-symbols-outlined">brand_awareness</span>&nbsp;&nbsp;${data}</span>`;
                    }
                    return data;
                } 
            },
            { data: 'assistant_name', name: 'assistant_name' },
            { data: 'assistantPhoneNumber', name: 'assistantPhoneNumber' },
            { data: 'customerPhoneNumber', name: 'customerPhoneNumber' },
            // { data: 'type', name: 'type' },
            // Newly added
            { data: 'type', name: 'type',
                render: function(data, type, row) {
                    if(data === 'Assistant'){
                        return `<span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;${data}</span>`;
                    } else if(data === 'Workflow'){
                        return `<span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;${data}</span>`;
                    }
                    return data;
                }
            },
            // { data: 'priority', name: 'priority' },
            ...(source === 'queuecalls'
            ? [{
                data: 'createdAt',
                render: function(data, type, row) {
                    if (data === 'N/A') {
                        return `<span>${data}</span><br>${row.duration}`;
                    }

                    const localTime = formatToLocalTime(data); // This should be a JS function you define
                    const elementId = `cr_${row.id}`;

                    return `
                        <span id="${elementId}" data-utc-time="${data}" data-id="${elementId}">
                            <i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;${localTime}
                        </span>
                    `;
                },
                className: 'text-center'
            }]
                : []
            ),
            ...(source === 'errorcalls'
            ? [
                {
                    data: 'response',
                    name: 'response',
                    render: function (data) {
                        const maxLength = 30; // or whatever you prefer

                        if (!data) return '—';

                        // Truncate and append ellipsis
                        return data.length > maxLength
                            ? data.substring(0, maxLength) + '...'
                            : data;
                    }
                },
                {
                    data: 'processedAt',
                    name: 'processedAt',
                    render: function (data) {
                        // return data ? formatToLocalTime(data) : '—';
                        // Newly added
                        if (!data) return '—';
                        const formattedTime = formatToLocalTime(data);
                        return formattedTime === 'Invalid Date' ? formattedTime : `<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;${formattedTime}`;
                    },
                    className: 'text-center'
                }
            ]
            : []
        )
        ],
        createdRow: function(row, data, dataIndex) {
            $(row).addClass('clickable-row');
            $(row).attr('data-call', data.id);
            $(row).attr('id', 'logdetails');
        },
        drawCallback: function () {
            $('.row-checkbox').each(function () {
                const id = $(this).data('id');
                $(this).prop('checked', selectedCallIds.has(id));
            });

            updateSelectAllCheckbox();
            toggleBulkActionButtons();
        }
    });

    if (source === 'errorcalls') {
        dataTableError = dtInstance;
    } else {
        dataTableQueue = dtInstance;
    }

    }

    // Initial Load
    $(document).ready(function() {

        let activeTabSource = 'queuecalls'; // default

        $('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        
            const activeTabId = $(e.target).attr('data-target'); 
            // Optional: Just get tab name from ID (without #)
            const tabName = activeTabId.replace('#', '');
            // You can do something like:
            if (tabName === 'errorcallsTab') {
                //initDataTable('errorcalls');
                activeTabSource = 'errorcalls';
            }
            else
            {
                //initDataTable('queuecalls');
                activeTabSource = 'queuecalls';
            }
            initDataTable({}, activeTabSource);
        });
        
        initDataTable({}, activeTabSource);

        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            const filters = Object.fromEntries(new URLSearchParams($(this).serialize()));
            selectedCallIds.clear();
            //initDataTable(filters);
            initDataTable(filters, activeTabSource);
        });

        $('.clearbtn').on('click', function(e) {
            e.preventDefault();
            $('select[name="call_name"]').val('').trigger('change');
            $('select[name="phoneNumberId"]').val('').trigger('change');
            $('select[name="assistantId"]').val('').trigger('change');
            $('#filterForm')[0].reset();
            selectedCallIds.clear();
            //initDataTable(); // reload with no filters
            initDataTable({}, activeTabSource);
        });

        let autoRefreshInterval = null;

    $('#manualRefresh').on('click', function () {
        // const filters = Object.fromEntries(new URLSearchParams($('#filterForm').serialize()));
        // initDataTable(filters);
        $('select[name="call_name"]').val('').trigger('change');
        $('select[name="phoneNumberId"]').val('').trigger('change');
        $('select[name="assistantId"]').val('').trigger('change');
        $('#filterForm')[0].reset();
        selectedCallIds.clear();
        //initDataTable(); // reload with no filters
        initDataTable({}, activeTabSource);
    });

    $('#autoRefreshSwitch').on('change', function () {
        const label = $('#autoRefreshLabel');
        const autoRefreshMinutes = {{ env('AUTO_REFRESH_INTERVAL_MINS', 5) }};

        if (this.checked) {
            label.text('Disable Auto Refresh');

            // const filters = Object.fromEntries(new URLSearchParams($('#filterForm').serialize()));
            // initDataTable(filters); // Optional: immediate refresh

            $('select[name="call_name"]').val('').trigger('change');
            $('select[name="phoneNumberId"]').val('').trigger('change');
            $('select[name="assistantId"]').val('').trigger('change');
            $('#filterForm')[0].reset();
            selectedCallIds.clear();
            //initDataTable(); // reload with no filters
            initDataTable({}, activeTabSource);

            autoRefreshInterval = setInterval(() => {
                // const filters = Object.fromEntries(new URLSearchParams($('#filterForm').serialize()));
                // initDataTable(filters);

                $('select[name="call_name"]').val('').trigger('change');
                $('select[name="phoneNumberId"]').val('').trigger('change');
                $('select[name="assistantId"]').val('').trigger('change');
                $('#filterForm')[0].reset();
                selectedCallIds.clear();
                //initDataTable(); // reload with no filters
                initDataTable({}, activeTabSource);
            }, autoRefreshMinutes * 60 * 1000);
        } else {
            label.text('Enable Auto Refresh (Every 5 min)');
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    });

    // Load audio from .clickable-row
    $(document).on('click', '.clickable-row', function (e) {
        // Don't trigger if clicking on the first td (checkbox column)
        if ($(e.target).closest('td').index() === 0) {
            return;
        }
        const callId = $(this).data('call');
        $('#c_name').text('');
        $('#a_w').text('');
        $('#from_number').text('');
        $('#to_number').text('');
        $('#transcriptText').empty();
        $('#showerror').hide().html('');

        $.ajax({
            url: "{{ route('user.call_queue.details', ':id') }}".replace(':id', callId),
            method: 'GET',
            success: function (data) {
                $('#c_name').text(data.c_name);
                $('#a_w').text(data.assistant);
                $('#from_number').text(data.from_number);
                $('#to_number').text(data.to_number);
                if(activeTabSource == 'errorcalls')
                {
                $('#showerror').css('display','block');
                $('#showerror').html("<i class='fe fe-info'></i>&nbsp;An error occurred in this call: " + data.response);
                }
                const rawTranscript = data.dynamic_variables;

                if (rawTranscript && Object.keys(rawTranscript).length > 0) {
                    let varsHtml = '<ul>';
                    for (const [key, value] of Object.entries(rawTranscript)) {
                        varsHtml += `<li>
                            <div class="d-flex mb-2">
                                <div class="cleftsec"><span class="material-symbols-outlined">radio_button_checked</span></div>
                                    <div class="crightsec">
                                        <p>${key}</p>
                                        <a>${value}</a>
                                    </div>
                            </div>
                        </li>`;
                    }
                    varsHtml += '</ul>';
                    $('#transcriptText').append(varsHtml);
                } else {
                    $('#transcriptText').text('Not available');
                }

                

                $('#myTab button.nav-link').removeClass('active');
                $('#home-tab').addClass('active');
                $('#myTabContent .tab-pane').removeClass('show active');
                $('#home').addClass('show active');

                if (window.innerWidth <= 1100) {
                    $('.calllogdetails2').addClass('expanded').show('slow');
                } else {
                    $('.calllogdetails1').addClass('shrunk');
                    setTimeout(() => {
                        $('.calllogdetails2').addClass('expanded').show();
                    }, 100);
                    $('.calllogdetails2').stop(true, true).fadeOut(200, function () {
                        $(this).fadeIn(600);
                    });
                }
            },
            error: function () {
                alert('Failed to load call details.');
            }
        });
    });

    // $('#closeCallDetails').on('click', function () {
    //     $('.calllogdetails1').removeClass('shrunk');
    //     $('.calllogdetails2').removeClass('expanded');
    //     $('#c_name').text('');
    //     $('#a_w').text('');
    //     $('#from_number').text('');
    //     $('#to_number').text('');
    //     $('#transcriptText').empty();
    //     $('#showerror').hide().html('');
    // });
    $('#closeCallDetails').on('click', function () {
        $('.calllogdetails1').removeClass('shrunk');
        if (window.innerWidth <= 1100) {
            $('.calllogdetails2').removeClass('expanded');
        } else {
            $('.calllogdetails2').removeClass('expanded').hide();
        }
        $('#c_name').text('');
        $('#a_w').text('');
        $('#from_number').text('');
        $('#to_number').text('');
        $('#transcriptText').empty();
        $('#showerror').hide().html('');
    });
    });

    
    // Handle select all
    $(document).on('change', '#select-all', function () {
        const isChecked = this.checked;

        // Get all rows currently loaded in the DataTable
        // const allData = dataTable.rows({ search: 'applied' }).data();

        const activeTableId = $('.nav-tabs .nav-link.active').attr('id'); // e.g., 'queuecallsTab'
        if (activeTableId && activeTableId.includes('error')) {
            return; // Do nothing if it's the errorcalls tab (example3)
        }

        const allData = $('#example2').DataTable().rows({ search: 'applied' }).data();

        for (let i = 0; i < allData.length; i++) {
            const id = allData[i].id;
            if (isChecked) {
                selectedCallIds.add(id);
            } else {
                selectedCallIds.delete(id);
            }
        }

        // Re-render to reflect checkbox changes
        //dataTable.rows().invalidate().draw(false);
        $('#example2').DataTable().rows().invalidate().draw(false);

        toggleBulkActionButtons();
    });

    // Handle individual row selection
    $(document).on('change', '.row-checkbox', function () {
        const id = $(this).data('id');
        if (this.checked) {
            selectedCallIds.add(id);
        } else {
            selectedCallIds.delete(id);
        }
        updateSelectAllCheckbox();
        toggleBulkActionButtons();
    });

    function updateSelectAllCheckbox() {
    const all = $('.row-checkbox').length;
    const checked = $('.row-checkbox:checked').length;
    $('#select-all').prop('checked', all > 0 && all === checked);
    }

    function toggleBulkActionButtons() {
        const any = selectedCallIds.size > 0;
        $('#bulkDeleteBtn, #bulkPrioritizeBtn').prop('disabled', !any);
    }

    function getSelectedIds() {
        return Array.from(selectedCallIds);
    }

    // Bulk delete
    $('#bulkDeleteBtn').on('click', function () {
        const ids = getSelectedIds();
        if (!ids.length) return;

        Swal.fire({
            title: 'Are you sure?',
            text: `Delete ${ids.length} selected calls?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete them!',
        }).then(result => {
            if (result.isConfirmed) {
                $.post('{{ route("user.call_queues.bulk_delete") }}', {
                    ids,
                    _token: '{{ csrf_token() }}'
                }).done(() => {
                    selectedCallIds.clear();
                    const activeTab = $('.nav-tabs .nav-link.active').attr('id'); // e.g., "queuecallsTab" or "errorcallsTab"
                    if (activeTab?.includes('error')) {
                        $('#example3').DataTable().ajax.reload(null, false);
                    } else {
                        $('#example2').DataTable().ajax.reload(null, false);
                    }
                    $('#select-all').prop('checked', false);
                    Swal.fire('Deleted!', 'Selected items were deleted.', 'success');
                }).fail(() => {
                    Swal.fire('Error', 'Failed to delete selected items.', 'error');
                });
            }
        });
    });

    // Bulk prioritize
    $('#bulkPrioritizeBtn').on('click', function () {
        const ids = getSelectedIds();
        if (!ids.length) return;

        $.post('{{ route("user.call_queues.bulk_prioritize") }}', {
            ids,
            _token: '{{ csrf_token() }}'
        }).done(() => {
            selectedCallIds.clear();
            const activeTab = $('.nav-tabs .nav-link.active').attr('id'); // e.g., "queuecallsTab" or "errorcallsTab"
            if (activeTab?.includes('error')) {
                $('#example3').DataTable().ajax.reload(null, false);
            } else {
                $('#example2').DataTable().ajax.reload(null, false);
            }
            $('#select-all').prop('checked', false);
            Swal.fire('Success', 'Priority updated for selected calls.', 'success');
        }).fail(() => {
            Swal.fire('Error', 'Failed to update priority.', 'error');
        });
    });

    
</script>
<script>
    // Tooltip Script
    // $('.infocalllist ul li a').on('shown.bs.tooltip', function () {
    //     $('.tooltip').addClass('wide-tooltip');
    // });
</script>
<script>
    $(document).ready(function() {
        let observer;
        
        $(document).on('select2:open', function() {
            // Remove initial highlight
            setTimeout(() => {
                $('.select2-results__option').removeClass('select2-results__option--highlighted');
            }, 10);
            
            // Start observing for class changes
            const resultsContainer = document.querySelector('.select2-results');
            if (resultsContainer && !observer) {
                observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            const target = mutation.target;
                            if (target.classList.contains('select2-results__option--highlighted') && 
                                !target.matches(':hover')) {
                                target.classList.remove('select2-results__option--highlighted');
                            }
                        }
                    });
                });
                
                observer.observe(resultsContainer, {
                    attributes: true,
                    attributeFilter: ['class'],
                    subtree: true
                });
            }
        });
        
        $(document).on('select2:close', function() {
            if (observer) {
                observer.disconnect();
                observer = null;
            }
        });
        
        $(document).on('mouseenter', '.select2-results__option', function() {
            $('.select2-results__option').removeClass('select2-results__option--highlighted');
            $(this).addClass('select2-results__option--highlighted');
        });
        
        $(document).on('mouseleave', '.select2-results__option', function() {
            $(this).removeClass('select2-results__option--highlighted');
        });
    });
</script>
<script>
    // Mobile card functionality with pagination
    let mobileCurrentPage = 1;
    let mobileEntriesPerPage = 10;
    let mobileFilteredCards = [];

    function updateMobileCards() {
        const activeTab = $('.nav-tabs .nav-link.active').attr('data-target');
        const isErrorTab = activeTab === '#errorcallsTab';
        const tableId = isErrorTab ? '#example3' : '#example2';
        const containerSelector = isErrorTab ? '#mobile-cards-container-error' : '#mobile-cards-container-queue';
        const entriesSelector = isErrorTab ? '#mobile-entries-error' : '#mobile-entries-queue';
        const searchSelector = isErrorTab ? '#mobile-search-error' : '#mobile-search-queue';
        const infoSelector = isErrorTab ? '#entries-info-error' : '#entries-info-queue';
        const paginationSelector = isErrorTab ? '#mobile-pagination-error' : '#mobile-pagination-queue';
        
        const table = $(tableId).DataTable();
        const container = document.querySelector(containerSelector);
        
        if (!container) return;
        
        // Get all cards data
        const allCards = [];
        table.rows({ search: 'applied' }).every(function() {
            const rowData = this.data();
            const card = document.createElement('div');
            card.className = 'call-queue-card';
            card.setAttribute('data-call', rowData.id);
            card.classList.add('clickable-row');
            card.setAttribute('data-search', `${rowData.name || ''} ${rowData.assistant_name || ''} ${rowData.assistantPhoneNumber || ''} ${rowData.customerPhoneNumber || ''}`.toLowerCase());
            
            if (isErrorTab) {
                card.innerHTML = `
                    <div class="card-header-row">
                        <div class="card-title">${rowData.name || 'N/A'}</div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Assistant/Workflow</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistant_name || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Phone Number</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistantPhoneNumber || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Dialed Number</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.customerPhoneNumber || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Type</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">
                                ${rowData.type === 'Assistant' ? 
                                    `<span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                    rowData.type === 'Workflow' ? 
                                    `<span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                    (rowData.type || 'N/A')
                                }
                            </div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Response</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${(rowData.response || 'N/A').substring(0, 30)}${rowData.response && rowData.response.length > 30 ? '...' : ''}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Processed At</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.processedAt ? `<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;${formatToLocalTime(rowData.processedAt)}` : 'N/A'}</div>
                        </div>
                    </div>
                `;
            } else {
                card.innerHTML = `
                    <div class="card-header-row">
                        <div class="card-title">${rowData.name || 'N/A'}</div>
                        <div class="card-checkbox">
                            <input type="checkbox" class="row-checkbox" data-id="${rowData.id}">
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Assistant/Workflow</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistant_name || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Phone Number</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistantPhoneNumber || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Dialed Number</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.customerPhoneNumber || 'N/A'}</div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Type</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">
                                ${rowData.type === 'Assistant' ? 
                                    `<span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                    rowData.type === 'Workflow' ? 
                                    `<span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                    (rowData.type || 'N/A')
                                }
                            </div>
                        </div>
                    </div>
                    <div class="card-field col-md-12 px-0">
                        <div class="row">
                            <div class="field-label col-md-4 col-sm-4 col-xs-4">Queued At</div>
                            <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                            <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.createdAt ? `<i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;${formatToLocalTime(rowData.createdAt)}` : 'N/A'}</div>
                        </div>
                    </div>
                `;
            }
            
            allCards.push(card);
        });
        
        mobileFilteredCards = allCards;
        showMobilePage(containerSelector, infoSelector, paginationSelector);
        
        // Setup event listeners
        setupMobileControls(entriesSelector, searchSelector, containerSelector, infoSelector, paginationSelector);
    }

    function showMobilePage(containerSelector, infoSelector, paginationSelector) {
        const container = document.querySelector(containerSelector);
        const start = (mobileCurrentPage - 1) * mobileEntriesPerPage;
        const end = start + mobileEntriesPerPage;
        
        container.innerHTML = '';
        mobileFilteredCards.slice(start, end).forEach(card => {
            container.appendChild(card);
        });
        
        updateMobileInfo(infoSelector);
        updateMobilePagination(paginationSelector, containerSelector, infoSelector);
    }

    function updateMobileInfo(infoSelector) {
        const start = (mobileCurrentPage - 1) * mobileEntriesPerPage + 1;
        const end = Math.min(mobileCurrentPage * mobileEntriesPerPage, mobileFilteredCards.length);
        const infoElement = document.querySelector(infoSelector);
        
        if (infoElement) {
            infoElement.textContent = `Showing ${start} to ${end} of ${mobileFilteredCards.length} entries`;
        }
    }

    function updateMobilePagination(paginationSelector, containerSelector, infoSelector) {
        const totalPages = Math.ceil(mobileFilteredCards.length / mobileEntriesPerPage);
        const paginationContainer = document.querySelector(paginationSelector);
        
        if (!paginationContainer) return;
        
        paginationContainer.innerHTML = '';
        
        if (totalPages <= 1) return;
        
        const nav = document.createElement('nav');
        const ul = document.createElement('ul');
        ul.className = 'pagination';
        
        // First button
        const firstLi = document.createElement('li');
        firstLi.className = `page-item ${mobileCurrentPage === 1 ? 'disabled' : ''}`;
        const firstLink = document.createElement(mobileCurrentPage === 1 ? 'span' : 'a');
        firstLink.className = 'page-link';
        firstLink.innerHTML = '&laquo;';
        if (mobileCurrentPage > 1) {
            firstLink.onclick = () => {
                mobileCurrentPage = 1;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            };
        }
        firstLi.appendChild(firstLink);
        ul.appendChild(firstLi);
        
        // Previous button
        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${mobileCurrentPage === 1 ? 'disabled' : ''}`;
        const prevLink = document.createElement(mobileCurrentPage === 1 ? 'span' : 'a');
        prevLink.className = 'page-link';
        prevLink.innerHTML = '&lsaquo;';
        if (mobileCurrentPage > 1) {
            prevLink.onclick = () => {
                mobileCurrentPage--;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            };
        }
        prevLi.appendChild(prevLink);
        ul.appendChild(prevLi);
        
        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
            const li = document.createElement('li');
            li.className = `page-item ${i === mobileCurrentPage ? 'active' : ''}`;
            const link = document.createElement(i === mobileCurrentPage ? 'span' : 'a');
            link.className = 'page-link';
            link.textContent = i;
            
            if (i !== mobileCurrentPage) {
                link.onclick = () => {
                    mobileCurrentPage = i;
                    showMobilePage(containerSelector, infoSelector, paginationSelector);
                };
            }
            
            li.appendChild(link);
            ul.appendChild(li);
        }
        
        // Next button
        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${mobileCurrentPage === totalPages ? 'disabled' : ''}`;
        const nextLink = document.createElement(mobileCurrentPage === totalPages ? 'span' : 'a');
        nextLink.className = 'page-link';
        nextLink.innerHTML = '&rsaquo;';
        if (mobileCurrentPage < totalPages) {
            nextLink.onclick = () => {
                mobileCurrentPage++;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            };
        }
        nextLi.appendChild(nextLink);
        ul.appendChild(nextLi);
        
        // Last button
        const lastLi = document.createElement('li');
        lastLi.className = `page-item ${mobileCurrentPage === totalPages ? 'disabled' : ''}`;
        const lastLink = document.createElement(mobileCurrentPage === totalPages ? 'span' : 'a');
        lastLink.className = 'page-link';
        lastLink.innerHTML = '&raquo;';
        if (mobileCurrentPage < totalPages) {
            lastLink.onclick = () => {
                mobileCurrentPage = totalPages;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            };
        }
        lastLi.appendChild(lastLink);
        ul.appendChild(lastLi);
        
        nav.appendChild(ul);
        paginationContainer.appendChild(nav);
    }

    function setupMobileControls(entriesSelector, searchSelector, containerSelector, infoSelector, paginationSelector) {
        const entriesSelect = document.querySelector(entriesSelector);
        const searchInput = document.querySelector(searchSelector);
        
        if (entriesSelect && !entriesSelect.hasAttribute('data-listener')) {
            entriesSelect.setAttribute('data-listener', 'true');
            entriesSelect.addEventListener('change', function() {
                mobileEntriesPerPage = parseInt(this.value);
                mobileCurrentPage = 1;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            });
        }
        
        if (searchInput && !searchInput.hasAttribute('data-listener')) {
            searchInput.setAttribute('data-listener', 'true');
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                
                // Filter from existing mobileFilteredCards instead of accessing DataTable
                const allCards = [];
                
                // Get all cards from the current mobileFilteredCards array
                const activeTab = $('.nav-tabs .nav-link.active').attr('data-target');
                const isErrorTab = activeTab === '#errorcallsTab';
                const tableId = isErrorTab ? '#example3' : '#example2';
                
                // Check if DataTable exists and is initialized
                if (!$.fn.DataTable.isDataTable(tableId)) {
                    return; // Exit if DataTable is not ready
                }
                
                const table = $(tableId).DataTable();
                
                table.rows({ search: 'applied' }).every(function() {
                    const rowData = this.data();
                    const searchData = `${rowData.name || ''} ${rowData.assistant_name || ''} ${rowData.assistantPhoneNumber || ''} ${rowData.customerPhoneNumber || ''}`.toLowerCase();
                    
                    if (searchData.includes(searchTerm)) {
                        const card = document.createElement('div');
                        card.className = 'call-queue-card';
                        card.setAttribute('data-call', rowData.id);
                        card.classList.add('clickable-row');
                        
                        // Add card content (same as in updateMobileCards)
                        if (isErrorTab) {
                            card.innerHTML = `
                                <div class="card-header-row">
                                    <div class="card-title">${rowData.name || 'N/A'}</div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Assistant/Workflow</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistant_name || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Phone Number</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistantPhoneNumber || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Dialed Number</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.customerPhoneNumber || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Type</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">
                                            ${rowData.type === 'Assistant' ? 
                                                `<span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                                rowData.type === 'Workflow' ? 
                                                `<span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                                (rowData.type || 'N/A')
                                            }
                                        </div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Response</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${(rowData.response || 'N/A').substring(0, 30)}${rowData.response && rowData.response.length > 30 ? '...' : ''}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Processed At</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.processedAt ? formatToLocalTime(rowData.processedAt) : 'N/A'}</div>
                                    </div>
                                </div>
                            `;
                        } else {
                            card.innerHTML = `
                                <div class="card-header-row">
                                    <div class="card-title">${rowData.name || 'N/A'}</div>
                                    <div class="card-checkbox">
                                        <input type="checkbox" class="row-checkbox" data-id="${rowData.id}">
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Assistant/Workflow</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistant_name || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Phone Number</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.assistantPhoneNumber || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Dialed Number</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.customerPhoneNumber || 'N/A'}</div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Type</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">
                                            ${rowData.type === 'Assistant' ? 
                                                `<span class="typeicon1"><span class="material-symbols-outlined">supervisor_account</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                                rowData.type === 'Workflow' ? 
                                                `<span class="typeicon2"><span class="material-symbols-outlined">Automation</span>&nbsp;&nbsp;${rowData.type}</span>` : 
                                                (rowData.type || 'N/A')
                                            }
                                        </div>
                                    </div>
                                </div>
                                <div class="card-field col-md-12 px-0">
                                    <div class="row">
                                        <div class="field-label col-md-4 col-sm-4 col-xs-4">Queued At</div>
                                        <div class="field-colon col-md-1 col-sm-1 col-xs-1 px-0 text-center">:</div>
                                        <div class="field-value col-md-7 col-sm-7 col-xs-7">${rowData.createdAt ? formatToLocalTime(rowData.createdAt) : 'N/A'}</div>
                                    </div>
                                </div>
                            `;
                        }
                        
                        allCards.push(card);
                    }
                });
                
                mobileFilteredCards = allCards;
                mobileCurrentPage = 1;
                showMobilePage(containerSelector, infoSelector, paginationSelector);
            });
        }
    }

    // Update mobile cards when DataTable redraws
    $(document).on('draw.dt', '#example2, #example3', function() {
        mobileCurrentPage = 1;
        updateMobileCards();
    });

    // Update mobile cards when tab changes
    $('button[data-toggle="tab"]').on('shown.bs.tab', function() {
        mobileCurrentPage = 1;
        setTimeout(updateMobileCards, 100);
    });

    // Prevent call details from opening when clicking checkbox
    $(document).on('click', '.card-checkbox, .row-checkbox', function(e) {
        e.stopPropagation();
    });

    // Handle mobile card clicks (excluding checkbox area)
    $(document).on('click', '.call-queue-card', function(e) {
        // Don't trigger if clicking on checkbox or its container
        if ($(e.target).closest('.card-checkbox').length || $(e.target).hasClass('row-checkbox')) {
            return;
        }
        
        const callId = $(this).data('call');
        if (callId) {
            // Trigger the same call details logic as table rows
            $(this).trigger('click.callDetails');
        }
    });
</script>


@endsection