@props([
    'manuals' => null, // optional override
])

@php
    $manuals = $manuals ?? [
        ['title' => 'Licentia Franchise SOP', 'description' => 'Standard Operating Procedures (SOP) Manual.', 'url' => null],
        ['title' => 'Retail Liquor', 'description' => 'Retail liquor related procedures and requirements.', 'url' => null],
        ['title' => 'Wholesale Liquor', 'description' => 'Wholesale liquor operations & compliance.', 'url' => null],
        ['title' => 'Business Trade', 'description' => 'Business operations & trade guidance.', 'url' => null],
        ['title' => 'Certificate of Acceptability', 'description' => 'Certificate requirements and process.', 'url' => null],
        ['title' => 'Fire Compliance', 'description' => 'Fire safety and compliance documentation.', 'url' => null],
        ['title' => 'Population', 'description' => 'Demographic / population related guidance.', 'url' => null],
        ['title' => 'Sampra', 'description' => 'Sampra related manual.', 'url' => null],
        ['title' => 'Samro', 'description' => 'Samro related manual.', 'url' => null],
        ['title' => 'Petroleum', 'description' => 'Petroleum operations & safety.', 'url' => null],
        ['title' => 'Intellectual Property', 'description' => 'IP guidance (trademarks, patents, copyrights).', 'url' => null],
        ['title' => 'Copy Right', 'description' => 'Copyright information and policies.', 'url' => null],
        ['title' => 'Trade Marks and Patents', 'description' => 'Trademarks and patents guidance.', 'url' => null],
        ['title' => 'RefCheck', 'description' => 'Reference checking / verification process.', 'url' => null],
        ['title' => 'ALAMS (Automated License Application and Management System)', 'description' => 'System for automating license applications and document management.', 'url' => null],
    ];
@endphp

<div x-data="{ open: false }" x-cloak class="grid">
    <x-filament::section class="mt-6 w-full max-w-full">
        <x-slot name="heading">Operational Manuals</x-slot>

        {{-- make the section content centered both horizontally and vertically --}}
        <div class="w-full flex items-center justify-around gap-4  min-h-[160px]">
            <div class="text-center">
                <div class="text-sm font-medium text-gray-900">Manuals</div>
                <div class="text-xs text-gray-500">Available manuals: {{ count($manuals) }}</div>
            </div>

            {{-- Centered button --}}
            <div class="flex justify-center">
                <button
                    type="button"
                    @click="open = true"
                    class="inline-flex items-center rounded bg-black px-4 py-2 text-sm font-medium text-white hover:opacity-95"
                >
                    Open Manuals
                </button>
            </div>
        </div>
    </x-filament::section>

    <!-- Modal -->
    <div
        x-show="open"
        class="fixed inset-0 z-40 flex items-center justify-center"
        style="display: none;"
        aria-modal="true"
        role="dialog"
        @keydown.escape.window="open = false"
    >
        <!-- Backdrop -->
        <div x-show="open" x-transition.opacity class="fixed inset-0 bg-black/50" @click="open = false"></div>

        <!-- Panel (wider / taller) -->
        <div
            x-show="open"
            x-transition.origin.center
            class="relative z-50 w-full max-w-6xl max-h-[80vh] rounded bg-white shadow-lg overflow-hidden flex flex-col"
        >
            <div class="flex items-center justify-between border-b px-4 py-3">
                <h3 class="text-sm font-semibold">Operational Manuals</h3>
                <div class="flex items-center gap-2">
                    <button
                        @click="open = false"
                        class="text-sm text-gray-500 hover:text-gray-700"
                        aria-label="Close"
                    >Close</button>
                </div>
            </div>

            <!-- Scrollable list (flex-1 removes bottom whitespace, keeps padding inside items) -->
            <div class="overflow-y-auto flex-1" style="min-height:0;">
                @foreach($manuals as $m)
                    <div
                        class="flex items-center justify-between gap-4 px-4 py-3 border-b last:border-b-0 hover:bg-gray-50 hover:shadow-md cursor-pointer transition"
                        role="button"
                        tabindex="0"
                        @click="$el.querySelector('a') ? $el.querySelector('a').click() : null"
                    >
                        <div class="min-w-0">
                            <div class="text-sm font-medium text-gray-900">{{ e(data_get($m, 'title')) }}</div>
                            @if(data_get($m, 'description'))
                                <div class="text-xs text-gray-500 mt-0.5">{{ e(data_get($m, 'description')) }}</div>
                            @endif
                        </div>

                        @php
                            $url = data_get($m, 'url');
                            $route = data_get($m, 'route');
                        @endphp

                        <div class="flex items-center gap-2">
                            @if($url)
                                <a href="{{ $url }}" download class="inline-flex items-center rounded bg-black px-3 py-1 text-xs font-medium text-white hover:opacity-95">
                                    Download
                                </a>
                            @elseif($route)
                                <a href="{{ route($route, data_get($m, 'route_params', [])) }}" class="inline-flex items-center rounded bg-black px-3 py-1 text-xs font-medium text-white hover:opacity-95">
                                    Download
                                </a>
                            @else
                                <button type="button" disabled class="inline-flex items-center rounded border border-gray-300 bg-gray-100 px-3 py-1 text-xs text-gray-500">
                                    No file
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>