@extends('layout.app')

@section('content')
    <meta name="upload-audio-url" content="{{ route('upload.audio') }}">

    <div class="container py-4">
        {{-- File Upload Form --}}
        <div class="card mb-4">
            <div class="card-header">
                <h1 class="h4 mb-0">Upload Audio</h1>
            </div>
            <div class="card-body">
                <form action="{{ route('upload.audio') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="audio" class="form-label">Upload Audio File</label>
                        <input type="file" name="audio" id="audio" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Transcribe</button>
                </form>
            </div>
        </div>

        {{-- Recording Form --}}
        <div class="card mb-4">
            <div class="card-header">
                <h1 class="h4 mb-0">Record and Upload Audio</h1>
            </div>
            <div class="card-body">
                <form id="audioForm" action="{{ route('upload.audio') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="d-flex gap-2 flex-wrap mb-3">
                        <button type="button" id="startRecording" class="btn btn-success">Start Recording</button>
                        <button type="button" id="stopRecording" class="btn btn-warning" disabled>Stop Recording</button>
                        <button type="submit" id="uploadAudioButton" class="btn btn-primary" disabled>Upload Audio</button>
                    </div>
                    <audio id="audioPlayback" controls class="w-100 mt-2"></audio>
                </form>
            </div>
        </div>

        {{-- Parsed JSON Output --}}
        @if(isset($jsonResult))
            <div class="card mb-4">
                <div class="card-header">
                    <h1 class="h4 mb-0">Extracted Data</h1>
                </div>
                <div class="card-body">

                    @if(isset($jsonResult['reminder']))
                        <h5 class="mt-3">Reminder</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Title:</strong> {{ $jsonResult['reminder']['title'] }}</li>
                            <li class="list-group-item"><strong>Date:</strong> {{ $jsonResult['reminder']['date'] }}</li>
                            <li class="list-group-item"><strong>Time before:</strong> {{ $jsonResult['reminder']['time_before'] }}</li>
                            <li class="list-group-item"><strong>Task:</strong> {{ $jsonResult['reminder']['task'] }}</li>
                            <li class="list-group-item"><strong>Recommendation:</strong> {{ $jsonResult['reminder']['recommendation'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['note']))
                        <h5 class="mt-3">Note</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Title:</strong> {{ $jsonResult['note']['title'] }}</li>
                            <li class="list-group-item"><strong>Content:</strong> {{ $jsonResult['note']['content'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['call']))
                        <h5 class="mt-3">Call</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>To:</strong> {{ $jsonResult['call']['to'] }}</li>
                            <li class="list-group-item"><strong>Content:</strong> {{ $jsonResult['call']['content'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['question']))
                        <h5 class="mt-3">Question</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Question:</strong> {{ $jsonResult['question']['question'] }}</li>
                            <li class="list-group-item"><strong>Answer:</strong> {{ $jsonResult['question']['answer'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['completion']))
                        <h5 class="mt-3">Completion</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Task:</strong> {{ $jsonResult['completion']['task'] }}</li>
                            <li class="list-group-item"><strong>Date:</strong> {{ $jsonResult['completion']['date'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['cancellation']))
                        <h5 class="mt-3">Cancellation</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Title:</strong> {{ $jsonResult['cancellation']['title'] }}</li>
                            <li class="list-group-item"><strong>Date:</strong> {{ $jsonResult['cancellation']['date'] }}</li>
                        </ul>
                    @endif

                    @if(isset($jsonResult['summary']))
                        <h5 class="mt-3">Summary</h5>
                        <ul class="list-group mb-3">
                            <li class="list-group-item"><strong>Text:</strong> {{ $jsonResult['summary']['text'] }}</li>
                        </ul>
                    @endif

                    <p class="mt-3"><strong>Created At:</strong> {{ $jsonResult['created_at'] }}</p>
                </div>
            </div>
        @endif

        {{-- JS content --}}
        <div id="contentContainer"></div>
    </div>
@endsection