<link rel="stylesheet" href="{{ asset('css/library.css') }}">
@extends('welcome')

@section('content')
    @if ($library)
    <div class="library-container">
        <x-library.libarary :library="$library" />
        @if ($onlineResources)
            <x-library.onlineresources :library="$library" :onlineResources="$onlineResources ?? collect()" />
        @endif
        
    </div>
    <x-home.apply  />
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const libraryButton = document.querySelector('.toogle-button:first-child');
            const resourcesButton = document.querySelector('.toogle-button:last-child');
            const libraryContent = document.getElementById('libries');
            const resourcesContent = document.getElementById('online_resources');
            const activeIndicator = document.querySelector('.active-indicator');

            // Initially hide the online resources section
            if (resourcesContent) {
                resourcesContent.style.display = 'none';
            }

            // Function to update active states
            function updateActiveState(activeButton, inactiveButton, indicatorPosition, showContent, hideContent) {
                // Remove active class from all buttons first
                document.querySelectorAll('.toogle-button').forEach(btn => {
                    btn.classList.remove('active_button');
                });

                // Add active class to the clicked button
                if (activeButton) activeButton.classList.add('active_button');

                // Move active indicator
                if (activeIndicator) activeIndicator.style.left = indicatorPosition;

                // Show/hide content
                if (showContent) showContent.style.display = 'block';
                if (hideContent) hideContent.style.display = 'none';
            }

            // Library button click handler
            if (libraryButton) {
                libraryButton.addEventListener('click', function() {
                    updateActiveState(
                        libraryButton,
                        resourcesButton,
                        '0',
                        libraryContent,
                        resourcesContent
                    );
                });
            }

            // Resources button click handler
            if (resourcesButton) {
                resourcesButton.addEventListener('click', function() {
                    updateActiveState(
                        resourcesButton,
                        libraryButton,
                        '50%',
                        resourcesContent,
                        libraryContent
                    );
                });
            }
        });
    </script>
    @endif
@endsection
