@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">Call Logs</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="calllogsfiltersec col-lg-12 col-md-12 col-sm-12">
                                                        <form id="filterForm">
                                                            <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                            <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 Call ID </label>
                                                                        <input type="text" name="callId" id="callId" class="form-control" value="{{ request('callId') }}" Placeholder="Enter Call ID"/>
                                                                    </div>
                                                                </div>
                                                                <div class="filterformdiv calllogsfilter2 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Assistant </label>
                                                                        <select name="assistantId" id="filterAssistantId" class="form-control select2 select2-show-search">
                                                                            <option value="">Select Assistant</option>
                                                                            @foreach($assistants as $assistant)
                                                                                <option value="{{ $assistant['id'] }}" {{ request('assistantId') == $assistant['id'] ? 'selected' : '' }}>
                                                                                    {{ $assistant['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="filterformdiv calllogsfilter3 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Filter by Success Evaluation </label>
                                                                        <select name="successEvaluation" id="successEvaluation" class="form-control select2 select2-show-search">
                                                                            <option value="">Select Success Evaluation</option>
                                                                            @foreach($evaluations as $key => $value)
                                                                            @php
                                                                            if($value == 'true')
                                                                            {
                                                                               $sname = 'pass';
                                                                            }
                                                                            else if($value == 'false')
                                                                            {
                                                                               $sname = 'fail';
                                                                            }
                                                                            else
                                                                            {
                                                                                $sname = $value;
                                                                            }
                                                                            @endphp

                                                                                <option value="{{$value}}" {{ request('successEvaluation') == $value ? 'selected' : '' }}>
                                                                                     {{$sname}}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </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>
                                                            <!-- Desktop View -->
                                                            <div id="table-wrapper" class="table-responsive commtlb">
                                                                <table id="example2" class="table table-bordered text-nowrap tablelistingsec">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Call ID</th>
                                                                            <th>Campaign Name</th>
                                                                            <th>Assistant</th>
                                                                            <th>Phone Number</th>
                                                                            <th>Dialed Number</th>
                                                                            <th>Ended Reason</th>
                                                                            <th>Success Evaluation</th>
                                                                            <th class="text-center">Start Time</th>
                                                                            <!-- <th>Duration</th> -->
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <!-- Mobile View -->
                                                            <div class="mobile-card-view">
                                                                <div class="mobile-controls">
                                                                    <div class="entries-control">
                                                                        <label class="mb-0"> 
                                                                            <select id="mobile-entries">
                                                                                <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" placeholder="Search">
                                                                    </div>
                                                                </div>
                                                                <div id="mobile-cards-container">
                                                                    <!-- Cards will be populated by JavaScript -->
                                                                     <div id="mobile-spinner" class="text-center" style="padding: 40px;">
                                                                        <div class="spinner-border text-success" role="status">
                                                                            <span class="sr-only">Loading...</span>
                                                                        </div>
                                                                        <div class="calllogsloader">Loading Call Logs...</div>
                                                                    </div>
                                                                </div>
                                                                <div class="mobile-info">
                                                                    <span id="entries-info">Showing 0 to 0 of 0 entries</span>
                                                                </div>
                                                                <div class="mobile-pagination" id="mobile-pagination"></div>
                                                            </div>
                                                            <div id="copyToast"><i class="fe fe-info"></i>&nbsp; ID copied to clipboard!</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-2">
                                                    <div class="card-title">
                                                        Call Logs Details 
                                                        <button id="closeCallDetails"><i class="fe fe-arrow-right-circle"></i></button>
                                                    </div>
                                                </div>
                                                <div class="callidsec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                    <p>Call ID :</p>
                                                    <a id="cl_id"></a>
                                                </div>
                                                </br>
                                                <div class="card-body cardbody">
                                                    <div class="audioplayersec col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                                                        <div class="audio-player">
                                                            <div id="waveform"></div>
                                                            <div class="custom-audio-bar d-flex align-items-center justify-content-between">
                                                                <span id="currentTime">0:00</span>
                                                                <span id="totalTime">0:00</span>
                                                            </div>
                                                            <div class="row audiocontrol align-items-center justify-content-center gap-3">
                                                                <div>
                                                                    <button class="backwardbtn" id="backwardBtn"><span class="material-symbols-outlined">fast_rewind</span></button>
                                                                </div>
                                                                <div>
                                                                    <button class="playbtn" id="playPauseBtn">&#9658;</button>
                                                                </div>
                                                                <div>
                                                                    <button class="forwardbtn" id="forwardBtn"><span class="material-symbols-outlined">fast_forward</span></button>
                                                                </div>
                                                                <div>
                                                                    <button class="downloadbtn" id="downloadBtn"><span class="material-symbols-outlined">download</span></button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="audio-notawailable col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                                                            <h2><i class="fe fe-slash"></i>&nbsp;&nbsp;Audio Not Available</h2>
                                                            <p>This call was not recorded or the recording for this call is not available.</p>
                                                        </div>
                                                        <div id="showerror" class="showerr" style="display:none;"></div>
                                                            <audio id="audioPlayer" controls style="width: 100%;display: none;">
                                                                <source src="" type="audio/mpeg">
                                                                Your browser does not support the audio element.
                                                            </audio>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                        <div class="calllogtab col-lg-12 col-md-12 col-sm-12 col-md-12">
                                                            <ul class="nav nav-tabs calllogtabs" id="myTab" role="tablist">
                                                                <li class="nav-item" role="presentation">
                                                                    <button class="nav-link" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="fe fe-book-open"></i>Transcript</button>
                                                                </li>
                                                                <li class="nav-item" role="presentation">
                                                                    <button class="nav-link active" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="fe fe-bar-chart-2"></i>Analysis</button>
                                                                </li>
                                                            </ul>
                                                            <div class="tab-content" id="myTabContent">
                                                                <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                                                                    <div class="transcriptsec col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                                                        <div id="transcriptText"></div>
                                                                    </div>
                                                                </div>
                                                                <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                                                    <div class="analysissec col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                                                        <div id="analysisData"></div>
                                                                    </div>
                                                                </div>
                                                            </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 -->

    <!-- Call Detail Modal -->
    <!-- <div class="modal fade" id="callDetailsModal" tabindex="-1" aria-labelledby="callDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Call Log Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Transcript:</strong></p>
                    <div id="transcriptText" class="mb-3"></div>

                    <p><strong>Audio:</strong></p>
                    <audio id="audioPlayer" controls style="width: 100%;">
                        <source src="" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>

                    <hr>

                    <p><strong>Analysis:</strong></p>
                    <div id="analysisData"></div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- <div class="modal fade modal-slideout" id="callDetailsModal" tabindex="-1" role="dialog" aria-labelledby="callDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-slideout" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Call Log Details</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" onclick="audioempty()"><i class="fe fe-x"></i></button>
                </div>
                <div class="modal-body">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 px-2">
                        <div class="calllogtab col-lg-12 col-md-12 col-sm-12 col-md-12">
                            <ul class="nav nav-tabs calllogtabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="fe fe-book-open"></i>Transcript</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="fe fe-bar-chart-2"></i>Analysis</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <div class="transcriptsec col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                        <div id="transcriptText"></div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <div class="analysissec col-lg-12 col-md-12 col-sm-12 col-md-12 px-0">
                                        <div id="analysisData"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="audioplayersec col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h2><i class="fe fe-headphones"></i>Audio</h2>
                        <div class="audio-player">
                            <audio id="audioPlayer" controls style="display: none;">
                                <source src="" type="audio/mp3">
                            </audio>
                            <div class="custom-audio-bar d-flex align-items-center justify-content-between">
                                <span id="currentTime">0:00</span>
                                <input type="range" id="audioSeekbar" value="0" min="0" step="0.01">
                                <span id="totalTime">0:00</span>
                            </div>
                            <div class="row mt-2">
                                <div class="controlplaypause col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <button class="btn play-btn" id="playPauseBtn">&#9658;</button>
                                </div>
                                <div class="controltime col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <select id="speedSelect" class="form-select form-select-sm w-auto ms-auto">
                                        <option value="1">1.0x</option>
                                        <option value="1.5">1.5x</option>
                                        <option value="2">2.0x</option>
                                    </select>
                                    <span id="timeDisplay" style="display: none;">00:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="audio-notawailable col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                            <h2><i class="fe fe-slash"></i>Audio Not Available</h2>
                            <p>This call was not recorded or the recording for this call is not available.</p>
                        </div>
                        <div id="showerror" class="showerr" style="display:none;"></div>
                            <audio id="audioPlayer" controls style="width: 100%;display: none;">
                                <source src="" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- 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>
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $('#user_timezone').val(timezone);
    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 () {
    //     document.querySelectorAll('.copy-id').forEach(el => {
    //         el.addEventListener('click', function (e) {
    //             e.stopPropagation(); // avoid triggering row click

    //             const fullId = this.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);
    //     }
    // });
    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 src="https://unpkg.com/wavesurfer.js@7"></script>
<script>
    let wavesurfer;

    const playBtn = document.getElementById("playPauseBtn");
    const backwardBtn = document.getElementById("backwardBtn");
    const forwardBtn = document.getElementById("forwardBtn");
    const currentTimeLabel = document.getElementById("currentTime");
    const totalTimeLabel = document.getElementById("totalTime");
    const downloadBtn = document.getElementById("downloadBtn");

    function formatTime(sec) {
        const minutes = Math.floor(sec / 60);
        const seconds = Math.floor(sec % 60);
        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
    }

    function audioEmpty() {
        if (wavesurfer) {
            wavesurfer.destroy();
            wavesurfer = null;
        }
        playBtn.innerHTML = "►";
        currentTimeLabel.textContent = "0:00";
        totalTimeLabel.textContent = "0:00";
    }

    function initWaveform(audioUrl) {
        if (wavesurfer) wavesurfer.destroy();

        wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: '#90E0EF',
            progressColor: '#ffffff',
            height: 70,
            barWidth: 2,
            barRadius: 2,
            cursorColor: '#ffffff',
            responsive: true
        });

        wavesurfer.load(audioUrl);

        wavesurfer.on('ready', () => {
            totalTimeLabel.textContent = formatTime(wavesurfer.getDuration());
        });

        wavesurfer.on('audioprocess', () => {
            if (wavesurfer.isPlaying()) {
                currentTimeLabel.textContent = formatTime(wavesurfer.getCurrentTime());
            }
        });

        wavesurfer.on('seek', () => {
            currentTimeLabel.textContent = formatTime(wavesurfer.getCurrentTime());
        });

        wavesurfer.on('play', () => {
            playBtn.innerHTML = "❚❚";
        });

        wavesurfer.on('pause', () => {
            playBtn.innerHTML = "►";
        });

        wavesurfer.on('finish', () => {
            playBtn.innerHTML = "►";
            currentTimeLabel.textContent = "0:00";
        });
    }

    playBtn.addEventListener("click", () => {
        if (wavesurfer) wavesurfer.playPause();
    });

    backwardBtn.addEventListener("click", () => {
        if (wavesurfer) {
            const current = wavesurfer.getCurrentTime();
            const duration = wavesurfer.getDuration();
            const target = Math.max(current - 3, 0);
            wavesurfer.seekTo(target / duration);
        }
    });

    forwardBtn.addEventListener("click", () => {
        if (wavesurfer) {
            const current = wavesurfer.getCurrentTime();
            const duration = wavesurfer.getDuration();
            const target = Math.min(current + 3, duration);
            wavesurfer.seekTo(target / duration);
        }
    });

    downloadBtn.addEventListener("click", () => {
        if (wavesurfer && wavesurfer.getMediaElement()) {
            const audioUrl = wavesurfer.getMediaElement().src;
            if (audioUrl) {
                const link = document.createElement('a');
                link.href = audioUrl;
                link.download = `call_${$('#cl_id').text()}_audio.mp3`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    });

    // Load audio from .clickable-row
    $(document).on('click', '.clickable-row', function () {
        $('.clickable-row').removeClass('active');
        $(this).addClass('active');
        const callId = $(this).data('call');
        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);
            });
        }

        audioEmpty();
        $('#analysisData').empty();
        $('#cl_id').html(callId);
        $('#transcriptText').empty();
        $('#showerror').hide().html('');

        $.ajax({
            url: "{{ route('user.call.details', ':id') }}".replace(':id', callId),
            method: 'GET',
            success: function (data) {

                const hasCallInProgress = data.endedReason.includes("error");
                if(hasCallInProgress){
                    $('#showerror').css('display','block');
                    $('#showerror').html("<i class='fe fe-info'></i>&nbsp;An error occurred in this call: " + data.endedReason);
                    $('.audio-player').hide();
                    $('.audio-notawailable').show();
                }else{
                    $('.audio-player').show();
                   $('.audio-notawailable').hide();
                }

                if (data.endedReason?.includes("call.in-progress") || !data.audio_url) {
                    $('.audio-player').hide();
                    $('.audio-notawailable').show();
                    return;
                }

                $('.audio-player').show();
                $('.audio-notawailable').hide();

                initWaveform(data.audio_url);

                const rawTranscript = data.transcript ?? 'Not available';
                if (rawTranscript !== 'Not available') {
                    const formatted = rawTranscript
                        .replace(/AI:/g, '<p class="ai-label">AI:</p>')
                        .replace(/User:/g, '<p class="user-label">User:</p>')
                        .replace(/\n/g, '<br>');
                    $('#transcriptText').html(formatted);
                } else {
                    $('#transcriptText').text('Not available');
                }

                let analysisHtml = '';
                if (data.analysis && Object.keys(data.analysis).length) {
                    for (const [key, value] of Object.entries(data.analysis)) {
                        analysisHtml += `<p class="key-name">${key}:</p>`;
                        analysisHtml += key === 'structuredData'
                            ? `<pre class="key-value">${JSON.stringify(value, null, 4)}</pre>`
                            : `<p class="key-value">${value}</p>`;
                    }
                } else {
                    analysisHtml = '<p>No analysis available.</p>';
                }

                $('#analysisData').html(analysisHtml);
                
                $('#myTab button.nav-link').removeClass('active');
                $('#profile-tab').addClass('active');
                $('#myTabContent .tab-pane').removeClass('show active');
                $('#profile').addClass('show active');
            },
            error: function () {
                alert('Failed to load call details.');
            }
        });
    });

    $('#closeCallDetails').on('click', function () {
        $('.clickable-row').removeClass('active');
        $('.calllogdetails1').removeClass('shrunk');
        if (window.innerWidth <= 1100) {
            $('.calllogdetails2').removeClass('expanded');
        } else {
            $('.calllogdetails2').removeClass('expanded').hide();
        }
        audioEmpty();
        $('#transcriptText').empty();
        $('#analysisData').empty();
        $('#cl_id').html('');
        $('#showerror').hide().html('');
        $('.audio-player').hide();
        $('.audio-notawailable').hide();
    });
    // 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() {
        const input = $('#example2_wrapper input[type="search"]');
        if (window.innerWidth <= 767) {
        input.attr('placeholder', 'search');
        } else {
        input.attr('placeholder', '');
        }
    }
    let dataTable;
    function initDataTable(filters = {}) {
        if (dataTable) dataTable.destroy();

        dataTable = $('#example2').DataTable({
            processing: true,
            responsive: true,
            initComplete: function () {
                setMobileSearchPlaceholder();
                // Optional: update on resize
                $(window).on('resize', function () {
                    setMobileSearchPlaceholder();
                });
            },
            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_logs.data') }}",
            method: 'GET',
            data: filters,
            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
                $('#example2 tbody').html(`<tr><td colspan="7" class="text-center text-danger">${msg}</td></tr>`);
                $('#mobile-cards-container').html(`<p class="vapierrmsg">${msg}</p>`);
            }
        },
        scrollX: true,
        order: [],
        columns: [
            { data: 'id', name: 'id' },
            // { data: 'callName', name: 'callName' },
            // Newly added
            { data: 'callName', name: 'callName',
                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',
                render: function(data, type, row) {
                    let icon = '';
                    if (row.type === 'web') {
                        icon = '<span class="fe fe-globe globeicon"></span>';
                    } else if (row.type === 'outbound') {
                        icon = '<span class="fe fe-phone-outgoing ouboundicon"></span>';
                    } else {
                        icon = '<span class="fe fe-phone-incoming inoundicon"></span>';
                    }
                    return `${data}<br>${icon}&nbsp;${row.type}`;
                }
            },
            { 
                data: 'endedReason', 
                render: function(data, type, row) {
                    let badgeClass = 'othererr-badge'; // default

                    switch (data) {
                        case 'Customer Ended Call':
                            badgeClass = 'custendcall-badge';
                            break;
                        case 'Assistant Forwarded Call':
                            badgeClass = 'assfwdcall-badge';
                            break;
                        case 'Customer Busy':
                            badgeClass = 'custbusy-badge';
                            break;
                        case 'Assistant Ended Call':
                            badgeClass = 'assendcall-badge';
                            break;
                        case 'Silence Timed Out':
                            badgeClass = 'siltimeout-badge';
                            break;
                    }

                    return `<span class="${badgeClass}">${data}</span>`;
                }
            },
            { 
                data: 'evaluation_success',
                render: function(data) {
                    if (data === 'true') {
                        return '<span class="success-badge">Pass</span>';
                    } else if (data === 'false') {
                        return '<span class="danger-badge">Fail</span>';
                    } else if (data === null) {
                        return '<span class="na-badge">N/A</span>';
                    } else {
                        let displayText = data;
                        if (typeof data === 'string' && data.length > 24) {
                            displayText = data.substring(0, 24) + '...';
                        }
                        return `<span class="othermsg-badge">${displayText}</span>`;
                        // `title` shows full text on hover
                    }
                }
            },
            {
                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>
                        <br>
                        <i class="fe fe-clock clockicon"></i>&nbsp;${row.duration}
                    `;
                },
                className: 'text-center'
            },
        ],
        createdRow: function(row, data, dataIndex) {
            $(row).addClass('clickable-row');
            $(row).attr('data-call', data.call_id);
            $(row).attr('id', 'logdetails');
        }
    });
    }

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

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

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

        let autoRefreshInterval = null;

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

    $('#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="phoneNumberId"]').val('').trigger('change');
            $('select[name="assistantId"]').val('').trigger('change');
            $('select[name="successEvaluation"]').val('').trigger('change');
            $('#filterForm')[0].reset();
            initDataTable(); // reload with no filters

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

                $('select[name="phoneNumberId"]').val('').trigger('change');
                $('select[name="assistantId"]').val('').trigger('change');
                $('select[name="successEvaluation"]').val('').trigger('change');
                $('#filterForm')[0].reset();
                initDataTable(); // reload with no filters
            }, autoRefreshMinutes * 60 * 1000);
        } else {
            label.text('Enable Auto Refresh (Every {{ env('AUTO_REFRESH_INTERVAL_MINS', 5) }} min)');
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    });
    });
</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>
    document.addEventListener('DOMContentLoaded', function() {
        // Only run on screens <= 834px
        if (window.innerWidth > 834) return;
        
        let cards = document.querySelectorAll('.call-card');
        const entriesSelect = document.getElementById('mobile-entries');
        const searchInput = document.getElementById('mobile-search');
        const paginationContainer = document.getElementById('mobile-pagination');
        
        let currentPage = 1;
        let entriesPerPage = 10;
        let filteredCards = Array.from(cards);
        
        // Show spinner on page load
        const spinner = document.getElementById('mobile-spinner');
        if (spinner) {
            spinner.style.display = 'block';   
        }
        function getDialedNumberWithIcon(rowData) {
            let icon = '';
            if (rowData.type === 'web') {
                icon = '<span class="fe fe-globe globeicon"></span>';
            } else if (rowData.type === 'outbound') {
                icon = '<span class="fe fe-phone-outgoing ouboundicon"></span>';
            } else {
                icon = '<span class="fe fe-phone-incoming inoundicon"></span>';
            }
            return `${rowData.customerPhoneNumber || 'N/A'}&nbsp;&nbsp;${icon}&nbsp;${rowData.type}`;
        }
        function getReasonBadge(reason) {
            let badgeClass = 'othererr-badge';
            switch (reason) {
                case 'Customer Ended Call': badgeClass = 'custendcall-badge'; break;
                case 'Assistant Forwarded Call': badgeClass = 'assfwdcall-badge'; break;
                case 'Customer Busy': badgeClass = 'custbusy-badge'; break;
                case 'Assistant Ended Call': badgeClass = 'assendcall-badge'; break;
                case 'Silence Timed Out': badgeClass = 'siltimeout-badge'; break;
            }
            return `<span class="${badgeClass}">${reason || 'N/A'}</span>`;
        }
        function getSuccessBadge(success) {
            if (success === 'true') return '<span class="success-badge">Pass</span>';
            if (success === 'false') return '<span class="danger-badge">Fail</span>';
            if (success === null) return '<span class="na-badge">N/A</span>';
            let displayText = success && success.length > 24 ? success.substring(0, 24) + '...' : success;
            return `<span class="othermsg-badge">${displayText || 'N/A'}</span>`;
        }
        function getFormattedStartTime(rowData) {
            if (rowData.createdAt === 'N/A') {
                return `<span>${rowData.createdAt}</span><br>${rowData.duration}`;
            }
            
            const localTime = formatToLocalTime(rowData.createdAt);
            const elementId = `cr_${rowData.id}`;
            
            return `
                <span id="${elementId}" data-utc-time="${rowData.createdAt}" data-id="${elementId}">
                    <i class="fe fe-calendar calicon"></i>&nbsp;&nbsp;${localTime}
                </span>&nbsp;&nbsp;
                <i class="fe fe-clock clockicon"></i>&nbsp;${rowData.duration}
            `;
        }
        function createMobileCardsFromTable() {
            const container = document.getElementById('mobile-cards-container');
            const spinner = document.getElementById('mobile-spinner');
            if (!container) return;
            
            const table = $('#example2').DataTable();
            if (!table) return;
            
            // Show spinner
            if (spinner) {
                spinner.style.display = 'block';   
            }
            
            // Clear existing cards but preserve spinner
            const existingCards = container.querySelectorAll('.call-card');
            existingCards.forEach(card => card.remove());
            
            // Get data
            const allRowData = [];
            table.rows().data().each(function(rowData) {
                allRowData.push(rowData);
            });
            
            // Create cards with delay
            setTimeout(() => {
                const fragment = document.createDocumentFragment();
                
                allRowData.forEach(function(rowData) {
                    const dataArray = Array.isArray(rowData) ? rowData : Object.values(rowData);
                    
                    const cardDiv = document.createElement('div');
                    cardDiv.className = 'call-card clickable-row';
                    cardDiv.setAttribute('data-call', rowData.call_id);
                    cardDiv.setAttribute('data-search', dataArray.join(' ').toLowerCase());
                    
                    cardDiv.innerHTML = `
                        <div class="card-header-row">
                            <div class="card-title">${rowData.id}</div>
                        </div>
                        <div class="card-field col-md-12 px-0">
                            <div class="row">
                                <div class="field-label col-md-3 col-sm-3 col-xs-3">Campaign Name</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-8 col-sm-8 col-xs-8">${rowData.callName || 'N/A'}</div>
                            </div>
                        </div>
                        <div class="card-field col-md-12 px-0">
                            <div class="row">
                                <div class="field-label col-md-3 col-sm-3 col-xs-3">Assistant</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-8 col-sm-8 col-xs-8">${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-3 col-sm-3 col-xs-3">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-8 col-sm-8 col-xs-8">${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-3 col-sm-3 col-xs-3">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-8 col-sm-8 col-xs-8">${getDialedNumberWithIcon(rowData)}</div>
                            </div>
                        </div>
                        <div class="card-field col-md-12 px-0">
                            <div class="row">
                                <div class="field-label col-md-3 col-sm-3 col-xs-3">Reason</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-8 col-sm-8 col-xs-8">${getReasonBadge(rowData.endedReason)}</div>
                            </div>
                        </div>
                        <div class="card-field col-md-12 px-0">
                            <div class="row">
                                <div class="field-label col-md-3 col-sm-3 col-xs-3">Success Evaluation</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-8 col-sm-8 col-xs-8">${getSuccessBadge(rowData.evaluation_success)}</div>
                            </div>
                        </div>
                        <div class="card-field col-md-12 px-0">
                            <div class="row">
                                <div class="field-label col-md-3 col-sm-3 col-xs-3">Start Time</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-8 col-sm-8 col-xs-8">${getFormattedStartTime(rowData)}</div>
                            </div>
                        </div>
                    `;
                    
                    fragment.appendChild(cardDiv);
                });
                
                container.appendChild(fragment);

                // Add copy functionality to mobile cards
                container.addEventListener('click', function(e) {
                    if (e.target.classList.contains('copy-id')) {
                        e.stopPropagation();
                        const fullId = e.target.getAttribute('data-full-id');
                        navigator.clipboard.writeText(fullId).then(() => {
                            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);
                        }).catch(() => {
                            console.log('Copy failed, ID: ' + fullId);
                        });
                    }
                });

                cards = document.querySelectorAll('.call-card');
                filteredCards = Array.from(cards);
                showPage();
                
                // Hide spinner after cards are loaded
                const firstCard = container.querySelector('.call-card');
                if (firstCard && spinner) {
                    // Wait for the first card to be fully rendered
                    if (firstCard.offsetHeight > 0) {
                        spinner.style.display = 'none';
                    }
                }
            }, 1000);
        }

        function updatePagination() {
            const totalPages = Math.ceil(filteredCards.length / entriesPerPage);
            const start = (currentPage - 1) * entriesPerPage + 1;
            const end = Math.min(currentPage * entriesPerPage, filteredCards.length);
            
            document.getElementById('entries-info').textContent = 
                `Showing ${start} to ${end} of ${filteredCards.length} entries`;
            
            paginationContainer.innerHTML = '';
            
            if (totalPages <= 1) return;
            
            const nav = document.createElement('nav');
            const ul = document.createElement('ul');
            ul.className = 'pagination';
            
            const buttons = [
                {text: '&laquo;', disabled: currentPage === 1, action: () => currentPage = 1},
                {text: '&lsaquo;', disabled: currentPage === 1, action: () => currentPage--},
            ];
            
            // Show only 5 pages max around current page
            const maxVisible = 5;
            let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
            let endPage = Math.min(totalPages, startPage + maxVisible - 1);
            
            if (endPage - startPage + 1 < maxVisible) {
                startPage = Math.max(1, endPage - maxVisible + 1);
            }
            
            for (let i = startPage; i <= endPage; i++) {
                buttons.push({text: i, active: i === currentPage, action: () => currentPage = i});
            }
            
            buttons.push(
                {text: '&rsaquo;', disabled: currentPage === totalPages, action: () => currentPage++},
                {text: '&raquo;', disabled: currentPage === totalPages, action: () => currentPage = totalPages}
            );
            
            buttons.forEach(btn => {
                const li = document.createElement('li');
                li.className = `page-item ${btn.disabled ? 'disabled' : ''} ${btn.active ? 'active' : ''}`;
                const link = document.createElement(btn.disabled || btn.active ? 'span' : 'a');
                link.className = 'page-link';
                link.innerHTML = btn.text;
                if (!btn.disabled && !btn.active) {
                    link.onclick = () => { btn.action(); showPage(); };
                }
                li.appendChild(link);
                ul.appendChild(li);
            });
            
            nav.appendChild(ul);
            paginationContainer.appendChild(nav);
        }

        function showPage() {
            const start = (currentPage - 1) * entriesPerPage;
            const end = start + entriesPerPage;
            
            cards.forEach(card => card.style.display = 'none');
            filteredCards.slice(start, end).forEach(card => card.style.display = 'block');
            
            updatePagination();
        }
        
        function filterCards() {
            const searchTerm = searchInput.value.toLowerCase();
            filteredCards = Array.from(cards).filter(card => 
                card.dataset.search.includes(searchTerm)
            );
            currentPage = 1;
            showPage();
        }
        
        if (entriesSelect) {
            entriesSelect.addEventListener('change', function() {
                entriesPerPage = parseInt(this.value);
                currentPage = 1;
                showPage();
            });
        }
        
        if (searchInput) {
            searchInput.addEventListener('input', filterCards);
        }
        
        // DataTable events
        $(document).on('draw.dt', '#example2', function() {
            setTimeout(createMobileCardsFromTable, 100);
        });
        
        // Initial load
        setTimeout(createMobileCardsFromTable, 1500);
    });
</script>
@endsection