@extends('layouts.app')
@section('title', $client->company_name)
@section('back', route('clients.index'))

@section('content')
@php
  $badgeClass = $displayStatus === 'Good Standing' ? 'g' : 'r';
@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>
      <h2 class="text-[20px] font-bold text-slate-900 mb-2">{{ $client->company_name }}</h2>
      <p class="text-slate-600 text-[13px]"><i class="fa-solid fa-user mr-1 text-slate-400"></i>{{ $client->contact_person ?: 'Contact: Not provided' }}</p>
      <p class="text-slate-500 text-[12px] mt-1"><i class="fa-solid fa-phone mr-1 text-slate-400"></i>{{ $client->phone ?: 'Not provided' }} &nbsp;&middot;&nbsp; <i class="fa-solid fa-envelope mr-1 text-slate-400"></i>{{ $client->email ?: 'Not provided' }}</p>
      <p class="text-slate-500 text-[12px] mt-1"><i class="fa-solid fa-id-card mr-1 text-slate-400"></i>TIN: <span class="font-mono font-semibold">{{ $client->tin_number ?: 'Not provided' }}</span></p>
      <div class="flex flex-wrap items-center gap-2 mt-3">
        <span class="badge {{ $badgeClass }}" style="font-size:12px;padding:5px 12px">{{ $displayStatus }}</span>
      </div>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('projects.index', ['client_id' => $client->id]) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:7px 14px;font-size:12px;border-radius:8px"><i class="fa-solid fa-folder-open text-xs"></i>View Projects</a>
      <a href="{{ route('invoices.index', ['client_id' => $client->id]) }}" class="bs no-underline inline-flex items-center gap-1" style="padding:7px 14px;font-size:12px;border-radius:8px"><i class="fa-solid fa-file-invoice-dollar text-xs"></i>View Invoices</a>
      <button type="button" onclick="openClientOverlay('modal-edit-client')" 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">Active Projects</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $activeProjectsCount }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding Balance</p><p class="text-[22px] font-bold {{ $displayStatus === 'Overdue' ? 'text-red-500' : 'text-amber-600' }} mt-2">{{ \App\Support\Format::mwk($outstanding) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Invoiced</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwk($totalInvoiced) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Paid Amount</p><p class="text-[22px] font-bold text-emerald-600 mt-2">{{ \App\Support\Format::mwk($paidAmount) }}</p></div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-folder-open mr-2 text-slate-400"></i>Projects</p>
      @forelse($client->projects as $p)
        @php
          $pb = match ($p->status) {
              'On Track' => 'g',
              'At Risk' => 'r',
              'Completed' => 's',
              'On Hold' => 'v',
              default => 'a',
          };
        @endphp
        <a class="block p-4 rounded-xl border border-slate-100 bg-slate-50/80 mb-3 hover:border-blue-200 hover:bg-white transition-colors no-underline" href="{{ route('projects.show', $p) }}">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <p class="font-bold text-slate-900 text-[14px]">{{ $p->name }}</p>
              <p class="text-[11px] text-slate-500 mt-1"><i class="fa-solid fa-location-dot mr-1"></i>{{ $p->location ?: 'Location TBD' }} &nbsp;&middot;&nbsp; Due {{ $p->due_date?->format('M Y') ?? 'TBD' }}</p>
              <p class="text-[11px] text-slate-400 mt-1">Progress {{ $p->progress_percentage }}%</p>
            </div>
            <div class="text-right flex-shrink-0">
              <p class="font-bold text-[12px] {{ $p->profit < 0 ? 'text-red-500' : 'text-emerald-600' }}">{{ \App\Support\Format::mwk($p->profit, true) }}</p>
              <span class="badge {{ $pb }} mt-1" style="font-size:10px;padding:2px 8px">{{ $p->status }}</span>
            </div>
          </div>
        </a>
      @empty
        <p class="text-slate-400 text-[13px] text-center py-6">No projects linked to this client.</p>
      @endforelse
    </div>

    <div class="card p-5">
      <p class="font-bold text-slate-900 mb-3"><i class="fa-solid fa-file-invoice-dollar mr-2 text-slate-400"></i>Invoice History</p>
      @forelse($client->invoices as $i)
        <a class="block p-4 rounded-xl border border-slate-100 bg-slate-50/80 mb-3 hover:border-blue-200 hover:bg-white transition-colors no-underline" href="{{ route('invoices.show', $i) }}">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <p class="font-bold text-blue-600 text-[13px]">{{ $i->invoice_number }}</p>
              <p class="text-[11px] text-slate-600 mt-1">{{ $i->project?->name ?? 'No project' }}</p>
              <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-2">{{ $i->description ?: '—' }}</p>
              <p class="text-[10px] text-slate-400 mt-1">Invoiced {{ $i->invoice_date?->format('M j, Y') ?? '—' }} &middot; Due {{ $i->due_date?->format('M j, Y') ?? '—' }}</p>
            </div>
            <div class="text-right flex-shrink-0">
              <p class="font-bold text-[13px] text-slate-900">{{ \App\Support\Format::mwk($i->total_amount) }}</p>
              <span class="badge {{ $i->status === 'Paid' ? 'g' : ($i->status === 'Overdue' ? 'r' : 'a') }} mt-1" style="font-size:10px;padding:2px 8px">{{ $i->status }}</span>
            </div>
          </div>
        </a>
      @empty
        <p class="text-slate-400 text-[13px] text-center py-6">No invoices issued to this client.</p>
      @endforelse
    </div>
  </div>
</div>

<div id="modal-edit-client" class="modal-ov" onclick="if(event.target===this)closeClientOverlay('modal-edit-client')">
  <div class="modal" style="max-width:520px">
    <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 Client</p>
      <button type="button" onclick="closeClientOverlay('modal-edit-client')" 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('clients.partials.client-form', [
        'formId' => 'form-edit-client',
        'action' => route('clients.update', $client),
        'httpMethod' => 'PUT',
        'overlayId' => 'modal-edit-client',
        'client' => $client,
        'submitLabel' => 'Save Changes',
      ])
    </div>
  </div>
</div>
@endsection

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

async function submitClientJsonForm(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;
    data[k] = v;
  });

  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