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

@section('content')

@php $typeLabels = \App\Models\Folder::TYPES; @endphp

<div x-data="documentsApp({
    dataUrl: '{{ route('admin.documents.data') }}',
    exportBaseUrl: '{{ route('admin.documents.export') }}',
    typeFilter: '{{ $filters['document_type'] ?? 'all' }}',
    statusFilter: '{{ $filters['status'] ?? '' }}',
    folderId: '{{ $filters['folder_id'] ?? '' }}',
    search: @js($filters['search'] ?? ''),
    expiring: @json(!empty($filters['expiring']))
})">

<x-admin-hero-header
    title="Documents"
    subtitle="Manage all documents across folders"
    eyebrow="Document library"
>
    <x-slot: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.75" d="M7 3h7l5 5v13H7a2 2 0 01-2-2V5a2 2 0 012-2zm7 0v5h5M9 13h6m-6 4h6"/>
        </svg>
    </x-slot:icon>
    <x-slot:actions>
        <a :href="exportUrl('csv')" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20">
            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Export CSV
        </a>
        <a :href="exportUrl('pdf')" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20">
            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            Export PDF
        </a>
        @can('create-documents')
            <a href="{{ route('admin.documents.create') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
                <svg class="w-4 h-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>
                Upload Document
            </a>
        @endcan
    </x-slot:actions>
</x-admin-hero-header>

{{-- Expiring banner --}}
<div x-show="expiring" class="mb-4 flex items-center gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3">
    <svg class="h-4 w-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-sm font-semibold text-red-700">Showing active documents expiring within 30 days</p>
    <button type="button" @click="clearExpiring()" class="ml-auto text-xs font-semibold text-red-600 hover:text-red-800">Clear filter ×</button>
</div>

{{-- Type filter tabs --}}
<div class="mb-4 flex flex-wrap items-center gap-2 rounded-2xl border border-surface-100 bg-surface-50 p-1.5">
    <button type="button" @click="changeType('all')"
            :class="typeFilter === 'all' ? 'bg-white text-surface-900 shadow-sm' : 'text-surface-500 hover:text-surface-700'"
            class="flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all">
        <span class="h-2 w-2 shrink-0 rounded-full bg-surface-400"></span>
        All
        <span class="rounded-md px-1.5 py-0.5 text-xs font-bold"
              :class="typeFilter === 'all' ? 'bg-surface-200 text-surface-700' : 'bg-surface-200 text-surface-500'"
              x-text="countAll()"></span>
    </button>
    @foreach($typeLabels as $key => $label)
        @php
            $dot = match($key) {
                'controlled_documents' => 'bg-blue-500',
                'records'              => 'bg-emerald-500',
                'bulletins'            => 'bg-amber-500',
                default                => 'bg-surface-400',
            };
            $badgeActive = match($key) {
                'controlled_documents' => 'bg-blue-100 text-blue-700',
                'records'              => 'bg-emerald-100 text-emerald-700',
                'bulletins'            => 'bg-amber-100 text-amber-700',
                default                => 'bg-surface-200 text-surface-700',
            };
        @endphp
        <button type="button" @click="changeType('{{ $key }}')"
                :class="typeFilter === '{{ $key }}' ? 'bg-white text-surface-900 shadow-sm' : 'text-surface-500 hover:text-surface-700'"
                class="flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all">
            <span class="h-2 w-2 shrink-0 rounded-full {{ $dot }}"></span>
            {{ $label }}
            <span class="rounded-md px-1.5 py-0.5 text-xs font-bold"
                  :class="typeFilter === '{{ $key }}' ? '{{ $badgeActive }}' : 'bg-surface-200 text-surface-500'"
                  x-text="countByType('{{ $key }}')"></span>
        </button>
    @endforeach
</div>

{{-- Filter row: folder + status + search --}}
<div class="mb-5 flex flex-wrap items-center gap-3">
    {{-- Folder --}}
    <div class="min-w-[180px]">
        <select x-model="folderId" @change="changeFolder($event.target.value)"
                class="form-input text-sm py-2 pr-8">
            <option value="">All Folders</option>
            @foreach($folders as $folder)
                <option value="{{ $folder->id }}">{{ $folder->name }}</option>
            @endforeach
        </select>
    </div>

    {{-- Status --}}
    <div class="min-w-[140px]">
        <select x-model="statusFilter" @change="changeStatus($event.target.value)"
                class="form-input text-sm py-2 pr-8">
            <option value="">All Statuses</option>
            @foreach(\App\Models\Document::STATUSES as $key => $label)
                @if($key !== 'discontinued')
                    <option value="{{ $key }}">{{ $label }}</option>
                @endif
            @endforeach
        </select>
    </div>

    {{-- Search --}}
    <div class="relative flex-1 min-w-[200px]">
        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <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>
        </div>
        <input type="text" x-model="search"
               placeholder="Search by title or document number..."
               class="form-input w-full py-2 pl-9 pr-8 text-sm" />
        <button x-show="search" @click="search = ''" type="button"
                class="absolute inset-y-0 right-0 flex items-center pr-2.5 text-surface-400 hover:text-surface-600">
            <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>

    {{-- Clear all --}}
    <button type="button" x-show="typeFilter !== 'all' || statusFilter || folderId || search"
            @click="typeFilter='all'; statusFilter=''; folderId=''; search=''; page=1; fetchData()"
            class="text-sm font-semibold text-surface-400 hover:text-surface-600">
        Clear all
    </button>
</div>

<div class="card overflow-hidden">

    {{-- Loading --}}
    <div x-show="loading" class="flex items-center justify-center py-16">
        <div class="h-8 w-8 animate-spin rounded-full border-2 border-surface-200 border-t-primary-600"></div>
    </div>

    {{-- Empty — no documents at all --}}
    <div x-show="!loading && total === 0 && typeFilter === 'all' && !statusFilter && !folderId && !search && !expiring" x-cloak class="empty-state">
        <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="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>
        <p class="mb-1 text-base font-semibold text-surface-900">No documents yet</p>
        <p class="text-sm text-surface-400">Upload your first document to get started.</p>
    </div>

    {{-- Empty — filtered / searched --}}
    <div x-show="!loading && total === 0 && (typeFilter !== 'all' || statusFilter || folderId || search || expiring)" x-cloak class="empty-state">
        <p class="text-sm font-semibold text-surface-600">No results found</p>
        <p class="mt-1 text-xs text-surface-400">Try adjusting your filters or search term.</p>
        <div class="mt-4">
            <button type="button"
                    @click="typeFilter='all'; statusFilter=''; folderId=''; search=''; expiring=false; page=1; fetchData()"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear all filters</button>
        </div>
    </div>

    {{-- Table --}}
    <div x-show="!loading && docs.length > 0" class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-surface-100">
                    <th class="table-th">Doc No.</th>
                    <th class="table-th">Title</th>
                    <th class="table-th">Folder</th>
                    <th class="table-th">Type</th>
                    <th class="table-th text-center">Ver.</th>
                    <th class="table-th">Status</th>
                    <th class="table-th">Effective Date</th>
                    <th class="table-th text-right pr-6">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-surface-50">
                <template x-for="doc in docs" :key="doc.id">
                    <tr class="table-row-hover">
                        <td class="table-td">
                            <span class="font-mono text-xs font-bold text-surface-600" x-text="doc.doc_number || '—'"></span>
                        </td>
                        <td class="table-td max-w-[260px]">
                            <a :href="doc.show_url" class="block truncate font-semibold text-surface-900 hover:text-primary-700"
                               x-text="doc.title" :title="doc.title"></a>
                            <span x-show="doc.has_file && doc.file_size" x-text="doc.file_size"
                                  class="mt-0.5 block text-xs text-surface-400"></span>
                        </td>
                        <td class="table-td text-surface-600" x-text="doc.folder_name || '—'"></td>
                        <td class="table-td">
                            <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold"
                                  :class="{
                                      'bg-blue-50 text-blue-700': doc.document_type === 'controlled_documents',
                                      'bg-emerald-50 text-emerald-700': doc.document_type === 'records',
                                      'bg-amber-50 text-amber-700': doc.document_type === 'bulletins',
                                  }"
                                  x-text="doc.type_label"></span>
                        </td>
                        <td class="table-td text-center">
                            <span class="text-sm font-semibold text-surface-600" x-text="'v' + doc.version"></span>
                        </td>
                        <td class="table-td">
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold"
                                  :class="{
                                      'bg-emerald-50 text-emerald-700': doc.status === 'active',
                                      'bg-amber-50 text-amber-700': doc.status === 'draft',
                                      'bg-red-50 text-red-700': doc.status === 'obsolete',
                                      'bg-surface-100 text-surface-600': !['active','draft','obsolete'].includes(doc.status),
                                  }">
                                <span class="h-1.5 w-1.5 rounded-full"
                                      :class="{
                                          'bg-emerald-500': doc.status === 'active',
                                          'bg-amber-500': doc.status === 'draft',
                                          'bg-red-500': doc.status === 'obsolete',
                                          'bg-surface-400': !['active','draft','obsolete'].includes(doc.status),
                                      }"></span>
                                <span x-text="doc.status_label"></span>
                            </span>
                        </td>
                        <td class="table-td text-surface-600 whitespace-nowrap" x-text="doc.effective_date || '—'"></td>
                        <td class="table-td pr-6">
                            <div class="flex items-center justify-end gap-2">

                                {{-- View --}}
                                <a :href="doc.show_url" class="inline-icon-button-neutral" title="View">
                                    <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="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>
                                </a>

                                {{-- Download --}}
                                <a x-show="doc.download_url" :href="doc.download_url" class="inline-icon-button-primary" title="Download">
                                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                    </svg>
                                </a>

                                {{-- New Version --}}
                                <a x-show="doc.version_url" :href="doc.version_url" class="inline-icon-button-neutral" title="Upload New Version">
                                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                                    </svg>
                                </a>

                                {{-- Replace File --}}
                                <a x-show="doc.replace_url" :href="doc.replace_url" class="inline-icon-button-neutral" title="Replace File">
                                    <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="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>
                                </a>

                                {{-- Edit --}}
                                <a x-show="doc.edit_url" :href="doc.edit_url" class="inline-icon-button-neutral" title="Edit">
                                    <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="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>
                                </a>

                                {{-- Discontinue --}}
                                <button x-show="doc.discontinue_url"
                                        type="button"
                                        @click="discontinue(doc)"
                                        :disabled="discontinuingId === doc.id"
                                        class="inline-icon-button-neutral disabled:opacity-40" title="Discontinue">
                                    <svg x-show="discontinuingId !== doc.id" 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                    </svg>
                                    <svg x-show="discontinuingId === doc.id" class="h-4 w-4 animate-spin" 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>
                                </button>

                                {{-- Archive --}}
                                <button x-show="doc.archive_url"
                                        type="button"
                                        @click="openArchiveModal(doc)"
                                        class="inline-icon-button-neutral" title="Archive">
                                    <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                                    </svg>
                                </button>

                                {{-- Delete --}}
                                <div x-show="doc.destroy_url">
                                    <button type="button"
                                            x-show="confirmingDeleteId !== doc.id"
                                            @click="confirmingDeleteId = doc.id"
                                            class="inline-icon-button-danger" title="Delete">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                    <div x-show="confirmingDeleteId === doc.id" class="flex items-center gap-1">
                                        <span class="whitespace-nowrap text-[11px] font-semibold text-red-600">Delete?</span>
                                        <button type="button" @click="destroy(doc)" :disabled="deletingId === doc.id"
                                                class="rounded-md bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white hover:bg-red-600 disabled:opacity-60"
                                                x-text="deletingId === doc.id ? '...' : 'Yes'"></button>
                                        <button type="button" @click="confirmingDeleteId = null"
                                                class="rounded-md px-1.5 py-0.5 text-[11px] font-semibold text-surface-500 hover:text-surface-700">No</button>
                                    </div>
                                </div>

                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div x-show="!loading && lastPage > 1" class="flex items-center justify-between border-t border-surface-100 px-6 py-4">
        <p class="text-sm text-surface-400">
            Page <span class="font-semibold text-surface-700" x-text="page"></span>
            of <span class="font-semibold text-surface-700" x-text="lastPage"></span>
            &middot; <span class="font-semibold text-surface-700" x-text="total"></span> total
        </p>
        <div class="flex items-center gap-2">
            <button type="button" @click="goToPage(page - 1)" :disabled="page <= 1 || loading"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                <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="M15 19l-7-7 7-7"/>
                </svg>
                Prev
            </button>
            <button type="button" @click="goToPage(page + 1)" :disabled="page >= lastPage || loading"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                Next
                <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="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>
    </div>

</div>

</div>

@endsection