@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    LipSync
@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>
        let recordedFile = null;
        $(document).ready(function() {

            $("#regstr").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.lipsync.submit') }}", // Use Laravel's URL helper to generate the correct URL
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {

                        let obj = res
                        console.log("object", obj)
                        console.log(obj.success)

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                            toast("error", "Please check errors list")
                            console.log(obj.data)

                        } else if (obj.success) {
                            var data_once = JSON.parse(obj.data)
                            toast("success", "Processing video")
                            setTimeout(() => {
                                window.location.href =
                                    "{{ route('agency.lipsynced.processing') }}"
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            // toastr.error("Something bad happened!", "Error");
                            toast("error", " Somthing went wrong")

                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        $("#error").html(error.responseJSON.message || error.responseJSON
                            .error);
                        toast("error", "Please check errors list")

                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                    }
                });
            });

            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'
                    });
                    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');
            });

        });

        $(document).on('click', ".removeAudio", function(event) {
            $("#audiosample").remove();
            $("#aud_in").removeClass("d-none");
        })
        $(document).on('click', ".removeVideo", function(event) {
            $("#samplevideo").remove();
            $("#vid_in").removeClass("d-none");
        })

        $("#sample").change(function() {
            let video = $(this).val();
            if (video != '') {
                $("#exampleModal").modal("show");
                const vid = $('#modal-vid');
                vid.attr("src", video);
                vid[0].play();
            }


        })
        $("#audio_select").change(function() {
            let audios = $(this).val();
            if (audios != '') {
                $("#exampleModal2").modal("show");
                $("#srcaudioselect").attr("src", audios); // Set the src attribute
                $("#srcaudioselect")[0].play(); // Autoplay the audio
               
            }


        })

        $('#exampleModal2').on('hide.bs.modal', function() {
            const audio = $('#srcaudioselect');

            audio.attr("src", '');;

        });
        $('#exampleModal').on('hide.bs.modal', function() {
            const vid = $('#modal-vid');
            vid[0].pause();
        });
    </script>

    {{-- Change Password Toggle --}}
    <script>
        $("#Video-switch").change(function() {
            if ($(this).is(':checked')) {
                $('#video').removeClass('d-none')
                $('#sample').addClass('d-none')
            } else {
                $('#video').addClass('d-none')
                $('#sample').removeClass('d-none')
            }
        })

        $("#Audio-switch").change(function() {
            if ($(this).is(':checked')) {
                $('#audio').removeClass('d-none')
                $('.audio_select_samp').addClass('d-none')
            } else {
                $('#audio').addClass('d-none')
                $('.audio_select_samp').removeClass('d-none')
            }
        })
    </script>
@stop

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>LipSync</h2>
    </div>
    <div class="card mt-3">


        <div class="card-body">
            <div id="error" class="alert alert-danger d-none">Danger Alert!</div>
            <form id="regstr" class="row g-3">
                <div class="col-md-12">
                    <label for="inputEmail66" class="form-label">Title <span class="text-danger">*</span></label>
                    <input name="vtitle" type="text" class="form-control" placeholder="Title" id="inputEmail66">
                </div>
                <div class="col-md-12">
                    <label for="inputAddress" class="form-label"> Project <span class="text-danger">*</span></label>
                    <select name="project_name" id="project_name" class="form-control">
                        <option value="" selected disabled>Select Project</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}"
                                {{ !empty($voice) && $voice->system_project == $project->id ? 'selected' : '' }}>
                                {{ $project->project }}</option>
                        @endforeach
                    </select>
                </div>
                @if (!$sample)
                    <div id="vid_in" class="col-md-6">
                        <div class="vid-div d-flex justify-content-between">
                            <label for="video" class="form-label">Video <span class="text-danger">*</span></label>
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="Video-switch">Upload</label>
                                <input class="form-check-input" type="checkbox" role="switch" id="Video-switch">
                            </div>
                        </div>
                        <input type="file" class="form-control d-none" id="video" name="video">
                        <select name="sample" id="sample" class="form-control">

                            <option value="">Select</option>
                            @foreach ($avatarvideos as $vid)
                                <option value="{{ $vid->video_url }}">{{ $vid->title }}</option>
                            @endforeach

                        </select>
                    </div>
                    {{-- <div class="form-check form-switch col-2 ">
                        <label class="form-check-label" for="change_password_toggle">Upload</label>
                        <input class="form-check-input" type="checkbox" role="switch" id="Video-switch">
                    </div> --}}
                @else
                    <div id="samplevideo" class="col-md-6">
                        <label for="video" class="form-label">Title: {{ $sample->title }}</label>
                        <br>
                        <a href="{{ $sample->video_url }}" target="_blank" class="btn btn-block btn-primary">View Video</a>
                        <span class="btn btn-block btn-primary removeVideo">Remove
                        </span>
                        {{-- <video src="{{ $sample->video_url }}" width="100%" class="rounded mb-3" loop muted
                            autoplay></video> --}}
                        <input type="hidden" class="form-control" value="{{ $sample->video_url }}" id="sample"
                            name="sample">
                    </div>
                    <div id="vid_in" class="col-md-6 d-none">
                        <label for="video" class="form-label">Video</label>
                        <input type="file" class="form-control" id="video" name="video">
                    </div>
                @endif
                @if ($voice)
                    <div id="audiosample" class="col-md-6">
                        <label for="audiosample" class="form-label">Audio<span class="text-danger">*</span></label>
                        <div class="d-flex align-items-center gap-2">
                            <audio class="w-50" controls>
                                <source
                                    src="{{ env('APP_URL') . '/storage/agency_users/' . auth()->guard('agency')->user()->id . '/tts/' . $voice->result }}"
                                    type="audio/mp3">
                            </audio>
                            <div class="icon-badge position-relative bg-primary me-lg-2 cursor-pointer removeAudio"> <i
                                    class="lni lni-close"></i>
                            </div>
                        </div>

                        <input type="hidden" class="form-control" id="audio_select" name="audio_select"
                            value="{{ env('APP_URL') . '/storage/agency_users/' . auth()->guard('agency')->user()->id . '/tts/' . $voice->result }}">


                    </div>
                    <div id="aud_in" class="col-md-6 d-none">
                        <label for="audio" class="form-label">Audio <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="audio" name="audio">
                    </div>
                @else
                    <div id="aud_in" class="col-md-6">
                        <div class="aud-div d-flex justify-content-between">
                            <label for="audio" class="form-label">Audio <span class="text-danger">*</span></label>
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="Video-switch">Upload</label>
                                <input class="form-check-input" type="checkbox" role="switch" id="Audio-switch">
                            </div>
                        </div>
                        <input type="file" class="form-control d-none" id="audio" name="audio">
                        <select name="audio_select" id="audio_select" class="audio_select_samp form-control">
                            <option value="">Select</option>
                            @foreach ($TTSaudios as $audio)
                                <option
                                    value="{{ env('APP_URL') . '/storage/agency_users/' . auth()->guard('agency')->user()->id . '/tts/' . $audio->result }}">
                                    {{ \Illuminate\Support\Str::limit($audio->script, 10, '...') }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif



                <div class="col-md-6">
                    <label for="inputPassword4" class="form-label">Model <span class="text-danger">*</span></label>
                    <select name="model" id="model" class="form-control">
                        <option value="" disabled>Select</option>
                        <option value="sync-1.5.0">Model v1.5.0</option>
                        <option value="sync-1.5.1-beta">Model v1.5.1-beta</option>
                        <option value="sync-1.6.0">Model v1.6.0</option>
                        <option value="sync-1.6.1">Model v1.6.1</option>
                        <option value="sync-1.7.0-beta">Model v1.7.0-beta</option>
                        <option value="sync-1.7.1-beta">Model v1.7.1-beta</option>
                        <option value="sync-1.7.2-beta" selected>Model v1.7.2-beta</option>
                    </select>
                </div>


                <div class="d-flex justify-content-end">
                    <div class="d-grid">
                        <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>
                            Syncing...
                        </button>
                        <button type="submit" class="btn btn-primary">Start syncing</button>
                    </div>
                </div>
                <div class="col-12 d-none" id="download_btn_div">
                    <a id="download_btn" href="" type="button" download class="btn btn-block btn-success">
                        <i class="fa fa-download" aria-hidden="true"></i> Download
                    </a>

                </div>
            </form>
        </div>
    </div>
    <div class="modal fade custom-modal modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-end ">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <video id="modal-vid" class="myVideo rounded mb-3" src="" width="100%"></video>
                    <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" aria-label="Close">Use
                        as Video</button>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade custom-modal modal-lg" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-end ">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <audio class="w-100 " id="srcaudioselect" controls>
                        <source src="">
                    </audio>
                    <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" aria-label="Close">Use
                        as Audio</button>

                </div>

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

@stop