@extends('layouts.app')

@section('content')

<div><a href="{{ route('questions.add') }}" class="button is-small is-primary" style="border-radius: 0; ">
    Add New
</a>
 </div>
<table class="table-auto w-full mt-4">
        <thead>
            <tr>
                <th  class="border px-2 py-1">ID </th>
                <th class="border px-2 py-1">Ukey</th>
                <th class="border px-2 py-1">Section </th>
                <th class="border px-2 py-1">Subsection </th>
                <th class="border px-2 py-1">Answer </th>
            </tr>
        </thead>
        <tbody>
            @foreach($questions as $q)
            <tr>
                <td data-image-url="{{ $q->url }}"  class="border px-2 py-1 id-column">{{$q->id}} </td>
                <td class="border px-2 py-1"><a href="{{route('questions.view', ['ukey' => $q->ukey])}}">{{$q->ukey}}</a></td>
                <td class="border px-2 py-1">{{$q->section}} </td>
                <td class="border px-2 py-1">{{$q->subsection}} </td>
                <td class="border px-2 py-1">{{$q->answer}}</td>
               
                </div>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="mt-4">{{ $questions->links() }}</div>

    <!-- Tooltip container for displaying the image -->
<div id="imageTooltip" style="display: none; position: absolute; border: 1px solid #ddd; background-color: white; padding: 5px;">
    <img src="" id="tooltipImage" style="max-width: 400px; ">
</div>

<script>
    // Show image tooltip on hover
    document.querySelectorAll('.id-column').forEach(function(element) {
        element.addEventListener('mouseover', function(e) {
            var imageUrl = e.target.getAttribute('data-image-url');
            if(imageUrl) {
                var tooltip = document.getElementById('imageTooltip');
                var tooltipImage = document.getElementById('tooltipImage');
                tooltipImage.src = imageUrl;  // Set the image URL
                tooltip.style.display = 'block';
                tooltip.style.left = e.pageX + 10 + 'px';  // Position tooltip
                tooltip.style.top = e.pageY + 10 + 'px';
            }
        });

        element.addEventListener('mousemove', function(e) {
            var tooltip = document.getElementById('imageTooltip');
            tooltip.style.left = e.pageX + 10 + 'px';  // Update position
            tooltip.style.top = e.pageY + 10 + 'px';
        });

        element.addEventListener('mouseout', function() {
            var tooltip = document.getElementById('imageTooltip');
            tooltip.style.display = 'none';  // Hide tooltip
        });
    });
</script>

   

@endsection