@extends('layouts.dashboard')

@section('CutomcsCInHead')
<style>
    .timeline {
        position: relative;
        background: #f9f9f9;
        border: 1px solid #ddd;
    }

    .timeline .marker {
        position: absolute;
        height: 2px;
        width:100px;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: -16px;
    }

    .timeline .marker.red {
        /* background-image: url('./assets/images/red-arrow.png'); */
        background-color: red;
        left: 14.5%;
    }

    .timeline .marker.blue {
        /* background-image: url('./assets/images/blue-arrow.png'); */
        background-color: blue;
        left: 34.3%;
    }

    .timeline .marker.green {
        /* background-image: url('./assets/images/green-arrow.png'); */
        background-color: green;
        left: 54.3%;
    }
    
    .timeline .time-label {
        position: absolute;
        bottom: -20px;
        font-size: 12px;
        margin-bottom: 0px;
    }

    .time-label.red {
        color: red;
        left: 15%;
    }

    .time-label.blue {
        color: blue;
        left: 34.4%;
    }

    .time-label.green {
        color: green;
        left: 54.3%;
    }

    .analysis-label {
        position: absolute;
        top: -20px;
        font-size: 12px;
        color: orange;
    }

    .score-box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ecef;
        height: 50%;
        font-size: 24px;
        font-weight: bold;
        margin-top: 30px;
        width: 126px;
    }

    /* audio {
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 22px;
            width: 100%;
        }

        .audio-time {
            font-size: 14px;
        }

        .audio-time span {
            font-weight: bold;
            color: red;
        }
        .audio-frequency {
            width: 100%;
            height: auto;
            background: #ddd;
            position: relative;
            padding: 5px 0;
        }

        .audio-frequency .bar {
            position: absolute;
            width: 2px;
            height: 10px;
            background: green;
            bottom: 0;
        } */

    .compare-section {
        border-top: 2px solid red;
        border-bottom: 2px solid red;
        padding: 10px 0;
    }

    table td,
    table th {
        text-align: center;
    }

    .comp-chk {
        width: 20px;
        height: 20px;
        display: flex;
        position: relative;
        left: 4px;
        top: 5px;
        float: right;
    }

    .recrd-chbk {
        width: 20px;
        height: 20px;
        position: relative;
        left: 4px;
    }

    /* Add the blink animation for markers */
    @keyframes blink {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.2;
        }

        100% {
            opacity: 1;
        }
    }

    .marker.blink {
        animation: blink 1s ease-in-out infinite;
    }

    .card {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 10px;
        margin-bottom: 50px;
        overflow: hidden;
        height: 100%;
        min-height: 310px;
    }

    #waveform {
        margin: 10px auto 0 auto;
        width: 100%;
        height: 50px;
    }

    .wave-wrapper wave {
        height: 50px !important;
        overflow: hidden !important;
    }

    .wave-wrapper canvas {
        height: 50px !important;
    }

    .btnplaypause {
        display: flex;
        justify-content: start;
        gap: 20px;
        position: relative;
        top: -25px;
    }

    .btn-voice-action {
        background-color: #04aa48;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    .btn-voice-action:hover {
        background-color: #00e676;
    }

    .time-display {
        font-size: 18px;
        margin-top: 15px;
        font-weight: normal;
    }

    .time-display span {
        color: #ff3b3b;
    }

    /* css for select box */
    .compare-drpdwn .dropdown {
        position: relative;
        font-size: 14px;
        color: #333;
        z-index: 111;
    }

    .compare-drpdwn .dropdown .dropdown-list {
        padding: 0px;
        background: #fff;
        position: absolute;
        top: 30px;
        left: 2px;
        right: 2px;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
        transform-origin: 50% 0;
        transform: scale(1, 0);
        transition: transform 0.15s ease-in-out 0.15s;
        max-height: 66vh;
        overflow-y: scroll;
    }

    .compare-drpdwn .dropdown .dropdown-option {
        display: block;
        padding: 8px 12px;
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }

    .compare-drpdwn .dropdown .dropdown-label {
        display: block;
        height: 30px;
        background: transparent;
        border: 1px solid #ccc;
        padding: 6px 12px;
        line-height: 1;
        cursor: pointer;
    }

    .compare-drpdwn .dropdown .dropdown-label:before {
        content: "▼";
        float: right;
    }

    .compare-drpdwn .dropdown.on .dropdown-list {
        transform: scale(1, 1);
        transition-delay: 0s;
    }

    .compare-drpdwn .dropdown.on .dropdown-list .dropdown-option {
        opacity: 1;
        transition-delay: 0.2s;
    }

    .compare-drpdwn .dropdown.on .dropdown-label:before {
        content: "▲";
    }

    .compare-drpdwn .dropdown [type=checkbox] {
        position: relative;
        top: -1px;
        margin-right: 4px;
    }

    /* end of css for select box */
</style>
@endsection
@section('content')



<div class="container mt-5">
    <!-- Comparison Section -->
    <div class="compare-section">
        <h5>Voice Record Table</h5>
        <div class="table-responsive">
            <table class="table table-bordered table-striped mt-3">
                <thead>
                    <tr>
                        <th>Sl. #</th>
                        <th>Date</th>
                        <th>Event Name</th>
                        <th>Duration</th>
                        <th>Rec. Source (Zoom / Mob / etc.)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1-1-2025</td>
                        <td>Interview</td>
                        <td>00:30</td>
                        <td>Zoom</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2-1-2025</td>
                        <td>Interview</td>
                        <td>00:30</td>
                        <td>Zoom</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3-1-2025</td>
                        <td>Interview</td>
                        <td>00:30</td>
                        <td>Zoom</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>4-1-2025</td>
                        <td>Interview</td>
                        <td>00:30</td>
                        <td>Zoom</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="container mt-4">
    <!-- Record 1 Section -->
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12">
            <div class="compare-drpdwn">
                <div class="dropdown" data-control="checkbox-dropdown">
                    <label class="dropdown-label">Select Interviewer</label>
                    <div class="dropdown-list">
                        <a href="#" data-toggle="check-all" class="dropdown-option">
                            Check All
                        </a>

                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Selection 1" />
                            Interviewer One
                        </label>

                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 2" />
                            Interviewer Two
                        </label>

                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 3" />
                            Interviewer Three
                        </label>

                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 4" />
                            Interviewer Four
                        </label>

                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 5" />
                            Interviewer Five
                        </label>
                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 6" />
                            Interviewer Six
                        </label>
                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 7" />
                            Interviewer Seven
                        </label>
                        <label class="dropdown-option">
                            <input type="checkbox" name="dropdown-group" value="Interviewer 8" />
                            Interviewer Eight
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-6 col-12 d-flex justify-content-end">
            <div class="form-group d-flex">
                <label for="record1">Compare !
                    <input type="checkbox" class="form-control comp-chk" name="" id="">
                </label>
            </div>
        </div>
    </div>
    <!-- card 1 -->
    <div class="card">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-3">
                        <h5>Orig Rec-1</h5>
                    </div>
                    <div class="col-9 col-9 d-flex justify-content-end">
                        <div class="form-group">
                            <input type="checkbox" class="form-control recrd-chbk" name="" id="">
                        </div>
                    </div>
                </div>
                <!-- Audio Player for Rec-1 -->
                <div class="time-display">
                    Time: <span id="time1">0.00</span> / <span id="duration1">0.00</span>
                </div>
                <div class="wave-wrapper" id="waveform1"></div>
                <div class="audio-frequency" id="audio1-frequency">
                    <div class="timeline" id="timeline1">
                        <div class="marker red" ></div>
                        <div class="marker blue" ></div>
                        <div class="marker green" ></div>
                        <div class="time-label red">Person-1</div>
                        <div class="time-label blue">Person-2</div>
                        <div class="time-label green">Person-3</div>
                    </div>
                </div>
                <div class="btnplaypause" id="controls1">
                    <button class="btn-voice-action" id="playPause1"><i class="fa fa-play"></i></button>
                    <button class="btn-voice-action" id="stop1"><i class="fa fa-stop"></i></button>
                </div>

                <h5 class="mt-1">Analysis</h5>
                <!-- Audio Player for Analysis 1 -->
                <div class="time-display">
                    Time: <span id="time2">0.00</span> / <span id="duration2">0.00</span>
                </div>
                <div class="wave-wrapper" id="waveform2"></div>
                <div class="audio-frequency" id="audio2-frequency">
                    <div class="timeline" id="timeline2">
                        <div class="marker red"></div>
                        <div class="marker blue"></div>
                        <div class="marker green"></div>
                        <div class="time-label red">Person-1</div>
                        <div class="time-label blue">Person-2</div>
                        <div class="time-label green">Person-3</div>
                    </div>
                </div>
                <div class="btnplaypause" id="controls2">
                    <button class="btn-voice-action" id="playPause2"><i class="fa fa-play"></i></button>
                    <button class="btn-voice-action" id="stop2"><i class="fa fa-stop"></i></button>
                </div>
            </div>
        </div>
    </div>
    <!-- end of card 1 -->

    <!-- card 2 -->
    <div class="card">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-3">
                        <h5>Orig Rec-2</h5>
                    </div>
                    <div class="col-9 col-9 d-flex justify-content-end">
                        <div class="form-group">
                            <input type="checkbox" class="form-control recrd-chbk" name="" id="">
                        </div>
                    </div>
                </div>
                <!-- Audio Player for Rec-2 -->
                <div class="time-display">
                    Time: <span id="time3">0.00</span> / <span id="duration3">0.00</span>
                </div>
                <div class="wave-wrapper" id="waveform3"></div>
                <div class="audio-frequency" id="audio3-frequency">
                    <div class="timeline" id="timeline3">
                        <div class="marker red"></div>
                        <div class="marker blue"></div>
                        <div class="marker green"></div>
                        <div class="time-label red">Person-1</div>
                        <div class="time-label blue">Person-2</div>
                        <div class="time-label green">Person-3</div>
                    </div>
                </div>
                <div class="btnplaypause" id="controls3">
                    <button class="btn-voice-action" id="playPause3"><i class="fa fa-play"></i></button>
                    <button class="btn-voice-action" id="stop3"><i class="fa fa-stop"></i></button>
                </div>

                <h5 class="mt-1">Analysis</h5>
                <!-- Audio Player for Analysis 2 -->
                <div class="time-display">
                    Time: <span id="time4">0.00</span> / <span id="duration4">0.00</span>
                </div>
                <div class="wave-wrapper" id="waveform4"></div>
                <div class="audio-frequency" id="audio4-frequency">
                    <div class="timeline" id="timeline4">
                        <div class="marker red"></div>
                        <div class="marker blue"></div>
                        <div class="marker green"></div>
                        <div class="time-label red">Person-1</div>
                        <div class="time-label blue">Person-2</div>
                        <div class="time-label green">Person-3</div>
                    </div>
                </div>
                <div class="btnplaypause" id="controls4">
                    <button class="btn-voice-action" id="playPause4"><i class="fa fa-play"></i></button>
                    <button class="btn-voice-action" id="stop4"><i class="fa fa-stop"></i></button>
                </div>
            </div>
        </div>
    </div>
    <!-- end of card 2 -->


    <!-- Record 2 Section -->

    <!-- Comparison Section -->
    <div class="container mt-5">
        <div class="compare-section">
            <h5>COMPARE!</h5>
            <!-- Comparison Section -->
            <div class="row align-items-center">
                <div class="col-md-10">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mt-3">
                            <thead>
                                <tr>
                                    <th>Sl. #</th>
                                    <th>Audio</th>
                                    <th>Speaker</th>
                                    <th>Name</th>
                                    <th>Start</th>
                                    <th>Stop</th>
                                    <th>Select</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td><audio id="audio1" controls>
                                            <source src="{{ url('assets') }}/audio/turantaf.mp3" type="audio/mp3">
                                        </audio></td>
                                    <td>Person-1</td>
                                    <td>AM</td>
                                    <td>00:05</td>
                                    <td>00:09</td>
                                    <td><input type="checkbox" class="compare-checkbox" data-audio="audio1" /></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td><audio id="audio2" controls>
                                            <source src="{{ url('assets') }}/audio/turantaf.mp3" type="audio/mp3">
                                        </audio></td>
                                    <td>Person-2</td>
                                    <td>AG</td>
                                    <td>00:08</td>
                                    <td>00:15</td>
                                    <td><input type="checkbox" class="compare-checkbox" data-audio="audio2" /></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td><audio id="audio3" controls>
                                            <source src="{{ url('assets') }}/audio/turantaf.mp3" type="audio/mp3">
                                        </audio></td>
                                    <td>Person-1</td>
                                    <td>CC</td>
                                    <td>00:15</td>
                                    <td>00:50</td>
                                    <td><input type="checkbox" class="compare-checkbox" data-audio="audio3" /></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td><audio id="audio4" controls>
                                            <source src="{{ url('assets') }}/audio/turantaf.mp3" type="audio/mp3">
                                        </audio></td>
                                    <td>Person-2</td>
                                    <td>DK</td>
                                    <td>00:18</td>
                                    <td>00:45</td>
                                    <td><input type="checkbox" class="compare-checkbox" data-audio="audio4" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-2">
                    <button id="compare-btn" class="btn btn-primary mt-3">Compare Scores</button>
                    <div class="score-box" id="score-box">0.00</div>
                </div>
            </div>

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

@endsection
@push('scripts')
<!-- visulaiser -->
<script>
   // Function to initialize WaveSurfer instance and set up controls
function initializeWaveSurfer(containerId, audioFile, playPauseButtonId, stopButtonId) {
    var wavesurfer = WaveSurfer.create({
        container: containerId,
        waveColor: '#29b6f6',
        progressColor: '#00c853',
        barWidth: 3,
        height: 200,
        responsive: true,
    });

    // Load the audio file
    wavesurfer.load(audioFile);

    // Play/Pause button event listener
    document.getElementById(playPauseButtonId).addEventListener('click', function() {
        wavesurfer.playPause();
        this.innerHTML = wavesurfer.isPlaying() ? '<i class="fa fa-pause"></i>' : '<i class="fa fa-play"></i>';
    });

    // Stop button event listener
    document.getElementById(stopButtonId).addEventListener('click', function() {
        wavesurfer.stop();
        document.getElementById(playPauseButtonId).innerHTML = '<i class="fa fa-play"></i>';
    });
}

// Initialize WaveSurfer instances for each container
initializeWaveSurfer('#waveform1', './assets/audio/turantaf.mp3', 'playPause1', 'stop1');
initializeWaveSurfer('#waveform2', './assets/audio/turantaf.mp3', 'playPause2', 'stop2');
initializeWaveSurfer('#waveform3', './assets/audio/turantaf.mp3', 'playPause3', 'stop3');
initializeWaveSurfer('#waveform4', './assets/audio/turantaf.mp3', 'playPause4', 'stop4');
</script>
<!-- end of visulaiser -->
<!-- js for compare two audio -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const checkboxes = document.querySelectorAll(".compare-checkbox");
        const compareBtn = document.getElementById("compare-btn");
        const scoreBox = document.getElementById("score-box");

        // Listen for checkbox changes
        checkboxes.forEach((checkbox) => {
            checkbox.addEventListener("change", () => {
                const selectedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);

                // Restrict selection to only two checkboxes
                if (selectedCheckboxes.length > 2) {
                    checkbox.checked = false; // Uncheck the latest checkbox
                    alert("You can only select two checkboxes!");
                }
            });
        });

        // Handle compare button click
        compareBtn.addEventListener("click", () => {
            const selectedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);

            if (selectedCheckboxes.length !== 2) {
                alert("Please select exactly two checkboxes to compare.");
                return;
            }

            // Get data from the selected checkboxes
            const audio1 = document.getElementById(selectedCheckboxes[0].dataset.audio);
            const audio2 = document.getElementById(selectedCheckboxes[1].dataset.audio);

            // Perform comparison (e.g., comparing durations)
            const audio1Duration = parseFloat(audio1.duration);
            const audio2Duration = parseFloat(audio2.duration);

            // Example comparison (difference in duration)
            const difference = Math.abs(audio1Duration - audio2Duration).toFixed(2);

            // Display the comparison result
            scoreBox.textContent = `${difference}s`;
        });
    });
</script>
<!-- end of js for compare two audio -->

<!-- script for select box -->
<script>
    (function($) {
        var CheckboxDropdown = function(el) {
            var _this = this;
            this.isOpen = false;
            this.areAllChecked = false;
            this.$el = $(el);
            this.$label = this.$el.find('.dropdown-label');
            this.$checkAll = this.$el.find('[data-toggle="check-all"]').first();
            this.$inputs = this.$el.find('[type="checkbox"]');

            this.onCheckBox();

            this.$label.on('click', function(e) {
                e.preventDefault();
                _this.toggleOpen();
            });

            this.$checkAll.on('click', function(e) {
                e.preventDefault();
                _this.onCheckAll();
            });

            this.$inputs.on('change', function(e) {
                _this.onCheckBox();
            });
        };

        CheckboxDropdown.prototype.onCheckBox = function() {
            this.updateStatus();
        };

        CheckboxDropdown.prototype.updateStatus = function() {
            var checked = this.$el.find(':checked');

            this.areAllChecked = false;
            this.$checkAll.html('Check All');

            if (checked.length <= 0) {
                this.$label.html('Select Options');
            } else if (checked.length === 1) {
                this.$label.html(checked.parent('label').text());
            } else if (checked.length === this.$inputs.length) {
                this.$label.html('All Selected');
                this.areAllChecked = true;
                this.$checkAll.html('Uncheck All');
            } else {
                this.$label.html(checked.length + ' Selected');
            }
        };

        CheckboxDropdown.prototype.onCheckAll = function(checkAll) {
            if (!this.areAllChecked || checkAll) {
                this.areAllChecked = true;
                this.$checkAll.html('Uncheck All');
                this.$inputs.prop('checked', true);
            } else {
                this.areAllChecked = false;
                this.$checkAll.html('Check All');
                this.$inputs.prop('checked', false);
            }

            this.updateStatus();
        };

        CheckboxDropdown.prototype.toggleOpen = function(forceOpen) {
            var _this = this;

            if (!this.isOpen || forceOpen) {
                this.isOpen = true;
                this.$el.addClass('on');
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('[data-control]').length) {
                        _this.toggleOpen();
                    }
                });
            } else {
                this.isOpen = false;
                this.$el.removeClass('on');
                $(document).off('click');
            }
        };

        var checkboxesDropdowns = document.querySelectorAll('[data-control="checkbox-dropdown"]');
        for (var i = 0, length = checkboxesDropdowns.length; i < length; i++) {
            new CheckboxDropdown(checkboxesDropdowns[i]);
        }
    })(jQuery);
</script>
<!-- end of script for selectbox -->

@endpush