@extends('layouts.app')
@section('title', $customer->name.' — Statement')

@section('content')
<div class="max-w-3xl space-y-6" x-data="{ ...modal() }">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold">{{ $customer->name }}</h1>
            <p class="text-sm text-ink-muted">{{ $customer->phone }} &middot; Credit limit {{ number_format($customer->credit_limit, 2) }} &middot; Available {{ number_format($customer->availableCredit(), 2) }}</p>
        </div>
        <div class="text-right">
            <p class="text-xs text-ink-muted">Balance owed</p>
            <p class="text-2xl font-display font-bold {{ $customer->balance > 0 ? 'text-accent-600' : 'text-success' }}">{{ number_format($customer->balance, 2) }}</p>
        </div>
    </div>

    <div class="flex flex-wrap gap-2">
        @can('customers.payments')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-record-payment')"><i data-lucide="banknote" class="w-3.5 h-3.5"></i> Record payment</button>
        @endcan
        <button class="btn-secondary btn-sm" x-data="{ label: 'Copy shareable statement link' }" x-on:click="navigator.clipboard.writeText('{{ $statementLink }}'); label = 'Link copied!'; setTimeout(() => label = 'Copy shareable statement link', 2000)">
            <i data-lucide="link" class="w-3.5 h-3.5"></i> <span x-text="label"></span>
        </button>
    </div>
    <p class="text-xs text-ink-faint -mt-4">This link lets {{ $customer->name }} view this statement without logging in. It expires in 30 days.</p>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Date</th><th>Type</th><th>Reference</th><th class="text-right">Amount</th></tr></thead>
            <tbody>
                @forelse ($entries as $entry)
                    <tr>
                        <td class="whitespace-nowrap">{{ \Carbon\Carbon::parse($entry['date'])->format('d M Y') }}</td>
                        <td><x-badge color="{{ $entry['direction'] === 'owe' ? 'amber' : 'emerald' }}">{{ $entry['type'] }}</x-badge></td>
                        <td>{{ $entry['ref'] }}</td>
                        <td class="text-right font-semibold {{ $entry['direction'] === 'owe' ? 'text-accent-600' : 'text-success' }}">
                            {{ $entry['direction'] === 'owe' ? '+' : '−' }}{{ number_format($entry['amount'], 2) }}
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-ink-muted py-8">No activity yet for this customer.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <x-modal id="record-payment" title="Record payment · {{ $customer->name }}">
        <form method="POST" action="{{ route('sales.customers.payments.store', $customer) }}" id="record-payment-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Amount (balance: {{ number_format($customer->balance, 2) }})</label><input type="number" step="0.01" min="0.01" name="amount" class="input" required></div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="field-label">Method</label>
                    <select name="method" class="input">
                        <option value="cash">Cash</option>
                        <option value="bank">Bank transfer</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="cheque">Cheque</option>
                    </select>
                </div>
                <div><label class="field-label">Reference</label><input type="text" name="reference_number" class="input"></div>
            </div>
            <div><label class="field-label">Notes</label><input type="text" name="notes" class="input"></div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="record-payment-form" class="btn-primary">Save payment</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection