@extends('theme::layouts.app')


@section('content')


    <div class="max-w-7xl mx-auto px-4 py-6">
        <div class="flex justify-end mb-4">
            <button id="toggleView" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Changer de vue</button>
        </div>

        <div id="blogView" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($version_rows as $version)
                <div class="bg-white shadow rounded-xl p-5 border border-gray-100">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Dlteams - v{{$version->version}}</h3>
                    <p class="text-sm text-gray-500 mb-3">
                        <a href="{{$version->download_url}}" class="text-blue-600 hover:underline">Télécharger</a>
                    </p>
                    <div class="text-gray-600 text-sm leading-relaxed max-h-24 overflow-hidden relative see-more">
                        <div class="content">{!! $version->release_note !!}</div>
                        <div class="gradient absolute bottom-0 left-0 w-full h-10 bg-gradient-to-t from-white to-transparent"></div>
                    </div>
                    <button class="mt-2 text-blue-500 text-sm hover:underline toggle-more">Voir plus</button>
                </div>
            @endforeach
        </div>

        <div id="tableView" class="hidden">
            <div class="overflow-x-auto bg-white shadow rounded-xl border border-gray-100">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Version</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Téléchargement</th>
                        <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Notes</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                    @foreach($version_rows as $version)
                        <tr>
                            <td class="px-4 py-2 text-sm text-gray-800">v{{$version->version}}</td>
                            <td class="px-4 py-2 text-sm text-blue-600"><a href="{{$version->download_url}}" class="hover:underline">Télécharger</a></td>
                            <td class="px-4 py-2 text-sm text-gray-600">{!! Str::limit(strip_tags($version->release_note), 100, '...') !!}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <script>
        // Vue switch avec localStorage
        const toggleButton = document.getElementById('toggleView');
        const blogView = document.getElementById('blogView');
        const tableView = document.getElementById('tableView');

        function setView(view) {
            localStorage.setItem('dashboardView', view);
            if (view === 'table') {
                blogView.classList.add('hidden');
                tableView.classList.remove('hidden');
            } else {
                blogView.classList.remove('hidden');
                tableView.classList.add('hidden');
            }
        }

        toggleButton.addEventListener('click', () => {
            const current = localStorage.getItem('dashboardView') || 'blog';
            setView(current === 'blog' ? 'table' : 'blog');
        });

        document.addEventListener('DOMContentLoaded', () => {
            setView(localStorage.getItem('dashboardView') || 'blog');

            document.querySelectorAll('.toggle-more').forEach(button => {
                button.addEventListener('click', function () {
                    const contentDiv = this.previousElementSibling;
                    if (contentDiv.classList.contains('max-h-24')) {
                        contentDiv.classList.remove('max-h-24');
                        this.innerText = 'Voir moins';
                    } else {
                        contentDiv.classList.add('max-h-24');
                        this.innerText = 'Voir plus';
                    }
                });
            });
        });
    </script>

@endsection