@extends('layouts.app')

@section('title', 'Documents · DocShare')
@section('section', 'Admin console')
@section('subtitle', 'Manage and organize your document library.')

@section('content')
<div class="flex items-end justify-between">
    <div></div>
    <a href="{{ route('admin.documents.create') }}" class="btn-primary inline-flex items-center justify-center">+ Upload document</a>
</div>

@if(session('status'))
    <div class="mt-6 rounded-xl border border-emerald-400/30 bg-emerald-50 p-4 text-emerald-700">{{ session('status') }}</div>
@endif

<form class="mt-8 flex gap-3" method="get">
    <input name="search" value="{{ request('search') }}" placeholder="Search ID or title" class="flex-1 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
    <select name="status" class="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
        <option value="">All statuses</option>
        @foreach(['draft','pending_review','published','archived','expired'] as $status)
            <option value="{{ $status }}" @selected(request('status') === $status)>{{ str_replace('_',' ',ucfirst($status)) }}</option>
        @endforeach
    </select>
    <button class="btn-secondary text-sm">Filter</button>
</form>

<section class="surface mt-6 overflow-hidden">
    <div class="grid grid-cols-[1fr_160px_130px_160px] gap-4 border-b border-slate-100 px-6 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">
        <span>Document</span><span>Category</span><span>Version</span><span>Status / actions</span>
    </div>
    @forelse($documents as $document)
    <div class="grid grid-cols-[1fr_160px_130px_160px] items-center gap-4 border-b border-slate-100 px-6 py-5 last:border-0">
        <div>
            <p class="font-medium text-slate-800">{{ $document->title }}</p>
            <p class="mt-1 text-sm text-slate-500">{{ $document->document_id }}</p>
        </div>
        <span class="text-sm text-slate-600">{{ $document->category->name }}</span>
        <span class="text-sm text-slate-600">{{ $document->currentVersion?->version }}</span>
        <div>
            <select data-status-url="{{ route('admin.documents.status',$document) }}" class="doc-status w-full rounded-lg border border-slate-200 bg-white px-2 py-2 text-sm capitalize text-teal-700">
                @foreach(['draft','pending_review','published','archived','expired'] as $status)
                    <option value="{{ $status }}" @selected($document->status === $status)>{{ str_replace('_',' ',$status) }}</option>
                @endforeach
            </select>
            <a href="{{ route('admin.documents.edit',$document) }}" class="mt-2 inline-block text-xs font-medium text-teal-600 hover:text-teal-800">Edit metadata</a>
        </div>
    </div>
    @empty
    <div class="px-6 py-16 text-center text-slate-400">No documents found.</div>
    @endforelse
</section>

<div class="mt-6">{{ $documents->links() }}</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
    $('.doc-status').on('change', function () {
        const select = $(this);
        select.prop('disabled', true);
        $.ajax({
            url: select.data('status-url'),
            method: 'PATCH',
            data: { _token: '{{ csrf_token() }}', status: select.val() }
        }).always(function () { select.prop('disabled', false); });
    });
});
</script>
@endpush