@extends('layouts.app')
@section('title', $document->title)

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="mb-4">
    <a href="{{ route('documents.index') }}" class="text-[12px] text-blue-600 font-semibold no-underline hover:underline"><i class="fa-solid fa-arrow-left mr-1"></i>Back to documents</a>
  </div>

  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-6">
    <div class="flex gap-3 min-w-0">
      <div class="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center shrink-0">
        <i class="fa-solid {{ $document->icon }} {{ $document->color }} text-2xl"></i>
      </div>
      <div class="min-w-0">
        <h1 class="text-[18px] font-bold text-slate-900 leading-tight">{{ $document->title }}</h1>
        <div class="flex flex-wrap gap-2 mt-2">
          <span class="badge b">{{ $document->document_category }}</span>
          @php $stBadge = match($document->status) { 'Draft'=>'s','Pending Review'=>'a','Approved'=>'g','Rejected'=>'r','Archived'=>'s','Expired'=>'r',default=>'s'}; @endphp
          <span class="badge {{ $stBadge }}">{{ $document->status }}</span>
          <span class="badge s">v{{ $document->version_number }}</span>
          @if($document->visibility === 'Private')<span class="badge v">Private</span>@endif
        </div>
      </div>
    </div>
    <div class="flex flex-wrap gap-2 shrink-0">
      @if($document->file_path)
        <a href="{{ route('documents.download', $document) }}" class="ba no-underline" style="padding:8px 14px"><i class="fa-solid fa-download mr-1"></i>Download</a>
      @endif
      @if(!$document->isArchived())
        <button type="button" onclick="document.getElementById('doc_ver_ov').classList.add('open')" class="bs" style="padding:8px 14px"><i class="fa-solid fa-code-branch mr-1"></i>New version</button>
      @endif
      @if(in_array($document->status, ['Draft','Pending Review'], true))
        <form method="post" action="{{ route('documents.approve', $document) }}" class="inline">@csrf @method('PUT')<button type="submit" class="bsm g text-[12px]">Approve</button></form>
        <button type="button" onclick="document.getElementById('doc_reject_ov').classList.add('open')" class="bsm r text-[12px]">Reject</button>
      @endif
      @if(!$document->isArchived())
        <form method="post" action="{{ route('documents.archive', $document) }}" class="inline" onsubmit="return confirm('Archive this document?');">@csrf @method('PUT')<button type="submit" class="bsm s text-[12px]">Archive</button></form>
      @else
        <form method="post" action="{{ route('documents.restore', $document) }}" class="inline">@csrf @method('PUT')<button type="submit" class="bsm b text-[12px]">Restore</button></form>
      @endif
    </div>
  </div>

  @if($document->status === 'Rejected' && $document->rejection_reason)
    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-800">
      <strong>Rejection reason:</strong> {{ $document->rejection_reason }}
    </div>
  @endif

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="lg:col-span-2 space-y-4">
      <div class="card p-5">
        <p class="font-bold text-slate-900 mb-3">Metadata</p>
        @include('documents.partials.metadata-form')
      </div>
      <div class="card p-5" id="version">
        <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-code-branch text-slate-500 mr-2"></i>Version history</p>
        <div class="overflow-x-auto">
          <table>
            <thead>
              <tr class="border-b border-slate-100">
                <th class="th">Ver</th>
                <th class="th">File</th>
                <th class="th">By</th>
                <th class="th">Date</th>
                <th class="th">Size</th>
                <th class="th">Notes</th>
                <th class="th"></th>
              </tr>
            </thead>
            <tbody>
              @forelse($document->versions as $v)
                <tr>
                  <td class="td font-mono text-[12px]">v{{ $v->version_number }}</td>
                  <td class="td text-[11px] text-slate-600">{{ $v->original_file_name ?? $v->file_name }}</td>
                  <td class="td text-[11px]">{{ $v->uploader?->name ?? '—' }}</td>
                  <td class="td text-[11px]">{{ $v->created_at?->format('M j, Y') }}</td>
                  <td class="td text-[11px]">{{ \Illuminate\Support\Number::fileSize($v->file_size) }}</td>
                  <td class="td text-[11px] text-slate-500">{{ \Illuminate\Support\Str::limit($v->change_notes, 40) }}</td>
                  <td class="td text-right">
                    <a href="{{ route('documents.versions.download', [$document, $v]) }}" class="bsm bg-slate-100 text-slate-600 text-[10px] no-underline">Download</a>
                  </td>
                </tr>
              @empty
                @if($document->file_path)
                  <tr>
                    <td class="td font-mono">v{{ $document->version_number ?: 1 }}</td>
                    <td class="td text-[11px]">{{ $document->displayFileName() }}</td>
                    <td class="td text-[11px]">{{ $document->uploader?->name }}</td>
                    <td class="td text-[11px]">{{ $document->created_at?->format('M j, Y') }}</td>
                    <td class="td text-[11px]">{{ \Illuminate\Support\Number::fileSize($document->file_size) }}</td>
                    <td class="td text-[11px] text-slate-400">Legacy upload</td>
                    <td class="td text-right"><a href="{{ route('documents.download', $document) }}" class="bsm bg-slate-100 text-[10px] no-underline">Download</a></td>
                  </tr>
                @else
                  <tr><td class="td text-slate-400" colspan="7">No file stored.</td></tr>
                @endif
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
      @if(str_contains(strtolower((string) $document->mime_type), 'pdf'))
        <div class="card p-5">
          <p class="font-bold text-slate-900 mb-2">Preview</p>
          <p class="text-[11px] text-slate-500 mb-2">Open the PDF in a new tab for a full preview.</p>
          <a href="{{ route('documents.download', $document) }}" target="_blank" rel="noopener" class="text-blue-600 font-semibold text-[13px]">Open PDF preview</a>
        </div>
      @endif
    </div>
    <div class="space-y-4">
      <div class="card p-5">
        <p class="font-bold text-slate-900 mb-3">File details</p>
        <dl class="text-[12px] space-y-2 text-slate-600">
          <div><dt class="text-[10px] uppercase text-slate-400 font-bold">Original name</dt><dd>{{ $document->displayFileName() }}</dd></div>
          <div><dt class="text-[10px] uppercase text-slate-400 font-bold">MIME</dt><dd>{{ $document->mime_type ?? '—' }}</dd></div>
          <div><dt class="text-[10px] uppercase text-slate-400 font-bold">Size</dt><dd>{{ \Illuminate\Support\Number::fileSize($document->file_size) }}</dd></div>
          <div><dt class="text-[10px] uppercase text-slate-400 font-bold">Uploaded</dt><dd>{{ $document->created_at?->format('M j, Y H:i') }} — {{ $document->uploader?->name ?? '—' }}</dd></div>
          <div><dt class="text-[10px] uppercase text-slate-400 font-bold">Updated</dt><dd>{{ $document->updated_at?->format('M j, Y H:i') }}</dd></div>
          @if($document->reviewer)<div><dt class="text-[10px] uppercase text-slate-400 font-bold">Reviewed</dt><dd>{{ $document->reviewed_at?->format('M j, Y') }} — {{ $document->reviewer?->name }}</dd></div>@endif
        </dl>
      </div>
      <div class="card p-5">
        <p class="font-bold text-slate-900 mb-3">Linked records</p>
        <ul class="text-[12px] space-y-2 text-slate-600">
          @if($document->project)<li><span class="text-slate-400">Project:</span> <a href="{{ route('projects.show', $document->project) }}" class="text-blue-600 no-underline">{{ $document->project->name }}</a></li>@endif
          @if($document->client)<li><span class="text-slate-400">Client:</span> <a href="{{ route('clients.show', $document->client) }}" class="text-blue-600 no-underline">{{ $document->client->company_name }}</a></li>@endif
          @if($document->supplier)<li><span class="text-slate-400">Supplier:</span> <a href="{{ route('procurement.suppliers.show', $document->supplier) }}" class="text-blue-600 no-underline">{{ $document->supplier->company_name }}</a></li>@endif
          @if($document->invoice)<li><span class="text-slate-400">Invoice:</span> <a href="{{ route('invoices.show', $document->invoice) }}" class="text-blue-600 no-underline">{{ $document->invoice->invoice_number }}</a></li>@endif
          @if($document->quotation)<li><span class="text-slate-400">Quotation:</span> <a href="{{ route('quotations.show', $document->quotation) }}" class="text-blue-600 no-underline">{{ $document->quotation->reference_number }}</a></li>@endif
          @if($document->purchaseOrder)<li><span class="text-slate-400">PO:</span> <a href="{{ route('procurement.orders.show', $document->purchaseOrder) }}" class="text-blue-600 no-underline">{{ $document->purchaseOrder->po_number }}</a></li>@endif
          @if($document->supplierBill)<li><span class="text-slate-400">Supplier bill:</span> <a href="{{ route('procurement.bills.show', $document->supplierBill) }}" class="text-blue-600 no-underline">{{ $document->supplierBill->bill_number }}</a></li>@endif
          @if($document->employee)<li><span class="text-slate-400">Employee:</span> <a href="{{ route('payroll.index') }}" class="text-blue-600 no-underline">{{ $document->employee->name }}</a> <span class="text-slate-400">(HR)</span></li>@endif
          @if(!$document->project && !$document->client && !$document->supplier && !$document->invoice && !$document->quotation && !$document->purchaseOrder && !$document->supplierBill && !$document->employee)
            <li class="text-slate-400">No linked records.</li>
          @endif
        </ul>
      </div>
      @if($logs->isNotEmpty())
        <div class="card p-5">
          <p class="font-bold text-slate-900 mb-2">Recent activity</p>
          <ul class="text-[11px] text-slate-500 space-y-1 max-h-48 overflow-y-auto">
            @foreach($logs as $log)
              <li>{{ $log->created_at?->format('M j H:i') }} — {{ $log->action }} @if($log->user)by {{ $log->user->name }}@endif</li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>
  </div>
</div>

<div id="doc_ver_ov" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(520px,92vw)" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Upload new version</p>
      <button type="button" onclick="document.getElementById('doc_ver_ov').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0">&times;</button>
    </div>
    <div class="p-5">@include('documents.partials.version-form')</div>
  </div>
</div>

<div id="doc_reject_ov" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="flex justify-between items-center px-5 pt-5 pb-2 border-b border-slate-100">
      <p class="text-[15px] font-bold text-slate-900">Reject document</p>
      <button type="button" onclick="document.getElementById('doc_reject_ov').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0">&times;</button>
    </div>
    <div class="p-5">@include('documents.partials.reject-form')</div>
  </div>
</div>
@endsection