@extends('layouts.app')
@section('title', 'All Projects')

@section('content')
@php
  $qParams = request()->query();
  $sortLink = function (string $col) use ($filters) {
      $dir = ($filters['sort'] === $col && $filters['direction'] === 'asc') ? 'desc' : 'asc';
      return route('projects.index', array_merge(request()->query(), ['sort' => $col, 'direction' => $dir]));
  };
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900">All Projects</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Filter, export, and manage construction projects</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button type="button" onclick="openProjectOverlay('modal-import-clients')" class="bs no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import mr-1 text-xs"></i>Import clients</button>
      <a href="{{ route('projects.export.excel', $qParams) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel text-xs"></i>Excel</a>
      <a href="{{ route('projects.export.pdf', $qParams) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf text-xs"></i>PDF</a>
      <button type="button" onclick="openProjectOverlay('modal-new-project')" class="ba"><i class="fa-solid fa-plus text-xs"></i>New project</button>
    </div>
  </div>

  <form method="get" action="{{ route('projects.index') }}" class="card p-4 mb-5 grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
    <input type="hidden" name="sort" value="{{ $filters['sort'] }}">
    <input type="hidden" name="direction" value="{{ $filters['direction'] }}">
    <div class="md:col-span-4">
      <label class="fl">Search</label>
      <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Name, client, location…" class="fi">
    </div>
    <div class="md:col-span-3">
      <label class="fl">Status</label>
      <select name="status" class="fi">
        <option value="">All</option>
        @foreach(['On Track','At Risk','Completed','On Hold'] as $st)
          <option value="{{ $st }}" @selected($filters['status'] === $st)>{{ $st }}</option>
        @endforeach
      </select>
    </div>
    <div class="md:col-span-3">
      <label class="fl">Client</label>
      <select name="client_id" class="fi">
        <option value="">All clients</option>
        @foreach($clients as $c)
          <option value="{{ $c->id }}" @selected((string) $filters['client_id'] === (string) $c->id)>{{ $c->company_name }}</option>
        @endforeach
      </select>
    </div>
    <div class="md:col-span-2 flex gap-2">
      <button type="submit" class="bp w-full" style="justify-content:center">Apply</button>
      <a href="{{ route('projects.index') }}" class="bs w-full text-center no-underline inline-flex items-center justify-center" style="padding:9px">Clear</a>
    </div>
  </form>

  @if($importSummary)
    <div class="card p-4 mb-5 border-blue-100 bg-blue-50/40">
      <p class="font-bold text-slate-900 text-[13px] mb-1">Last import</p>
      <p class="text-[12px] text-slate-600">{{ ($importSummary['created'] ?? 0) }} created, {{ ($importSummary['updated'] ?? 0) }} updated, {{ ($importSummary['skipped'] ?? 0) }} skipped.</p>
      @if(!empty($importSummary['errors']))
        <ul class="mt-2 text-[11px] text-red-600 list-disc pl-4 space-y-0.5">
          @foreach(array_slice($importSummary['errors'], 0, 12) as $err)
            <li>{{ $err }}</li>
          @endforeach
          @if(count($importSummary['errors']) > 12)
            <li>…and {{ count($importSummary['errors']) - 12 }} more</li>
          @endif
        </ul>
      @endif
    </div>
  @endif

  <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-5">
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Active projects</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $activeProjects }}</p><p class="text-[10px] text-slate-400 mt-1">Excludes Completed</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">At risk</p><p class="text-[22px] font-bold text-red-600 mt-2">{{ $atRiskCount }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total contract value</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwk($totalContract) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Avg completion</p><p class="text-[22px] font-bold text-emerald-600 mt-2">{{ $avgCompletion }}%</p></div>
  </div>

  <div class="flex flex-wrap items-center gap-2 mb-3 text-[11px] text-slate-500">
    <span class="font-bold text-slate-600">Sort:</span>
    <a href="{{ $sortLink('name') }}" class="no-underline {{ $filters['sort'] === 'name' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Name</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('due_date') }}" class="no-underline {{ $filters['sort'] === 'due_date' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Due</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('contract_value') }}" class="no-underline {{ $filters['sort'] === 'contract_value' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Contract</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('budget') }}" class="no-underline {{ $filters['sort'] === 'budget' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Budget</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('progress_percentage') }}" class="no-underline {{ $filters['sort'] === 'progress_percentage' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Progress</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('status') }}" class="no-underline {{ $filters['sort'] === 'status' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Status</a>
    <span class="text-slate-300">|</span>
    <a href="{{ $sortLink('created_at') }}" class="no-underline {{ $filters['sort'] === 'created_at' ? 'text-blue-600 font-semibold' : 'text-slate-500' }}">Created</a>
  </div>

  @if($projects->isEmpty())
    <div class="card p-10 text-center">
      <p class="font-bold text-slate-800 text-[15px]">No projects match your filters</p>
      <p class="text-slate-500 text-[13px] mt-2">Try clearing search or add a new project.</p>
      <button type="button" onclick="openProjectOverlay('modal-new-project')" class="ba mt-4"><i class="fa-solid fa-plus text-xs"></i>New project</button>
    </div>
  @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      @foreach($projects as $p)
        @include('projects.partials.project-card', ['p' => $p])
      @endforeach
    </div>
  @endif

  @if($projects->hasPages())
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mt-8 text-[13px]">
      <p class="text-slate-500">Showing {{ $projects->firstItem() }}–{{ $projects->lastItem() }} of {{ $projects->total() }}</p>
      <div class="flex gap-2">
        @if ($projects->onFirstPage())
          <span class="text-slate-300 px-3 py-1">Previous</span>
        @else
          <a href="{{ $projects->previousPageUrl() }}" class="bs no-underline inline-flex items-center" style="padding:6px 14px;border-radius:8px">Previous</a>
        @endif
        @if ($projects->hasMorePages())
          <a href="{{ $projects->nextPageUrl() }}" class="ba no-underline inline-flex items-center" style="padding:6px 14px;font-size:12px;border-radius:8px">Next</a>
        @else
          <span class="text-slate-300 px-3 py-1">Next</span>
        @endif
      </div>
    </div>
  @endif
</div>

<div id="modal-new-project" class="modal-ov" onclick="if(event.target===this)closeProjectOverlay('modal-new-project')">
  <div class="modal">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">New project</p>
      <button type="button" onclick="closeProjectOverlay('modal-new-project')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer;font-size:13px;color:#64748b">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      @include('projects.partials.project-form', [
        'formId' => 'form-new-project',
        'action' => route('projects.store'),
        'httpMethod' => 'POST',
        'overlayId' => 'modal-new-project',
        'clients' => $clients,
        'employees' => $employees,
        'project' => null,
      ])
    </div>
  </div>
</div>

@include('projects.partials.import-clients-modal', ['overlayId' => 'modal-import-clients'])
@endsection

@push('scripts')
<script>
function openProjectOverlay(id) {
  document.getElementById(id).classList.add('open');
}
function closeProjectOverlay(id) {
  document.getElementById(id).classList.remove('open');
}
function closeImportClients() {
  closeProjectOverlay('modal-import-clients');
}

async function submitProjectJsonForm(formId, method, url) {
  const form = document.getElementById(formId);
  if (!form) return;
  const fd = new FormData(form);
  const data = {};
  fd.forEach(function (v, k) {
    if (k === '_token') return;
    if (k.endsWith('[]')) {
      const key = k.slice(0, -2);
      if (!data[key]) data[key] = [];
      data[key].push(v);
    } else {
      data[k] = v;
    }
  });
  if (!data.team_members) data.team_members = [];

  ['client_id','budget','contract_value','progress_percentage'].forEach(function (key) {
    if (data[key] !== undefined && data[key] !== '') {
      data[key] = (key === 'client_id' || key === 'progress_percentage')
        ? parseInt(data[key], 10)
        : parseFloat(data[key]);
    }
  });

  const errEl = document.getElementById(formId + '_err');
  errEl.style.display = 'none';
  errEl.textContent = '';

  try {
    const res = await fetch(url, {
      method: method,
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': window.csrfToken,
        'X-Requested-With': 'XMLHttpRequest',
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      const j = await res.json().catch(function () { return {}; });
      sessionStorage.setItem('dachToast', j.message || 'Saved');
      window.location.href = j.redirect || window.location.href;
    } else if (res.status === 422) {
      const j = await res.json();
      const messages = Object.values(j.errors || {}).flat();
      errEl.textContent = messages.join(' ');
      errEl.style.display = 'block';
    } else {
      errEl.textContent = 'Server error: ' + res.status;
      errEl.style.display = 'block';
    }
  } catch (e) {
    errEl.textContent = 'Network error: ' + e.message;
    errEl.style.display = 'block';
  }
}
</script>
@endpush