@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- Sidebar -->
            <!-- @include('layouts.sidemenubar') -->
            <!-- 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">
                                                <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 method="GET" action="{{ route('user.call_logs') }}">
                                                            <div class="row filterrow">
                                                            <div class="filterformdiv calllogsfilter1 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group mb-0">
                                                                        <label class="form-label">Filter by Assistant </label>
                                                                        <select name="assistantId" id="filterAssistantId" class="form-control custom-select select2">
                                                                            <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 calllogsfilter2 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group mb-0">
                                                                        <label class="form-label">Filter by Phone Number </label>
                                                                        <select name="phoneNumberId" id="phoneNumberId" class="form-control custom-select select2">
                                                                            <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>
                                                                <div class="filterformdiv calllogsfilter3 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group mb-0">
                                                                        <label class="form-label">Filter by Date : From</label>
                                                                        <div class="input-group">
                                                                            <input type="text" name="createdAtGe" id="datepicker1" class="form-control" placeholder="Select From Date" value="{{ request('createdAtGe') }}"/>
                                                                            <div class="input-group-prepend">
                                                                                <span class="input-group-text">
                                                                                    <i class="fe fe-calendar"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="filterformdiv calllogsfilter4 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                    <div class="form-group mb-0">
                                                                        <label class="form-label">Filter by Date : To</label>
                                                                        <div class="input-group">
                                                                            <input type="text" name="createdAtLe" id="datepicker2" class="form-control" placeholder="Select To Date" value="{{ request('createdAtLe') }}"/>
                                                                            <div class="input-group-prepend">
                                                                                <span class="input-group-text">
                                                                                    <i class="fe fe-calendar"></i>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="filterformbtn calllogsfilter5 col-lg-3 col-md-12 col-sm-12 mb-0">
                                                                    <div class="form-group mb-0">
                                                                        <button class="filterbtn" type="submit">Apply Filters</button>
                                                                        <a class="clearbtn" href="{{ route('user.call_logs' ) }}">Clear</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div id="table-wrapper" class="table-responsive">
                                                        <table id="example1" class="table table-bordered text-nowrap tablelistingsec">
                                                            <thead>
                                                                <tr>
                                                                    <th>S.No</th>
                                                                    <th>Call ID</th>
                                                                    <th>Assistant</th>
                                                                    <th>Phone Number</th>
                                                                    <th>Customer Phone Number</th>
                                                                    <th>Ended Reason</th>
                                                                    <th>Success Evaluation</th>
                                                                    <th class="text-center">Start Time</th>
                                                                    <!-- <th>Duration</th> -->
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach ($calls as $call)
                                                                    <tr class="clickable-row" data-call="{{ $call['id'] }}">
                                                                        <td>{{ $call['sno'] }}</td>
                                                                        @php
                                                                            $fullId = $call['id'];
                                                                            $trimmedId = substr($fullId, 0, 8) . '...' . substr($fullId, -6);
                                                                        @endphp
                                                                        <td>
                                                                            <span class="copy-id" data-full-id="{{ $fullId }}" style="cursor: pointer;" title="Click to copy">
                                                                                {{ $trimmedId }} <i class="fe fe-copy copyicon"></i>
                                                                            </span>
                                                                        </td>
                                                                        <td>{{ $call['assistant_name'] }}</td>
                                                                        <td>{{ $call['assistantPhoneNumber'] }}</td>
                                                                        <td>
                                                                            {{ $call['customerPhoneNumber'] }} <br/> 
                                                                            @if ($call['type'] == 'web')
                                                                                <span class="fe fe-globe globeicon"></span>&nbsp;{{ $call['type'] }}
                                                                            @elseif ($call['type'] == 'outbound')
                                                                                <span class="fe fe-phone-outgoing ouboundicon"></span>&nbsp;{{ $call['type'] }}
                                                                            @else
                                                                                <span class="fe fe-phone-incoming inoundicon"></span>&nbsp;{{ $call['type'] }}
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            @if ($call['endedReason'] == 'Customer Ended Call')
                                                                                <span class="custendcall-badge">{{ $call['endedReason'] }}</span>
                                                                            @elseif ($call['endedReason'] == 'Assistant Forwarded Call')
                                                                                <span class="assfwdcall-badge">{{ $call['endedReason'] }}</span>
                                                                            @elseif ($call['endedReason'] == 'Customer Busy')
                                                                                <span class="custbusy-badge">{{ $call['endedReason'] }}</span>
                                                                            @elseif ($call['endedReason'] == 'Assistant Ended Call')
                                                                                <span class="assendcall-badge">{{ $call['endedReason'] }}</span>
                                                                            @elseif ($call['endedReason'] == 'Silence Timed Out')
                                                                                <span class="siltimeout-badge">{{ $call['endedReason'] }}</span>
                                                                            @else
                                                                                <span class="othererr-badge">{{ $call['endedReason'] }}</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>
                                                                            @if (is_null($call['evaluation_success']))
                                                                                <span class="na-badge">N/A</span>
                                                                            @elseif ($call['evaluation_success'] == 'true')
                                                                                <span class="success-badge">Pass</span>
                                                                            @else
                                                                                <span class="danger-badge">Fail</span>
                                                                            @endif
                                                                        </td>
                                                                        <!-- <td @if($call['createdAt'] != 'N/A') data-utc-time="{{ $call['createdAt'] }}" @endif>{{ $call['createdAt'] }}</td> -->
                                                                        <td @if($call['createdAt'] != 'N/A') data-utc-time="{{ $call['createdAt'] }}" data-id="cr_{{ $call['id'] }}" @endif class="text-center">
                                                                            <span id="cr_{{ $call['id'] }}"> {{ $call['createdAt'] }} </span>
                                                                            </br>
                                                                            <i class="fe fe-clock clockicon"></i>&nbsp;{{ $call['duration'] }}
                                                                        </td>
                                                                        <!-- <td>{{ $call['duration'] }}</td> -->
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                        <div id="copyToast"><i class="fe fe-info"></i>&nbsp; ID copied to clipboard!</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="audio-player">
                        <div class="waveform col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0" id="waveformWrapper">
                            <canvas id="waveformCanvas" height="90"></canvas>
                        </div>
                        <div class="row">
                            <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">00:00</span>
                            </div>
                        </div>
                    </div>-->
                    <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')
<!-- <script>
    function toggleTableResponsive() {
        const wrapper = document.getElementById('example1');
        if (window.innerWidth <= 1680) {
            wrapper.classList.add('table-responsive');
        } else {
            wrapper.classList.remove('table-responsive');
        }
    }
    // Run once on load
    toggleTableResponsive();
    // Run on window resize
    window.addEventListener('resize', toggleTableResponsive);

    $(document).ready(function () {
        setTimeout(function () {
            $('#example1_length').closest('.col-sm-12.col-md-6').addClass('lengthfilter');
            $('#example1_filter').closest('.col-sm-12.col-md-6').addClass('searchfilter');
        }, 100);
    });
</script> -->
<!-- <script>
  const canvas = document.getElementById("waveformCanvas");
  const ctx = canvas.getContext("2d");
  const audio = document.getElementById("audioPlayer");
  const playBtn = document.getElementById("playPauseBtn");
  const speedSelect = document.getElementById("speedSelect");
  const timeDisplay = document.getElementById("timeDisplay");
  const waveformWrapper = document.getElementById("waveformWrapper");

  let isPlaying = false;
  let animationFrameId = null;

  // Simulated waveform data
  const dataTop = [0, 2, 1, 3, 0, 5, 7, 6, 8, 12, 8, 4, 1, 0, 2, 4, 6, 8, 6, 5];
  const dataBottom = [2, 5, 4, 6, 7, 3, 2, 1, 0, 2, 3, 6, 5, 4, 6, 8, 9, 7, 3, 2];

    function audioEmpty() {
        audio.pause();
        audio.currentTime = 0;
        $('#audioPlayer source').attr('src', '');
        audio.load();
        playBtn.innerHTML = "►";
        isPlaying = false;
        if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
        }
        timeDisplay.textContent = "00:00";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawWaveform() {
        const width = canvas.width = canvas.offsetWidth;
        const height = canvas.height;
        const barWidth = width / dataTop.length;

        ctx.clearRect(0, 0, width, height);

        // Set line width before drawing

        // Top waveform
        ctx.strokeStyle = "#ff8f00";
        dataTop.forEach((val, i) => {
        const x = i * barWidth;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(x, height / 3 - 3);
        ctx.lineTo(x, height / 3 - val * 3);
        ctx.stroke();
        });

        // Bottom waveform
        ctx.strokeStyle = "#00acc1";
        dataBottom.forEach((val, i) => {
        const x = i * barWidth;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(x, height / 3 + 3);
        ctx.lineTo(x, height / 3 + val * 3);
        ctx.stroke();
        });

        // Progress line
        if (audio.duration) {
        const pos = (audio.currentTime / audio.duration) * width;
        ctx.strokeStyle = "#65d3f9";
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(pos, 0);
        ctx.lineTo(pos, height);
        ctx.stroke();
        }

        // Timeline ticks
        ctx.strokeStyle = "#868a91";
        ctx.font = "10px sans-serif";
        ctx.fillStyle = "#868a91";
        for (let i = 0; i <= dataTop.length; i++) {
        const x = i * barWidth;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, height - 10);
        ctx.lineTo(x, height);
        ctx.stroke();
        if (i % 5 === 0) {
            ctx.fillText(i.toString(), x + 2, height - 12);
        }
        }
    }

    function animateWaveform() {
        drawWaveform();
        animationFrameId = requestAnimationFrame(animateWaveform);
    }

    // Custom Play/Pause button
    playBtn.addEventListener("click", () => {
        if (isPlaying) {
        audio.pause(); // triggers pause event
        } else {
        audio.play(); // triggers play event
        }
    });

    // Handle native or external play
    audio.addEventListener("play", () => {
        playBtn.innerHTML = "❚❚";
        isPlaying = true;
        animateWaveform();
    });

    // Handle native or external pause
    audio.addEventListener("pause", () => {
        playBtn.innerHTML = "►";
        isPlaying = false;
        cancelAnimationFrame(animationFrameId);
    });

    // Time update
    audio.addEventListener("timeupdate", () => {
        const currentTime = Math.floor(audio.currentTime);
        const minutes = Math.floor(currentTime / 60);
        const seconds = currentTime % 60;
        timeDisplay.textContent = 
            String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0");
    });

    // Speed change
    speedSelect.addEventListener("change", () => {
        audio.playbackRate = parseFloat(speedSelect.value);
    });

    // Seek on canvas click
    waveformWrapper.addEventListener("click", (e) => {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const ratio = x / canvas.width;
        audio.currentTime = audio.duration * ratio;
        drawWaveform();
    });

    // On audio end
    audio.addEventListener("ended", () => {
        isPlaying = false;
        playBtn.innerHTML = "►";
        cancelAnimationFrame(animationFrameId);
        drawWaveform();
    });

    // Initial draw
    // drawWaveform();

    $(document).on('click', '.clickable-row', function () {
        // $('#audioPlayer source').attr('src', '');
        // $('#audioPlayer')[0].load();
        audioEmpty();
        $('#transcriptText').text('Not available');
        $('#analysisData').html('');
        $('#showerror').css('display','none');
        $('#showerror').html('');
        const callId = $(this).data('call');
        
        $.ajax({
            url: "{{ route('user.call.details', ':id') }}".replace(':id', callId),
            method: 'GET',
            success: function (data) {
                const hasCallInProgress = data.endedReason.includes("call.in-progress");
                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').css('display','none');
                    $('.audio-notawailable').css('display','block');
                }else{
                    $('.audio-player').css('display','block');
                    $('.audio-notawailable').css('display','none');
                }
                const rawTranscript = data.transcript ?? 'Not available';

                if (rawTranscript !== 'Not available') {
                    // Format transcript with spans
                    const formattedTranscript = rawTranscript
                        .replace(/AI:/g, '<p class="ai-label">AI:</p>')
                        .replace(/User:/g, '<p class="user-label">User:</p>')
                        .replace(/\n/g, '<br>'); // Preserve line breaks

                    $('#transcriptText').html(formattedTranscript);
                } else {
                    $('#transcriptText').text('Not available');
                }

                // Audio
                // if (data.audio_url) {
                //     $('#audioPlayer source').attr('src', data.audio_url);
                //     $('#audioPlayer')[0].load();
                // } else {
                //     $('#audioPlayer source').attr('src', '');
                //     $('#audioPlayer')[0].load();
                // }

                // Load audio if available
                // if (data.audio_url) {
                //     $('#audioPlayer source').attr('src', data.audio_url);
                //     audio.load();
                // }
                if (data.audio_url != null) {
                    $('#audioPlayer source').attr('src', data.audio_url);
                    audio.load();
                }
                else
                {
                    $('.audio-player').css('display','none');
                    $('.audio-notawailable').css('display','block');
                }

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

                $('#callDetailsModal').modal('show');

                $('#callDetailsModal').on('shown.bs.modal', function () {
                    setTimeout(drawWaveform, 100); // redraw when modal becomes visible
                });

                // const downloadBtn = document.getElementById("downloadBtn");

                // downloadBtn.addEventListener("click", () => {
                //     const audio = document.getElementById("audioPlayer");
                //     const source = audio.querySelector("source");
                //     const audioUrl = source?.src;

                //     if (!audioUrl) {
                //         alert("No audio file available to download.");
                //         return;
                //     }

                //     const a = document.createElement("a");
                //     a.href = audioUrl;
                //     a.download = "call-audio.mp3"; // Optional: customize filename
                //     document.body.appendChild(a);
                //     a.click();
                //     document.body.removeChild(a);
                // });
            },
            error: function () {
                alert('Failed to load call details.');
            }
        });
        // Reset tabs to default state
        $('#myTab button.nav-link').removeClass('active');
        $('#home-tab').addClass('active');
        $('#myTabContent .tab-pane').removeClass('show active');
        $('#home').addClass('show active');
    });

    function audioempty() {
        // Clear audio source
        const audio = $('#audioPlayer')[0];
        $('#audioPlayer source').attr('src', '');
        audio.load();

        // Reset play button and time
        $('#playPauseBtn').html('&#9658;');
        $('#timeDisplay').text('00:00');

        // Clear canvas
        const canvas = document.getElementById('waveformCanvas');
        if (canvas) {
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // If using wavesurfer
        if (typeof wavesurfer !== 'undefined') {
            wavesurfer.stop();
            wavesurfer.empty();
        }
    }
    // Later, when you want to play audio again:
    function loadAndPlayAudio(audioUrl) {
        const audio = $('#audioPlayer')[0];
        $('#audioPlayer source').attr('src', audioUrl);
        audio.load();
        audio.play();

        $('#playPauseBtn').html('❚❚'); // change to pause icon
    }
    $('#callDetailsModal').on('hidden.bs.modal', function () {
        audioempty(); // This will reset audio, waveform, etc.
    });
</script> -->
<!-- <script>
    $(document).on('click', '.clickable-row', function () {
        $('#audioPlayer source').attr('src', '');
        $('#audioPlayer')[0].load();
        $('#transcriptText').text('Not available');
        $('#analysisData').html('');
        const callId = $(this).data('call');
        
        $.ajax({
            url: "{{ route('user.call.details', ':id') }}".replace(':id', callId),
            method: 'GET',
            success: function (data) {
                const rawTranscript = data.transcript ?? 'Not available';

                if (rawTranscript !== 'Not available') {
                    // Format transcript with spans
                    const formattedTranscript = rawTranscript
                        .replace(/AI:/g, '<span class="ai-label">AI:</span>')
                        .replace(/User:/g, '<span class="user-label">User:</span>')
                        .replace(/\n/g, '<br>'); // Preserve line breaks

                    $('#transcriptText').html(formattedTranscript);
                } else {
                    $('#transcriptText').text('Not available');
                }

                // Audio
                if (data.audio_url) {
                    $('#audioPlayer source').attr('src', data.audio_url);
                    $('#audioPlayer')[0].load();
                } else {
                    $('#audioPlayer source').attr('src', '');
                    $('#audioPlayer')[0].load();
                }

                // Analysis
                let analysisHtml = '';
                if (data.analysis && Object.keys(data.analysis).length > 0) {
                    for (const [key, value] of Object.entries(data.analysis)) {
                        if (key === 'structuredData') {
                            // Pretty-print the structuredData as JSON
                            analysisHtml += `<strong>${key}:</strong><pre>${JSON.stringify(value, null, 4)}</pre>`;
                        } else {
                            analysisHtml += `<p><strong>${key}:</strong> ${value}</p>`;
                        }
                    }
                } else {
                    analysisHtml = '<p>No analysis available.</p>';
                }
                $('#analysisData').html(analysisHtml);

                $('#callDetailsModal').modal('show');
            },
            error: function () {
                alert('Failed to load call details.');
            }
        });
    });
</script> -->
<script>
    const audio = document.getElementById("audioPlayer");
    const playBtn = document.getElementById("playPauseBtn");
    const speedSelect = document.getElementById("speedSelect");
    const timeDisplay = document.getElementById("timeDisplay"); // optional, you can remove if using custom time
    const seekbar = document.getElementById("audioSeekbar");
    const currentTimeLabel = document.getElementById("currentTime");
    const totalTimeLabel = document.getElementById("totalTime");

    let isPlaying = false;

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

    function audioEmpty() {
        audio.pause();
        audio.currentTime = 0;
        $('#audioPlayer source').attr('src', '');
        audio.load();
        playBtn.innerHTML = "►";
        isPlaying = false;
        timeDisplay.textContent = "00:00";
        seekbar.value = 0;
        currentTimeLabel.textContent = "0:00";
        totalTimeLabel.textContent = "0:00";
    }

    function updateSeekbar() {
        if (audio.duration) {
            seekbar.value = audio.currentTime;
            currentTimeLabel.textContent = formatTime(audio.currentTime);
        }
    }

    audio.addEventListener("loadedmetadata", () => {
        seekbar.max = audio.duration;
        totalTimeLabel.textContent = formatTime(audio.duration);
    });

    audio.addEventListener("timeupdate", updateSeekbar);

    seekbar.addEventListener("input", () => {
        audio.currentTime = seekbar.value;
    });

    playBtn.addEventListener("click", () => {
        if (isPlaying) {
            audio.pause();
        } else {
            audio.play();
        }
    });

    audio.addEventListener("play", () => {
        playBtn.innerHTML = "❚❚";
        isPlaying = true;
    });

    audio.addEventListener("pause", () => {
        playBtn.innerHTML = "►";
        isPlaying = false;
    });

    audio.addEventListener("ended", () => {
        isPlaying = false;
        playBtn.innerHTML = "►";
        seekbar.value = 0;
        currentTimeLabel.textContent = "0:00";
    });

    speedSelect.addEventListener("change", () => {
        audio.playbackRate = parseFloat(speedSelect.value);
    });

    $(document).on('click', '.clickable-row', function () {
        audioEmpty();
        $('#transcriptText').text('Not available');
        $('#analysisData').html('');
        $('#showerror').hide().html('');

        const callId = $(this).data('call');
        $.ajax({
            url: "{{ route('user.call.details', ':id') }}".replace(':id', callId),
            method: 'GET',
            success: function (data) {
                const hasCallInProgress = data.endedReason.includes("call.in-progress");
                if (hasCallInProgress) {
                    $('#showerror').show().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();
                }

                const rawTranscript = data.transcript ?? 'Not available';
                if (rawTranscript !== 'Not available') {
                    const formattedTranscript = 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(formattedTranscript);
                } else {
                    $('#transcriptText').text('Not available');
                }

                if (data.audio_url != null) {
                    $('#audioPlayer source').attr('src', data.audio_url);
                    audio.load();
                }
                else
                {
                    $('.audio-player').hide();
                    $('.audio-notawailable').show();
                }

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

                $('#callDetailsModal').modal('show');
            },
            error: function () {
                alert('Failed to load call details.');
            }
        });

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

    function audioempty() {
        const audio = $('#audioPlayer')[0];
        $('#audioPlayer source').attr('src', '');
        audio.load();
        $('#playPauseBtn').html('&#9658;');
        $('#timeDisplay').text('00:00');
        $('#audioSeekbar').val(0);
        $('#currentTime').text('0:00');
        $('#totalTime').text('0:00');
    }

    function loadAndPlayAudio(audioUrl) {
        const audio = $('#audioPlayer')[0];
        $('#audioPlayer source').attr('src', audioUrl);
        audio.load();
        audio.play();
        $('#playPauseBtn').html('❚❚');
    }

    $('#callDetailsModal').on('hidden.bs.modal', function () {
        audioempty();
    });
</script> 
<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');
    //     if (utc) {
    //         el.textContent = formatToLocalTime(utc);
    //     }
    // });
    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>
<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);
        }
    });
</script>
@endsection