@extends('layouts.app')
@section('title', 'Document Management')

@section('content')
@php
  $fq = array_filter(request()->only(['q','category','status','project_id','client_id','supplier_id','file_type','expiry','date_from','date_to','sort','direction','include_archived']), fn ($v) => $v !== null && $v !== '');
  $secondaryCats = ['Invoice', 'Quotation', 'BOQ', 'Purchase Order', 'Supplier Bill', 'HR Document', 'Site Update', 'Compliance', 'Other'];
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  @if ($errors->any())
    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-800">
      @foreach ($errors->all() as $err)<p>{{ $err }}</p>@endforeach
    </div>
  @endif

  <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900">Document Management</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Contracts, drawings, permits and reports</p>
    </div>
    <div class="flex flex-wrap gap-2 justify-end">
      <a href="{{ route('documents.export.excel', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5" style="padding:8px 14px;border-radius:9px"><i class="fa-regular fa-file-excel text-emerald-600"></i> Excel</a>
      <a href="{{ route('documents.export.pdf', $fq) }}" class="bs no-underline inline-flex items-center gap-1.5" style="padding:8px 14px;border-radius:9px"><i class="fa-regular fa-file-pdf text-red-600"></i> PDF</a>
      <button type="button" onclick="document.getElementById('doc_import_ov').classList.add('open')" class="bs" style="padding:8px 14px;border-radius:9px"><i class="fa-solid fa-file-import mr-1"></i>Import metadata</button>
      <button type="button" onclick="document.getElementById('doc_upload_ov').classList.add('open')" class="ba"><i class="fa-solid fa-upload text-xs"></i>Upload</button>
    </div>
  </div>

  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Total documents</p>
      <p class="text-2xl font-bold text-slate-900">{{ $stats['total_documents'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Approved</p>
      <p class="text-2xl font-bold text-emerald-600">{{ $stats['approved_documents'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Expiring soon</p>
      <p class="text-2xl font-bold text-amber-600">{{ $stats['expiring_soon'] }}</p>
    </div>
    <div class="stat">
      <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Storage used</p>
      <p class="text-2xl font-bold text-slate-900">{{ \Illuminate\Support\Number::fileSize($stats['storage_used'] ?? 0) }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
    @foreach($folderCards as $card)
      @php $cat = $card['category']; $cnt = (int) ($byCategory[$cat] ?? 0); @endphp
      <a href="{{ route('documents.category', ['category' => $cat]) }}" class="card p-5 no-underline hover:shadow-md transition-shadow block">
        <div class="flex items-center gap-3 mb-2">
          <div class="w-10 h-10 rounded-xl {{ $card['bg'] }} flex items-center justify-center"><i class="fa-solid {{ $card['icon'] }} {{ $card['accent'] }}"></i></div>
          <div>
            <p class="font-bold text-slate-900 text-[14px]">{{ $card['label'] }}</p>
            <p class="text-slate-400 text-[11px]">{{ $cnt }} active files</p>
          </div>
        </div>
        <p class="text-slate-400 text-[10px]">Filter list by category</p>
      </a>
    @endforeach
  </div>

  <div class="flex flex-wrap gap-2 mb-4">
    <a href="{{ route('documents.index', array_merge($fq, ['category' => 'all'])) }}" class="sni {{ !request('category') || request('category')==='all' ? 'active' : '' }} no-underline" style="display:inline-block">All</a>
    @foreach($secondaryCats as $sc)
      <a href="{{ route('documents.category', ['category' => $sc]) }}" class="sni {{ request('category')===$sc ? 'active' : '' }} no-underline text-[11px]" style="display:inline-block;padding:6px 10px">{{ $sc }}</a>
    @endforeach
    <a href="{{ route('documents.index', array_merge($fq, ['expiry' => 'expiring_soon', 'category' => request('category')])) }}" class="sni {{ request('expiry')==='expiring_soon' ? 'active' : '' }} no-underline text-[11px]" style="display:inline-block;padding:6px 10px">Compliance &amp; expiry</a>
    <a href="{{ route('documents.index', array_merge($fq, ['status' => 'Archived', 'include_archived' => 1])) }}" class="sni {{ request('status')==='Archived' ? 'active' : '' }} no-underline text-[11px]" style="display:inline-block;padding:6px 10px">Archived</a>
  </div>

  <form method="get" action="{{ route('documents.index') }}" class="card p-4 mb-5">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
      <div class="xl:col-span-2">
        <label class="fl">Search</label>
        <input type="text" name="q" class="fi" value="{{ request('q') }}" placeholder="Documents, project, client, reference…">
      </div>
      <div>
        <label class="fl">Category</label>
        <select name="category" class="fi">
          <option value="all">All categories</option>
          @foreach(config('document_categories.all', []) as $c)
            <option value="{{ $c }}" @selected(request('category') === $c)>{{ $c }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Status</label>
        <select name="status" class="fi">
          <option value="all">All statuses</option>
          @foreach(['Draft','Pending Review','Approved','Rejected','Archived','Expired'] as $s)
            <option value="{{ $s }}" @selected(request('status') === $s)>{{ $s }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Project</label>
        <select name="project_id" class="fi">
          <option value="">All</option>
          @foreach($projects as $p)
            <option value="{{ $p->id }}" @selected(request('project_id') == $p->id)>{{ $p->name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Client</label>
        <select name="client_id" class="fi">
          <option value="">All</option>
          @foreach($clients as $c)
            <option value="{{ $c->id }}" @selected(request('client_id') == $c->id)>{{ $c->company_name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Supplier</label>
        <select name="supplier_id" class="fi">
          <option value="">All</option>
          @foreach($suppliers as $s)
            <option value="{{ $s->id }}" @selected(request('supplier_id') == $s->id)>{{ $s->company_name }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">File type</label>
        <select name="file_type" class="fi">
          <option value="all">All</option>
          <option value="pdf" @selected(request('file_type')==='pdf')>PDF</option>
          <option value="excel" @selected(request('file_type')==='excel')>Excel / CSV</option>
          <option value="word" @selected(request('file_type')==='word')>Word</option>
          <option value="image" @selected(request('file_type')==='image')>Images</option>
        </select>
      </div>
      <div>
        <label class="fl">Expiry</label>
        <select name="expiry" class="fi">
          <option value="all" @selected(request('expiry','all')==='all')>All</option>
          <option value="no_expiry" @selected(request('expiry')==='no_expiry')>No expiry</option>
          <option value="expiring_soon" @selected(request('expiry')==='expiring_soon')>Expiring soon</option>
          <option value="expired" @selected(request('expiry')==='expired')>Expired</option>
          <option value="valid" @selected(request('expiry')==='valid')>Valid (60d+)</option>
        </select>
      </div>
      <div>
        <label class="fl">Date from</label>
        <input type="date" name="date_from" class="fi" value="{{ request('date_from') }}">
      </div>
      <div>
        <label class="fl">Date to</label>
        <input type="date" name="date_to" class="fi" value="{{ request('date_to') }}">
      </div>
      <div>
        <label class="fl">Sort</label>
        <select name="sort" class="fi">
          @foreach(['created_at'=>'Uploaded','title'=>'Title','document_category'=>'Category','status'=>'Status','expiry_date'=>'Expiry','file_size'=>'Size'] as $k=>$lab)
            <option value="{{ $k }}" @selected(request('sort','created_at')===$k)>{{ $lab }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="fl">Direction</label>
        <select name="direction" class="fi">
          <option value="desc" @selected(request('direction','desc')==='desc')>Newest first</option>
          <option value="asc" @selected(request('direction')==='asc')>Oldest first</option>
        </select>
      </div>
    </div>
    <div class="flex flex-wrap gap-2 mt-3 items-center">
      <label class="inline-flex items-center gap-2 text-[12px] text-slate-600 cursor-pointer">
        <input type="checkbox" name="include_archived" value="1" @checked(request('include_archived'))>
        Include archived in “all”
      </label>
      <button type="submit" class="bp" style="padding:8px 16px">Apply</button>
      <a href="{{ route('documents.index') }}" class="text-[12px] text-blue-600 font-semibold no-underline">Clear</a>
    </div>
  </form>

  <div class="card p-0 card-has-table overflow-hidden">
    @if($documents->isEmpty())
      <div class="text-center py-16 px-6">
        <i class="fa-solid fa-file-contract text-5xl text-slate-200 mb-4"></i>
        <p class="font-semibold text-slate-700 text-[15px]">No documents found</p>
        <p class="text-slate-400 text-[12px] mt-1 mb-5">Upload your first project document or adjust filters.</p>
        <button type="button" onclick="document.getElementById('doc_upload_ov').classList.add('open')" class="ba" style="padding:8px 18px">Upload document</button>
      </div>
    @else
      <table>
        <thead>
          <tr class="border-b border-slate-100 bg-slate-50/80">
            <th class="th">Document</th>
            <th class="th">Category</th>
            <th class="th">Linked to</th>
            <th class="th">Status</th>
            <th class="th">Expiry</th>
            <th class="th">Ver</th>
            <th class="th">Uploaded</th>
            <th class="th">Size</th>
            <th class="th text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          @foreach($documents as $d)
            @php
              $exp = $d->expiryState();
              $expClass = $exp==='expired'?'text-red-600':($exp==='expiring_soon'?'text-amber-600':'text-slate-500');
              $stBadge = match($d->status) {
                'Draft' => 's',
                'Pending Review' => 'a',
                'Approved' => 'g',
                'Rejected' => 'r',
                'Archived' => 's',
                'Expired' => 'r',
                default => 's',
              };
              $linkBits = collect([
                $d->project ? ['Project', route('projects.show', $d->project), $d->project->name] : null,
                $d->client ? ['Client', route('clients.show', $d->client), $d->client->company_name] : null,
                $d->invoice ? ['Invoice', route('invoices.show', $d->invoice), $d->invoice->invoice_number] : null,
                $d->quotation ? ['Quotation', route('quotations.show', $d->quotation), $d->quotation->reference_number] : null,
                $d->purchaseOrder ? ['PO', route('procurement.orders.show', $d->purchaseOrder), $d->purchaseOrder->po_number] : null,
                $d->supplierBill ? ['Bill', route('procurement.bills.show', $d->supplierBill), $d->supplierBill->bill_number] : null,
              ])->filter();
            @endphp
            <tr>
              <td class="td">
                <div class="flex items-start gap-2">
                  <i class="fa-solid {{ $d->icon }} {{ $d->color }} text-lg mt-0.5"></i>
                  <div class="min-w-0">
                    <a href="{{ route('documents.show', $d) }}" class="font-semibold text-slate-800 text-[13px] no-underline hover:text-blue-600">{{ $d->title }}</a>
                    <p class="text-slate-400 text-[11px] truncate max-w-[220px]">{{ $d->displayFileName() }}</p>
                  </div>
                </div>
              </td>
              <td class="td text-[12px]">{{ $d->document_category }}</td>
              <td class="td text-[11px] text-slate-600">
                @forelse($linkBits as $bit)
                  <a href="{{ $bit[1] }}" class="text-blue-600 no-underline hover:underline block truncate max-w-[140px]">{{ $bit[2] }}</a>
                @empty
                  <span class="text-slate-400">General</span>
                @endforelse
              </td>
              <td class="td"><span class="badge {{ $stBadge }}">{{ $d->status }}</span></td>
              <td class="td text-[11px] {{ $expClass }}">
                {{ $d->expiry_date?->format('M j, Y') ?? '—' }}
              </td>
              <td class="td text-[12px] font-mono">v{{ $d->version_number }}</td>
              <td class="td text-[11px] text-slate-500">
                {{ $d->uploader?->name ?? '—' }}<br>{{ $d->created_at?->format('M j, Y') }}
              </td>
              <td class="td text-[11px]">{{ \Illuminate\Support\Number::fileSize($d->file_size) }}</td>
              <td class="td text-right whitespace-nowrap">
                <a href="{{ route('documents.show', $d) }}" class="bsm b text-[10px] no-underline">View</a>
                @if($d->file_path)
                  <a href="{{ route('documents.download', $d) }}" class="bsm bg-slate-100 text-slate-600 text-[10px] no-underline">Download</a>
                @endif
                @if(!$d->isArchived())
                  <a href="{{ route('documents.show', $d) }}#version" class="bsm b text-[10px] no-underline">Version</a>
                @endif
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
      <div class="p-4 border-t border-slate-100">{{ $documents->links() }}</div>
    @endif
  </div>
</div>

<div id="doc_upload_ov" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(640px,94vw);max-width:94vw" 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 document</p>
      <button type="button" onclick="document.getElementById('doc_upload_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.upload-form')</div>
  </div>
</div>

<div id="doc_import_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">Import metadata</p>
      <button type="button" onclick="document.getElementById('doc_import_ov').classList.remove('open')" class="rounded-lg w-8 h-8 bg-slate-100 border-0">&times;</button>
    </div>
    <div class="p-5">
      <p class="text-[12px] text-slate-500 mb-3">Updates titles, categories, dates, and links for files already stored. <a href="{{ route('documents.import.metadata.template') }}" class="text-blue-600 font-semibold">Download template</a></p>
      <form method="post" action="{{ route('documents.import.metadata') }}" enctype="multipart/form-data" class="space-y-3">
        @csrf
        <div>
          <label class="fl">Excel / CSV</label>
          <input type="file" name="file" class="fi" required accept=".xlsx,.xls,.csv">
        </div>
        <div class="flex justify-end gap-2 pt-2">
          <button type="button" class="bs" onclick="document.getElementById('doc_import_ov').classList.remove('open')">Cancel</button>
          <button type="submit" class="bp">Import</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection