@extends('frontend::layouts.master')

@section('content')
    <div class="max-w-5xl mx-auto py-[7rem] px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-med-dark mb-8">{{ $link_related['name'] ?? '' }}</h1>
        <div class="bg-white overflow-hidden">
            <div class="grid grid-cols-1 lg:grid-cols-[250px_1fr]">
                <div class="border-b lg:border-b-0 lg:border-r border-gray-200 bg-med-gray lg:bg-white">
                    <div class="flex lg:flex-col overflow-x-auto lg:overflow-x-visible">
                        <button class="tab-policy-btn active px-4 lg:px-6 py-4 text-sm sm:text-base font-medium transition-colors whitespace-nowrap border-b-2 lg:border-b-0 lg:border-l-2 border-med-primary lg:border-l-med-primary text-med-primary bg-white lg:bg-white" data-tab-target="tab-fixed">
                            {{ $link_related['name'] ?? '' }}
                        </button>
                        @foreach ($list['list'] ?? [] as $tab)
                            <button class="tab-policy-btn px-4 lg:px-6 py-4 text-sm sm:text-base font-medium transition-colors whitespace-nowrap border-b-2 lg:border-b-0 lg:border-l-2 border-transparent text-gray-500 hover:text-med-dark hover:bg-gray-50 lg:hover:bg-med-gray" data-tab-target="tab-dynamic-{{ $tab['id'] }}">
                                {{ $tab['name'] ?? '' }}
                            </button>
                        @endforeach
                    </div>
                </div>
                <div class="px-4 py-4 sm:px-6 lg:px-8">
                    <div class="tab-policy-content active" id="tab-fixed">
                        <div class="space-y-4">
                            @foreach ($faqs['list'] ?? [] as $faq)
                                <x-frontend::faq-item question="{{ $faq['name'] ?? '' }}" answer="{{ $faq['desc'] ?? '' }}" />
                            @endforeach
                        </div>
                    </div>

                    @foreach ($list['list'] ?? [] as $tab)
                        <div class="tab-policy-content" id="tab-dynamic-{{ $tab['id'] }}">
                            <div class="prose prose-slate max-w-none">
                                <h2>{{ $tab['name'] ?? '' }}</h2>
                                <div>
                                    {!! $tab['detail'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            // Initialize tabs when DOM is ready
            document.addEventListener('DOMContentLoaded', function() {
                initializePolicyTabs();
            });

            function initializePolicyTabs() {
                const tabButtons = document.querySelectorAll('.tab-policy-btn[data-tab-target]');

                tabButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const targetId = this.getAttribute('data-tab-target');
                        switchPolicyTab(targetId, this);
                    });
                });
            }

            function switchPolicyTab(targetId, clickedButton) {
                // Remove active class from all buttons
                document.querySelectorAll('.tab-policy-btn').forEach(btn => {
                    btn.classList.remove('active', 'text-med-primary', 'border-med-primary', 'lg:border-l-med-primary', 'bg-white');
                    btn.classList.add('text-gray-500', 'border-transparent', 'lg:border-l-transparent');
                });

                // Add active class to clicked button
                if (clickedButton) {
                    clickedButton.classList.add('active', 'text-med-primary', 'border-med-primary', 'lg:border-l-med-primary', 'bg-white', 'lg:bg-white');
                    clickedButton.classList.remove('text-gray-500', 'border-transparent', 'lg:border-l-transparent');
                }

                // Hide all content
                document.querySelectorAll('.tab-policy-content').forEach(content => {
                    content.classList.remove('active');
                });

                // Show target content
                const targetContent = document.getElementById(targetId);
                if (targetContent) {
                    targetContent.classList.add('active');
                }
            }

            // Expose function globally for backward compatibility (if needed)
            window.switchPolicyTab = function(tabId) {
                const targetId = 'content-' + tabId;
                const button = document.querySelector(`[data-tab-target="${targetId}"]`);
                switchPolicyTab(targetId, button);
            };
        })();
    </script>
@endpush