@extends('layouts.app')
@section('title', $project->name)
@section('back', route('projects.index'))

@section('content')
@php
  $profit = $financials['profit_total'];
  $margin = $financials['margin_percentage'];
  $budgetUsed = $financials['budget_used_percentage'];
  $pc = $profit < 0 ? 'text-red-500' : 'text-emerald-600';
  $badgeClass = match ($project->status) {
      'On Track' => 'g',
      'At Risk' => 'r',
      'Completed' => 's',
      'On Hold' => 'v',
      default => 'a',
  };
  $barClass = match ($project->status) {
      'At Risk' => 'bg-red-400',
      'Completed' => 'bg-slate-400',
      'On Hold' => 'bg-violet-400',
      default => 'bg-blue-500',
  };
@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>
      <div class="flex flex-wrap items-center gap-2 mb-2">
        <span class="badge {{ $badgeClass }}">{{ $project->status }}</span>
        <span class="text-slate-400 text-[12px]"><i class="fa-solid fa-location-dot mr-1"></i>{{ $project->location ?? 'TBD' }}</span>
        <span class="text-slate-400 text-[12px]"><i class="fa-regular fa-calendar mr-1"></i>Started {{ $project->start_date?->format('M Y') ?? 'TBD' }}</span>
      </div>
      <h2 class="text-[20px] font-bold text-slate-900">{{ $project->name }}</h2>
      <p class="text-slate-500 text-[13px] mt-0.5">Client: <span class="font-semibold text-slate-700">{{ $project->client?->company_name ?? 'TBD' }}</span> &nbsp;&middot;&nbsp; Due: <span class="font-semibold text-slate-700">{{ $project->due_date?->format('M Y') ?? 'TBD' }}</span></p>
      <p class="text-[11px] text-slate-400 mt-2">Invoices: {{ \App\Support\Format::mwk($financials['invoice_total']) }} total · {{ \App\Support\Format::mwk($financials['paid_invoice_total']) }} paid · {{ \App\Support\Format::mwk($financials['outstanding_invoice_total']) }} outstanding</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('invoices.index', ['project_id' => $project->id]) }}" class="bs no-underline" style="padding:7px 14px;font-size:12px;border-radius:8px"><i class="fa-solid fa-file-invoice-dollar mr-1 text-xs"></i>Invoices</a>
      <a href="{{ route('finance.index', ['project_id' => $project->id]) }}" class="bs no-underline" style="padding:7px 14px;font-size:12px;border-radius:8px"><i class="fa-solid fa-coins mr-1 text-xs"></i>Finance</a>
      <button type="button" onclick="openProjectOverlay('modal-edit-project')" class="ba" style="padding:7px 14px;font-size:12px"><i class="fa-solid fa-pen text-xs"></i>Edit</button>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Contract value</p><p class="text-[20px] font-bold text-slate-900 mt-1">{{ \App\Support\Format::mwk($project->contract_value) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Budget</p><p class="text-[20px] font-bold text-slate-900 mt-1">{{ \App\Support\Format::mwk($project->budget) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Amount spent</p><p class="text-[20px] font-bold text-slate-900 mt-1">{{ \App\Support\Format::mwk($financials['spent_total']) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Income</p><p class="text-[20px] font-bold text-emerald-700 mt-1">{{ \App\Support\Format::mwk($financials['income_total'], true) }}</p></div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-5">
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Profit / Loss</p><p class="text-[20px] font-bold mt-1 {{ $pc }}">{{ \App\Support\Format::mwk($profit, true) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Margin</p><p class="text-[20px] font-bold mt-1 {{ $pc }}">{{ ($margin >= 0 ? '+' : '') . $margin }}%</p></div>
  </div>

  <div class="card p-5 mb-4">
    <div class="flex justify-between items-center mb-3">
      <p class="font-bold text-slate-900">Overall progress</p>
      <span class="font-bold text-[20px] {{ $project->status === 'At Risk' ? 'text-red-500' : 'text-blue-600' }}">{{ $project->progress_percentage }}%</span>
    </div>
    <div class="pb" style="height:10px"><div class="pf {{ $barClass }}" style="width:{{ min(100, max(0, (int) $project->progress_percentage)) }}%"></div></div>
    <div class="flex flex-wrap justify-between gap-2 text-[11px] text-slate-400 mt-2">
      <span>Budget used: {{ $budgetUsed }}%</span>
      @if($budgetAheadOfProgress)
        <span class="text-amber-600 font-semibold">Budget use is well ahead of recorded completion — review spend.</span>
      @endif
      <span>Due: {{ $project->due_date?->format('M Y') ?? 'TBD' }}</span>
    </div>
  </div>

  @if($invoiceByStatus->isNotEmpty())
    <div class="card p-4 mb-4">
      <p class="font-bold text-slate-900 mb-2 text-[13px]">Invoice status</p>
      <div class="flex flex-wrap gap-3 text-[12px]">
        @foreach($invoiceByStatus as $row)
          <span class="text-slate-600">{{ $row->status }}: <strong>{{ $row->cnt }}</strong> ({{ \App\Support\Format::mwk($row->total) }})</span>
        @endforeach
      </div>
    </div>
  @endif

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3">Project team</p>
      @forelse($team as $emp)
        <div class="flex items-center gap-3 mb-3">
          <div class="w-8 h-8 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center text-xs font-bold">{{ $emp->initials }}</div>
          <div>
            <p class="font-semibold text-slate-800 text-[12px]">{{ $emp->name }}</p>
            <p class="text-slate-400 text-[11px]">{{ $emp->job_title }}</p>
          </div>
        </div>
      @empty
        <p class="text-slate-400 text-[12px]">No team members assigned</p>
      @endforelse
    </div>

    <div class="card p-5">
      <div class="flex justify-between items-center mb-3">
        <p class="font-bold text-slate-900">Recent transactions</p>
        <a href="{{ route('finance.index', ['project_id' => $project->id]) }}" class="text-[11px] font-semibold text-blue-600 no-underline">All in finance</a>
      </div>
      @forelse($transactions as $t)
        <div class="flex justify-between items-start mb-3">
          <div>
            <p class="text-[12px] font-medium text-slate-700 leading-snug">{{ $t->description }}</p>
            <p class="text-[10px] text-slate-400">{{ $t->transaction_date?->format('M j') }}</p>
          </div>
          <span class="font-bold text-[12px] ml-2 flex-shrink-0 {{ $t->transaction_type === 'Income' ? 'text-emerald-600' : 'text-red-500' }}">{{ \App\Support\Format::mwk($t->amount, $t->transaction_type === 'Income') }}</span>
        </div>
      @empty
        <p class="text-slate-400 text-[12px]">No recent transactions</p>
      @endforelse
    </div>

    <div class="card p-5">
      <div class="flex justify-between items-center mb-3">
        <p class="font-bold text-slate-900">Invoices</p>
        <a href="{{ route('invoices.index', ['project_id' => $project->id]) }}" class="text-[11px] font-semibold text-blue-600 no-underline">View all</a>
      </div>
      @forelse($invoices as $i)
        <a class="flex justify-between items-start mb-3 cursor-pointer hover:opacity-80 no-underline" href="{{ route('invoices.show', $i) }}">
          <div>
            <p class="text-[12px] font-semibold text-blue-600">{{ $i->invoice_number }}</p>
            <p class="text-[10px] text-slate-400">{{ $i->invoice_date?->format('M j') }}</p>
          </div>
          <div class="text-right ml-2">
            <p class="font-bold text-[12px] text-slate-800 flex-shrink-0">{{ \App\Support\Format::mwk($i->total_amount) }}</p>
            <span class="badge {{ $i->status === 'Paid' ? 'g' : ($i->status === 'Overdue' ? 'r' : 'a') }}" style="font-size:10px;padding:1px 7px">{{ $i->status }}</span>
          </div>
        </a>
      @empty
        <p class="text-slate-400 text-[12px]">No invoices yet — <a href="{{ route('invoices.index', ['project_id' => $project->id]) }}" class="text-blue-600 font-semibold no-underline">create from invoices</a></p>
      @endforelse
    </div>
  </div>
</div>

<div id="modal-edit-project" class="modal-ov" onclick="if(event.target===this)closeProjectOverlay('modal-edit-project')">
  <div class="modal" style="max-width:560px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Edit project</p>
      <button type="button" onclick="closeProjectOverlay('modal-edit-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-edit-project',
        'action' => route('projects.update', $project),
        'httpMethod' => 'PUT',
        'overlayId' => 'modal-edit-project',
        'clients' => $clients,
        'employees' => $employees,
        'project' => $project,
      ])
    </div>
  </div>
</div>
@endsection

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

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