@extends(backpack_view('layouts.auth'))

@php
    $count = 0;
    $subDay = config('dashboard.call.display_days');
@endphp
@section('content')
<div class="page page-center transcript-page">
    <div class="container py-4">
        <div class="card">

            <div class="card-body text-left">

                <div class="mb-3">
                    <h2 class="h2 text-center my-4">Call Transcript</h2>
                </div>
                <div class="mb-1">
                    <div>
                    Call ID:
                        <select id="select-call">
                        @foreach( $call->groupedCalls($call->pharmacy->call_display_days) as $groupCall)
                            <option value="{{ $groupCall->id }}" {{ $call_id == $groupCall->id ? "selected" : "" }}>Call Request {{ ++$count }}</option>
                        @endforeach
                        </select>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div>
                            Call Start: <strong>{{ $call_created_at }}</strong>
                        </div>
                        <div>
                            Call End: <strong>{{ $call_ended_at }}</strong>
                        </div>
                    </div>
                </div>

                <textarea id="transcript-textarea"  class="transcript-textarea" readonly>{{ $text }}</textarea>

                <div class="form-footer">
                    <a class="btn btn-primary" href="{{ $download_url }}" target="_blank">Download Transcript</a>
                    <button class="btn btn-secondary" onclick="window.close()">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('after_scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectCall = document.getElementById('select-call');

        if (!selectCall) {
            console.log('select-call not found');
            return;
        }

        selectCall.addEventListener('change', function (e) {
            console.log('change');

            const callId = e.target.value;

            if (!callId) {
                return;
            }

            const url = "{{ route('downloadTranscriptTextAiEndpoint', ['callId' => 'CALL_ID', 'download' => 'view']) }}";

            window.location.href = url.replace('CALL_ID', callId);
        });
    });
</script>
@endSection