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

@section('content')

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

<div x-data="discontinuedApp({
    dataUrl: '{{ route('admin.discontinued.data') }}',
    exportBaseUrl: '{{ route('admin.discontinued.export') }}',
    canRestore: @json(auth()->user()->can('edit-documents')),
    canDelete: @json(auth()->user()->can('delete-documents'))
})">

<x-admin-hero-header
    title="Discontinued Documents"
    subtitle="Documents removed from active circulation — can be restored or permanently deleted"
    eyebrow="Document management"
>
    <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="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>
    </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>
    </x-slot:actions>
</x-admin-hero-header>

{{-- Type filter --}}
<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>

{{-- Search --}}
<div class="mb-5 relative">
    <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>

<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 discontinued docs at all --}}
    <div x-show="!loading && total === 0 && typeFilter === 'all' && !search" 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="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>
        </div>
        <p class="mb-1 text-base font-semibold text-surface-900">No discontinued documents</p>
        <p class="text-sm text-surface-400">Documents marked as discontinued will appear here.</p>
    </div>

    {{-- Empty — filtered/searched --}}
    <div x-show="!loading && total === 0 && (typeFilter !== 'all' || search)" 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 a different filter or search term.</p>
        <div class="mt-4 flex gap-2">
            <button x-show="typeFilter !== 'all'" type="button" @click="changeType('all')"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear filter</button>
            <button x-show="search" type="button" @click="search = ''"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear search</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">Type</th>
                    <th class="table-th text-center">Ver.</th>
                    <th class="table-th">Discontinued</th>
                    <th class="table-th">By</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-[240px]">
                            <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.file_name" x-text="doc.file_name"
                                  class="mt-0.5 block text-xs text-surface-400"></span>
                        </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.document_type === 'controlled_documents' ? 'Controlled Document' : doc.document_type === 'records' ? 'Record' : 'Technical Bulletin'"></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 text-surface-600 whitespace-nowrap" x-text="doc.discontinued_at || '—'"></td>
                        <td class="table-td text-surface-600" x-text="doc.discontinued_by || '—'"></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>

                                {{-- Restore --}}
                                <button x-show="canRestore"
                                        type="button"
                                        @click="restore(doc)"
                                        :disabled="restoringId === doc.id"
                                        class="inline-icon-button-neutral disabled:opacity-40"
                                        title="Restore">
                                    <svg x-show="restoringId !== 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="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>
                                    <svg x-show="restoringId === 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>

                                {{-- Delete --}}
                                <div x-show="canDelete">
                                    <button type="button"
                                            x-show="confirmingDeleteId !== doc.id"
                                            @click="confirmingDeleteId = doc.id"
                                            class="inline-icon-button-danger" title="Permanently 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 forever?</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