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

@section('content')

<div x-data="amendedDocumentsApp({
    dataUrl: '{{ route('admin.amended.data') }}',
    exportBaseUrl: '{{ route('admin.amended.export') }}'
})">

<x-admin-hero-header
    title="Amended Documents"
    subtitle="Previous versions of documents, archived when a new version was uploaded"
    eyebrow="Document versioning"
>
    <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 14l2 2 4-4"/>
        </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>

{{-- 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 data at all --}}
    <div x-show="!loading && total === 0 && !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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
        </div>
        <p class="mb-1 text-base font-semibold text-surface-900">No amended documents</p>
        <p class="text-sm text-surface-400">Previous versions will appear here when new versions are uploaded.</p>
    </div>

    {{-- Empty — filtered / searched --}}
    <div x-show="!loading && total === 0 && 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="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 && versions.length > 0" class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-surface-100">
                    <th class="table-th">Document</th>
                    <th class="table-th">Doc No.</th>
                    <th class="table-th text-center">Old Ver.</th>
                    <th class="table-th text-center">New Ver.</th>
                    <th class="table-th">Superseded</th>
                    <th class="table-th">By</th>
                    <th class="table-th">Change Notes</th>
                    @can('view-crf')
                        <th class="table-th text-right pr-6">CRF</th>
                    @endcan
                </tr>
            </thead>
            <tbody class="divide-y divide-surface-50">
                <template x-for="v in versions" :key="v.id">
                    <tr class="table-row-hover">
                        <td class="table-td max-w-[200px]">
                            <a :href="v.document_show_url" class="block truncate font-semibold text-surface-900 hover:text-primary-700" x-text="v.document_title" :title="v.document_title"></a>
                        </td>
                        <td class="table-td">
                            <span class="font-mono text-xs font-bold text-surface-600" x-text="v.doc_number"></span>
                        </td>
                        <td class="table-td text-center">
                            <span class="font-mono text-sm font-bold text-surface-500" x-text="'v' + v.old_version"></span>
                        </td>
                        <td class="table-td text-center">
                            <span class="font-mono text-sm font-bold text-primary-600" x-text="'v' + v.new_version"></span>
                        </td>
                        <td class="table-td text-surface-600 whitespace-nowrap" x-text="v.superseded_at"></td>
                        <td class="table-td text-surface-600" x-text="v.superseded_by || '-'"></td>
                        <td class="table-td max-w-[160px]">
                            <span x-show="v.change_notes" x-text="v.change_notes" class="block truncate text-xs italic text-surface-500" :title="v.change_notes"></span>
                            <span x-show="!v.change_notes" class="text-xs text-surface-300">—</span>
                        </td>
                        @can('view-crf')
                            <td class="table-td text-right pr-6">
                                <a x-show="v.has_crf" :href="v.crf_download_url"
                                   class="inline-flex items-center gap-1 rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-700 hover:bg-indigo-100"
                                   :title="'Download: ' + v.crf_name">
                                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                    </svg>
                                    CRF
                                </a>
                                <span x-show="!v.has_crf" class="text-xs text-surface-300">—</span>
                            </td>
                        @endcan
                    </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