@extends('layouts.master')

@section('content')
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Header Section -->
        <div class="mb-8">
            <h1 class="text-4xl font-bold text-gray-900 mb-2">User Manual</h1>
            <p class="text-gray-600">Browse through our comprehensive documentation</p>
        </div>

        <!-- Accordion Container -->
        <div id="userManualAccordion" class="space-y-4">
            @if ($manuals !== null)
                @foreach ($manuals as $index => $manual)
                    <div
                        class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
                        <!-- Accordion Header -->
                        <h2 id="heading{{ $manual['id'] }}">
                            <button
                                class="accordion-button {{ $index !== 0 ? 'collapsed' : '' }} w-full px-6 py-5 text-left flex items-center justify-between group"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $manual['id'] }}"
                                aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-controls="collapse{{ $manual['id'] }}">
                                <div class="flex items-center gap-4">
                                    <div
                                        class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
                                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                        </svg>
                                    </div>
                                    <span
                                        class="text-lg font-semibold text-gray-900 group-hover:text-green-600 transition-colors">
                                        {{ $manual['title'] }}
                                    </span>
                                </div>
                                <svg class="w-5 h-5 text-gray-400 transition-transform duration-200" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>
                        </h2>

                        <!-- Accordion Body -->
                        <div id="collapse{{ $manual['id'] }}"
                            class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                            aria-labelledby="heading{{ $manual['id'] }}" data-bs-parent="#userManualAccordion">
                            <div class="px-6 py-5 bg-gray-50 border-t border-gray-200">
                                <!-- Description -->
                                <div class="mb-6">
                                    <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">Description
                                    </h3>
                                    <p class="text-gray-700 leading-relaxed">{{ $manual['description'] }}</p>
                                </div>
                                <div class="flex flex-wrap gap-4 justify-between">
                                    <!-- Go to Detail Page -->
                                    <div class="pt-4 border-t border-gray-200">
                                        <a href="{{ route('user-manual.show', ['id' => $manual['id']]) }}"
                                            class="inline-flex items-center gap-2 px-4 py-2.5 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors shadow-sm hover:shadow">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 12H9m6 0l-3-3m3 3l-3 3m12-9v12a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2z" />
                                            </svg>
                                            <span>Go to Detail</span>
                                        </a>
                                    </div>
                                    <!-- Attachment -->
                                    <div class="pt-4 border-t border-gray-200">
                                        <a href="{{ $manual['attachment'] }}" target="_blank"
                                            class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors shadow-sm hover:shadow">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                            <span>Download PDF</span>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
    <style>
        /* Hide collapsed accordion content */
        .accordion-collapse {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
            visibility: visible;
            /* Ensure visibility is always set to visible */
        }

        .accordion-collapse.collapse:not(.show) {
            max-height: 0;
        }

        /* Rotate chevron when accordion is open */
        .accordion-button.collapsed svg:last-child {
            transform: rotate(0deg);
        }

        .accordion-button:not(.collapsed) svg:last-child {
            transform: rotate(180deg);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all accordion buttons
            const accordionButtons = document.querySelectorAll('[data-bs-toggle="collapse"]');

            accordionButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();

                    const targetId = this.getAttribute('data-bs-target');
                    const target = document.querySelector(targetId);

                    if (!target) return;

                    // Close all other accordions in the parent
                    const parentAccordion = document.querySelector('#userManualAccordion');
                    const allCollapses = parentAccordion.querySelectorAll('.accordion-collapse');
                    const allButtons = parentAccordion.querySelectorAll('.accordion-button');

                    allCollapses.forEach(collapse => {
                        if (collapse !== target && collapse.classList.contains('show')) {
                            collapse.classList.remove('show');
                        }
                    });

                    allButtons.forEach(btn => {
                        if (btn !== this && !btn.classList.contains('collapsed')) {
                            btn.classList.add('collapsed');
                            btn.setAttribute('aria-expanded', 'false');
                        }
                    });

                    // Toggle current accordion
                    const isExpanded = target.classList.contains('show');
                    if (isExpanded) {
                        target.classList.remove('show');
                        this.classList.add('collapsed');
                        this.setAttribute('aria-expanded', 'false');
                    } else {
                        target.classList.add('show');
                        this.classList.remove('collapsed');
                        this.setAttribute('aria-expanded', 'true');
                    }
                });
            });
        });
    </script>
@endsection