@extends('layouts.app')
@section('title', 'Finance & Accounting')

@section('content')
@php
  $f = $filters ?? [];
  $qParams = request()->query();
  $barColors = ['bg-blue-500','bg-violet-500','bg-amber-500','bg-emerald-500','bg-red-400','bg-slate-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-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-money-bill-wave text-blue-600 mr-1.5"></i>Finance &amp; Accounting</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Costs, expenses and accounting records</p>
    </div>
    <div class="flex flex-wrap gap-2 items-center">
      <a href="{{ route('finance.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('finance.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="openFinExp()" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-receipt"></i> Expense</button>
      <button type="button" onclick="openFinTxn()" class="ba"><i class="fa-solid fa-plus text-xs"></i> Transaction</button>
    </div>
  </div>

  @if($filteredProject ?? null)
    <div class="card p-3 mb-4 flex flex-wrap items-center justify-between gap-2 bg-violet-50 border-violet-100">
      <p class="text-[13px] text-slate-700"><i class="fa-solid fa-folder-open text-violet-600 mr-1"></i>Ledger scoped to <strong>{{ $filteredProject->name }}</strong></p>
      <a href="{{ route('finance.index') }}" class="text-blue-600 font-semibold text-[12px] no-underline">Clear project filter</a>
    </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">Total Budget</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($totalBudget) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Invoiced</p>
      <p class="text-[22px] font-bold text-blue-600 mt-2">{{ \App\Support\Format::mwkDecimal($totalInvoiced) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Received</p>
      <p class="text-[22px] font-bold text-emerald-600 mt-2">{{ \App\Support\Format::mwkDecimal($received) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding</p>
      <p class="text-[22px] font-bold mt-2 {{ ($hasOverdueInvoices ?? false) ? 'text-red-600' : 'text-amber-600' }}">{{ \App\Support\Format::mwkDecimal($outstanding) }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
    <div class="lg:col-span-2 card p-5 card-has-table border-slate-200">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
        <p class="font-bold text-slate-900">Recent Transactions</p>
      </div>

      <form method="get" action="{{ route('finance.index') }}" class="flex flex-wrap gap-2 items-end mb-4 pb-4 border-b border-slate-100">
        <div class="min-w-[140px] flex-1">
          <label class="fl text-[10px]">Search</label>
          <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="Transactions, reference, project…" class="fi">
        </div>
        <div class="w-[120px]">
          <label class="fl text-[10px]">Type</label>
          <select name="type" class="fi">
            <option value="" @selected(!($f['type'] ?? ''))>All Types</option>
            <option value="Income" @selected(($f['type'] ?? '') === 'Income')>Income</option>
            <option value="Expense" @selected(($f['type'] ?? '') === 'Expense')>Expense</option>
          </select>
        </div>
        <div class="min-w-[140px]">
          <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-[130px]">
          <label class="fl text-[10px]">Category</label>
          <select name="category" class="fi">
            <option value="">All Categories</option>
            @foreach($categoryOptions as $c)
              <option value="{{ $c }}" @selected(($f['category'] ?? '') === $c)>{{ $c }}</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>
        <div class="w-[150px]">
          <label class="fl text-[10px]">Sort</label>
          <select name="sort" class="fi">
            @foreach(['transaction_date'=>'Date','amount'=>'Amount','description'=>'Description','transaction_type'=>'Type','created_at'=>'Created'] as $k=>$label)
              <option value="{{ $k }}" @selected(($f['sort'] ?? 'transaction_date') === $k)>{{ $label }}</option>
            @endforeach
          </select>
        </div>
        <div class="w-[100px]">
          <label class="fl text-[10px]">Direction</label>
          <select name="direction" class="fi">
            <option value="desc" @selected(($f['direction'] ?? 'desc') === 'desc')>Desc</option>
            <option value="asc" @selected(($f['direction'] ?? '') === 'asc')>Asc</option>
          </select>
        </div>
        <button type="submit" class="bp h-[38px] self-end">Apply</button>
        <a href="{{ route('finance.index') }}" class="text-[12px] font-semibold text-slate-500 self-end pb-2 no-underline hover:text-slate-700">Clear</a>
      </form>

      @if($transactions->count() === 0)
        <div class="py-14 px-4 text-center">
          <i class="fa-solid fa-receipt text-4xl text-slate-200 mb-3"></i>
          <p class="font-semibold text-slate-700">No transactions found</p>
          <p class="text-[12px] text-slate-500 mt-1 max-w-sm mx-auto">Record your first transaction or adjust your filters.</p>
          <button type="button" onclick="openFinTxn()" class="ba mt-4"><i class="fa-solid fa-plus text-xs"></i> Add Transaction</button>
        </div>
      @else
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Date</th>
              <th class="th">Description</th>
              <th class="th hidden md:table-cell">Category</th>
              <th class="th">Project</th>
              <th class="th text-right">Amount</th>
              <th class="th">Type</th>
            </tr>
          </thead>
          <tbody>
            @foreach($transactions as $t)
              @php
                $isInc = $t->transaction_type === 'Income';
                $amtDisp = $isInc ? (float) $t->amount : -1 * abs((float) $t->amount);
              @endphp
              <tr>
                <td class="td text-slate-400 text-[12px] whitespace-nowrap">{{ $t->transaction_date?->format('M j, Y') }}</td>
                <td class="td font-medium text-slate-800 max-w-[200px] truncate" title="{{ $t->description }}">{{ \Illuminate\Support\Str::limit($t->description, 48) }}</td>
                <td class="td text-slate-500 text-[12px] hidden md:table-cell">{{ $t->category ?? '—' }}</td>
                <td class="td text-slate-500 text-[12px]">
                  @if($t->project_id)
                    <a href="{{ route('projects.show', $t->project_id) }}" class="text-blue-600 font-medium no-underline hover:underline">{{ $t->project?->name }}</a>
                  @else
                    General
                  @endif
                </td>
                <td class="td text-right font-bold font-mono text-[13px] {{ $isInc ? 'text-emerald-600' : 'text-red-600' }}">{{ \App\Support\Format::mwkDecimal($amtDisp) }}</td>
                <td class="td"><span class="badge {{ $isInc ? 'g' : 'r' }}">{{ $t->transaction_type }}</span></td>
              </tr>
            @endforeach
          </tbody>
        </table>
        <div class="mt-4">{{ $transactions->withQueryString()->links() }}</div>
      @endif
    </div>

    <div class="card p-5 border-slate-200">
      <p class="font-bold text-slate-900 mb-1"><i class="fa-solid fa-chart-pie text-slate-400 mr-1"></i>Cost Breakdown</p>
      <p class="text-[11px] text-slate-400 mb-4">From expense transactions (manual + approved expenses)</p>
      @if(($costBreakdown['total'] ?? 0) <= 0)
        <p class="text-[13px] text-slate-500 py-6 text-center">No approved expenses recorded yet.</p>
      @else
        <div class="space-y-3">
          @foreach($costBreakdown['rows'] as $i => $row)
            <div>
              <div class="flex justify-between text-[12px] mb-1">
                <span class="text-slate-600">{{ $row['key'] }}</span>
                <span class="font-bold text-slate-800">{{ \App\Support\Format::mwkDecimal($row['amount']) }}</span>
              </div>
              <div class="pb">
                <div class="pf {{ $barColors[$i % count($barColors)] }}" style="width:{{ min(100, max(0, $row['pct'])) }}%"></div>
              </div>
              <p class="text-[10px] text-slate-400 mt-0.5">{{ number_format($row['pct'], 1) }}% of total</p>
            </div>
          @endforeach
        </div>
      @endif
    </div>
  </div>

  <div class="card p-5 card-has-table border-slate-200">
    <p class="font-bold text-slate-900 mb-4">Expenses Pending Approval</p>
    @if($pendingExpenses->isEmpty())
      <div class="py-10 text-center text-[13px] text-slate-500">
        <i class="fa-solid fa-circle-check text-emerald-300 text-2xl mb-2 block"></i>
        No expenses pending approval.
      </div>
    @else
      <table>
        <thead>
          <tr class="border-b border-slate-100">
            <th class="th">Date</th>
            <th class="th">Staff</th>
            <th class="th">Description</th>
            <th class="th">Project</th>
            <th class="th text-right">Amount</th>
            <th class="th">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($pendingExpenses as $e)
            <tr>
              <td class="td text-slate-400 text-[12px] whitespace-nowrap">{{ $e->expense_date?->format('M j, Y') }}</td>
              <td class="td font-medium text-slate-800 text-[12px]">{{ $e->employee?->name ?? $e->staff_name ?? 'Unknown' }}</td>
              <td class="td text-slate-600 text-[12px]">{{ \Illuminate\Support\Str::limit($e->description, 40) }}</td>
              <td class="td text-[12px]">
                @if($e->project_id)
                  <a href="{{ route('projects.show', $e->project_id) }}" class="text-blue-600 font-medium no-underline hover:underline">{{ $e->project?->name }}</a>
                @else
                  —
                @endif
              </td>
              <td class="td text-right font-semibold text-slate-800 font-mono text-[13px]">{{ \App\Support\Format::mwkDecimal($e->amount) }}</td>
              <td class="td">
                <div class="flex flex-wrap gap-1.5">
                  <button type="button" onclick="finApprove('{{ route('finance.expenses.approve', $e) }}')" class="bsm bg-emerald-50 text-emerald-700 border border-emerald-100"><i class="fa-solid fa-check"></i> Approve</button>
                  <button type="button" onclick="finRejectOpen({{ $e->id }}, '{{ route('finance.expenses.reject', $e) }}')" class="bsm bg-red-50 text-red-600 border border-red-100"><i class="fa-solid fa-xmark"></i> Reject</button>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    @endif
  </div>
</div>

{{-- Add transaction --}}
<div id="fin_ov_txn" class="modal-ov" onclick="if(event.target===this)closeFinTxn()">
  <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 Transaction</p>
      <button type="button" onclick="closeFinTxn()" 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('finance.partials.transaction-form')</div>
  </div>
</div>

{{-- Submit expense --}}
<div id="fin_ov_exp" class="modal-ov" onclick="if(event.target===this)closeFinExp()">
  <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">Submit Expense</p>
      <button type="button" onclick="closeFinExp()" 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('finance.partials.expense-form')</div>
  </div>
</div>

{{-- Reject expense --}}
<div id="fin_ov_reject" class="modal-ov" onclick="if(event.target===this)closeFinReject()">
  <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">Reject expense</p>
      <button type="button" onclick="closeFinReject()" 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('finance.partials.expense-reject-modal')</div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
  let rejectUrl = '';
  function syncTxnCategory() {
    var t = document.getElementById('fin_txn_transaction_type');
    var wrap = document.getElementById('fin_txn_category_wrap');
    var cat = document.getElementById('fin_txn_category');
    if (!t || !wrap) return;
    if (t.value === 'Expense') {
      wrap.style.display = 'block';
      if (cat) cat.required = true;
    } else {
      wrap.style.display = 'none';
      if (cat) { cat.required = false; cat.value = ''; }
    }
  }
  window.openFinTxn = function() {
    document.getElementById('fin_ov_txn').classList.add('open');
    syncTxnCategory();
  };
  window.closeFinTxn = function() { document.getElementById('fin_ov_txn').classList.remove('open'); };
  window.openFinExp = function() { document.getElementById('fin_ov_exp').classList.add('open'); };
  window.closeFinExp = function() { document.getElementById('fin_ov_exp').classList.remove('open'); };
  window.closeFinReject = function() { document.getElementById('fin_ov_reject').classList.remove('open'); rejectUrl = ''; };
  window.finRejectOpen = function(id, url) {
    rejectUrl = url;
    document.getElementById('fin_reject_expense_id').value = id;
    document.getElementById('fin_reject_reason').value = '';
    document.getElementById('fin_reject_err').style.display = 'none';
    document.getElementById('fin_ov_reject').classList.add('open');
  };
  window.finApprove = function(url) { dachAction(url, 'PUT', 'Expense approved and recorded.'); };
  document.getElementById('fin_txn_transaction_type')?.addEventListener('change', syncTxnCategory);

  async function submitJsonForm(form, errId, submitBtn, defaultBtnText) {
    var errEl = document.getElementById(errId);
    errEl.style.display = 'none';
    errEl.textContent = '';
    submitBtn.disabled = true;
    submitBtn.textContent = 'Saving...';
    var fd = new FormData(form);
    var data = {};
    fd.forEach(function(v, k) { if (k !== '_token') data[k] = v; });
    if (data.project_id === '') data.project_id = null;
    if (data.employee_id === '') data.employee_id = null;
    try {
      var res = await fetch(form.dataset.url, {
        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(data),
      });
      var j = await res.json().catch(function() { return {}; });
      if (res.ok) {
        sessionStorage.setItem('dachToast', j.message || 'Saved.');
        window.location.href = window.location.pathname + window.location.search;
        return;
      }
      if (res.status === 422 && j.errors) {
        errEl.textContent = Object.values(j.errors).flat().join(' ');
        errEl.style.display = 'block';
      } else {
        errEl.textContent = j.message || ('Error ' + res.status);
        errEl.style.display = 'block';
      }
    } catch (e) {
      errEl.textContent = 'Network error: ' + e.message;
      errEl.style.display = 'block';
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = defaultBtnText;
    }
  }
  document.getElementById('fin-form-txn')?.addEventListener('submit', function(e) {
    e.preventDefault();
    submitJsonForm(this, 'fin_txn_err', document.getElementById('fin_txn_submit'), 'Save Transaction');
  });
  document.getElementById('fin-form-exp')?.addEventListener('submit', function(e) {
    e.preventDefault();
    submitJsonForm(this, 'fin_exp_err', document.getElementById('fin_exp_submit'), 'Submit Expense');
  });
  document.getElementById('fin_reject_confirm')?.addEventListener('click', async function() {
    if (!rejectUrl) return;
    var reason = document.getElementById('fin_reject_reason').value;
    var errEl = document.getElementById('fin_reject_err');
    errEl.style.display = 'none';
    try {
      var res = await fetch(rejectUrl, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': window.csrfToken,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify({ rejection_reason: reason }),
      });
      var j = await res.json().catch(function() { return {}; });
      if (res.ok) {
        sessionStorage.setItem('dachToast', j.message || 'Expense rejected.');
        window.location.href = window.location.pathname + window.location.search;
        return;
      }
      if (res.status === 422 && j.errors) {
        errEl.textContent = Object.values(j.errors).flat().join(' ');
      } else {
        errEl.textContent = j.message || ('Error ' + res.status);
      }
      errEl.style.display = 'block';
    } catch (e) {
      errEl.textContent = e.message;
      errEl.style.display = 'block';
    }
  });
})();
</script>
@endpush