@extends('layouts.admin')

@section('heading', $staff->name . ' — Salary')
@section('subheading', 'Set pay structure and record payments.')

@section('actions')
  <a href="{{ route('salary.index') }}" class="text-sm" style="color:#6b6470;">← Back to salary list</a>
@endsection

@section('content')

@if (session('status'))
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;">{{ session('status') }}</div>
@endif
@if ($errors->any())
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">{{ $errors->first() }}</div>
@endif

<div class="grid grid-cols-3 gap-4 mb-6">

  <!-- Salary settings -->
  <div class="card p-5">
    <p class="text-xs font-medium mb-3" style="color:#1A1625;">Pay structure</p>
    <form method="POST" action="{{ route('salary.updateSettings', $staff) }}" class="space-y-3">
      @csrf @method('PUT')
      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Type</label>
        <select name="salary_type" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          <option value="fixed" {{ $staff->salarySetting?->salary_type === 'fixed' ? 'selected' : '' }}>Fixed monthly</option>
          <option value="commission" {{ $staff->salarySetting?->salary_type === 'commission' ? 'selected' : '' }}>Commission</option>
        </select>
      </div>
      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Base salary ₹ (if fixed)</label>
        <input type="number" name="base_salary" value="{{ $staff->salarySetting?->base_salary }}" min="0"
          class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Commission % (if commission)</label>
        <input type="number" name="commission_rate" value="{{ $staff->salarySetting?->commission_rate }}" min="0" max="100" step="0.01"
          class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">Save</button>
    </form>
  </div>

  <!-- Record payment -->
  <div class="card p-5 col-span-2">
    <div class="flex items-center justify-between mb-3">
      <p class="text-xs font-medium" style="color:#1A1625;">Record a payment</p>
      <p class="text-sm font-medium" style="color:#0F6E56;">Total paid: ₹{{ number_format($totalPaid, 0) }}</p>
    </div>
    <form method="POST" action="{{ route('salary.payments.store', $staff) }}" class="grid grid-cols-4 gap-3 items-end">
      @csrf
      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Amount ₹</label>
        <input type="number" name="amount" min="0.01" step="0.01" required
          class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div>
        <label class="block text-xs mb-1" style="color:#6b6470;">Date</label>
        <input type="date" name="paid_on" value="{{ now()->format('Y-m-d') }}" required
          class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div class="col-span-2">
        <label class="block text-xs mb-1" style="color:#6b6470;">Notes (optional)</label>
        <input type="text" name="notes" placeholder="e.g. June salary, advance"
          class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div class="col-span-4">
        <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">+ Record payment</button>
      </div>
    </form>
  </div>
</div>

<!-- Payment log -->
<div class="card p-0 overflow-hidden">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="background:#FFF9F0; color:#a19a8f;">
        <th class="px-5 py-3 font-medium text-xs">Date</th>
        <th class="px-5 py-3 font-medium text-xs">Notes</th>
        <th class="px-5 py-3 font-medium text-xs text-right">Amount</th>
        <th class="px-5 py-3 font-medium text-xs text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      @forelse($payments as $payment)
        <tr class="border-t" style="border-color:#f2ece0;">
          <td class="px-5 py-3">{{ $payment->paid_on->format('d M Y') }}</td>
          <td class="px-5 py-3" style="color:#6b6470;">{{ $payment->notes ?? '—' }}</td>
          <td class="px-5 py-3 text-right font-medium">₹{{ number_format($payment->amount, 0) }}</td>
          <td class="px-5 py-3 text-right">
            <form method="POST" action="{{ route('salary.payments.destroy', $payment) }}" onsubmit="return confirm('Remove this payment record?');">
              @csrf @method('DELETE')
              <button type="submit" class="text-xs font-medium" style="color:#C2185B;">Delete</button>
            </form>
          </td>
        </tr>
      @empty
        <tr><td colspan="4" class="px-5 py-8 text-center" style="color:#a19a8f;">No payments recorded yet.</td></tr>
      @endforelse
    </tbody>
  </table>
</div>

@endsection