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

@section('content')
@php
  $qParams = request()->query();
  $hasFilters = filled($filters['q']) || filled($filters['status']);
@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"><i class="fa-solid fa-building-user mr-2 text-slate-400"></i>Client Management</p>
      <p class="text-slate-400 text-[11px] mt-0.5">All clients, their projects and invoice history</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button type="button" onclick="openClientOverlay('modal-import-clients-page')" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import text-xs"></i>Import</button>
      <a href="{{ route('clients.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('clients.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="openClientOverlay('modal-new-client')" class="ba"><i class="fa-solid fa-plus text-xs"></i>Add Client</button>
    </div>
  </div>

  <form method="get" action="{{ route('clients.index') }}" class="card p-4 mb-5 grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
    <div class="md:col-span-4">
      <label class="fl">Search</label>
      <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search clients, contact, phone, email, TIN…" class="fi">
    </div>
    <div class="md:col-span-2">
      <label class="fl">Status</label>
      <select name="status" class="fi">
        <option value="">All Statuses</option>
        <option value="Good Standing" @selected($filters['status'] === 'Good Standing')>Good Standing</option>
        <option value="Overdue" @selected($filters['status'] === 'Overdue')>Overdue</option>
      </select>
    </div>
    <div class="md:col-span-3">
      <label class="fl">Sort by</label>
      <select name="sort" class="fi">
        <option value="company_name" @selected($filters['sort'] === 'company_name')>Client Name</option>
        <option value="outstanding_balance" @selected($filters['sort'] === 'outstanding_balance')>Outstanding Balance</option>
        <option value="total_invoiced" @selected($filters['sort'] === 'total_invoiced')>Total Invoiced</option>
        <option value="projects_count" @selected($filters['sort'] === 'projects_count')>Projects Count</option>
        <option value="created_at" @selected($filters['sort'] === 'created_at')>Created Date</option>
      </select>
    </div>
    <div class="md:col-span-1">
      <label class="fl">Dir</label>
      <select name="direction" class="fi">
        <option value="asc" @selected($filters['direction'] === 'asc')>Asc</option>
        <option value="desc" @selected($filters['direction'] === 'desc')>Desc</option>
      </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('clients.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, 15) as $err)
            <li>{{ $err }}</li>
          @endforeach
          @if(count($importSummary['errors']) > 15)
            <li>…and {{ count($importSummary['errors']) - 15 }} more</li>
          @endif
        </ul>
      @endif
    </div>
  @endif

  <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">Total Clients</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $totalClients }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Active Contracts</p><p class="text-[22px] font-bold text-slate-900 mt-2">{{ $activeContracts }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Receivable</p><p class="text-[22px] font-bold text-amber-600 mt-2">{{ \App\Support\Format::mwk($totalReceivable) }}</p></div>
    <div class="stat"><p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Overdue</p><p class="text-[22px] font-bold mt-2 {{ $overdueAmount > 0 ? 'text-red-500' : 'text-slate-700' }}">{{ \App\Support\Format::mwk($overdueAmount) }}</p></div>
  </div>

  @if($clients->total() === 0)
    <div class="card p-12 text-center">
      <div class="w-14 h-14 rounded-2xl bg-slate-100 text-slate-400 inline-flex items-center justify-center mb-4"><i class="fa-solid fa-building-user text-2xl"></i></div>
      @if($hasFilters)
        <p class="font-bold text-slate-800 text-[15px]">No clients match your filters</p>
        <p class="text-slate-500 text-[13px] mt-2">Try changing your search or status filter.</p>
        <a href="{{ route('clients.index') }}" class="ba mt-5 inline-flex">Clear filters</a>
      @else
        <p class="font-bold text-slate-800 text-[15px]">No clients found</p>
        <p class="text-slate-500 text-[13px] mt-2">Add your first client or import clients from Excel.</p>
        <div class="flex flex-wrap gap-2 justify-center mt-5">
          <button type="button" onclick="openClientOverlay('modal-new-client')" class="ba"><i class="fa-solid fa-plus text-xs"></i>Add Client</button>
          <button type="button" onclick="openClientOverlay('modal-import-clients-page')" class="bs" style="padding:8px 16px;border-radius:9px"><i class="fa-solid fa-file-import mr-1 text-xs"></i>Import Clients</button>
        </div>
      @endif
    </div>
  @else
    <div class="card p-5 card-has-table">
      <p class="font-bold text-slate-900 mb-4">All Clients</p>
      <table>
        <thead><tr class="border-b border-slate-100">
          <th class="th">Client Name</th><th class="th">Contact Person</th><th class="th">Phone</th>
          <th class="th">TIN Number</th><th class="th">Projects</th><th class="th">Outstanding</th>
          <th class="th">Status</th><th class="th"></th>
        </tr></thead>
        <tbody>
          @foreach($clients as $c)
            @php
              $overdue = (float) ($c->overdue_amount ?? 0);
              $displayStatus = $overdue > 0 ? 'Overdue' : 'Good Standing';
            @endphp
            <tr class="hover:bg-slate-50/80">
              <td class="td">
                <p class="font-bold text-slate-900 text-[13px]">{{ $c->company_name }}</p>
                @if($c->email)
                  <p class="text-[11px] text-slate-400 mt-0.5">{{ $c->email }}</p>
                @endif
              </td>
              <td class="td text-slate-600 text-[12px]">{{ $c->contact_person ?: 'Not provided' }}</td>
              <td class="td text-slate-600 text-[12px]">{{ $c->phone ?: 'Not provided' }}</td>
              <td class="td font-mono text-[11px] text-slate-600">{{ $c->tin_number ?: 'Not provided' }}</td>
              <td class="td text-slate-600">{{ (int) ($c->projects_count ?? 0) }}</td>
              <td class="td font-semibold {{ $displayStatus === 'Overdue' ? 'text-red-500' : 'text-slate-800' }}">{{ \App\Support\Format::mwk($c->outstanding_balance ?? 0) }}</td>
              <td class="td"><span class="badge {{ $displayStatus === 'Good Standing' ? 'g' : 'r' }}">{{ $displayStatus }}</span></td>
              <td class="td"><a href="{{ route('clients.show', $c) }}" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200 no-underline">View</a></td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

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

<div id="modal-new-client" class="modal-ov" onclick="if(event.target===this)closeClientOverlay('modal-new-client')">
  <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">Add Client</p>
      <button type="button" onclick="closeClientOverlay('modal-new-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-new-client',
        'action' => route('clients.store'),
        'httpMethod' => 'POST',
        'overlayId' => 'modal-new-client',
        'client' => null,
        'submitLabel' => 'Save Client',
      ])
    </div>
  </div>
</div>

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

@push('scripts')
<script>
function openClientOverlay(id) {
  document.getElementById(id).classList.add('open');
}
function closeClientOverlay(id) {
  document.getElementById(id).classList.remove('open');
}
function closeImportClientsModal() {
  closeClientOverlay('modal-import-clients-page');
}

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