@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" />
    <style>
        .upload-area {
            border: 2px dashed #ddd;
            padding: 50px;
            text-align: center;
            color: #999;
            margin-bottom: 20px;
            border-radius: 10px;
        }

        .upload-area:hover {
            background-color: #f9f9f9;
            cursor: pointer;
        }

        .slider-label {
            font-weight: bold;
        }

        .sidebar {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
        }

        .footer-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
@stop

@section('content')
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Voice Changer</h2>
    </div>
    <p>Say it how you want and hear it delivered in another voice, with full control over the tone, style, and delivery.</p>

    <div class="row">
        <div id="error" class="alert alert-danger d-none"></div>
        <!-- Left: Upload Area -->
        <div class="col-md-8 recordedarea">
            <div class="upload-area mb-3">
                <i class="bi bi-cloud-arrow-up fs-1"></i>
                <p>Drag and drop an audio file</p>
                <small class="text-muted">Audio file up to 50mb</small>
                <div class="mt-3">
                    <input type="file" id="uploaded_file" class="d-none">
                    <button class="btn btn-outline-secondary me-2" id="upaudiobtn">Upload audio</button>
                    <button class="btn btn-outline-secondary" id="recaudiobtn">Record audio</button>
                    <button class="btn btn-outline-danger d-none" id="stopausiobtn">Stop recording</button>
                </div>
            </div>

            {{-- button --}}

        </div>

        <!-- Right: Settings Sidebar -->
        <div class="col-md-4">
            <div class="sidebar">
                <div class="mb-3">
                    <label class="form-label">Project <span class="text-danger">*</span></label>
                    <select class="form-control" name="system_project" id="project">
                        <option value="" selected disabled>Select Project</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}"> {{ $project->project }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Voices <span class="text-danger">*</span></label>
                    <select name="voice_id" id="voice_id" class="form-control">
                        <option value="" disabled selected>Select Voice
                        </option>
                        @foreach ($voices as $voice)
                            <option data-preview="{{ $voice->preview_url }}" value="{{ $voice->voice_id }}">
                                {{ $voice->name }}
                                @php
                                    $labels = $voice->labels;
                                    $totalLabels = count($labels);
                                    $firstLabel = array_slice($labels, 0, 1); // Show the first label
                                    $remainingLabels = array_slice($labels, 1); // Remaining labels for the tooltip
                                @endphp

                                @foreach ($firstLabel as $key => $value)
                                    <span class="badge bg-dark text-light"> -- {{ ucfirst($key) }}:
                                        {{ ucfirst($value) }}</span>
                                @endforeach

                                <!-- If there are remaining labels, display a "more" badge with a tooltip -->
                                @if ($totalLabels > 1)
                                    @foreach ($remainingLabels as $key => $value)
                                        , {{ ucfirst($key) }}: {{ ucfirst($value) }}
                                    @endforeach

                                    </span>
                                @endif
                            </option>
                        @endforeach

                    </select>
                </div>
                <div class="mt-3 d-none checkvoiceDiv">
                    <audio class="w-100 checkvoice" controls>
                        <source src="">
                    </audio>
                </div>
                <div class="mb-3 range-container">
                    <label for="stabilitySlider" class="">Stability</label>
                    <input type="range" class="form-range rangeInput" id="stabilitySlider" min="0" max="100"
                        value="50">
                </div>

                <div class="mb-3 range-container">
                    <label for="similaritySlider">Similarity</label>
                    <input type="range" class="form-range rangeInput" id="similaritySlider" min="0" max="100"
                        value="75">
                </div>

                <div class="mb-3 range-container">
                    <label for="styleExaggerationSlider">Style Exaggeration</label>
                    <input type="range" class="form-range rangeInput" id="styleExaggerationSlider" min="0"
                        max="100" value="0">
                </div>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="speakerBoostSwitch" checked>
                    <label class="form-check-label" for="speakerBoostSwitch">Speaker boost</label>
                </div>

            </div>
        </div>
    </div>

    <!-- Footer Section -->

    <div>
        <button class="btn btn-primary" 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 class="mt-5 d-flex align-items-center justify-content-end ">

        <div class="col-10 d-none audioResult p-2">
            <audio preload="auto" src="http://127.0.0.1:8000/storage/agency_users/1/sts/sts_DCTUKAAdzn.mp3" controls
                id="resaud"></audio>
        </div>
        <div class="col-lg-2 mx-auto usebutton">
            
        </div>
    </div>

@stop


@section('bottom-scripts')
    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioBlob;
        let audioURL;

        // Trigger file input click for uploading audio
        $("#upaudiobtn").on('click', function() {
            $("#uploaded_file").trigger('click');
            $('#upaudiobtn').data('clicked', false);
        });

        $('#uploaded_file').on('change', function(event) {
            uploadedFile = event.target.files[0];
            if (uploadedFile) {
                console.log('File uploaded:', uploadedFile.name);
                // Display audio player for uploaded file
                const audioURL = URL.createObjectURL(uploadedFile);
                const audio = new Audio(audioURL);
                audio.controls = true;
                $(".recordedarea").html(audio); // Replace previous audio with new one
            }
        });

        // Start recording audio
        $("#recaudiobtn").on('click', function() {
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                    audio: true
                }).then(function(stream) {
                    mediaRecorder = new MediaRecorder(stream);
                    mediaRecorder.start();
                    console.log('Recording started');
                    $("#recaudiobtn").addClass('d-none');
                    $("#stopausiobtn").removeClass('d-none');

                    mediaRecorder.ondataavailable = function(event) {
                        audioChunks.push(event.data);
                    };

                    mediaRecorder.onstop = function() {
                        audioBlob = new Blob(audioChunks, {
                            type: 'audio/wav'
                        });
                        audioChunks = []; // Reset chunks for future recordings
                        const audioURL = URL.createObjectURL(audioBlob);
                        const audio = new Audio(audioURL);
                        audio.controls = true;
                        $(".recordedarea").html(audio); // Replace previous audio with new one
                        console.log("Recording stopped and saved.");
                    };
                }).catch(function(error) {
                    console.error('Error accessing microphone:', error);
                });
            } else {
                console.error("Your browser does not support audio recording");
            }
        });

        // Stop recording audio
        $("#stopausiobtn").on('click', function() {
            if (mediaRecorder && mediaRecorder.state === "recording") {
                mediaRecorder.stop();
                console.log('Recording stopped');
                $("#recaudiobtn").removeClass('d-none');
                $("#stopausiobtn").addClass('d-none');
            }
        });

        $('#generate-btn').on('click', function(e) {
            e.preventDefault();
            $("#error").addClass("d-none");

            let formData = new FormData();
            formData.append('_token', "{{ csrf_token() }}");
            formData.append('system_project', $("#project").val())
            formData.append('stability', $("#stabilitySlider").val())
            formData.append('similarity', $("#similaritySlider").val())
            formData.append('exaggeration', $("#styleExaggerationSlider").val())
            formData.append('speakerboast', $("#speakerBoostSwitch").val())
            formData.append('voice_id', $("#voice_id").val())

            if (audioBlob) {
                formData.append('audio_file', audioBlob, 'recorded_audio.wav');
                console.log("Submitting recorded audio");
            } else if (uploadedFile) {
                formData.append('audio_file', uploadedFile);
                console.log("Submitting uploaded audio");
            } else {
                console.log("No audio file to submit");
                return;
            }

            $.ajax({
                url: "{{ route('agency.sts.submit') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    $("#generate-btn").prop("disabled", true);
                    $("#generate-btn").addClass("d-none");;
                    $("#spinner").removeClass("d-none");

                },
                success: function(res) {
                    let obj = res

                    if (obj.error) {

                        $("#error").html(obj.error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $("#generate-btn").removeClass("d-none");
                        toast('error', 'Please check errors list')
                        $(window).scrollTop(0);
                    } else if (obj.success) {
                        $("#error").addClass("d-none");

                        $("#spinner").addClass("d-none");
                        toast('success', 'Voice Changed')
                        $("#generate-btn").removeClass("d-none");
                        $('#resaud').attr('src', obj.audio_url);
                        $(".usebutton").html(
                                '<a href="{{ route('agency.lipsync') }}?rid='+res.record_id+'"  class="btn btn-md btn-primary ">Use in Video</a>'

                            );
                     
                        $('.audioResult').removeClass('d-none')

                    } else {
                        $("#spinner").addClass("d-none");
                        $("#generate-btn").prop("disabled", false);
                        $("#generate-btn").removeClass("d-none");
                        toast('error', 'Please check errors list')
                        // toastr.error("Something bad happened!", "Error");
                        $(window).scrollTop(0);
                    }

                    $("#generate-btn").prop("disabled", false);
                },
                error: function(error) {
                    $(window).scrollTop(0);
                    toast('error', 'Please check errors list')
                    $("#error").html(error.responseJSON.message || error.responseJSON.error);
                    $("#error").removeClass("d-none");
                    $("#spinner").addClass("d-none");
                    $("#generate-btn").prop("disabled", false);
                    $("#generate-btn").removeClass("d-none");
                }
            });
        });
        $("#voice_id").change(function() {
            var selectedOption = $(this).find("option:selected");

            if ($(this).val() != "") {
                var previewUrl = selectedOption.data(
                'preview'); // Get the data-preview-url from the selected option
                if(previewUrl ==''){
                    $(".checkvoiceDiv").addClass('d-none'); // Show the voice preview div
                    toast('info', 'The preview result will be available after 24 hours.');
                    return false;
                }
                $(".checkvoiceDiv").removeClass('d-none'); // Show the voice preview div
                $(".checkvoice").attr("src", previewUrl); // Set the src attribute
                $(".checkvoice")[0].play(); // Autoplay the audio
            }
        });
    </script>
@stop