@extends('layouts.dashboard')

@section('content')


<style>
  .dropdown {
    position: relative;
    display: inline-block;
    width: 300px;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    border: 1px solid #ccc;
  }

  .dropdown-content label {
    display: block;
    padding: 8px;
    cursor: pointer;
  }

  .dropdown-content label:hover {
    background: #f1f1f1;
  }

  .dropdown input[type="text"] {
    width: 100%;
    padding: 8px;
  }

  .select-all {
    font-weight: bold;
    background: #f8f9fa;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
  }

  .select-all:hover {
    background: #e9ecef;
  }

  .marker {
    position: absolute;
    height: 10px;
    border-radius: 5px;
}

.marker.red { background-color: red; }
.marker.blue { background-color: blue; }
.marker.green { background-color: green; }
.marker.orange { background-color: orange; }
.marker.purple { background-color: purple; }

.time-label {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
}

.time-label.red { color: red; }
.time-label.blue { color: blue; }
.time-label.green { color: green; }
.time-label.orange { color: orange; }
.time-label.purple { color: purple; }



/*   

  .timeline {
    position: relative;
    height: 20px;
    background: #eee;
    margin-top: 10px;
    border-radius: 5px;
}

.marker {
    position: absolute;
    top: 0;
    height: 20px;
    width: 5px;
    background-color: black;
}

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }

.time-label {
    position: absolute;
    top: 25px;
    font-size: 12px;
    white-space: nowrap;
} */

</style>

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Turant Af</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Turant Af</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>


<section class="content">
  <div class="container-fluid">

    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
        role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <!-- /.row -->
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            {{-- <h3 class="card-title">Fixed Header Table</h3> --}}

            <div class="card-tools">
              <div class="input-group input-group-sm">
                <div class="dropdown">
                  <input type="text" id="searchEvent" placeholder="Search events..." autocomplete="off">
                  <div class="dropdown-content" id="eventList">
                    <!-- Check All / Uncheck All option -->
                    <label class="select-all">
                      <input type="checkbox" id="checkAll"> Check All
                    </label>
                    <div id="checkboxContainer"></div>
                  </div>
                </div>


              </div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">

            <table id="eventTable" class="table table-head-fixed table-striped table-bordered text-nowrap text-center display">
              <thead>
                <tr>
                  <th>Sr No.</th>
                  <th>Date</th>
                  <th>Event Name</th>
                  <th>Duration(in sec.)</th>
                  <th>BitRate</th>
                  <th>Channel</th>
                  <th>Sample Rate</th>
                  <th>Source</th>
                  <th>Select</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>

          </div>


         <!-- Container for dynamically added audio cards -->
              <div id="audioCardContainer"></div>

          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
    <!-- /.row -->

  </div><!-- /.container-fluid -->
</section>

@endsection

@push('scripts')

<script>
  $(document).ready(function() {
    let dataTable = $('#eventTable').DataTable({
      searching: false,
      bLengthChange: false,
    }); // Initialize DataTable

    // Fetch full event list on page load
    fetchEvents("");

    // Fetch events via AJAX when typing in search
    $('#searchEvent').on('keyup', function() {
      let search = $(this).val();
      fetchEvents(search);
    });

    function fetchEvents(search) {
      $.ajax({
        url: "/fetch-events",
        type: "GET",
        data: {
          search: search
        },
        success: function(response) {
          let container = $('#checkboxContainer');
          container.empty();

          if (response.length > 0) {
            response.forEach(event => {
              container.append(`
                        <label>
                            <input type="checkbox" class="event-checkbox" value="${event.id}"> ${event.event_name}
                        </label>
                    `);
            });
            $('#eventList').show();
          } else {
            container.append('<p style="padding: 8px;">No results found</p>');
            $('#eventList').show();
          }
        }
      });
    }

    // Check All / Uncheck All functionality
    $(document).on('change', '#checkAll', function() {
      $('.event-checkbox').prop('checked', this.checked);
      updateDataTable();
    });

    // Update DataTable when checkboxes are checked/unchecked
    $(document).on('change', '.event-checkbox', function() {
      updateDataTable();
    });

    function updateDataTable() {
        let selectedEvents = $('.event-checkbox:checked').map(function () {
            return $(this).val();
        }).get();

        if (selectedEvents.length > 0) {
            $.ajax({
                url: "/get-event-details",
                type: "POST",
                data: {
                    events: selectedEvents,
                    "_token": "{{ csrf_token() }}"
                },
                success: function (response) {
                    dataTable.clear().draw();
                    let srNo = 1;

                    response.forEach(event => {
                        let formattedDate = event.created_at
                            ? new Intl.DateTimeFormat('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })
                                .format(new Date(event.created_at))
                            : 'N/A';

                            const audioData = JSON.parse(event.file_data);

                        dataTable.row.add([
                            srNo++, 
                            formattedDate,  
                            event.event_name,
                            event.duration,
                            audioData[0]['bitrate'],
                            audioData[0]['channels'],
                            audioData[0]['sample_rate'],
                            event.source,  // Column 2: Source
                            `<input type="checkbox" class="row-checkbox" data-file="${event.file}"  data-event="${event.event_name}" data-id="${event.id}" value="${event.id}">`  // Column 4: Checkbox
                        ]).draw(false);
                    });
                }
            });
        } else {
            dataTable.clear().draw();
        }
    }

    // Event handler for clicking on row checkboxes
    $(document).on('change', '.row-checkbox', function () {
        let eventId = $(this).data('id');
        let eventName = $(this).data('event');
        let file = $(this).data('file');

        if ($(this).prop('checked')) {
            $.ajax({
                url: "/fetch-audio-card",
                type: "GET",
                data: { event_id: eventId, event_name: eventName },
                success: function (response) {
                    $("#audioCardContainer").append(response); // Append the response (HTML)
                //    initializeWaveSurfer(`#waveform1-${eventId}`, './assets/audio/turantaf.mp3', `playPause1-${eventId}`, `stop1-${eventId}`);
                    initializeWaveSurfer(`#waveform1-${eventId}`, `{{ asset('uploads/event-af/') }}/${file}`,`playPause1-${eventId}`, `stop1-${eventId}`, `time1-${eventId}`,`duration1-${eventId}`);
                  //  initializeWaveSurfer(`#waveform2-${eventId}`, './assets/audio/turantaf.mp3', `playPause2-${eventId}`, `stop2-${eventId}`);
                }
            });
        } else {
            $(`#audioCard-${eventId}`).remove(); // Remove the card if unchecked
        }
    });

   

    // Show event details when row checkbox is clicked
    $(document).on('change', '.row-checkbox', function() {
      let row = $(this).closest('tr').index() + 1;
      let eventName = $(this).data('event');

      if ($(this).prop('checked')) {
        $('#eventDetailsText').text(`Row ${row}: ${eventName}`);
        $('#selectedEventDetails').show();
      } else {
        $('#selectedEventDetails').hide();
      }
    });

    // Hide dropdown when clicking outside
    $(document).click(function(e) {
      if (!$(e.target).closest('.dropdown').length) {
        $('#eventList').hide();
      }
    });

    // Show dropdown when clicking inside search input
    $('#searchEvent').on('focus', function() {
      $('#eventList').show();
    });

    // Hide dropdown when clicking outside
    $(document).click(function(e) {
      if (!$(e.target).closest('.dropdown').length) {
        $('#eventList').hide();
      }
    });
  });



  // Bind the analysis button click event
$(document).on('click', '.start-analysis', function() {
    let eventId = $(this).data('id');
    let button = $(this);
    button.prop("disabled", true).text("Loading...");

   $.ajax({
        url: "/fetch-audio-file", // Laravel route to fetch the file and process speakers
        type: "GET",
        data: { eventId: eventId },
        success: function(response) {
            if (response.success) {
                let jsonResponse = response.data.responseData; // Assuming Laravel returns `data` containing speaker info
                let file = response.data.file; // Assuming Laravel returns `data` containing speaker info
                let duration = response.data.duration; // Assuming Laravel returns `data` containing speaker info

                console.log('jsonResponse',jsonResponse);
                // Load the file in WaveSurfer
                initializeWaveSurfer(`#waveform2-${eventId}`, file, 
                    `playPause2-${eventId}`, `stop2-${eventId}`, 
                    `time2-${eventId}`, `duration2-${eventId}`);

                // Process and display speaker data
                processSpeakerData(jsonResponse, `timeline3-${eventId}`,duration);

               button.text("Analysed");

            } else {
                alert("Error fetching speaker data.");
            button.text("Start Analysis");

            }
        },
        error: function(xhr) {
            console.log(xhr.responseText);
            alert("An error occurred.");
            button.text("Start Analysis");
        },
        complete: function() {
          button.prop("disabled", false);
        }
    });

});


// Function to process and display speaker segmentation on the timeline
// function processSpeakerData(jsonResponse, timelineContainerId) {
//     let segments = jsonResponse.segments;
//     let html = "";

//     let timeline = document.getElementById(timelineContainerId);
//     if (!timeline) {
//         console.error("Timeline container not found:", timelineContainerId);
//         return;
//     }

//     console.log('timelineContainerId', timelineContainerId);
//     console.log('timeline', timeline);

//     segments.forEach(segment => {
//         let startTime = parseFloat(segment.start);
//         let stopTime = parseFloat(segment.stop);
//         let speaker = segment.speaker; 

//         if (speaker === 'SPEAKER_00') {
//             html += '<div class="marker red"></div> <div class="time-label red">Person-1</div>';  
//         } else if (speaker === 'SPEAKER_01') {
//             html += '<div class="marker blue"></div> <div class="time-label blue">Person-2</div>';
//         } else {
//             html += '<div class="marker green"></div> <div class="time-label green">Person-3</div>';
//         }
//     });

//     console.log('html', html);

//     // ✅ Use insertAdjacentHTML() instead of appendChild()
//     timeline.insertAdjacentHTML('beforeend', html);
// }

function processSpeakerData(jsonResponse, timelineContainerId, audioDuration) {
    let segments = jsonResponse.segments;
    let timeline = document.getElementById(timelineContainerId);
    
    if (!timeline) {
        console.error("Timeline container not found:", timelineContainerId);
        return;
    }

    timeline.innerHTML = ''; // Clear previous markers

    // Group time ranges by speaker
    let speakerDurations = {};

    segments.forEach(segment => {
        let speaker = segment.speaker;
        let startTime = parseFloat(segment.start);
        let stopTime = parseFloat(segment.stop);

        if (!speakerDurations[speaker]) {
            speakerDurations[speaker] = { start: startTime, stop: stopTime };
        } else {
            speakerDurations[speaker].stop = stopTime; // Extend the stop time
        }
    });

    // Loop through grouped speakers and create markers
    Object.keys(speakerDurations).forEach((speaker, index) => {
        let { start, stop } = speakerDurations[speaker];
        let duration = stop - start;

        // Create marker div
        let marker = document.createElement("div");
        marker.classList.add("marker");

        // Create speaker label div
        let label = document.createElement("div");
        label.classList.add("time-label");

        // Assign color based on speaker index
        let colors = ["red", "blue", "green", "orange", "purple"];
        let color = colors[index % colors.length];

        marker.classList.add(color);
        label.classList.add(color);
        label.innerText = `Speaker ${index + 1}`;

        // Position and size marker based on start and duration
        let percentageStart = (start / audioDuration) * 100;
        let percentageWidth = (duration / audioDuration) * 100;

        marker.style.position = "absolute";
        marker.style.left = `${percentageStart}%`;
        marker.style.width = `${percentageWidth}%`; // Adjust width based on duration
        marker.style.height = "3px"; // Customize marker height
        marker.style.top = "0px";

        // Position the label slightly above the marker
        label.style.position = "absolute";
        label.style.left = `${percentageStart}%`;
        label.style.top = "-20px"; // Move above the marker

        // Append marker and label to timeline
        timeline.appendChild(marker);
        timeline.appendChild(label);
    });
}






   // Function to initialize WaveSurfer instance dynamically
function initializeWaveSurfer(containerId, audioFile, playPauseButtonId, stopButtonId, timeDisplayId, durationDisplayId) {
    var wavesurfer = WaveSurfer.create({
        container: containerId,
        waveColor: '#29b6f6',
        progressColor: '#00c853',
        barWidth: 3,
        height: 100,
        responsive: true,
    });

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

    // Update total duration when the file is ready
    wavesurfer.on('ready', function () {
        let duration = wavesurfer.getDuration();
        document.getElementById(durationDisplayId).textContent = duration.toFixed(2);
    });

    // Update current time while playing
    wavesurfer.on('audioprocess', function () {
        if (wavesurfer.isPlaying()) {
            let currentTime = wavesurfer.getCurrentTime();
            document.getElementById(timeDisplayId).textContent = currentTime.toFixed(2);
        }
    });

    // 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(timeDisplayId).textContent = "0.00"; // Reset current time to 0
        document.getElementById(playPauseButtonId).innerHTML = '<i class="fa fa-play"></i>';
    });
}



</script>
@endpush