@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Evaluation Form Page')

{{-- Style Section --}}
@section('style')

    <style>

        .p-10 {
            padding: 10px;
        }
        .b-radius-10 {
            border-radius: 10px;
        }
        .header-field{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .section-one {
            border-radius: 10px;
            height: 18rem;
            background-color: white;
            margin: 2% 0;
        }
        .section-voice{
            border-radius: 10px;
            height: 12rem;
            background-color: white;
            margin: 2% 0;
            padding: 1.5rem 1rem;
        }
        .section-none-voice{
            border-radius: 10px;
            height: 4rem;
            background-color: white;
            margin: 2% 0;
            padding: 1.5rem 1rem;
        }
        .btn-sm {
    text-align: center;
    background-image: linear-gradient(to right, #02a34e, #abc959);
    border: none;
    color: white;
    transition: all 0.3s ease; /* Apply transition to all properties */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.btn-sm:hover {
    transform: scale(1.01); /* Apply a subtle zoom effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}
        .section-one-head{
            height: 20%;
            background-image: linear-gradient(to right, #02a34e , #abc959);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .section-one-field{
            height: 80%;
            padding: 2%;
            overflow: auto;
        }
        .shadow{
            box-shadow: 0 0.1rem 1rem #00000026!important;
        }
        .custom-select select {

            border-radius: 0px;
            cursor: pointer;
        }
        .arrow-icon {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            pointer-events: none;
            fill: #00a34e;
            width: 36px;
            height: 32px;
        }
        .form-control{
            font-weight: 300;
            border-radius: 0;
        }
        .col-form-label{
            font-weight: 500;
        }
        .section-tow{
            border-radius: 10px;
            height: 18rem;
            background-color: white;
            margin: 2% 0;
            display: flex;
            flex-direction: row;
        }
        .section-tow-boxes{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .section-tow-chart{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: row;
            position: relative;
        }
        .section-tow-chart::before {
            content: '';
            position: absolute;
            left: 0;
            top: 22px;
            height: 84%;
            width: 2px;
            background-color: #d0caca;
        }
        .row-box-one{
            height: 50%;
            padding: 4% 4% 1%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .row-box-tow{
            height: 50%;
            padding: 2% 4% 3%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .box{
            box-shadow: 0 0.0rem .5rem #00000026!important;
            width: 45%;
            height: 100%;
            border-radius: 10px;
            padding: 2%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .box-number{
            font-size: 20px;
        }
        .box-text{
            font-weight: 400;
        }
        .green-color{
            background-color: #08a54f;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .yellow-color{
            background-color: #bbcf34;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .beige-color{
            background-color: #e8cf4d;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .orange-color{
            background-color: #cf810b;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .red-color{
            background-color: #a82020;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .section-tow-colors-group{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 3%;
        }
        .section-tow-circle-chart{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 75%;
            margin: 35px 5%;
        }

        .box-color{
            height: 13%;
            display: flex;
            flex-direction: row;
        }
        .text-span{
            margin-left: 7%;
            margin-top: 1.7%;
        }
        .section-three{
            border-radius: 10px;
            margin-bottom: 2%;
        }
        .section-three-container{
            padding: 1% 2%;
        }
        .container-color{
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            padding-top: 1%;
            margin-bottom: 1%;
        }
        .green-color-2{
            background-color: #08a54f;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .yellow-color-2{
            background-color: #bbcf34;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .text-span-2{
            margin-left: .5%;
            margin-right: 2%;
            padding-top: 4px;
        }
        .div-table{
            border: 1px solid #d0caca;
            border-radius: 10px;
        }
        .table{
            margin-bottom: 0;
        }
        .table-header{
            text-align: center;
            background-color: #f3f3f3;
            color: #707f77;
            height: 55px !important;
            vertical-align: middle;
        }
        .table-header-2{
            text-align: center;
            background-color: #f3f3f3;
            color: #707f77;
            vertical-align: middle;
        }
        textarea{
            resize: none;
        }
        .group-table{
            height: 45px !important;
            background-color: #08a54f !important;
            color: white;
            vertical-align: middle;
        }

        .group-table-2{
            background-color: #08a54f !important;
            color: white !important;

        }
        .group-table-th{
            border: none;
            text-align: center;
        }
        .group-header{
            background-color: #bbcf34 !important;
            color: white !important;
        }
        .group-header-2{
            background-color: #bbcf34 !important;
            color: white !important;
        }
        .td-style{
            text-align: center;
        }
        .text-area{
            height: 37.22px !important;
            overflow: hidden;
        }
        .group-weight{
            background-color: #ececec !important;
            height: 45px !important;
        }
        .group-weight-th{
            font-weight: 500;
        }
        .group-weight-th-number{
            font-weight: 500;
            text-align: center;
        }
        .section-four{
            display: flex;
            margin-bottom: 5%;
        }
        .btn-submit-div{
            text-align: end;
        }
        .btn-color {
            width: 142px;
            height: 39px;
            background-color: #00a34e;
            border-color: #00a34e;
        }
        #myChart{
            height: 119% !important;
            width: 119% !important;
        }
        .select-value{
            text-align: center;
        }
        td,th{
            word-break: break-word;
        }
        .container-table{
            margin-bottom: 3%;
        }
        textarea:focus{
            background-color: white;
        }
        .text-area-last{
            background-color: #eaebeb;
        }
        .group-comment{
            text-align: center;
            height: 45px !important;
            background-color: #08a54f !important;
            color: white;
            vertical-align: middle;
        }

    #playButton, #pauseButton ,#openSpeedSelectorButton  {
      font-size: 16px;
      cursor: pointer;
      width: 45px;
      height: 45px;
    }
    #openSpeedSelectorButton  {
      font-size: 16px;
      cursor: pointer;

    }
    #playButton {
      background-color: #abc959;
      color: white;
      border: none;
    }

    #pauseButton {
      background-color: #02a34e;
      color: white;
      border: none;
    }
    #openSpeedSelectorButton {
    background-color: #2196F3;
      color: white;
      border: none;
    }
    .parent-btn{
        text-align: center;
        margin-top: .5%;
    }
    #waveform {
              cursor: pointer;
              position: relative;
            }
            
            #time,
            #duration {
              position: absolute;
              z-index: 11;
              top: 50%;
              margin-top: -1px;
              transform: translateY(-50%);
              font-size: 11px;
              background: rgba(0, 0, 0, 0.75);
              padding: 2px;
              color: #ddd;
            }
            #time {
              left: 0;
            }
            #duration {
              right: 0;
            }
            /* Modal content */
            .modal-content3 {
                /* margin: 15% auto; */
                padding: 12px 8px;
                width: 8%;
                border: 1px solid #e7e7eb;
                color: white;
                border-radius: 7px;
                background-color: white;
                position: absolute;
                right: 44%;
            }

            .selectTaq {
                    border: 1px solid #e7e7eb;
                    width: 100%;
                    cursor: pointer;
            }
    </style>




@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid">

        <livewire:tenant.supervisor.evaluation.submit-evaluation-form :evaluation_id="$evaluation_id"/>

    </div>
@endsection

{{-- Script Section --}}
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
    <script src="https://unpkg.com/wavesurfer.js@7/dist/plugin/wavesurfer.timeline.min.js"></script>
    <script src="https://unpkg.com/wavesurfer.js@7/dist/plugin/wavesurfer.minimap.min.js"></script>


    <script type="module">

        document.addEventListener('DOMContentLoaded', function() {
            
       
     
            Livewire.emit('callFunctionFromJS');

        window.addEventListener('open-modal', event => {
            document.getElementById('modal').style.display='';
            document.getElementById('dropZone').style.display='none';
        });
        window.addEventListener('close-modal', event => {
            document.getElementById('modal').style.display='none';
            document.getElementById('dropZone').style.display='';
        });
        window.addEventListener('off-checkbox', event => {

        });
 
        let myChart = null;
        let textValueCenter = null;
        
        
        window.addEventListener('chart', (event) => {

            const qualityPercentage = event.detail.qualityPercentage;
            const chartColor = event.detail.chartColor;
            document.getElementById('myChart').innerHTML=null;
            const ctx = document.getElementById('myChart');
            if (myChart !== null) {
                myChart.destroy(); // Destroy the chart if it exists
                myChart = null; // Reset the chart variable
            }
            textValueCenter = 'Quality Percentage  '+ qualityPercentage + '%', 'myChart';
            const data = {
                labels: [
                    'AHT',],
                datasets: [{

                    data: [qualityPercentage, 100 - qualityPercentage],
                    backgroundColor: [
                        chartColor,
                        '#b8e6ce'

                    ],
                    borderWidth: 1,
                    hoverOffset: 0
                }],


            };
            const options = {
                cutout: 90,
                responsive: true,
                aspectRatio: 1,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                        position: 'chartArea',
                        align: 'center',
                        labels: {
                            color: 'darkred',
                            font: {
                                weight: 'bold'
                            }
                        }
                    }
                }

            };
            const config = {
                type: 'doughnut',
                data: data,
                options, options,
                radius: 1
            };

            myChart = new Chart(ctx, config, options);
            textCenter('Quality Percentage  '+ qualityPercentage + '%', 'myChart');
            function textCenter(val, containerName) {

                Chart.register({
                    id: 'myGraphText',
                    beforeDraw: function (chart) {
                        if (chart.canvas.id != containerName) {
                            return 0;
                        }

                        var width = chart.width,
                            height = chart.height,
                            ctx = chart.ctx;

                        ctx.restore();
                        val = textValueCenter;
                        var fontSize = (height / 150).toFixed(2);

                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
                        // console.log(val);
                        var words = val.split(' ');
                        var textY = height / 2 - ((words.length - 1) * 10);
                        var x = 0;
                        words.forEach(function (word) {
                            var textX = Math.round((width - ctx.measureText(word).width) / 2);

                            if (x < 2) {
                                ctx.font = `20px em sans-serif`;
                                ctx.fillStyle = '#d0caca';
                                ctx.fillText(word, textX, textY);
                            } else {
                                ctx.fillStyle = 'black';
                                ctx.font = `bold ${fontSize}em sans-serif`;
                                ctx.fillText(word, textX, textY);
                            }

                            textY += 20;
                            x += 1;
                        });

                        ctx.save();
                    }
                });
            }
        });
        });

        window.addEventListener('scroll-up', event => {

            window.scrollTo(0, 0);

        });
  


        let voiceFileName; 
        // Listen for the voiceFileName event
        document.addEventListener('voice-File', function(event) {

            voiceFileName = event.detail.voiceFileName;
            // voiceFileName = "testAudio.wav";
        });
  
        // Function to close modal when clicking outside of it
        window.addEventListener('click', function(event) {
            const speedSelectorModal = document.getElementById('speedSelectorModal');
            const openSpeedSelectorButton = document.getElementById('openSpeedSelectorButton');
            const speedSelector = document.getElementById('speedSelector');
            if (event.target !== speedSelectorModal && event.target !== openSpeedSelectorButton && event.target !== speedSelector) {
                speedSelectorModal.style.display = 'none'; // Hide the modal
            }
        });
        // Function to open modal when the button is clicked
        document.getElementById('openSpeedSelectorButton').addEventListener('click', function() {
            const speedSelectorModal = document.getElementById('speedSelectorModal');
            speedSelectorModal.style.display = 'block'; // Display the modal
        });

        // Close the modal when clicking outside of it
        window.onclick = function(event) {
            const speedSelectorModal = document.getElementById('speedSelectorModal');
            if (event.target == speedSelectorModal) {
                speedSelectorModal.style.display = 'none';
            }
        };
        import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js';

        let wavesurfer;  // Declare wavesurfer variable in a global scope
        const canvas = document.createElement('canvas')
                    const ctx = canvas.getContext('2d')
        // Function to initialize WaveSurfer and start playing audio
    const initializeWaveSurfer = () => {
            wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: '#03a34d',
                progressColor: '#a8c858',
                // url: '{{ asset("/voice/") }}/' + voiceFileName,
                // url: ' {{global_asset("testAudio.wav")}} ',
                url : '{{ asset("/voice/") }}' + '/' + voiceFileName,
                backend: 'MediaElement',
                responsive: true,
                normalize: false,
                barWidth: 7,
                barRadius: 20,
                responsive: true,
                height: 110,
                autoCenter: true,
            });

            const formatTime = (seconds) => {
                const minutes = Math.floor(seconds / 60)
                const secondsRemainder = Math.round(seconds) % 60
                const paddedSeconds = `0${secondsRemainder}`.slice(-2)
                return `${minutes}:${paddedSeconds}`
              }
            const timeEl = document.querySelector('#time')
            const durationEl = document.querySelector('#duration')
            wavesurfer.on('ready', function() {
                const duration = wavesurfer.getDuration();
                durationEl.textContent = formatTime(duration)
                const speedSelectorModal = document.getElementById('speedSelectorModal');
                speedSelectorModal.style.display = 'none';
            });
            // Update time display when playback reaches certain point
            wavesurfer.on('timeupdate', function(time) {
                const formattedTime = formatTime(time); // Format the current time
                document.getElementById('time').textContent = formattedTime; // Update the time display in the div
            });
            // Listen for the 'finish' event to detect when the audio playback finishes
            wavesurfer.on('finish', function() {
                document.getElementById('pauseButton').style.opacity = 1;
                document.getElementById('playButton').style.opacity = 1;
            });
            // Listen for changes in playback speed
            document.getElementById('speedSelector').addEventListener('change', function() {
                const selectedSpeed = parseFloat(this.value); // Get the selected playback speed
                wavesurfer.setPlaybackRate(selectedSpeed); // Set the playback speed of the audio
                speedSelectorModal.style.display = 'none';
                document.getElementById('openSpeedSelectorButton').textContent = this.value + "x";
            });
            };
            // Event listener for the button click to initialize WaveSurfer
            document.getElementById('playButton1').addEventListener('click', () => {
                // Check if the AudioContext is suspended, and resume it if needed
                if (typeof Tone !== 'undefined' && Tone.context.state === 'suspended') {
                    Tone.context.resume().then(() => {
                        initializeWaveSurfer();
                    });
                } else {
                    initializeWaveSurfer();
                }
            });
            // Event listener for the play button
            document.getElementById('playButton').addEventListener('click', () => {
                if (wavesurfer && !wavesurfer.isPlaying()) {
                    wavesurfer.play();
                    document.getElementById('playButton').style.opacity = .5;
                    document.getElementById('pauseButton').style.opacity = 1;
                }
            });
            // Event listener for the pause button
            document.getElementById('pauseButton').addEventListener('click', () => {
                if (wavesurfer && wavesurfer.isPlaying()) {
                    wavesurfer.pause();
                    document.getElementById('pauseButton').style.opacity = .5;
                    document.getElementById('playButton').style.opacity = 1;
                }
            });
            // Initialize WaveSurfer when the DOM content is loaded
            document.addEventListener('DOMContentLoaded', () => {
                            setTimeout(() => {
                                document.getElementById('playButton1').click();
                            }, 500);
                    
                });
        </script>
@endsection