@extends('layouts.app')
@section('title', 'Cash Flow')

@section('content')
@php
  $f = $filters ?? [];
  $qParams = array_filter([
    'q' => $f['q'] ?? '',
    'project_id' => $f['project_id'] ?? '',
    'status' => ($f['status'] ?? 'all') !== 'all' ? ($f['status'] ?? '') : null,
    'type' => $f['type'] ?? '',
    'date_from' => $f['date_from'] ?? '',
    'date_to' => $f['date_to'] ?? '',
  ]);
  $net = $netPosition ?? 0;
  $netClass = $net > 0 ? 'text-emerald-600' : ($net < 0 ? 'text-red-600' : 'text-amber-600');
@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-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-wave-square text-blue-600 mr-1.5"></i>Cash Flow Management</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Track money coming in and going out</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('cashflow.export.excel', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Export Excel</a>
      <a href="{{ route('cashflow.export.pdf', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> Export PDF</a>
      <button type="button" onclick="document.getElementById('cf_ov_out').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-arrow-trend-down"></i> Add Outflow</button>
      <button type="button" onclick="document.getElementById('cf_ov_in').classList.add('open')" class="ba inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-arrow-trend-up"></i> Add Inflow</button>
    </div>
  </div>

  @if($errors->any())
    <div class="card p-3 mb-4 border-red-100 bg-red-50 text-red-700 text-[13px]">{{ $errors->first() }}</div>
  @endif

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-vault mr-1 text-slate-500"></i>Current Balance</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($currentBalance ?? 0) }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Posted income − expenses</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-arrow-trend-down mr-1 text-emerald-500"></i>Expected In (30d)</p>
      <p class="text-[22px] font-bold text-emerald-600 mt-2">{{ \App\Support\Format::mwkDecimal($expectedIn30 ?? 0) }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Pending inflows</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-arrow-trend-up mr-1 text-red-500"></i>Going Out (30d)</p>
      <p class="text-[22px] font-bold text-red-600 mt-2">{{ \App\Support\Format::mwkDecimal($goingOut30 ?? 0) }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Pending outflows</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider"><i class="fa-solid fa-scale-balanced mr-1 text-slate-500"></i>Net Position</p>
      <p class="text-[22px] font-bold mt-2 {{ $netClass }}">{{ \App\Support\Format::mwkDecimal($net) }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Balance + expected in − going out</p>
    </div>
  </div>

  <form method="get" action="{{ route('cashflow.index') }}" class="card p-4 mb-4 flex flex-wrap gap-2 items-end border-slate-200">
    <div class="min-w-[140px] flex-1">
      <label class="fl text-[10px]">Search</label>
      <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="Search cash flow, client, project, payable…" class="fi">
    </div>
    <div class="min-w-[130px]">
      <label class="fl text-[10px]">Project</label>
      <select name="project_id" class="fi">
        <option value="">All projects</option>
        @foreach($projects as $p)
          <option value="{{ $p->id }}" @selected((string)($f['project_id'] ?? '') === (string)$p->id)>{{ $p->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="min-w-[120px]">
      <label class="fl text-[10px]">Status</label>
      <select name="status" class="fi">
        <option value="all" @selected(($f['status'] ?? 'all') === 'all')>All statuses</option>
        <option value="pending" @selected(($f['status'] ?? '') === 'pending')>Pending</option>
        <option value="received" @selected(($f['status'] ?? '') === 'received')>Received</option>
        <option value="paid" @selected(($f['status'] ?? '') === 'paid')>Paid</option>
      </select>
    </div>
    <div class="min-w-[140px]">
      <label class="fl text-[10px]">Type</label>
      <select name="type" class="fi">
        <option value="">All types</option>
        @foreach($inflowTypes as $t)
          <option value="{{ $t }}" @selected(($f['type'] ?? '') === $t)>{{ $t }} (in)</option>
        @endforeach
        @foreach($outflowTypes as $t)
          <option value="{{ $t }}" @selected(($f['type'] ?? '') === $t)>{{ $t }} (out)</option>
        @endforeach
      </select>
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date from</label>
      <input type="date" name="date_from" value="{{ $f['date_from'] ?? '' }}" class="fi">
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date to</label>
      <input type="date" name="date_to" value="{{ $f['date_to'] ?? '' }}" class="fi">
    </div>
    <button type="submit" class="bp h-[38px] self-end">Apply</button>
    <a href="{{ route('cashflow.index') }}" class="text-[12px] font-semibold text-slate-500 self-end pb-2 no-underline">Clear</a>
  </form>

  <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
    <div class="card p-0 border-slate-200 overflow-hidden card-has-table">
      <div class="p-4 border-b border-slate-100">
        <p class="font-bold text-slate-900"><i class="fa-solid fa-arrow-trend-down text-emerald-600 mr-2"></i>Money In — <span class="text-slate-500 font-normal text-[13px]">{{ $periodLabel ?? '' }}</span></p>
      </div>
      @if($inflows->isEmpty())
        <div class="py-14 px-4 text-center">
          <i class="fa-solid fa-arrow-trend-up text-4xl text-slate-200 mb-3"></i>
          <p class="font-semibold text-slate-700">No money-in records found</p>
          <p class="text-[12px] text-slate-500 mt-1 max-w-sm mx-auto">Add an expected inflow or adjust your filters.</p>
          <button type="button" onclick="document.getElementById('cf_ov_in').classList.add('open')" class="ba mt-4"><i class="fa-solid fa-arrow-trend-up text-xs"></i> Add Inflow</button>
        </div>
      @else
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Client/Source</th>
              <th class="th">Project</th>
              <th class="th text-right">Amount</th>
              <th class="th">Date</th>
              <th class="th">Status</th>
              <th class="th"></th>
            </tr>
          </thead>
          <tbody>
            @foreach($inflows as $i)
              @php
                $src = $i->client?->company_name ?: $i->inflow_type;
                $dt = $i->is_received ? $i->actual_date : $i->expected_date;
                $badge = $i->is_received ? 'g' : 'a';
                $st = $i->is_received ? 'Received' : 'Expected';
              @endphp
              <tr>
                <td class="td font-medium text-slate-800 text-[12px]">{{ $src }}</td>
                <td class="td text-[12px]">
                  @if($i->project_id)
                    <a href="{{ route('projects.show', $i->project_id) }}" class="text-blue-600 font-medium no-underline">{{ $i->project?->name ?? 'Project #'.$i->project_id }}</a>
                  @else
                    <span class="text-slate-500">General</span>
                  @endif
                </td>
                <td class="td text-right font-mono font-semibold text-emerald-700 text-[12px]">{{ \App\Support\Format::mwkDecimal($i->amount) }}</td>
                <td class="td text-slate-500 text-[12px] whitespace-nowrap">{{ $dt?->format('M j, Y') }}</td>
                <td class="td"><span class="badge {{ $badge }}">{{ $st }}</span></td>
                <td class="td">
                  @if(!$i->is_received)
                    <button type="button" class="bsm bg-emerald-50 text-emerald-800 hover:bg-emerald-100" onclick="cfOpenReceived('{{ route('cashflow.inflows.received', $i) }}')"><i class="fa-solid fa-check text-[10px]"></i> Mark received</button>
                  @else
                    <span class="text-[11px] text-slate-400">Received</span>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      @endif
    </div>

    <div class="card p-0 border-slate-200 overflow-hidden card-has-table">
      <div class="p-4 border-b border-slate-100">
        <p class="font-bold text-slate-900"><i class="fa-solid fa-arrow-trend-up text-red-500 mr-2"></i>Money Out — <span class="text-slate-500 font-normal text-[13px]">{{ $periodLabel ?? '' }}</span></p>
      </div>
      @if($outflows->isEmpty())
        <div class="py-14 px-4 text-center">
          <i class="fa-solid fa-arrow-trend-down text-4xl text-slate-200 mb-3"></i>
          <p class="font-semibold text-slate-700">No money-out records found</p>
          <p class="text-[12px] text-slate-500 mt-1 max-w-sm mx-auto">Add an expected outflow or adjust your filters.</p>
          <button type="button" onclick="document.getElementById('cf_ov_out').classList.add('open')" class="ba mt-4"><i class="fa-solid fa-arrow-trend-down text-xs"></i> Add Outflow</button>
        </div>
      @else
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Payable To</th>
              <th class="th">Type</th>
              <th class="th">Project</th>
              <th class="th text-right">Amount</th>
              <th class="th">Due / Paid</th>
              <th class="th">Status</th>
              <th class="th"></th>
            </tr>
          </thead>
          <tbody>
            @foreach($outflows as $o)
              @php
                $pay = $o->payable_to ?? $o->supplier?->company_name ?? 'General';
                $dt = $o->is_paid ? $o->paid_date : $o->due_date;
                if ($o->is_paid) {
                  $badge = 'g';
                  $st = 'Paid';
                } elseif ($o->due_date && $o->due_date->isPast()) {
                  $badge = 'r';
                  $st = 'Overdue';
                } else {
                  $badge = 'a';
                  $st = 'Pending';
                }
              @endphp
              <tr>
                <td class="td font-medium text-slate-800 text-[12px]">{{ $pay }}</td>
                <td class="td text-slate-600 text-[11px]">{{ $o->outflow_type }}</td>
                <td class="td text-[12px]">
                  @if($o->project_id)
                    <a href="{{ route('projects.show', $o->project_id) }}" class="text-blue-600 no-underline font-medium">{{ $o->project?->name ?? '#'.$o->project_id }}</a>
                  @else
                    <span class="text-slate-500">General</span>
                  @endif
                </td>
                <td class="td text-right font-mono font-semibold text-red-600 text-[12px]">{{ \App\Support\Format::mwkDecimal($o->amount) }}</td>
                <td class="td text-slate-500 text-[12px] whitespace-nowrap">{{ $dt?->format('M j, Y') }}</td>
                <td class="td"><span class="badge {{ $badge }}">{{ $st }}</span></td>
                <td class="td">
                  @if(!$o->is_paid)
                    <button type="button" class="bsm bg-emerald-50 text-emerald-800 hover:bg-emerald-100" onclick="cfOpenPaid('{{ route('cashflow.outflows.paid', $o) }}')"><i class="fa-solid fa-check-double text-[10px]"></i> Mark paid</button>
                  @else
                    <span class="text-[11px] text-slate-400">Paid</span>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      @endif
    </div>
  </div>
</div>

<div id="cf_ov_in" class="modal-ov" onclick="if(event.target===this)event.target.classList.remove('open')">
  <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">Add expected inflow</p>
      <button type="button" onclick="document.getElementById('cf_ov_in').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">@include('cashflow.partials.inflow-form')</div>
  </div>
</div>

<div id="cf_ov_out" class="modal-ov" onclick="if(event.target===this)event.target.classList.remove('open')">
  <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">Add expected outflow</p>
      <button type="button" onclick="document.getElementById('cf_ov_out').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">@include('cashflow.partials.outflow-form')</div>
  </div>
</div>

@include('cashflow.partials.mark-received-modal')
@include('cashflow.partials.mark-paid-modal')
@endsection

@push('scripts')
<script>
(function () {
  function wireJsonForm(form) {
    if (!form || form.dataset.wired) return;
    form.dataset.wired = '1';
    form.closest('.modal-ov')?.querySelectorAll('.cf-modal-close').forEach(function (b) {
      b.addEventListener('click', function () { form.closest('.modal-ov')?.classList.remove('open'); });
    });
    form.addEventListener('submit', async function (e) {
      e.preventDefault();
      var err = form.querySelector('.cf-form-err');
      err.style.display = 'none';
      err.textContent = '';
      var fd = new FormData(form);
      var body = {};
      fd.forEach(function (v, k) { if (k !== '_token') body[k] = v || null; });
      var btn = form.querySelector('[type="submit"]');
      btn.disabled = true;
      try {
        var res = await fetch(form.dataset.action, {
          method: form.dataset.method || 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': window.csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
          },
          body: JSON.stringify(body),
        });
        var j = await res.json().catch(function () { return {}; });
        if (res.ok) {
          sessionStorage.setItem('dachToast', j.message || 'Saved.');
          window.location.reload();
          return;
        }
        err.textContent = (j.errors && Object.values(j.errors).flat().join(' ')) || j.message || ('Error ' + res.status);
        err.style.display = 'block';
      } catch (x) {
        err.textContent = x.message;
        err.style.display = 'block';
      } finally {
        btn.disabled = false;
      }
    });
  }
  document.querySelectorAll('.cf-json-form').forEach(wireJsonForm);

  function filterInvoicesByClient() {
    var cid = document.getElementById('cf_in_client')?.value;
    var sel = document.getElementById('cf_in_invoice');
    if (!sel) return;
    sel.querySelectorAll('option[data-client-id]').forEach(function (opt) {
      var show = !cid || opt.getAttribute('data-client-id') === cid;
      opt.style.display = show ? '' : 'none';
    });
  }
  document.getElementById('cf_in_client')?.addEventListener('change', filterInvoicesByClient);
  filterInvoicesByClient();
})();

window.cfOpenReceived = function (url) {
  document.getElementById('cf_recv_url').value = url;
  document.getElementById('cf_recv_err').style.display = 'none';
  document.getElementById('cf_ov_received').classList.add('open');
};
window.cfCloseReceived = function () {
  document.getElementById('cf_ov_received').classList.remove('open');
};
document.getElementById('cf_form_received')?.addEventListener('submit', async function (e) {
  e.preventDefault();
  var url = document.getElementById('cf_recv_url').value;
  var err = document.getElementById('cf_recv_err');
  err.style.display = 'none';
  var fd = new FormData(e.target);
  var body = { actual_date: fd.get('actual_date') || null, payment_method: fd.get('payment_method') || null, reference: fd.get('reference') || null };
  var btn = document.getElementById('cf_recv_submit');
  btn.disabled = true;
  try {
    var res = await fetch(url, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': window.csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify(body),
    });
    var j = await res.json().catch(function () { return {}; });
    if (res.ok) {
      sessionStorage.setItem('dachToast', j.message || 'Done.');
      window.location.reload();
      return;
    }
    err.textContent = j.message || ('Error ' + res.status);
    err.style.display = 'block';
  } catch (x) {
    err.textContent = x.message;
    err.style.display = 'block';
  } finally {
    btn.disabled = false;
  }
});

window.cfOpenPaid = function (url) {
  document.getElementById('cf_paid_url').value = url;
  document.getElementById('cf_paid_err').style.display = 'none';
  document.getElementById('cf_ov_paid').classList.add('open');
};
window.cfClosePaid = function () {
  document.getElementById('cf_ov_paid').classList.remove('open');
};
document.getElementById('cf_form_paid')?.addEventListener('submit', async function (e) {
  e.preventDefault();
  var url = document.getElementById('cf_paid_url').value;
  var err = document.getElementById('cf_paid_err');
  err.style.display = 'none';
  var fd = new FormData(e.target);
  var body = { paid_date: fd.get('paid_date') || null, payment_method: fd.get('payment_method') || null, reference: fd.get('reference') || null };
  var btn = document.getElementById('cf_paid_submit');
  btn.disabled = true;
  try {
    var res = await fetch(url, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': window.csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify(body),
    });
    var j = await res.json().catch(function () { return {}; });
    if (res.ok) {
      sessionStorage.setItem('dachToast', j.message || 'Done.');
      window.location.reload();
      return;
    }
    err.textContent = j.message || ('Error ' + res.status);
    err.style.display = 'block';
  } catch (x) {
    err.textContent = x.message;
    err.style.display = 'block';
  } finally {
    btn.disabled = false;
  }
});
</script>
@endpush