@php
    $hasNoise = false;
@endphp

<style>
    table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

.jump-time {
 cursor: pointer;
 padding: 8px 0;
 font-weight: bold;
 text-align: center;
}
.jump-time:hover {
 color: blue;
 text-decoration: underline;
}

.merged-video-tabs .merged-video-items{
    margin: 0px !important;
    width: 50%;
    text-align: center;
}
.scroll-box {
  max-height: 500px;
  overflow-y: auto;
}

.video-records > td{
    border: none !important;
}

.candidate-tab-content{
    border: none !important;
}
.flags-records{
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 400 !important;
}

</style>
<div class="modal p-r-0" id="pro-preview-large-recorded-Modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 96%;">
        <button type="button" class="btn btn-primary btn-icon-custom waves-effect login-close-btn proc-video-play-close-modal" data-dismiss="modal" aria-label="Close"><span class="hiremee-multiply f-18"></span></button>
        <div class="modal-content" style="margin-top: -50px">
            <div class="modal-body">
                <div class="card table-card" style="border-top: none;">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="table-responsive1">
                                <!--page logo-->
                                <table class="w-100 pl-1rem" style="border-bottom: 1px solid #dfdfdf;margin-top: -20px;">
                                    <tbody>
                                        <tr class="display-block" style="padding: 10px 0px;padding-top: 0px;">
                                            <td style="width: 100%;">
                                               <!--  <table align="left">
                                                    <tr>
                                                        <td colspan="4">
                                                            <img src="https://hiremee.co.in/assets/home/images/hiremee-logo.png" width="170px" alt="app-logo" style="height: 5rem; object-fit: contain;" />
                                                        </td>
                                                    </tr>
                                                </table> -->
                                                
                                                <div class="modal-hme-loading-mask" style="display: none; text-align: center; margin-top: -88px;">
                                                    <div class="hme-loading-container">
                                                        <div class="hme-dual-ring"></div>
                                                        <div>Please wait, Loading...</div>
                                                    </div>
                                                </div>

                                                <!-- page header -->
                                                
                                                <!-- page header end -->

                                                <div>
                                                   <ul id="videoTab" class="nav nav-tabs md-tabs merged-video-tabs" role="tablist" style="background:#fff;padding: 0px;">
                                                        <li class="nav-item merged-video-items">
                                                            <a class="nav-link active flaggedtabs" data-toggle="tab" href="#candidate-video-tab" data-imcount="0" role="tab">Candidate Video </a>
                                                        </li>
                                                            
                                                        <li class="nav-item merged-video-items">
                                                            <a class="nav-link flaggedtabs" data-toggle="tab" href="#screen-share-video-tab" data-imcount="0" role="tab">Screen share Video</a>
                                                        </li>
                                                                                                           
                                                    </ul>
                                                    <div class="tab-content p-0" style="min-height: 34rem">
                                                     @if(!empty($candidate))
                                                    
                            <!-- START CANDIDATE VIDEO-->
                                
                                <div class="tab-pane active" id="candidate-video-tab" role="tabpanel">
                                    @if(isset($candidate['CandidateVideo'])&& !empty($candidate['CandidateVideo']))
                                    <div class="tab-content row p-l-0 p-r-10" id="js-candidate-video-tab-data">
                                    
                                    @if(!empty($candidate['noise_records']) || !empty($candidate['video_message_records']))
                                    @php $hasNoise = true; @endphp

                                  <div class="col-sm-4">
                                    <div class="flags-records">Flag</div>
                                   <ul class="nav nav-tabs merged-video-tabs" role="tablist">
                                        <li class="nav-item merged-video-items">
                                            <a class="nav-link active"
                                            data-toggle="tab"
                                            href="#candidateAudioTimes"
                                            role="tab">
                                            Audio
                                            </a>
                                        </li>
                                    
                                     <li class="nav-item merged-video-items">
                                            <a class="nav-link"
                                            data-toggle="tab"
                                            href="#candidateVideoTimes"
                                            role="tab">
                                            Video
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content candidate-tab-content"
                                        style="max-height:426px; overflow-y:auto; border:1px solid #ccc;">

                                        <!-- AUDIO timings -->
                                        <div class="tab-pane fade show active"
                                            id="candidateAudioTimes"
                                            role="tabpanel" style="text-align: center">
                                            <table class="table table-sm">
                                                <tbody>
                                                  @if(!empty($candidate['noise_records']))
                                                   @foreach($candidate['noise_records'] as $time)
                                                    @php
                                                        $parts = explode(':', $time);
                                                        $displayTime = (count($parts) == 3 && (int)$parts[0] === 0) 
                                                            ? $parts[1].':'.$parts[2] 
                                                            : $time;
                                                    @endphp
                                                    <tr class="video-records">
                                                        <td class="jump-time audio-time" data-time="{{ $time }}">
                                                            {{ $displayTime }}
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    @else
                                                    <div class="text-center" style="margin-top: 50px">
                                                            No records found
                                                    </div>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>

                                         <!-- VIDEO timings -->
                                        <div class="tab-pane fade"
                                            id="candidateVideoTimes"
                                            role="tabpanel" style="text-align: center">
                                            <table class="table table-sm">
                                                <tbody>
                                                  @if(!empty($candidate['video_message_records']))
                                                    @foreach($candidate['video_message_records'] as $record)
                                                        @php
                                                            $parts = explode(':', $record['timestamp']);
                                                            $displayTime = (count($parts) === 3 && (int)$parts[0] === 0)
                                                                ? $parts[1].':'.$parts[2]  
                                                                : $record['timestamp'];                     
                                                        @endphp
                                                        <tr class="video-records">
                                                            <td>{{ $record['reason'] }}</td>
                                                            <td class="jump-time audio-time" data-time="{{ $record['timestamp'] }}">
                                                                {{ $displayTime }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    @else
                                                    <div class="text-center" style="margin-top: 50px">
                                                            No records found
                                                    </div>
                                                  @endif
                                            </tbody>
                                        </table>
                                    </div>
                                    </div>
                                </div>
                                    @endif
                                    
                                    
                                    <div class="{{ $hasNoise ? 'col-sm-8' : 'col-sm-12' }}">
                                        <video id="candidate-video" class="videoView" width="100%" height="500" controls style="background: black;" muted>
                                        @if(!empty($candidate['CandidateVideo']))
                                            @foreach($candidate['CandidateVideo'] as $video)
                                                @if(isset($video['video_url']))
                                                    <source src="{{ $video['video_url'] }}" type="video/mp4" class="active">
                                                @endif
                                            @endforeach
                                        @endif
                                        </video>    
                                        </div>
                                        
                                    </div>
                                    @else
                                  <p>Candidate Video not available!</p>
                                @endif  
                                </div>
                                <!-- END CANDIDATE VIDEO-->

                    
                    <div class="tab-pane" id="screen-share-video-tab" role="tabpanel">
                        @if(isset($candidate['ScreenVideo']) && !empty($candidate['ScreenVideo']))
                   <div class="tab-content row p-l-0 p-r-10" id="js-screen-share-video-tab-data">
                                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <video id="screen_share" width="100%" height="500" class="videoView"  controls style="background: black;" muted>
                                  @foreach($candidate['ScreenVideo'] as $video) 
                                  @if(!empty($video['video_url'])) 
                                  <source src="{{$video['video_url']}}" type="video/mp4" class="active"> 
                                  @endif 
                                  @endforeach
                            </video>       
                            
                        </div>
                    </div>
                    @else
                    <p style="margin-left: 45%; margin-top: 5%;">Screen share video is not available!</p>
                   @endif
                </div>
                <!--END THIRD EYE-->
                <!-- START MESSAGE -->
            <div class="tab-pane" id="message-tab" role="tabpanel">
            @if(isset($candidate_message) && count($candidate_message) > 0 )
            <div class="tab-content row p-l-0 p-r-10" id="js-message-tab-data">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <h3>Testpin : <span>{{$test_pin ?? ''}}</span></h3>
            <table>
            <thead>
            <tr>
            <td>S.NO</td>
            <td align="center">Date & Time</td>
            <td>Message</td>

            </tr>
            </thead>    
            <tbody>
                @php $i=1; @endphp
                @foreach($candidate_message as $message)
            <tr>
            <td>{{ $i }}</td>
            <td>{{\Carbon\Carbon::parse($message->created_at)->format('jS F \\ Y h:i:s A')}}</td>
            <td>{{$message->message}}</td>

            </tr>
                @php $i++; @endphp
                @endforeach
            </tbody>
            </table>
            </div>
            @else
            <p style="margin-left: 45%; margin-top: 5%;">No messages Found for this testpin!</p>
            @endif  
            </div>
            </div>
<!-- END MESSAGE-->
            @else
             <p style="margin-left: 45%; margin-top: 5%;">videos are not available!</p>
            @endif


                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var myvid = document.getElementById("candidate-video");
    if(myvid !=undefined){
        myvid.addEventListener("ended", function (e) {
            // get the active source and the next video source.
            // I set it so if there's no next, it loops to the first one
            var activesource = document.querySelector("#candidate-video source.active");
            var nextsource = document.querySelector("#candidate-video source.active + source");

            // deactivate current source, and activate next one
            activesource.className = "";
            nextsource.className = "active";

            // update the video source and play
            myvid.src = nextsource.src;
            console.log("video src is----", nextsource.src);
            myvid.play();
        });
    }

    var myscreen = document.getElementById("screen_share");
    if(myscreen !=undefined){
        myscreen.addEventListener("ended", function (e) {
            console.log("screen_share ended");
            // get the active source and the next video source.
            // I set it so if there's no next, it loops to the first one
            var activesource = document.querySelector("#screen_share source.active");
            var nextsource = document.querySelector("#screen_share source.active + source");

            // deactivate current source, and activate next one
            activesource.className = "";
            nextsource.className = "active";

            // update the video source and play
            myscreen.src = nextsource.src;
            console.log("video src is----", nextsource.src);
            myscreen.play();
        });
    }

    var thirdeye = document.getElementById("third_eye");
    if(thirdeye !=undefined){
    thirdeye.addEventListener("ended", function (e) {
        // get the active source and the next video source.
        // I set it so if there's no next, it loops to the first one
        var activesource = document.querySelector("#third_eye source.active");
        var nextsource = document.querySelector("#third_eye source.active + source");

        // deactivate current source, and activate next one
        activesource.className = "";
        nextsource.className = "active";

        // update the video source and play
        thirdeye.src = nextsource.src;
        console.log("video src is----", nextsource.src);
        thirdeye.play();
    });
    }
    

    function parseTimestampToSeconds(timestamp) {
        const parts = timestamp.split(':').map(Number);

        if (parts.length === 2) {
            const [minutes, seconds] = parts;
            return (minutes * 60) + seconds;
        } else if (parts.length === 3) {
            const [hours, minutes, seconds] = parts;
            return (hours * 3600) + (minutes * 60) + seconds;
        } else {
            return 0;
        }
    }

    document.querySelectorAll('.jump-time').forEach(item => {
        item.addEventListener('click', function () {
            const timestamp = this.getAttribute('data-time');
            const seconds = parseTimestampToSeconds(timestamp);

            const video = document.getElementById('candidate-video');
            if (video) {
                video.currentTime = seconds;
                video.play();
            }
        });
    });
   


</script>