@extends('layout.app')

@section('content')

    <ol class="breadcrumb bc-3">
        <li><a href="#">Home</a></li>
        <li><a href="{{ route('log') }}">Call Logs</a></li>
        <li class="active"><strong>{{ $call_id }}</strong></li>
    </ol>

    <br/>
    <h3>Call Detail &nbsp; <small class="text-muted">{{ $call_id }}</small></h3>
    <br/>

    <div class="row">

        {{-- Caller Audio --}}
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-user text-primary"></i> Caller Audio
                </div>
                <div class="panel-body text-center">
                    @if($has_caller)
                        <audio controls style="width:100%;">
                            <source src="{{ route('call.audio', [$call_id, 'caller']) }}" type="audio/wav">
                        </audio>
                    @else
                        <span class="text-muted">No caller audio found.</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Agent Audio --}}
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-headphones text-success"></i> Agent Audio
                </div>
                <div class="panel-body text-center">
                    @if($has_agent)
                        <audio controls style="width:100%;">
                            <source src="{{ route('call.audio', [$call_id, 'agent']) }}" type="audio/wav">
                        </audio>
                    @else
                        <span class="text-muted">No agent audio found.</span>
                    @endif
                </div>
            </div>
        </div>

    </div>

    {{-- Transcript --}}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-file-word-o text-danger"></i> Transcript
                </div>
                <div class="panel-body">
                    @if($has_docx)
                        <a href="{{ route('call.docx', $call_id) }}"
                           class="btn btn-danger">
                            <i class="fa fa-download"></i> Download Transcript (DOCX)
                        </a>
                        <p class="text-muted" style="margin-top:10px;">
                            Click to download and open in Microsoft Word or Google Docs.
                        </p>
                    @else
                        <span class="text-muted">No transcript found.</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <a href="{{ route('log') }}" class="btn btn-default">
        <i class="fa fa-arrow-left"></i> Back to Call Logs
    </a>

@endsection