@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Voices
@stop

@section('top_import_file')
    <style>
        .cheakBox2 {
            height: 10% !important;
        }
    </style>
@stop

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Voices</h2>
    </div>
    <div class="card radius-10 w-100">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-end">
                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#voiceTypeModal" class="btn btn-primary px-5">Add
                    a new voice</a>
            </div>
            <hr>
            <div class="table-responsive mt-2">
                <table class="table align-middle mb-0 dataTable table-hover" id="example">
                    <thead class="table-light">
                        <tr>
                            <th class="d-none">Date</th>
                            <th>Voice</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Labels</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($voices as $voice)
                            <tr>
                                <td class="d-none">{{ $voice->created_at->format('d-M-y g:i A') }}</td>
                                <td>
                                    <div class="audio-player">
                                        <div class="circle">
                                            <i class="play-icon">&#9658;</i>
                                            <audio id="audio-adam" src="{{ $voice->preview_url }}"></audio>
                                        </div>
                                        &nbsp; &nbsp;{{ $voice->name }}
                                    </div>
                                </td>

                                
                                <td class="table-description">{{ $voice->description ? $voice->description : 'A warm, friendly voice that feels like a natural conversation.' }}</td>
                                <td>{{ $voice->category }}</td>
                                <td>
                                    @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

                                    <!-- Display the first badge -->
                                    @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)
                                        <span class="badge bg-secondary text-light" data-bs-toggle="tooltip"
                                            data-bs-html="true"
                                            title="
                            @foreach ($remainingLabels as $key => $value)
                                {{ ucfirst($key) }}: {{ ucfirst($value) }}<br> @endforeach
                            ">
                                            +{{ $totalLabels - 1 }}
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Add new voice modal --}}
    <div class="modal fade" id="voiceTypeModal" tabindex="-1" aria-labelledby="voiceTypeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="voiceTypeModalLabel">Type of voice to create</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Voice Options -->
                    <button type="button" class="btn w-100 p-0" data-bs-toggle="modal" data-bs-target="#voiceDesignModal"
                        style="text-align: left; border: none; background: none;">
                        <div class="voice-option border rounded p-3 mb-3">
                            <h6 class="mb-1"><i class="fas fa-flask"></i> <b>Voice Design</b></h6>
                            <p class="small text-muted mb-0">Design entirely new voices by adjusting their parameters. Every
                                voice you create is randomly generated and is entirely unique even if the same settings are
                                applied.</p>
                        </div>
                    </button>
                    <button type="button" class="btn w-100 p-0" data-bs-toggle="modal"
                        data-bs-target="#ivclInstantVoiceCloningModal"
                        style="text-align: left; border: none; background: none;">
                        <div class="voice-option border rounded p-3 mb-3">
                            <h6 class="mb-1"><i class="fas fa-bolt"></i> <b>Instant Voice Cloning</b></h6>
                            <p class="small text-muted mb-0">Clone a voice from a clean sample recording. Samples should
                                contain 1 speaker and be over 1 minute long and not contain background noise.</p>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- Add new voice modal --}}

    {{-- Voice Design Modal --}}
    <div class="modal fade" id="voiceDesignModal" tabindex="-1" aria-labelledby="voiceDesignModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="voiceDesignModalLabel">Generate voice</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Form Starts -->
                    <form id="VoiceDesignForm">
                        <div id="errorVoiceDesign" class="alert alert-danger d-none"></div>
                        <!-- Gender Dropdown -->
                        <div class="mb-3">
                            <label for="genderSelect" class="form-label">Gender <span class="text-danger">*</span></label>
                            <select class="form-select" id="genderSelect" name="gender">
                                <option value="female">Female</option>
                                <option value="male">Male</option>
                            </select>
                        </div>

                        <!-- Age Dropdown -->
                        <div class="mb-3">
                            <label for="ageSelect" class="form-label">Age <span class="text-danger">*</span></label>
                            <select class="form-select" id="ageSelect" name="age">
                                <option value="young">Young</option>
                                <option value="middle_aged">Middle Aged</option>
                                <option value="old">Old</option>
                            </select>
                        </div>

                        <!-- Accent Dropdown -->
                        <div class="mb-3">
                            <label for="accentSelect" class="form-label">Accent <span class="text-danger">*</span></label>
                            <select class="form-select" id="accentSelect" name="accent">
                                <option value="american">American</option>
                                <option value="british">British</option>
                                <option value="african">African</option>
                                <option value="australian">Australian</option>
                                <option value="indian">Indian</option>
                            </select>
                        </div>

                        <!-- Accent Strength Slider -->
                        <div class="mb-3">
                            <label for="accentStrengthRange" class="form-label">Accent Strength<span
                                    class="text-danger">*
                                </span></label>
                            <input type="range" class="form-range" name="accent_strength" id="accentStrengthRange"
                                min="0.3" max="2.0" step="0.1">
                            <div class="d-flex justify-content-between">
                                <span>Low</span>
                                <span>High</span>
                            </div>
                        </div>

                        <!-- Text Area for Input -->
                        <div class="mb-3">
                            <label for="voiceTextArea" class="form-label">Input Text (Min 300) <span
                                    class="text-danger">*</span></label>
                            <textarea class="form-control" id="voiceTextArea" rows="6" maxlength="1000"
                                placeholder="Enter text to generate voice..." name="text">First we thought the PC was a calculator. Then we found out how to turn numbers into letters and we thought it was a typewriter.</textarea>
                            <div class="d-flex justify-content-between small">
                                <span id="charCount">128 / 1000</span>
                                {{-- <span>Total quota remaining: 90234</span> --}}
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <div class="d-grid">
                        <button class="btn btn-primary d-none" type="button" id="spinnerVoiceDesign" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Generating...
                        </button>
                        <button type="button" id="generateVoicebtn" class="btn btn-primary">Generate</button>
                    </div>
                    <button type="button" class="btn btn-gray" disabled id="useVoiceBtn">Use Voice</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Voice Design Modal --}}

    {{-- Create Voice Modal --}}
    <div class="modal fade" id="createVoiceModal" tabindex="-1" aria-labelledby="createVoiceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="createVoiceModalLabel">Generate voice</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">
                    <!-- Form Starts Here -->
                    <form id="CreateVoiceForm">
                        <div id="errorCreateVoice" class="alert alert-danger d-none"></div>
                        <!-- Name Input -->
                        <div class="mb-3">
                            <label for="voiceNameInput" class="form-label">Name</label>
                            <input type="text" class="form-control" id="voiceNameInput" name="voice_name"
                                placeholder="Enter name">
                        </div>

                        <!-- Labels Section with Add Label button -->
                        <div class="mb-3">
                            <label class="form-label">Labels <span id="labelCount">0 / 5 </span></label>
                            <div class="d-flex flex-wrap" id="labelContainer">
                                <!-- Existing Labels will be appended here -->
                            </div>
                            <!-- Add Label Button and Input Fields -->
                            <div id="addLabelContainer" class="mt-3">
                                <span class="badge bg-light text-primary" id="addLabelBtn" style="cursor: pointer;">+ Add
                                    Label</span>
                                <div id="labelInputContainer" class="d-none mt-2">
                                    <input type="text" id="labelKeyInput" class="form-control mb-2"
                                        placeholder="Label Key (e.g., 'age')" />
                                    <input type="text" id="labelValueInput" class="form-control mb-2"
                                        placeholder="Label Value (e.g., 'young')" />
                                    <button id="saveLabelBtn" class="btn btn-primary btn-sm">Add Label</button>
                                </div>
                            </div>
                        </div>


                        <!-- Description -->
                        <div class="mb-3">
                            <label for="voiceDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="voiceDescription" rows="4" placeholder="How would you describe the voice?"
                                name="voice_description"></textarea>
                        </div>
                    </form>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <div class="d-grid">
                        <button class="btn btn-primary d-none" type="button" id="spinnerCreateVoice" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Creating...
                        </button>
                        <button type="button" id="createVoicebtn" class="btn btn-primary">Create Voice</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Create Voice Modal --}}



    {{-- Instant Voice Cloning Modal --}}
    <div class="modal fade" id="ivclInstantVoiceCloningModal" tabindex="-1"
        aria-labelledby="ivclInstantVoiceCloningModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ivclInstantVoiceCloningModalLabel">Add Voice</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="errorCloneVoice" class="alert alert-danger d-none"></div>
                    <!-- Name Input -->
                    <div class="mb-3">
                        <label for="ivclVoiceName" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="ivclVoiceName" placeholder="Enter name">
                    </div>

                    <!-- File Upload Area -->
                    <div class="file-upload-area border rounded p-4 text-center mb-3"
                        style="border: 2px dashed #dee2e6; cursor: pointer;">
                        <i class="bi bi-upload" style="font-size: 24px;"></i>
                        <p class="mb-1">Click to upload a file or drag and drop</p>
                        <p class="small text-muted">Audio or Video files, up to 10MB each</p>
                        <!-- Hidden file input -->
                        <input type="file" id="ivclFileInput" accept="audio/*, video/*" style="display: none;" />
                    </div>

                    <!-- Separate Record Audio Section -->
                    <div class="text-center mb-3">
                        <h6>OR</h6>
                        <button class="btn btn-outline-primary" id="ivclRecordAudioBtn">Record Audio</button>
                        <!-- Stop Recording Button (Initially Hidden) -->
                        <button class="btn btn-outline-danger d-none" id="ivclStopRecording">Stop Recording</button>
                    </div>

                    <!-- List of uploaded files or recordings -->
                    <div id="ivclUploadedFiles" class="mt-3"></div>

                    <!-- Samples Info -->
                    <div class="alert alert-light border">
                        <h6>Preparing Your Voice for Cloning: Please Record Now </h6>

                        <p>Voice cloning is a cutting-edge technology that allows for the replication of a person's unique
                            vocal characteristics. By analyzing audio samples, this technology can recreate a speaker’s
                            voice with high accuracy. Applications of voice cloning span from personalized virtual
                            assistants to creating digital avatars for entertainment. The process involves deep learning
                            algorithms that capture nuances like tone, pitch, and accent. This enables the creation of
                            realistic, custom voiceovers for various projects. Voice cloning can also help individuals
                            preserve their voices or restore lost ones. Ethical use and consent are critical in this
                            emerging field.</p>
                    </div>
                    <div class="mb-3">
                        <h6>Samples <span id="ivclSampleCount">0 / 25</span></h6>
                        <div id="ivclsamplestext" class="alert alert-light border" role="alert">
                            <i class="bi bi-info-circle-fill"></i>
                            No items uploaded yet. Upload audio samples of the voice you would like to clone. Sample quality
                            is more important than quantity. Noisy samples may give bad results. Providing more than 5
                            minutes of audio in total brings little improvement.
                        </div>
                        <!-- Add this div for displaying the uploaded/recorded audios -->
                        <div id="ivclSamplesList"></div>
                    </div>

                    <!-- Labels Info -->
                    <div class="mb-3">
                        <h6>Labels <span id="ivclLabelCount">0 / 5</span></h6>
                        <div class="alert alert-light border" role="alert" id="ivclLabelList">
                            <i class="bi bi-info-circle-fill"></i> No labels. Click <i class="bi bi-plus"
                                id="ivclAddLabelBtn" style="cursor: pointer;"></i> to add a first one.
                            <div class="mt-2">
                                <input type="text" id="ivclLabelKeyInput" class="form-control d-none"
                                    placeholder="Enter label key" maxlength="20">
                                <input type="text" id="ivclLabelValueInput" class="form-control d-none mt-1"
                                    placeholder="Enter label value" maxlength="20">
                                <button id="ivclAddLabelConfirmBtn" class="btn btn-sm btn-primary mt-2 d-none">Add
                                    Label</button>
                            </div>
                        </div>
                    </div>

                    <!-- Description Textarea -->
                    <div class="mb-3">
                        <label for="ivclVoiceDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="ivclVoiceDescription" rows="3"
                            placeholder="How would you describe the voice? e.g. 'An old American male voice with a slight hoarseness in his throat. Perfect for news.'"></textarea>
                    </div>

                    <!-- Terms & Conditions Checkbox -->
                    <div class="mb-3 d-flex justify-content-between gap-2 position-relative">
                        <input type="checkbox" id="ivclTermsConditions" class="cheakBox2">
                        <label for="ivclTermsConditions" class="form-label small">
                            I hereby confirm that I have all necessary rights or consents to upload and clone these voice
                            samples and that I will not use the platform-generated content for any illegal, fraudulent, or
                            harmful purpose. I reaffirm my obligation to abide by the platform's <a href="#"
                                class="text-decoration-underline">Terms of Service</a> and <a href="#"
                                class="text-decoration-underline">Privacy Policy</a>.
                        </label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <div class="d-grid">
                        <button class="btn btn-primary d-none" type="button" id="spinnerCloneVoice" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Cloning...
                        </button>
                        <button type="button" id="ivclAddVoiceBtn" class="btn btn-primary">Clone Voice</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Instant Voice Cloning Modal --}}

    {{-- Voice Record Modal --}}
    <div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="recordModalLabel">Record Audio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p id="recordStatus" class="text-muted">Press "Start" to begin recording your audio.</p>
                    <button id="startRecording" class="btn btn-danger">Start Recording</button>
                    <button id="stopRecording" class="btn btn-success d-none">Stop Recording</button>
                    <audio id="audioPreview" controls class="d-none mt-3"></audio>
                </div>
            </div>
        </div>
    </div>
    {{-- Voice Record Modal --}}


@stop

@section('bottom-scripts')
    {{-- Circle Related Scripts --}}
    <script>
        $(document).ready(function() {
            $('.circle').each(function() {
                // Generate random gradient
                var randomGradient = generateRandomGradient();
                // Apply the gradient as background to each .circle
                $(this).css('background', randomGradient);
            });

            $('.circle').on('click', function() {
                // Get the audio element within the clicked circle
                var audio = $(this).find('audio')[0];

                // Pause any other playing audio first
                $('audio').each(function() {
                    this.pause();
                    this.currentTime = 0; // Reset audio to start
                });

                // Play the audio
                audio.play();
            });
        });

        // Function to generate random gradients
        function generateRandomGradient() {
            var color1 = getRandomColor();
            var color2 = getRandomColor();
            var color3 = getRandomColor();

            return `linear-gradient(135deg, ${color1}, ${color2}, ${color3})`;
        }

        // Function to generate a random hex color
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>

    {{-- Tooltip Badges --}}
    <script>
        $(document).ready(function() {
            // Initialize tooltips on document load
            $('[data-bs-toggle="tooltip"]').tooltip();

            // If you have pagination or dynamically loaded content, use delegation
            $(document).on('mouseenter', '[data-bs-toggle="tooltip"]', function() {
                $(this).tooltip('show');
            });
        });
    </script>

    {{-- Limiting Voice Design Input --}}
    <script>
        $(document).ready(function() {
            $('#voiceTextArea').on('input', function() {
                var currentLength = $(this).val().length;
                $('#charCount').text(currentLength + ' / 1000');
            });
        });
    </script>

    {{-- Instant Voice Clone Modal Scripts --}}
    <script>
        $(document).ready(function() {
            let mediaRecorder;
            let recordedChunks = [];
            let recordedBlob = null; // Store the recorded audio as a Blob

            // Handle file upload when clicking the upload area
            $('.file-upload-area').on('click', function() {
                // Prevent double or infinite trigger of the click event
                if (!$(this).data('clicked')) {
                    $(this).data('clicked', true); // Set a flag to prevent re-triggering
                    $('#ivclFileInput').click();
                    $('.file-upload-area').data('clicked', false);
                }
            });

            $('#ivclFileInput').on('change', function() {
                $('.file-upload-area').data('clicked', false);
            });

            // Once the file input is opened or closed, reset the clicked flag
            $('#ivclFileInput').on('change', function() {
                disEveRemove()
                $('.file-upload-area').data('clicked',
                    false); // Reset the clicked flag after choosing a file
                var file = this.files[0]; // Handle file selection
                if (file) {
                    var fileItem = $(
                        '<div class="alert alert-info">File uploaded: <div class="d-flex align-items-center justify-content-between">' +
                        file.name +
                        ' <div class="d-flex align-items-center"><i class="lni lni-trash remaudiobtn fs-2 align-items-center text-danger"></i></div></div>'
                    );
                    $('#ivclSamplesList').append(fileItem);
                    addEveRemove()
                    fileItem.data('file', file); // Store the file data in the element for later use
                    updateSampleCount();
                }
            });

            // Handle drag and drop functionality
            $('.file-upload-area').on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(this).addClass('dragging');
            });

            $('.file-upload-area').on('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(this).removeClass('dragging');
            });

            $('.file-upload-area').on('drop', function(e) {
                disEveRemove()
                e.preventDefault();
                e.stopPropagation();
                $(this).removeClass('dragging');

                var files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    var file = files[0];
                    var fileItem = $(
                        '<div class="alert alert-info">File uploaded: <div class="d-flex align-items-center justify-content-between">' +
                        file.name +
                        '<button style="margin-top: 10px;" class="btn btn-sm btn-danger px-2 radius-10 remaudiobtn"><i class="lni lni-trash"></i></button></div></div>'
                    );
                    addEveRemove()
                    $('#ivclSamplesList').append(fileItem);
                    fileItem.data('file', file); // Store the file data in the element for later use
                    updateSampleCount();
                }
            });

            // Record audio functionality using MediaRecorder API
            $('#ivclRecordAudioBtn').on('click', function() {
                disEveRemove()
                navigator.mediaDevices.getUserMedia({
                        audio: true
                    })
                    .then(function(stream) {
                        mediaRecorder = new MediaRecorder(stream);
                        mediaRecorder.start();
                        recordedChunks = []; // Clear previous recordings

                        $('#ivclRecordAudioBtn').addClass('d-none'); // Hide the record button
                        $('#ivclStopRecording').removeClass('d-none'); // Show the stop button

                        mediaRecorder.ondataavailable = function(e) {
                            recordedChunks.push(e.data);
                        };

                        mediaRecorder.onstop = function() {
                            recordedBlob = new Blob(recordedChunks, {
                                type: 'audio/webm'
                            });
                            var audioURL = URL.createObjectURL(recordedBlob);

                            var audioItem = $(
                                '<div class="alert alert-success">Audio recorded: <div class="d-flex"> <audio controls src="' +
                                audioURL +
                                '"></audio> <button style="margin-top: 10px;" class="btn btn-sm btn-danger px-2 radius-10 remaudiobtn"><i class="lni lni-trash"></i></button></div></div>'
                            );
                            $('#ivclSamplesList').append(audioItem);
                            audioItem.data('recordedBlob',
                                recordedBlob); // Store the recorded blob for later use
                            updateSampleCount();
                            addEveRemove()

                            // Reset buttons
                            $('#ivclRecordAudioBtn').removeClass(
                                'd-none'); // Show the record button
                            $('#ivclStopRecording').addClass('d-none'); // Hide the stop button
                        };
                    })
                    .catch(function(err) {
                        alert('Error accessing microphone: ' + err.message);
                    });
            });

            // Handle stopping the audio recording
            $('#ivclStopRecording').on('click', function() {
                if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                    mediaRecorder.stop();
                }
            });

            // Label adding functionality
            var maxLabels = 5;
            var currentLabelCount = 0;
            var labelsAssoc = {};

            $('#ivclAddLabelBtn').on('click', function() {
                if (currentLabelCount < maxLabels) {
                    $('#ivclLabelKeyInput').removeClass('d-none').focus();
                    $('#ivclLabelValueInput').removeClass('d-none');
                    $('#ivclAddLabelConfirmBtn').removeClass('d-none');
                } else {
                    alert('You can only add up to ' + maxLabels + ' labels.');
                }
            });

            $('#ivclAddLabelConfirmBtn').on('click', function() {
                addLabel();
            });

            $('#ivclLabelKeyInput, #ivclLabelValueInput').on('keypress', function(e) {
                if (e.which == 13) { // Enter key pressed
                    addLabel();
                }
            });

            function addLabel() {
                var labelKey = $('#ivclLabelKeyInput').val().trim();
                var labelValue = $('#ivclLabelValueInput').val().trim();

                if (labelKey && labelValue && currentLabelCount < maxLabels) {
                    // Add the label to the labelsAssoc object
                    labelsAssoc[labelKey] = labelValue;
                    currentLabelCount++;

                    // Append the key-value pair as a label in the UI
                    $('#ivclLabelList').append(
                        '<span class="badge bg-primary me-1">' +
                        labelKey + ': ' + labelValue +
                        ' <i class="bi bi-trash ivclRemoveLabel" data-label-key="' + labelKey + '"></i>' +
                        '</span>'
                    );

                    // Reset the input fields and hide them
                    $('#ivclLabelKeyInput').val('').addClass('d-none');
                    $('#ivclLabelValueInput').val('').addClass('d-none');
                    $('#ivclAddLabelConfirmBtn').addClass('d-none');
                    $('#ivclLabelCount').text(currentLabelCount + ' / ' + maxLabels);

                    // Hide the + button if max labels reached
                    if (currentLabelCount >= maxLabels) {
                        $('#ivclAddLabelBtn').addClass('d-none');
                    }
                } else if (!labelKey || !labelValue) {
                    alert('Both Key and Value fields must be filled.');
                }
            }

            $(document).on('click', '.ivclRemoveLabel', function() {
                var labelKey = $(this).data('label-key');
                delete labelsAssoc[labelKey]; // Remove the label from the object
                $(this).parent().remove(); // Remove the label from the UI
                currentLabelCount--;
                $('#ivclLabelCount').text(currentLabelCount + ' / ' + maxLabels);

                // Show the + button again if max labels not reached
                if (currentLabelCount < maxLabels) {
                    $('#ivclAddLabelBtn').removeClass('d-none');
                }
            })

            // Function to update the sample count
            function updateSampleCount() {
                var count = $('#ivclSamplesList .alert').length;
                $("#ivclsamplestext").addClass('d-none')
                $('#ivclSampleCount').text(count + ' / 25');
            }


            // Handle form submission
            $('#ivclAddVoiceBtn').on('click', function() {
                let formData = new FormData();
                formData.append('voice_name', $('#ivclVoiceName').val());
                formData.append('voice_description', $('#ivclVoiceDescription').val());

                // Append uploaded files
                $('#ivclSamplesList .alert').each(function(index, element) {
                    var file = $(element).data('file');
                    if (file) {
                        formData.append('samples[]', file); // Append each uploaded file
                    }

                    // Append recorded blob
                    var recordedBlob = $(element).data('recordedBlob');
                    if (recordedBlob) {
                        formData.append('samples[]', recordedBlob,
                            'recorded-audio.webm'); // Append the recorded audio blob
                    }
                });

                // Append labels
                formData.append('labels', JSON.stringify(labelsAssoc))

                // Append other necessary data
                formData.append('_token', '{{ csrf_token() }}'); // Include CSRF token for Laravel

                $.ajax({
                    url: '{{ route('agency.clone.voice') }}', // Your API endpoint or route
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $("#ivclAddVoiceBtn").prop("disabled", true);
                        $("#ivclAddVoiceBtn").addClass("d-none");
                        $("#spinnerCloneVoice").removeClass("d-none");
                        $("#errorCloneVoice").addClass("d-none");
                    },
                    success: function(response) {
                        toast('success', 'Voice added successfully');
                        $("#ivclAddVoiceBtn").prop("disabled", false);
                        $("#ivclAddVoiceBtn").removeClass("d-none");
                        $("#spinnerCloneVoice").addClass("d-none");
                        setTimeout(() => {
                            window.location.href = "{{ route('agency.voices') }}"
                        }, 1000);
                        // You can add more logic here to handle success
                    },
                    error: function(error) {
                        console.log('Error:', error);
                        toast('error', 'Failed to add voice');
                    }
                });
            });

            function addEveRemove() {
                $(".remaudiobtn").on('click', function() {
                    $(this).closest('.alert').remove()
                    updateSampleCount()
                })
            }

            function disEveRemove() {
                $(".remaudiobtn").off('click');
            }
        });
    </script>

    {{-- Generate Voice --}}
    <script>
        $(function() {
            $("#generateVoicebtn").click(function() {
                $("#VoiceDesignForm").submit()
            })

            function updateLabels() {
                // Retrieve the current values from the form fields
                let age = $("#ageSelect").val();
                let gender = $("#genderSelect").val();
                let accent = $("#accentSelect").val();

                // Clear existing labels
                $("#labelContainer").html('');

                // Add new labels dynamically
                if (age) {
                    $("#labelContainer").append(
                        `<span class="badge bg-primary me-2">age: ${age} <i class="bi bi-trash remove-label"></i></span>`
                    );
                }
                if (gender) {
                    $("#labelContainer").append(
                        `<span class="badge bg-secondary me-2">gender: ${gender} <i class="bi bi-trash remove-label"></i></span>`
                    );
                }
                if (accent) {
                    $("#labelContainer").append(
                        `<span class="badge bg-info me-2">accent: ${accent} <i class="bi bi-trash remove-label"></i></span>`
                    );
                }
            }

            $("#VoiceDesignForm").on("submit", function(e) {
                e.preventDefault();

                // Get all checkboxes
                let formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                updateLabels();


                $.ajax({
                    url: "{{ route('agency.generate.voice') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    xhrFields: {
                        responseType: 'blob' // Treat the response as a binary Blob (e.g., audio file)
                    },
                    beforeSend: function() {
                        $('#voiceDesignModal .modal-body audio').remove();
                        $("#generateVoicebtn").prop("disabled", true);
                        $("#generateVoicebtn").addClass("d-none");
                        $("#spinnerVoiceDesign").removeClass("d-none");
                        $("#errorVoiceDesign").addClass("d-none");
                    },
                    success: function(data, status, jqXHR) {
                        let contentType = jqXHR.getResponseHeader('Content-Type');
                        let generatedVoiceId = jqXHR.getResponseHeader('Generated-Voice-Id');
                        toast('success', 'Voice added successfully');
                        if (contentType && contentType.indexOf('audio/mpeg') !== -1) {
                            let audioURL = URL.createObjectURL(
                                data); // Blob is already passed in 'data'
                            let audioPlayer = `<audio controls src="${audioURL}"></audio>`;

                            $('#voiceDesignModal .modal-body').append(audioPlayer);

                            localStorage.setItem('generated_voice_id', generatedVoiceId)
                        } else {
                            let reader = new FileReader();
                            reader.onload = function() {
                                let responseText = reader.result;
                                let jsonResponse = JSON.parse(responseText);
                                console.log('JSON response:', jsonResponse);
                            };
                            reader.readAsText(data);
                        }

                        $("#useVoiceBtn").prop("disabled", false)
                        $("#spinnerVoiceDesign").addClass("d-none");
                        $("#generateVoicebtn").prop("disabled", false);
                        $("#generateVoicebtn").removeClass("d-none");
                    },
                    error: function(error) {
                        console.log(error);
                        $("#errorVoiceDesign").html(error.responseJSON.message || error
                            .responseJSON.error);
                        $("#errorVoiceDesign").removeClass("d-none");
                        $("#spinnerVoiceDesign").addClass("d-none");
                        $("#generateVoicebtn").prop("disabled", false);
                        $("#generateVoicebtn").removeClass("d-none");
                        toast("error", "Please check error list")
                    }
                });
            });
        });
    </script>

    {{-- Create Voice Modal Script --}}
    <script>
        $(document).ready(function() {
            $('#useVoiceBtn').click(function() {
                $('#voiceDesignModal').modal('hide');
                setTimeout(function() {
                    $('#createVoiceModal').modal('show');
                }, 500);
            });
        });

        $(document).ready(function() {
            $("#createVoicebtn").click(function() {
                $("#CreateVoiceForm").submit()
            })

            let labelCount = 3; // Current label count
            const maxLabels = 5; // Maximum allowed labels

            $("#addLabelBtn").click(function() {
                if (labelCount < maxLabels) {
                    $("#labelInputContainer").removeClass("d-none");
                    $("#addLabelBtn").addClass("d-none");
                } else {
                    alert("You cannot add more than 5 labels.");
                }
            });

            $("#saveLabelBtn").click(function(e) {
                e.preventDefault()
                let labelKey = $("#labelKeyInput").val().trim();
                let labelValue = $("#labelValueInput").val().trim();

                if (labelKey && labelValue) {
                    if (labelCount >= maxLabels) {
                        alert("Maximum 5 labels allowed!");
                        return;
                    }

                    $("#labelContainer").append(`
                    <span class="badge bg-light text-dark me-2">
                        ${labelKey}: ${labelValue}
                        <i class="bi bi-trash remove-label" style="cursor:pointer;"></i>
                    </span>
                `);

                    labelCount++;
                    $("#labelCount").text(`${labelCount} / ${maxLabels}`);

                    $("#labelInputContainer").addClass("d-none");
                    $("#addLabelBtn").removeClass("d-none");
                    $("#labelKeyInput").val(''); // Reset input
                    $("#labelValueInput").val('');

                } else {
                    alert("Both key and value are required.");
                }
            });

            $(document).on("click", ".remove-label", function() {
                $(this).closest("span").remove();
                labelCount--;
                $("#labelCount").text(`${labelCount} / ${maxLabels}`);

                if (labelCount < maxLabels) {
                    $("#addLabelBtn").removeClass("d-none");
                }
            });

            // Trigger form submission (as per your logic)
            $("#CreateVoiceForm").on("submit", function(e) {
                e.preventDefault();

                let formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                $("#labelContainer span").each(function() {
                    let labelText = $(this).text().trim(); // Get the label text
                    let labelKeyValue = labelText.split(":"); // Split into key and value

                    if (labelKeyValue.length === 2) {
                        let labelKey = labelKeyValue[0].trim();
                        let labelValue = labelKeyValue[1].trim();
                        formdata.append(`labels[${labelKey}]`, labelValue); // Append to FormData
                    }
                });
                let voice_id = localStorage.getItem('generated_voice_id')
                formdata.append('generated_voice_id', voice_id)

                // AJAX call to submit the form
                $.ajax({
                    url: "{{ route('agency.create.voice') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $('#voiceDesignModal .modal-body audio').remove();
                        $("#createVoicebtn").prop("disabled", true);
                        $("#createVoicebtn").addClass("d-none");
                        $("#spinnerCreateVoice").removeClass("d-none");
                        $("#errorCreateVoice").addClass("d-none");
                    },
                    success: function(res) {
                        let obj = res;

                        if (obj.error) {
                            $("#errorCreateVoice").html(obj.error);
                            $("#errorCreateVoice").removeClass("d-none");
                            $("#spinnerCreateVoice").addClass("d-none");
                            $("#createVoicebtn").removeClass("d-none");
                            toast("error", "Please check error list")
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#spinnerCreateVoice").addClass("d-none");
                            toast('success', 'Voice added successfully');
                            setTimeout(function() {
                                window.location.href = "{{ route('agency.tts') }}";
                            }, 1000);
                        } else {
                            $("#spinnerCreateVoice").addClass("d-none");
                            $("#createVoicebtn").prop("disabled", false);
                            $("#createVoicebtn").removeClass("d-none");
                            $(window).scrollTop(0);
                            toast("error", "Something went wrong")

                        }

                        $("#createVoicebtn").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error);
                        $("#errorCreateVoice").html(error.responseJSON.message || error
                            .responseJSON.error);
                        $("#errorCreateVoice").removeClass("d-none");
                        $("#spinnerCreateVoice").addClass("d-none");
                        $("#createVoicebtn").prop("disabled", false);
                        $("#createVoicebtn").removeClass("d-none");
                        toast("error", "Please check error list")
                    }
                });
            });
        });
    </script>

@stop