@extends('includes.master')

<style>
    /* Default styles for all screen sizes */
    #preview-container {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ccc;
        font-weight: bold;
        width: 100%;
        max-width: 100vw;
    }

    #preview {
        max-width: 100%; /* Ensure the video does not exceed its container */
        max-height: 100%; /* Ensure the video does not exceed its container */
    }

    /* Styles for screens larger than or equal to 768px */
    @media (min-width: 768px) {
        #preview-container {
            width: 500px;
            height: 400px;
        }
    }

    /* Styles for screens smaller than 768px */
    @media (max-width: 767px) {
        #preview-container {
            height: auto;
            font-size: 4vw;
        }
    }
</style>
@section('content')

<div class="wizard-main">
	<div id="particles-js"></div>
	<div class="container">
		<div class="row">
		
			<div class="col-lg-6 login-sec mx-auto">
				<div class="login-sec-bg">
					<h2 class="text-center">Online Life Verification </h2>
					
                        <!--<h3 class="text-center p-2">Online Life Verification</h3>-->
						<fieldset class="form-input">

                            @include('includes.alerts')
                            
                          	<h4>Full Name</h4>
                            <input type="text" name="full_name" id="full_name" value="{{ $user->first_name ?? '' }} {{ $user->middle_name ?? '' }} {{ $user->last_name ?? '' }}" class="form-control" readonly><br>
							
							<h4>Aadhaar Number</h4>
                            <input type="text" name="aadhaar_no" id="aadhaar_no" value="{{ $aadharNumber }}" class="form-control"  readonly><br>

							<h4>Verification Code</h4>
														<input type="text" name="randomNo" id="randomNo" class="form-control" value="{{ $videoCode }}" readonly="" ><br>
							
                            	<p>
                                खाली दिलेल्या मराठी, हिंदी आणि इंग्लिश भाषेमधील कोणत्याही एका भाषेतलं वाक्य निवंडून तुम्हाला व्हिडिओ मध्ये बोलायचं आहे. 
                                <br>(Choose any one of the following  sentences from Marathi, Hindi and English language that you want to speak in the video.)<br>
                                निम्नलिखित मराठी ,हिंदी और अंग्रेजी भाषा में से कोई एक भाषा का वाक्य  चुने जिसे  आप  वीडियो में बोलना चाहते है 
                                </p>
                            
                                <h4>
                                  <strong> मराठी :</strong>
                                  "मी, {{ $user->first_name .' '.$user->last_name }}, व्हिडिओ कोड {{ $videoCode }} सह ,  BNCMC कडे पेंशन आणि eKYC साठी अर्ज करत आहे."                                
                                 </h4>

                                <h4>
                                    <strong>English :</strong>
                                    "I, {{ $user->first_name .' '.$user->last_name }}, with video code {{ $videoCode }}, have applied for pension and eKYC with BNCMC."
                                </h4>
                            
                                 <h4>
                                    <strong>हिंदी :</strong>
                                    "मैं, {{ $user->first_name .' '.$user->last_name }}, वीडियो कोड  {{ $videoCode }} के  साथ , BNCMC के  पेंशन और eKYC के लिए आवेदन कर रहा हूँ।"
                                </h4>
                         
                               
                            <div class="row">
                                    <div class="col-md-6">
                                        <!-- <h2>Preview</h2> -->
                                        

                                        <div id="preview-container"><video id="preview" autoplay muted></video> </div>
                                        <div id="timerDisplay"></div><br>
                                        
                                        <div class="btn-group">
                                            <div id="startButton" class="btn btn-success"> <i class="fa fa-play-circle" aria-hidden="true"></i> Start </div>
                                            <div id="stopButton" class="btn btn-danger"  style="display:none;"> <i class="fa fa-stop" aria-hidden="true"></i> Stop </div>
                                            <a id="retakeButton" class="btn btn-info" style="display: none;">Retake</a>
                                        </div><br>
                                        
                                    </div>
                                    <div class="col-md-6" id="recorded"  style="display:none">
                                        <h2>Recording</h2><br>
                                        <video id="recording" width="450" height="350" controls></video><br/><br/>
                                        <a id="downloadButton" class="btn btn-primary" data-url="">save</a>
                                        <a id="downloadLocalButton" class="btn btn-primary">Download</a>
                                    </div>
                            </div>
                            
                                <div id="loader" style="display: none;">
                                   <center> <img src="https://icons8.com/preloaders/preloaders/1488/Iphone-spinner-2-128.gif"alt="Loading..."></center>
                                </div>

		                        <div class="row">
		                           <div class="col-lg-6">
		                              <button id="saveVideo" style="display: none;" class="btn btn-warning mt-3 form-control">Save Recording </button>
		                           </div>
		                           <div class="col-lg-6">
		                              <a id="cancelButton" href="{{ url('/front') }}" style="display: none;" class="btn btn-warning mt-3 form-control">Cancel</a>
		                          </div>
		                        </div>
	                       
						</fieldset>
				
				</div>
			</div>			
		</div>
	</div>
</div>


@endsection
@section('js')
<script src="{{ asset('wizard/js/jquery.min.js') }}"></script>
<script>
    // JavaScript to set the video size based on screen width
    function setVideoSize() {
        const screenWidth = window.innerWidth;
        const previewContainer = document.getElementById("preview-container");

        if (screenWidth >= 768) {
            // For desktop or larger screens
            previewContainer.style.width = "500px";
            previewContainer.style.height = "400px";
        } else {
            // For mobile or smaller screens
            previewContainer.style.width = "100%";
            previewContainer.style.height = "auto";
        }
    }

    // Call the function when the page loads and when it's resized
    window.addEventListener("load", setVideoSize);
    window.addEventListener("resize", setVideoSize);
</script>


<script>

// function generateRandomFiveDigitNumber() {
//     let randomNumber = Math.floor(Math.random() * 100000);
//     let randomFiveDigitNumber = randomNumber.toString().padStart(5, '0');
//     return randomFiveDigitNumber;
// }

//   var randomNoInput = document.getElementById("randomNo");
//     randomNoInput.value = generateRandomFiveDigitNumber();


$(document).ready(function () {
     navigator.mediaDevices.getUserMedia({
        video: true,
        audio: false
    })
    let preview = document.getElementById("preview");
    let recording = document.getElementById("recording");
    let startButton = document.getElementById("startButton");
    let stopButton = document.getElementById("stopButton");
    let retakeButton = document.getElementById("retakeButton"); // New Retake button
    let downloadButton = document.getElementById("downloadButton");
    let logElement = document.getElementById("log");
    let recorded = document.getElementById("recorded");
    let downloadLocalButton = document.getElementById("downloadLocalButton");

    let recordingTimeMS = 120000; // Video limit 120 seconds
    var localstream;
    var mediaRecorder;
    var recordedChunks = [];


////////////////////////Timer Coutdown////////////////////////////////
let remainingTime = recordingTimeMS; // Initialize remaining time
var timeoutHandle;

function updateTimerDisplay() {
    var counter = document.getElementById("timerDisplay");
    var minutes = Math.floor(remainingTime / 60000); // Convert to minutes
    var seconds = ((remainingTime % 60000) / 1000).toFixed(0); // Convert to seconds and round

    if (seconds == 60) {
        minutes++; // Adjust when seconds reach 60
        seconds = 0;
    }

    // Format minutes and seconds to mm:ss
    var displayTime = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    counter.innerHTML = displayTime + " / 2:00"; // Append "/ 2:00" to the timer display


    if (remainingTime <= 0) {
        clearTimeout(timeoutHandle);
        // counter.innerHTML = "Recording complete";
        stopRecording(); // Your stopRecording logic here
    } else {
        remainingTime -= 1000;
    }
}

function startRecordingAndTimer() {
    if (timeoutHandle) {
        clearTimeout(timeoutHandle); // Clear any existing timer
    }
    remainingTime = recordingTimeMS; // Reset remaining time
    updateTimerDisplay();
    timeoutHandle = setInterval(updateTimerDisplay, 1000);
}

// Add an event listener to your stop button to clear the timer and remove the timer display
document.getElementById("stopButton").addEventListener("click", function() {
    clearInterval(timeoutHandle); // Clear the timer
    document.getElementById("timerDisplay").style.display = "none"; // Hide the timer container
});
////////////////////////Timer Coutdown////////////////////////////////


    window.log = function (msg) {
        console.log(msg);
    }

    window.wait = function (delayInMS) {
        return new Promise(resolve => setTimeout(resolve, delayInMS));
    }

    window.startRecording = function (stream, lengthInMS) {
        mediaRecorder = new MediaRecorder(stream);
        recordedChunks = [];

        mediaRecorder.ondataavailable = event => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        mediaRecorder.start();
        log(mediaRecorder.state + " for " + (lengthInMS / 1000) + " seconds...");

        let stopped = new Promise((resolve, reject) => {
            mediaRecorder.onstop = resolve;
            mediaRecorder.onerror = event => reject(event.name);
        });

        let recorded = wait(lengthInMS).then(
            () => mediaRecorder.state == "recording" && mediaRecorder.stop()
        );

        return Promise.all([
            stopped,
            recorded
        ])
            .then(() => recordedChunks);
    }

    var formData = new FormData();

    if (startButton) {
        startButton.addEventListener("click", function () {
            startButton.innerHTML = "Recording...";
            startButton.style.cursor = "not-allowed"; // Change cursor style to indicate non-clickable
            recorded.style.display = "none";
            stopButton.style.display = "inline-block";
            // downloadButton.innerHTML = "Please wait some time...";
            downloadButton.style.display = "none";

            // Include audio constraint to capture audio
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true // Enable audio recording
            }).then(stream => {
                preview.srcObject = stream;
                localstream = stream;
                preview.captureStream = preview.captureStream || preview.mozCaptureStream;
                return new Promise(resolve => preview.onplaying = resolve);
            }).then(() => startRecordingAndTimer()) // Start recording and timer
            .then(() => startRecording(preview.captureStream(), recordingTimeMS))
                .then(recordedChunks => {
                    let recordedBlob = new Blob(recordedChunks, {
                        type: "video/webm"
                    });
                    recording.src = URL.createObjectURL(recordedBlob);

                    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                    formData.append('video', recordedBlob);

                    downloadLocalButton.href = recording.src;
                    downloadLocalButton.download = "RecordedVideo.webm";
                    log("Successfully recorded " + recordedBlob.size + " bytes of " +
                        recordedBlob.type + " media.");
                    startButton.innerHTML = "Start";
                    stopButton.style.display = "none";
                    // recorded.style.display = "block";
                    // downloadButton.innerHTML = "Save";
                })
                .catch(log);
        }, false);
    }

    if (stopButton) {
        stopButton.addEventListener("click", function () {
            mediaRecorder.stop();
            localstream.getTracks().forEach(track => track.stop());
            startButton.style.display = "none";
            stopButton.style.display = "none";
           document.getElementById("saveVideo").style.display = "inline-block";
           document.getElementById("cancelButton").style.display = "inline-block";
        }, false);
    }

    if (retakeButton) {
        retakeButton.addEventListener("click", function () {
            // Hide the Retake button and reset the UI
            startButton.innerHTML = "Start again...";
            retakeButton.style.display = "none";
            startButton.style.display = "inline-block";
            recorded.style.display = "none";
            downloadButton.style.display = "none";
            recording.src = ""; // Clear the recorded video
        }, false);
    }

    if (downloadButton) {
        downloadButton.addEventListener("click", function () {
            $.ajax({
                url: this.getAttribute('data-url'),
                method: 'POST',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.success) {
                        location.reload();
                    }
                }
            });
        }, false);
    }

     // -- save
    if (saveVideo) {
        saveVideo.addEventListener("click", function () {
             if (recordedChunks.length === 0) {
               alert('Please record a video before saving.');
             } else {
                  var loader = document.getElementById("loader");
                  loader.style.display = "block"; // Show the loader
                 var recordedVideoBlob = new Blob(recordedChunks, { type: "video/webm" });
                 var recordedVideoFile = new File([recordedVideoBlob], "recordedVideo.webm");
                 var aadhaar_no = document.getElementById("aadhaar_no").value; 
                 var randomNo = document.getElementById("randomNo").value; 
                 formData.append('aadhaar_no', aadhaar_no);
                 formData.append('randomNo', randomNo);
                 formData.append('video', recordedVideoFile);
                 var aadhaar_no = localStorage.getItem('aadhaar_no');

                $.ajax({
                    url: '{{ route('saveVideo') }}', // Use the named route
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.success) {
                            // alert('Video saved successfully.'); // Display a success message
                            // var url = '{{ route('preview-video') }}' + '?aadhaar_no=' + aadhaar_no;
                            // window.location.href = url;
                            loader.style.display = "none"; // Hide the loader
                            var successMessage = 'Video saved successfully.';
                            var encodedMessage = encodeURIComponent(successMessage);
                            var url = '{{ route('preview-video') }}' + '?aadhaar_no=' + aadhaar_no + '&message=' + encodedMessage;
                            window.location.href = url;
                        }
                    }
                });  //ajax close
             }
            
        }, false);
    }
    //--save close



});

  //alert message
var successMessage = $(".alert-success,.alert-danger");
if (successMessage.length) {
    successMessage.fadeIn();
    setTimeout(function () {
        successMessage.fadeOut();
    }, 3000); // 3000 milliseconds = 3 seconds
}

</script>
@endsection