@extends('frontend.layouts.partials.app')
@section('title', 'Financial Overview')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

@section('content')
    <section class="w-full mt-10 xl:h-[550px]">
        <div class="m-10">
            <!-- Header -->
            <header class="mb-6">
                <h1 class="text-2xl text-[#002A5C] font-bold border-b-2 p-4">Financial Overview</h1>
            </header>

            <div class="flex flex-col lg:flex-row gap-6">
                <!-- Mobile View Buttons -->
                <div class="block lg:hidden mb-6">
                    <div class="flex flex-wrap gap-2">
                        @foreach ($downloadCategories as $downloadCategory)
                            @php
                                $tabId = 'download-' . $downloadCategory->id;
                            @endphp
                            <button id="{{ $tabId }}" data-id="{{ $downloadCategory->id }}"
                                class="p-2 px-4 bg-gray-200 rounded-full border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 category-button transition duration-300 ease-in-out transform">
                                {{ $downloadCategory->name }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <!-- Sidebar for Larger Screens -->
                <aside class="hidden lg:block lg:w-1/4">
                    @foreach ($downloadCategories as $downloadCategory)
                        @php
                            $tabId = 'download-' . $downloadCategory->id;
                        @endphp
                        <div id="{{ $tabId }}-content">
                            <div class="p-1 rounded-lg bg-gray-50" role="tabpanel"
                                aria-labelledby="{{ $tabId }}-tab">
                                <span id="{{ $tabId }}" data-id="{{ $downloadCategory->id }}"
                                    class="download-category block p-3 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 category-item transition duration-300 ease-in-out transform cursor-pointer">
                                    <h5
                                        class="pl-2 text-lg font-bold tracking-tight text-gray-900 text-ellipsis overflow-hidden line-clamp-1">
                                        {{ $downloadCategory->name }}
                                    </h5>
                                </span>
                            </div>
                        </div>
                    @endforeach
                </aside>

                <!-- Content Area -->
                <div class="lg:w-3/4 download-content transition-opacity opacity-0"></div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .category-button,
        .category-item {
            transition: all 0.3s ease;
        }

        .category-button.selected,
        .category-item.selected {
            background-color: #2563eb;
            color: white;
            border-color: #2563eb;
            animation: bounceIn 0.5s;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Load first category by default if available
            @if ($downloadCategories->count())
                getDownload({{ $downloadCategories->first()->id }});
            @endif

            // Handle category selection for mobile and sidebar
            $('.category-button, .category-item').click(function(e) {
                e.preventDefault();
                let id = $(this).data('id');
                updateCategorySelection($(this), $(this).hasClass('category-button') ? '.category-button' :
                    '.category-item');
                getDownload(id);
            });

            function updateCategorySelection(selectedElement, selector) {
                $(selector).removeClass('bg-blue-600 text-white border-blue-600')
                    .addClass('bg-gray-200 text-gray-900 border-gray-300');
                selectedElement.addClass('bg-blue-600 text-white border-blue-600');
            }

            function getDownload(id, pageUrl = null) {
                if (!id && !pageUrl) return;
                let downloadUrl = pageUrl || "{{ route('get-download', ':id') }}".replace(":id", id);
                $('.download-content').removeClass('opacity-100').addClass('opacity-0');

                $.ajax({
                    type: "GET",
                    url: downloadUrl,
                    success: function(response) {
                        setTimeout(function() {
                            $('.download-content').html(response).removeClass('opacity-0')
                                .addClass('opacity-100');
                        }, 300);
                    }
                });
            }

            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                let pageUrl = $(this).attr('href');
                getDownload(null, pageUrl);
            });

            // Dropdown menu handling
            $('#dropdownButton').click(function() {
                $('#dropdownMenu').toggleClass('hidden');
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#dropdownButton, #dropdownMenu').length) {
                    $('#dropdownMenu').addClass('hidden');
                }
            });
        });
    </script>
@endpush