@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!---Global-loader-->
    <div id="global-loader">
        <div class="loaderimg1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img src="{{ asset('assets/img/loader.webp') }}" alt="loader">
        </div>
        <div class="loaderimg2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img src="{{ asset('assets/img/spinner.gif') }}" alt="loader">
        </div>
    </div>
    <!--- End Global-loader-->
    
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- Sidebar -->
            @include('layouts.admin.sidemenubar')

            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">

                    <!-- App Header -->
                    @include('layouts.admin.appheader')

                    <!-- Page Header -->
                    <div class="page-header">
                        <div class="page-leftheader">
                            <h4 class="page-title mb-0">Call Logs</h4>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('admin.dashboard') }}">
                                        <i class="fe fe-home mr-2 fs-14"></i>Dashboard
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Call Logs</li>
                            </ol>
                        </div>
                        <div class="flashmsgec">
                            @include('layouts.flashmsg')
                        </div>
                    </div>
                    <!-- End Page Header -->

                    <div class="card carddivision">
                        <div class="card-header">
                            <div class="card-title">Vapi AI Call Logs</div>
                        </div>
                        <div class="card-body">
                            <div id="table-wrapper">
                                <table class="table table-bordered text-nowrap tablelistingsec" id="example1">
                                    <thead>
                                        <tr>
                                            <th>Call ID</th>
                                            <th>Assistant</th>
                                            <th>Assistant Phone Number</th>
                                            <th>Customer Phone Number</th>
                                            <th>Ended Reason</th>
                                            <th>Success Evaluation</th>
                                            <th>Start Time</th>
                                            <th>Duration</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                           @forelse ($calls as $call)
                                                <tr class="clickable-row" data-call="{{ $call['id'] }}">
                                                    <td>{{ $call['id'] }}</td>
                                                    <td>{{ $call['assistant_name'] }}</td>
                                                    <td>{{ $call['assistantPhoneNumber'] }}</td>
                                                    <td>{{ $call['customerPhoneNumber'] }} <br/> {{ $call['type'] }}</td>
                                                    <td>{{ $call['endedReason'] }}</td>
                                                    <td>
                                                        @if (is_null($call['evaluation_success']))
                                                            <span class="badge bg-secondary">N/A</span>
                                                        @elseif ($call['evaluation_success'] == 'true')
                                                            <span class="badge bg-success">Pass</span>
                                                        @else
                                                            <span class="badge bg-danger">Fail</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $call['createdAt'] }}</td>
                                                    <td>{{ $call['duration'] }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8" class="text-center">No call logs found.</td>
                                                </tr>
                                            @endforelse
                                    </tbody>
                                </table>
                            </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 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>

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>

@include('includes.jslinks_common')

<script>
    $(document).on('click', '.clickable-row', function () {
        const callId = $(this).data('call');
        
        $.ajax({
            url: `/admin/call-details/${callId}`,
            method: 'GET',
            success: function (data) {
                console.log(data);
                $('#transcriptText').text(data.transcript ?? '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)) {
                        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>
@endsection