@extends('layouts.app')
@section('page-title', 'File Browser')

@section('content')

<div x-data="fileBrowserApp({
    folders: @js($foldersJson),
    docsUrl: '{{ route('admin.files.documents') }}',
    searchUrl: '{{ route('admin.files.search') }}'
})">

    
    <x-admin-hero-header
        title="File Browser"
        subtitle="Browse all folders and documents in a unified explorer view"
        eyebrow="File Explorer"
    >
        <x-slot:icon>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"/>
            </svg>
        </x-slot:icon>
        <x-slot:actions>
            <a href="{{ route('admin.documents.index') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" 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>
                All Documents
            </a>
        </x-slot:actions>
    </x-admin-hero-header>

    
    <div class="mb-5 relative">
        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
            <svg class="h-5 w-5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
            </svg>
        </div>
        <input type="text" x-model="globalSearch"
               placeholder="Search all folders and documents across the entire system..."
               class="form-input w-full rounded-xl py-3 pl-11 pr-10 text-sm shadow-soft" />
        <button x-show="globalSearch" @click="globalSearch = ''" type="button"
                class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-surface-400 hover:text-surface-600">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    
    <div x-show="isSearchMode" x-cloak class="folders-layout">

        
        <div class="card p-6">

            
            <div class="mb-5 flex items-center gap-2">
                <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
                </svg>
                <span class="text-xs font-bold uppercase tracking-wider text-surface-400">Search Results</span>
                <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500"
                      x-text="searchFolderResults.length + searchDocResults.length"></span>
            </div>

            
            <div x-show="searchFolderResults.length === 0 && searchDocResults.length === 0"
                 class="empty-state py-16">
                <div class="empty-state-icon">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
                    </svg>
                </div>
                <p class="text-sm font-semibold text-surface-600">No results found</p>
                <p class="mt-1 text-xs text-surface-400">Try a different keyword</p>
            </div>

            
            <div x-show="searchFolderResults.length > 0" class="mb-6">
                <div class="mb-3 flex items-center gap-2">
                    <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                    </svg>
                    <span class="text-xs font-bold uppercase tracking-wider text-surface-400">Folders</span>
                    <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500"
                          x-text="searchFolderResults.length"></span>
                </div>
                <div class="space-y-1">
                    <template x-for="folder in searchFolderResults" :key="folder.id">
                        <button type="button"
                                @click="openSearchFolder(folder)"
                                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-colors hover:bg-surface-50">
                            <div class="shrink-0">
                                <svg viewBox="0 0 84 58" fill="none" class="h-[30px] w-[38px] drop-shadow-sm">
                                    <path d="M6 11C6 7.686 8.686 5 12 5H34L42 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V11Z"
                                          :fill="typeTheme(folder.document_type).fill[0]"/>
                                    <path d="M6 20C6 16.686 8.686 14 12 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V20Z"
                                          :fill="typeTheme(folder.document_type).fill[1]"/>
                                    <path d="M18 26H60" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
                                </svg>
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-semibold text-surface-900" x-text="folder.name"></p>
                                <p class="mt-0.5 truncate text-xs text-surface-400" x-text="folderResultPath(folder)"></p>
                            </div>
                            <svg class="h-4 w-4 shrink-0 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </template>
                </div>
            </div>

            
            <div x-show="searchDocResults.length > 0">
                <div class="mb-3 flex items-center gap-2">
                    <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" 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>
                    <span class="text-xs font-bold uppercase tracking-wider text-surface-400">Documents</span>
                    <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500"
                          x-text="searchDocResults.length"></span>
                </div>
                <div class="space-y-1">
                    <template x-for="doc in searchDocResults" :key="doc.id">
                        <button type="button"
                                @click="openSearchDocument(doc)"
                                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-colors hover:bg-surface-50">
                            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[10px] font-extrabold tracking-wider"
                                 :class="formatBadgeClass(doc.file_format)"
                                 x-text="formatLabel(doc.file_format)">
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-semibold text-surface-900" x-text="doc.title"></p>
                                <p class="mt-0.5 truncate text-xs text-surface-400" x-text="documentPath(doc)"></p>
                            </div>
                            <div class="flex shrink-0 items-center gap-2">
                                <svg class="h-4 w-4 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </div>
                        </button>
                    </template>
                </div>
            </div>
        </div>

        
        <div class="sticky top-[88px] overflow-hidden rounded-2xl border border-surface-100 bg-white shadow-soft">
            <div x-show="!selectedItem" class="empty-state min-h-[280px] py-12">
                <div class="empty-state-icon">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
                    </svg>
                </div>
                <p class="text-base font-semibold text-surface-700">Click a result</p>
                <p class="mt-2 max-w-[220px] text-sm leading-6 text-surface-400">Select any folder or document to navigate to it</p>
            </div>

            
            <div x-show="selectedItem?.kind === 'folder'" x-cloak>
                <div class="relative border-b border-surface-100 px-7 py-7"
                     :class="selectedItem?.data?.document_type === 'controlled_documents'
                        ? 'bg-gradient-to-b from-primary-50 to-white'
                        : selectedItem?.data?.document_type === 'records'
                            ? 'bg-gradient-to-b from-emerald-50 to-white'
                            : 'bg-gradient-to-b from-amber-50 to-white'">
                    <button type="button" @click="selectedItem = null"
                            class="absolute right-4 top-4 inline-icon-button-neutral rounded-full">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                    <div class="flex items-start gap-4">
                        <div class="w-[54px] shrink-0 pt-1">
                            <svg viewBox="0 0 72 60" fill="none" class="h-[42px] w-[54px] drop-shadow-sm">
                                <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                                      :fill="typeTheme(selectedItem?.data?.document_type).fill[0]"/>
                                <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                                      :fill="typeTheme(selectedItem?.data?.document_type).fill[1]"/>
                                <path d="M10 23H62" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
                            </svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h3 class="line-clamp-2 text-base font-bold leading-6 text-surface-900" x-text="selectedItem?.data?.name"></h3>
                            <p class="mt-1 text-xs text-surface-400" x-text="folderResultPath(selectedItem?.data)"></p>
                        </div>
                    </div>
                </div>
                <div class="folder-actions">
                    <button type="button" @click="openSearchFolder(selectedItem.data)"
                            class="folder-action-primary bg-gradient-to-r text-white"
                            :class="typeTheme(selectedItem?.data?.document_type).solid">
                        <svg class="h-[15px] w-[15px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"/>
                        </svg>
                        Open Folder
                    </button>
                </div>
            </div>

            
            <div x-show="selectedItem?.kind === 'document'" x-cloak>
                <div class="relative border-b border-surface-100 px-7 py-7"
                     :class="selectedItem?.data?.document_type === 'controlled_documents'
                        ? 'bg-gradient-to-b from-primary-50 to-white'
                        : selectedItem?.data?.document_type === 'records'
                            ? 'bg-gradient-to-b from-emerald-50 to-white'
                            : 'bg-gradient-to-b from-amber-50 to-white'">
                    <button type="button" @click="selectedItem = null"
                            class="absolute right-4 top-4 inline-icon-button-neutral rounded-full">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                    <div class="flex items-start gap-3">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-[11px] font-extrabold tracking-wider"
                             :class="formatBadgeClass(selectedItem?.data?.file_format)"
                             x-text="formatLabel(selectedItem?.data?.file_format)">
                        </div>
                        <div class="min-w-0 flex-1 pt-0.5">
                            <h3 class="line-clamp-2 text-sm font-bold leading-5 text-surface-900" x-text="selectedItem?.data?.title"></h3>
                            <p class="mt-1 text-xs text-surface-400" x-text="documentPath(selectedItem?.data)"></p>
                        </div>
                    </div>
                </div>
                <div class="space-y-4 px-7 py-5">
                    <div x-show="selectedItem?.data?.doc_number || selectedItem?.data?.uploaded_by || (selectedItem?.data?.document_type === 'controlled_documents' && selectedItem?.data?.version)">
                        <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.06em] text-surface-400">Document Info</p>
                        <div class="space-y-1.5">
                            <div x-show="selectedItem?.data?.doc_number" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Number</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="selectedItem?.data?.doc_number"></span>
                            </div>
                            <div x-show="selectedItem?.data?.document_type === 'controlled_documents' && selectedItem?.data?.version" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Version</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="'v' + selectedItem?.data?.version"></span>
                            </div>
                            <div x-show="selectedItem?.data?.uploaded_by" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Uploaded by</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="selectedItem?.data?.uploaded_by"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="folder-actions">
                    <a :href="selectedItem?.data?.show_url"
                       target="_blank" rel="noopener"
                       class="folder-action-primary bg-gradient-to-r text-white"
                       :class="typeTheme(selectedItem?.data?.document_type).solid">
                        <svg class="h-[15px] w-[15px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        View Document
                    </a>
                    <a x-show="selectedItem?.data?.download_url"
                       :href="selectedItem?.data?.download_url"
                       target="_blank" rel="noopener"
                       class="folder-action-secondary"
                       :class="typeTheme(selectedItem?.data?.document_type).soft"
                       style="display:none;">
                        <svg class="h-[14px] w-[14px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                        Download File
                    </a>
                    <div class="folder-action-row">
                        <a x-show="selectedItem?.data?.new_version_url" :href="selectedItem?.data?.new_version_url" class="folder-action-muted" style="display:none;">
                            <svg class="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                            </svg>
                            New Version
                        </a>
                        <a x-show="selectedItem?.data?.replace_url" :href="selectedItem?.data?.replace_url" class="folder-action-muted" style="display:none;">
                            <svg class="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Replace File
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div x-show="!isAtRoot && !isSearchMode" x-cloak
         class="mb-5 flex flex-wrap items-center gap-1 rounded-xl border border-surface-100 bg-surface-50 px-3 py-2">
        <button @click="goToRoot()"
                class="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-semibold text-surface-500 transition-colors hover:bg-surface-200 hover:text-surface-700">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            File Browser
        </button>
        <template x-for="(crumb, i) in breadcrumbs" :key="i">
            <div class="flex items-center gap-1">
                <span class="text-surface-300">/</span>
                <button
                    @click="navigateToCrumb(crumb)"
                    class="rounded-lg px-2 py-1 text-xs transition-colors hover:bg-surface-200"
                    :class="i === breadcrumbs.length - 1
                        ? 'font-semibold text-surface-900'
                        : 'text-surface-500 hover:text-surface-700'"
                    x-text="crumb.name"
                ></button>
            </div>
        </template>
    </div>

    
    <div x-show="isAtRoot && !isSearchMode" class="drive-grid">
        <template x-for="drive in drives" :key="drive.type">
            <button type="button"
                    @click="enterType(drive.type)"
                    class="drive-card bg-gradient-to-br"
                    :class="[typeTheme(drive.type).driveBg, typeTheme(drive.type).driveBorder]">

                <div class="drive-card__folder">
                    <svg viewBox="0 0 84 58" fill="none" class="h-full w-full drop-shadow-sm">
                        <path d="M6 11C6 7.686 8.686 5 12 5H34L42 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V11Z"
                              :fill="typeTheme(drive.type).fill[0]"/>
                        <path d="M6 20C6 16.686 8.686 14 12 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V20Z"
                              :fill="typeTheme(drive.type).fill[1]"/>
                        <path d="M18 26H60" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
                    </svg>
                </div>

                <div>
                    <p class="drive-card__title" :class="typeTheme(drive.type).driveHeading" x-text="drive.label"></p>
                    <p class="drive-card__desc" :class="typeTheme(drive.type).driveHeading" x-text="drive.desc"></p>
                </div>

                <div class="drive-card__stats">
                    <div class="drive-stat">
                        <span class="drive-stat__value" :class="typeTheme(drive.type).driveHeading" x-text="typeStats(drive.type).folders"></span>
                        <span class="drive-stat__label" :class="typeTheme(drive.type).driveHeading">Folders</span>
                    </div>
                    <div class="drive-stat">
                        <span class="drive-stat__value" :class="typeTheme(drive.type).driveHeading" x-text="typeStats(drive.type).docs"></span>
                        <span class="drive-stat__label" :class="typeTheme(drive.type).driveHeading">Documents</span>
                    </div>
                </div>

                <svg class="absolute bottom-5 right-5 h-5 w-5 opacity-25"
                     :class="typeTheme(drive.type).driveHeading"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </template>
    </div>

    
    <div x-show="!isAtRoot && !isSearchMode" class="folders-layout" style="display:none;">

        
        <div class="card p-6">

            
            
            <div x-show="filteredFolders.length > 0">
                <div class="mb-4 flex items-center gap-2">
                    <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                    </svg>
                    <span class="text-xs font-bold uppercase tracking-wider text-surface-400">Folders</span>
                    <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500" x-text="filteredFolders.length"></span>
                </div>

                <div class="folders-grid mb-8">
                    <template x-for="folder in filteredFolders" :key="folder.id">
                        <button
                            type="button"
                            @click="selectItem('folder', folder)"
                            @dblclick="openFolder(folder)"
                            class="folder-card transition-all"
                            :class="selectedFolderCardClass(folder)"
                        >
                            <div class="folder-card__icon">
                                <svg viewBox="0 0 84 58" fill="none" class="h-[82px] w-[104px] drop-shadow-sm">
                                    <path d="M6 11C6 7.686 8.686 5 12 5H34L42 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V11Z"
                                          :fill="typeTheme(folder.document_type).fill[0]"/>
                                    <path d="M6 20C6 16.686 8.686 14 12 14H72C75.314 14 78 16.686 78 20V46C78 49.314 75.314 52 72 52H12C8.686 52 6 49.314 6 46V20Z"
                                          :fill="typeTheme(folder.document_type).fill[1]"/>
                                    <path d="M18 26H60" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
                                </svg>
                                <span
                                    x-show="visibleChildrenCount(folder) > 0"
                                    class="absolute -bottom-0.5 -right-0.5 flex min-h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-sm"
                                    :class="userCountBadgeClass(folder.document_type)"
                                    x-text="visibleChildrenCount(folder)"
                                    title="Sub-folders"
                                ></span>
                                <span
                                    x-show="folder.documents_count > 0"
                                    class="absolute -bottom-0.5 -left-0.5 flex min-h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold text-white shadow-sm bg-surface-500"
                                    x-text="folder.documents_count"
                                    title="Documents"
                                ></span>
                            </div>
                            <p class="folder-card__title" x-text="folder.name"></p>
                        </button>
                    </template>
                </div>
            </div>


            <div x-show="loadingDocs && currentFolderId !== null" x-cloak class="flex items-center gap-3 py-8 justify-center">
                <div class="h-5 w-5 animate-spin rounded-full border-2 border-surface-200 border-t-primary-600"></div>
                <span class="text-sm text-surface-400">Loading documents…</span>
            </div>

            <div x-show="!loadingDocs && filteredDocuments.length > 0">
                <div class="mb-3 flex items-center gap-2">
                    <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" 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>
                    <span class="text-xs font-bold uppercase tracking-wider text-surface-400">Documents</span>
                    <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500" x-text="filteredDocuments.length"></span>
                </div>

                <div class="file-browser-grid">
                    <template x-for="doc in filteredDocuments" :key="doc.id">
                        <button
                            type="button"
                            @click="selectItem('document', doc)"
                            @dblclick="if (doc.show_url) window.location.href = doc.show_url"
                            class="file-card transition-all"
                            :class="selectedDocCardClass(doc)"
                        >
                            <div class="file-card__icon">
                                
                                <svg viewBox="0 0 60 72" fill="none" class="file-card__svg" aria-hidden="true">
                                    <path d="M4 0H42L60 18V68C60 70.2 58.2 72 56 72H4C1.8 72 0 70.2 0 68V4C0 1.8 1.8 0 4 0Z"
                                          :fill="formatIconTheme(doc.file_format).bg"/>
                                    <path d="M42 0L60 18H46C43.8 18 42 16.2 42 14V0Z"
                                          :fill="formatIconTheme(doc.file_format).fold"/>
                                    <rect x="10" y="32" width="22" height="2.5" rx="1.25" :fill="formatIconTheme(doc.file_format).lines" opacity="0.55"/>
                                    <rect x="10" y="39" width="34" height="2.5" rx="1.25" :fill="formatIconTheme(doc.file_format).lines" opacity="0.4"/>
                                    <rect x="10" y="46" width="28" height="2.5" rx="1.25" :fill="formatIconTheme(doc.file_format).lines" opacity="0.4"/>
                                </svg>
                                
                                <span class="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-md px-1.5 py-[3px] text-[9px] font-extrabold tracking-wider leading-none shadow-sm"
                                      :class="formatBadgeClass(doc.file_format)"
                                      x-text="formatLabel(doc.file_format)"></span>
                                
                            </div>
                            <p class="file-card__title" x-text="doc.title"></p>
                            <p class="file-card__meta" x-show="doc.doc_number">
                                <span x-text="doc.doc_number"></span>
                                <span x-show="doc.version" x-text="' · v' + doc.version"></span>
                            </p>
                        </button>
                    </template>
                </div>
            </div>

            
            
            <div x-show="!loadingDocs && filteredFolders.length === 0 && filteredDocuments.length === 0" class="empty-state py-20">
                <div class="mb-4 flex h-16 w-16 items-center justify-center opacity-40">
                    <svg viewBox="0 0 72 60" fill="none" class="h-full w-full">
                        <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                              :fill="currentType ? typeTheme(currentType).fill[0] : '#94A3B8'"/>
                        <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                              :fill="currentType ? typeTheme(currentType).fill[1] : '#CBD5E1'"/>
                    </svg>
                </div>
                <p class="text-sm font-semibold text-surface-600">
                    <span x-show="currentFolderId !== null">This folder is empty</span>
                    <span x-show="currentFolderId === null">No folders yet</span>
                </p>
                <p class="mt-1 text-xs text-surface-400">
                    <span>Create a new folder to get started</span>
                </p>
                <a :href="'{{ route('admin.folders.create') }}?type=' + currentType + (currentFolderId ? '&parent_id=' + currentFolderId : '')"
                   class="btn-primary mt-5">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    New Folder
                </a>
            </div>
        </div>

        
        <div class="sticky top-[88px] overflow-hidden rounded-2xl border border-surface-100 bg-white shadow-soft">

            
            <div x-show="!selectedItem" class="empty-state min-h-[280px] py-12">
                <div class="empty-state-icon">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                    </svg>
                </div>
                <p class="text-base font-semibold text-surface-700">Select an item</p>
                <p class="mt-2 max-w-[220px] text-sm leading-6 text-surface-400">Click any folder or document to view its details</p>
            </div>

            
            <div x-show="selectedItem?.kind === 'folder'" x-cloak>
                <div class="relative border-b border-surface-100 px-7 py-7"
                     :class="selectedItem?.data?.document_type === 'controlled_documents'
                        ? 'bg-gradient-to-b from-primary-50 to-white'
                        : selectedItem?.data?.document_type === 'records'
                            ? 'bg-gradient-to-b from-emerald-50 to-white'
                            : 'bg-gradient-to-b from-amber-50 to-white'">

                    <button type="button" @click="selectedItem = null"
                            class="absolute right-4 top-4 inline-icon-button-neutral rounded-full" aria-label="Close details">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>

                    <div class="flex items-start gap-4">
                        <div class="w-[54px] shrink-0 pt-1">
                            <svg viewBox="0 0 72 60" fill="none" class="h-[42px] w-[54px] drop-shadow-sm">
                                <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                                      :fill="typeTheme(selectedItem?.data?.document_type).fill[0]"/>
                                <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                                      :fill="typeTheme(selectedItem?.data?.document_type).fill[1]"/>
                                <path d="M10 23H62" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
                            </svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h3 class="line-clamp-2 text-base font-bold leading-6 text-surface-900" x-text="selectedItem?.data?.name"></h3>
                            <div class="mt-4">
                                <span class="folder-status-badge"
                                      :class="selectedItem?.data?.status ? 'folder-status-badge--active' : 'folder-status-badge--inactive'">
                                    <span class="folder-status-badge__dot"
                                          :class="selectedItem?.data?.status ? 'folder-status-badge__dot--active' : 'folder-status-badge__dot--inactive'"></span>
                                    <span x-text="selectedItem?.data?.status ? 'Active' : 'Inactive'"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-5 px-7 py-6">
                    <div x-show="selectedItem?.data?.description">
                        <p class="mb-1.5 text-[11px] font-bold uppercase tracking-[0.06em] text-surface-400">Description</p>
                        <p class="text-sm leading-6 text-surface-600" x-text="selectedItem?.data?.description"></p>
                    </div>

                    <div class="grid grid-cols-2 gap-2">
                        <div class="detail-stat">
                            <div class="detail-stat-icon">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" 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>
                            <div>
                                <p class="detail-stat-value" x-text="selectedItem?.data?.documents_count ?? 0"></p>
                                <p class="detail-stat-label">Docs</p>
                            </div>
                        </div>

                        <div class="detail-stat">
                            <div class="detail-stat-icon">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="detail-stat-value" x-text="visibleChildrenCount(selectedItem?.data)"></p>
                                <p class="detail-stat-label">Sub-folders</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="folder-actions">
                    <button type="button" @click="openFolder(selectedItem.data)"
                            class="folder-action-primary bg-gradient-to-r text-white"
                            :class="typeTheme(selectedItem?.data?.document_type).solid">
                        <svg class="h-[15px] w-[15px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"/>
                        </svg>
                        Open Folder
                    </button>

                    <a :href="selectedItem?.data?.new_doc_url"
                       class="folder-action-secondary"
                       :class="typeTheme(selectedItem?.data?.document_type).soft">
                        <svg class="h-[14px] w-[14px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
                        </svg>
                        New Document
                    </a>

                    <div class="folder-action-row">
                        <a :href="selectedItem?.data?.edit_url" class="folder-action-muted">
                            <svg class="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            Edit Folder
                        </a>
                    </div>
                </div>
            </div>

            
            <div x-show="selectedItem?.kind === 'document'" x-cloak>
                <div class="relative border-b border-surface-100 px-7 py-7"
                     :class="selectedItem?.data?.document_type === 'controlled_documents'
                        ? 'bg-gradient-to-b from-primary-50 to-white'
                        : selectedItem?.data?.document_type === 'records'
                            ? 'bg-gradient-to-b from-emerald-50 to-white'
                            : 'bg-gradient-to-b from-amber-50 to-white'">

                    <button type="button" @click="selectedItem = null"
                            class="absolute right-4 top-4 inline-icon-button-neutral rounded-full" aria-label="Close details">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>

                    <div class="flex items-start gap-3">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-[11px] font-extrabold tracking-wider"
                             :class="formatBadgeClass(selectedItem?.data?.file_format)"
                             x-text="formatLabel(selectedItem?.data?.file_format)">
                        </div>
                        <div class="min-w-0 flex-1 pt-0.5">
                            <h3 class="line-clamp-2 text-sm font-bold leading-5 text-surface-900" x-text="selectedItem?.data?.title"></h3>
                        </div>
                    </div>
                </div>

                <div class="space-y-5 px-7 py-6">
                    <div x-show="selectedItem?.data?.doc_number || selectedItem?.data?.version || selectedItem?.data?.uploaded_by">
                        <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.06em] text-surface-400">Document Info</p>
                        <div class="space-y-1.5">
                            <div x-show="selectedItem?.data?.doc_number" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Number</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="selectedItem?.data?.doc_number"></span>
                            </div>
                            <div x-show="selectedItem?.data?.document_type === 'controlled_documents' && selectedItem?.data?.version" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Version</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="'v' + selectedItem?.data?.version"></span>
                            </div>
                            <div x-show="selectedItem?.data?.uploaded_by" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Uploaded by</span>
                                <span class="text-xs font-semibold text-surface-900" x-text="selectedItem?.data?.uploaded_by"></span>
                            </div>
                        </div>
                    </div>

                    <div x-show="selectedItem?.data?.document_type === 'controlled_documents' && (selectedItem?.data?.revision_date || selectedItem?.data?.effective_date)">
                        <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.06em] text-surface-400">Dates</p>
                        <div class="space-y-1.5">
                            <div x-show="selectedItem?.data?.revision_date" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Revision</span>
                                <span class="text-xs font-medium text-surface-700" x-text="selectedItem?.data?.revision_date"></span>
                            </div>
                            <div x-show="selectedItem?.data?.effective_date" class="flex items-center justify-between">
                                <span class="text-xs text-surface-500">Effective</span>
                                <span class="text-xs font-medium text-surface-700" x-text="selectedItem?.data?.effective_date"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="folder-actions">
                    <a :href="selectedItem?.data?.show_url"
                       target="_blank" rel="noopener"
                       class="folder-action-primary bg-gradient-to-r text-white"
                       :class="typeTheme(selectedItem?.data?.document_type).solid">
                        <svg class="h-[15px] w-[15px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        View Document
                    </a>

                    <a x-show="selectedItem?.data?.download_url"
                       :href="selectedItem?.data?.download_url"
                       target="_blank" rel="noopener"
                       class="folder-action-secondary"
                       :class="typeTheme(selectedItem?.data?.document_type).soft"
                       style="display:none;">
                        <svg class="h-[14px] w-[14px] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                        Download File
                    </a>
                    <div class="folder-action-row">
                        <a x-show="selectedItem?.data?.new_version_url" :href="selectedItem?.data?.new_version_url" class="folder-action-muted" style="display:none;">
                            <svg class="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                            </svg>
                            New Version
                        </a>
                        <a x-show="selectedItem?.data?.replace_url" :href="selectedItem?.data?.replace_url" class="folder-action-muted" style="display:none;">
                            <svg class="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Replace File
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

@endsection