@extends('layout.master')
@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .preview-container img {
            max-width: 100px;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .preview-container {
            display: flex;
            flex-wrap: wrap;
        }
        .remove-btn {
            display: block;
            text-align: center;
            cursor: pointer;
            color: red;
            font-size: 14px;
        }
    </style>
    
    <div class="section-body">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header row">
                    <div class="col-md-10">
                        <h4>Add Notes</h4>
                    </div>
                </div>
                <form method="POST" action="{{ route('note.store') }}" enctype="multipart/form-data" style="width: 75%; margin-left:30px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                    @csrf
                    
                    <div class="form-group" style="margin-bottom: 15px; align-items: center;">
                        <label for="note" class="col-sm-2 col-form-label" style="font-weight: bold; font-size: 14px; padding-left: 20px; color: #333;">Add Note</label>
                        <div class="col-sm-6">
                            <textarea name="note" required class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom: 15px; align-items: center;">
                        <label for="filespdf" class="col-sm-2 col-form-label" style="font-weight: bold; font-size: 14px; padding-left: 20px; color: #333;">File Upload</label>
                        <div class="col-sm-6">
                            <input type="file" id="images-input" name="filespdf[]" multiple>
                            <div class="preview-container" id="preview-container"></div>
                        </div>
                        
                    </div>

                    
                    <div class="p-3">
                        <button type="button" id="start-recording" class="btn btn-success">Start Recording</button>
                        <button type="button" id="stop-recording" class="btn btn-danger">Stop Recording</button>
                    </div>

                    <div id="recordings-container" style="margin-top: 10px;"></div>

                    <div class="form-group mb-5">
                        <div class="col-sm-6 text-left" style="padding-left: 25px;">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>





@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

$(document).ready(function () {
    const previewContainer = $('#preview-container');
    const imagesInput = $('#images-input');

    // Preview Images
    imagesInput.on('change', function () {
        previewContainer.empty(); // Clear previous previews
        const files = this.files;

        Array.from(files).forEach((file, index) => {
            const reader = new FileReader();

            reader.onload = function (event) {
                const imagePreview = `
                    <div class="preview-wrapper" data-index="${index}">
                        <img src="${event.target.result}" alt="Image Preview">
                        <span class="remove-btn" data-index="${index}">Remove</span>
                    </div>
                `;
                previewContainer.append(imagePreview);
            };

            reader.readAsDataURL(file);
        });
    });

    // Remove Image from Preview
    previewContainer.on('click', '.remove-btn', function () {
        const index = $(this).data('index');
        const previewWrapper = $(`.preview-wrapper[data-index="${index}"]`);
        previewWrapper.remove();

        // Remove the file from the input
        const files = Array.from(imagesInput[0].files);
        files.splice(index, 1);

        // Create a new FileList object
        const dataTransfer = new DataTransfer();
        files.forEach(file => dataTransfer.items.add(file));
        imagesInput[0].files = dataTransfer.files;
    });
});



    function confirmDelete(url) {
        Swal.fire({
            title: "Are you sure?",
            text: "This action cannot be undone!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel",
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url; // Redirect to the delete route
            }
        });
    }


$(document).ready(function () {
    $('#stop-recording').hide();
});

let mediaRecorder;
let audioChunks = [];
const recordings = []; // Array to store recording blobs
const startBtn = document.getElementById('start-recording');
const stopBtn = document.getElementById('stop-recording');
const recordingsContainer = document.getElementById('recordings-container');
const uploadButton = document.getElementById('upload-button');

startBtn.addEventListener('click', async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);
    audioChunks = [];

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

    mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
        const audioUrl = URL.createObjectURL(audioBlob);

        // Create a container for the new recording
        const recordingContainer = document.createElement('div');
        recordingContainer.style.marginBottom = '10px';
        recordingContainer.className = 'recording-item';

        // Create an audio element for preview
        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = audioUrl;

        // Create an input for the recording name
        const nameInput = document.createElement('input');
        nameInput.type = 'hidden';
        nameInput.name = `recordings[${recordings.length}][name]`; // Laravel-friendly array input name
        nameInput.value = 'audio';

        // Create a hidden input for the audio file
        const audioInput = document.createElement('input');
        audioInput.type = 'hidden';
        audioInput.name = `recordings[${recordings.length}][audio]`; // Laravel-friendly array input name

        // Convert the audio blob to Base64 and set the hidden input value
        const reader = new FileReader();
        reader.readAsDataURL(audioBlob);
        reader.onloadend = () => {
            audioInput.value = reader.result;
            uploadButton.disabled = false; // Enable upload button once the recording is ready
        };

        // Create a remove button
        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.style.marginLeft = '10px';
        removeButton.style.color = 'red';
        removeButton.style.border = 'none';
        removeButton.style.cursor = 'pointer';
        removeButton.style.background = 'transparent';

        removeButton.addEventListener('click', () => {
            // Remove the recording container from the DOM
            recordingContainer.remove();

            // Remove the recording from the `recordings` array
            const index = Array.from(recordingsContainer.children).indexOf(recordingContainer);
            if (index > -1) {
                recordings.splice(index, 1);
            }
        });

        // Append all elements to the container
        recordingContainer.appendChild(audioElement);
        recordingContainer.appendChild(nameInput);
        recordingContainer.appendChild(audioInput);
        recordingContainer.appendChild(removeButton);
        recordingsContainer.appendChild(recordingContainer);

        // Store the blob in case you need it later
        recordings.push(audioBlob);
    };

    mediaRecorder.start();
    startBtn.disabled = true;
    stopBtn.disabled = false;
    $('#stop-recording').show();
    $('#start-recording').hide();
});

stopBtn.addEventListener('click', () => {
    mediaRecorder.stop();
    startBtn.disabled = false;
    stopBtn.disabled = true;
    $('#start-recording').show();
    $('#stop-recording').hide();
});





       
    </script>
@endpush