@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
Speech to Speech
@stop

@section('top_import_file')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@stop

@section('bottom-scripts')
<script>
    $(document).ready(function() {
        const $rangeInput = $('.rangeInput');
        const $rangeValue = $('.rangeValue');

        // Update value on input change
        $rangeInput.on('input', function() {
            const value = $(this).val();
            $rangeValue.text(value);

            // Adjust the position of the value bubble based on range's thumb
            const percent = (value - this.min) / (this.max - this.min) * 100;
            $rangeValue.css('left', `calc(${percent}% + (${8 - percent * 0.15}px))`);
        });
    });
</script>


<script>
    let recordedFile = null;
    $(document).ready(function() {
        $('#sps-form').on('submit',function(e){
            e.preventDefault();
            var formdata = new FormData(this);
            formdata.append('_token', "{{csrf_token()}}")
            if (recordedFile) {
                formdata.append('recording_file', recordedFile);
            }
            $.ajax({
                url: "{{route('agency.sts.submit')}}", // Use Laravel's URL helper to generate the correct URL
                type: "post",
                data: formdata,
                processData: false,
                contentType: false,
                cache: false,
                dataType: 'json',
                beforeSend: function() {
                    $(".mp3-player").html(''); // Clear previous audio
                    $("#generate-btn").prop("disabled",
                        true); // Disable submit button during processing
                    $("#generate-btn").addClass("d-none"); // Optionally hide submit button
                    $("#spinner").removeClass(
                        "d-none"); // Show a spinner or loading indicator
                    $("#error").addClass("d-none"); // Hide any existing error messages
                },
                success: function(res) {
                    if (res.errors) {
                        var errorHtml = ''; // To build the error HTML

                        // Loop through each error and add to the error div
                        $.each(res.errors, function(field, messages) {
                            errorHtml += '<div>' + messages[0] + '</div>';
                        });

                        $("#error").html(errorHtml).removeClass(
                            "d-none"); // Display error messages
                        $("#spinner").addClass("d-none"); // Hide the spinner
                        $("#generate-btn").removeClass("d-none").prop("disabled",
                            false); // Show submit button again
                    } else if (res.status == 200) {
                        $("#spinner").addClass("d-none"); // Hide spinner
                        // Load the audio player with the response filename
                        console.log('--------------');
                        console.log(res);
                        console.log('--------------');
                        console.log(res.audio_url)
                        console.log('--------------');
                        $(".mp3-player").html(
                            '<audio class="w-100" controls autoplay><source src="' + res.audio_url +
                            '" type="audio/mp3"> Your browser does not support the audio element.</audio>'
                        );
                        $("#spinner").addClass("d-none"); // Hide the spinner
                        $("#generate-btn").removeClass("d-none").prop("disabled",
                            false); // Show submit button again
                    $("#error").addClass("d-none"); // Hide any existing error messages

                    } else {
                        $("#spinner").addClass("d-none"); // Hide spinner
                        $("#generate-btn").prop("disabled", false); // Re-enable submit button
                        $("#generate-btn").removeClass("d-none"); // Show submit button
                    }
                },
                error: function(error) {
                    console.log(xhr); // Log any error for debugging
                    var errorMsg = xhr.responseJSON.message || 'Something went wrong!';
                    // Display general error
                    $("#error").html(errorMsg).removeClass("d-none");
                    $("#spinner").addClass("d-none"); // Hide spinner
                    $("#generate-btn").prop("disabled", false); // Re-enable submit button
                    $("#generate-btn").removeClass("d-none"); // Show submit button
                }
            });
        });

        let mediaRecorder;
        let audioChunks = [];

        document.getElementById('record_btn').addEventListener('click', async () => {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = event => {
                audioChunks.push(event.data);
            };
            mediaRecorder.onstop = () => {
                const blob = new Blob(audioChunks, { type: 'audio/mp3' });
                console.log("Stopped");
                recordedFile = new File([blob], 'recorded_audio.mp3', { type: 'audio/mp3' });                
                // You can use recordedFile here if needed
            };
            mediaRecorder.start();
            document.getElementById('record_btn').classList.add('d-none');
            document.getElementById('stop_btn').classList.remove('d-none');
        });

        document.getElementById('stop_btn').addEventListener('click', () => {
            mediaRecorder.stop();
            document.getElementById('record_btn').classList.remove('d-none');
            document.getElementById('stop_btn').classList.add('d-none');
        });
    });
</script>
@stop

@section('content')
    <div class="row">
        <div class="col-lg-12 mx-auto">
            <div class="card radius-10">
                <div class="card-body">
                    <div class="alert alert-danger d-none" id="error"></div>
                    <h5>Speech Synthesis</h5>
                    <div id="error" class="alert alert-danger d-none"></div>
                    <p>Unleash the power of our cutting-edge technology to generate
                        realistic,
                        captivating speech in a wide range of languages.</p>
                    <div class="row">
                        <form class="row" id="sps-form">
                            <div class="col-lg-8 mx-auto">

                                <div class="content mb-3 radius-10">

                                    <div class="col-lg-12 mx-auto text-center">

                                        <div id="aud_in" class="col-md-12">
                                            <label for="audio" class="form-label">Upload Audio</label>
                                            <input type="file" class="form-control" id="audio" name="audio">
                                        </div>
                                        <div  class="col-md-12 mt-4 mb-4">
                                            <h3> OR</h3>
                                        </div>
                                        <div id="rec_in" class="col-md-12">
                                            <label for="audio" class="form-label">Record Audio</label>
                                            <div id="record_controls" class="col-md-12">
                                                <button type="button" id="record_btn" class="btn btn-primary"><i
                                                        class="fa-solid fa-microphone"></i></button>
                                                <button type="button" id="stop_btn" class="btn btn-secondary d-none"><i
                                                        class="fa-solid fa-microphone-slash"></i></button>
                                            </div>
                                            <input type="hidden" name="recorded_audio" id="recorded_audio">
                                        </div>
                                    </div>
                                    <div class="character-count mt-3">701 / 5000</div>
                                    <button class="btn btn-primary px-4 " type="submit" id="generate-btn">Generate speech</button>
                                    <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                        Generating...
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-4 mx-auto">
                                <div class="card-container">
                                    <div class="card">
                                        <div class="card-body">
                                            <ul class="nav nav-tabs nav-success" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link active" data-bs-toggle="tab" href="#successsettings"
                                                        role="tab" aria-selected="true">
                                                        <div class="d-flex align-items-center">
                                                            <div class="tab-icon"><ion-icon name="settings-sharp"
                                                                    class="me-1 md hydrated" role="img"
                                                                    aria-label="settings sharp"></ion-icon>
                                                            </div>
                                                            <div class="tab-title">Settings</div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link" data-bs-toggle="tab" href="#successhistory"
                                                        role="tab" aria-selected="false" tabindex="-1">
                                                        <div class="d-flex align-items-center">
                                                            <div class="tab-icon"><ion-icon name="person-sharp"
                                                                    class="me-1 md hydrated" role="img"
                                                                    aria-label="person sharp"></ion-icon>
                                                            </div>
                                                            <div class="tab-title">History</div>
                                                        </div>
                                                    </a>
                                                </li>

                                            </ul>
                                            <div class="tab-content py-3">
                                                <div class="tab-pane fade show active" id="successsettings" role="tabpanel">
                                                    <div class="settings">
                                                        <div class="mt-3">
                                                            <label class="form-label">Project</label>
                                                            <select class="form-control" name="system_project" id="role">
                                                                <option value="" selected disabled>Select Project</option>
                                                                @foreach ($projects as $project)
                                                                    <option value="{{ $project->id }}"> {{ $project->project }} </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="mt-3">
                                                            <label class="form-label">Voices</label>
                                                            <select name="voice_id" id="voice_id" class="form-control">
                                                                <option value="" disabled selected>Select Voice
                                                                </option>
                                                                @foreach ($voices as $voice)
                                                                    @php
                                                                        // Decode the JSON labels to an array
                                                                        $labels = $voice->labels;

                                                                        // Construct a descriptive label
                                                                        $label = $voice->name;
                                                                        if ($labels) {
                                                                            $description = [];
                                                                            if (!empty($labels['age'])) {
                                                                                $description[] = $labels['age'];
                                                                            }
                                                                            if (!empty($labels['accent'])) {
                                                                                $description[] = $labels['accent'];
                                                                            }
                                                                            if (!empty($labels['gender'])) {
                                                                                $description[] = $labels['gender'];
                                                                            }
                                                                            if (!empty($labels['use_case'])) {
                                                                                $description[] = $labels['use_case'];
                                                                            }
                                                                            if (!empty($labels['description'])) {
                                                                                $description[] = $labels['description'];
                                                                            }

                                                                            // Join the descriptions into a string
                                                                            if (!empty($description)) {
                                                                                $label .=
                                                                                    ' > ' . implode(', ', $description);
                                                                            }
                                                                        }
                                                                    @endphp
                                                                    <option value="{{ $voice->voice_id }}">
                                                                        {{ $label }}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>
                                                        <div class="mt-3 range-container">
                                                            <label class="customRange1">Stability</label>
                                                            <input type="range" name="stability" id="stability" class="form-range rangeInput" min="0" max="10"
                                                                value="5">
                                                            <span class="range-value rangeValue">5</span>
                                                        </div>
                                                        <div class="mt-3 range-container">
                                                            <label class="customRange1">Similarity</label>
                                                            <input type="range" name="similarity" id="similarity" class="form-range rangeInput" min="0" max="10"
                                                                value="5">
                                                            <span class="range-value rangeValue">5</span>
                                                        </div>
                                                        <div class="mt-3 range-container">
                                                            <label class="customRange1">Style Exaggeration</label>
                                                            <input type="range" name="exaggeration" id="exaggeration" class="form-range rangeInput" min="0" max="10"
                                                                value="0">
                                                            <span class="range-value rangeValue">5</span>
                                                        </div>
                                                        <div class="form-check form-switch mt-3">
                                                            <input class="form-check-input" type="checkbox" role="switch"
                                                                id="speakerBoost" name="speakerBoost" checked="">
                                                            <label class="form-check-label" for="speakerBoost">Speaker boost</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="successhistory" role="tabpanel">
                                                    <ul class="list-group">
                                                        @foreach ($stsRecords as $tts)
                                                            <li class="list-group-item d-flex flex-column restorescript "
                                                                data-script="{{ $tts->script }}"
                                                                data-similarity="{{ $tts->similarity }}"
                                                                data-exaggeration="{{ $tts->exaggeration }}"
                                                                data-speakerboast="{{ $tts->speakerboast }}"
                                                                data-voice="{{ $tts->voice_id }}"
                                                                data-stability="{{ $tts->stability }}">
                                                                <!-- Display script on one line -->
                                                                <div class="mb-1">
                                                                    <audio class="w-100" controls><source src="{{$tts->result_url}}" type="audio/mp3"> Your browser does not support the audio element.</audio>
                                                                </div>

                                                                <!-- Display badges in a separate line -->
                                                                <div>
                                                                    @if ($tts->stability && $tts->stability !== 'N/A')
                                                                        <span class="badge bg-primary rounded-pill me-1">
                                                                            Stability:
                                                                            {{ number_format($tts->stability * 100, 1) }}%
                                                                        </span>
                                                                    @endif

                                                                    @if ($tts->similarity && $tts->similarity !== 'N/A')
                                                                        <span class="badge bg-primary rounded-pill me-1">
                                                                            Similarity:
                                                                            {{ number_format($tts->similarity * 100, 1) }}%
                                                                        </span>
                                                                    @endif

                                                                    @if ($tts->exaggeration && $tts->exaggeration !== 'N/A')
                                                                        <span class="badge bg-primary rounded-pill me-1">
                                                                            Exaggeration:
                                                                            {{ number_format($tts->exaggeration * 100, 1) }}%
                                                                        </span>
                                                                    @endif

                                                                    @if ($tts->speakerboast && $tts->speakerboast !== 'N/A')
                                                                        <span class="badge bg-primary  rounded-pill me-1">
                                                                            Speakerboast:
                                                                            {{ $tts->speakerboast == 1 ? 'Enabled' : 'Disabled' }}
                                                                        </span>
                                                                    @endif

                                                                    @if ($tts->model_id && $tts->model_id !== 'N/A')
                                                                        <span class="badge bg-primary  rounded-pill me-1">
                                                                            Model ID: {{ $tts->model_id }}
                                                                        </span>
                                                                    @endif
                                                                </div>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 mx-auto mp3-player">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop