@extends('layouts.app')
@section('title', 'Customer Accounts')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Customer Accounts</h1>
            <p class="text-sm text-ink-muted">Corporate accounts, staff tabs, or regulars extended credit at the till — pick one when recording a credit-type payment on an order or bar tab.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @include('components.data-transfer', ['type'=>'customers','label'=>'Customers','exportPermission'=>'customers.view','managePermission'=>'customers.manage'])
            @can('customers.manage')
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-new-customer')"><i data-lucide="user-plus" class="w-3.5 h-3.5"></i> Add customer</button>
        @endcan
    </div>

    <form method="GET" class="card card-pad !p-3">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search customers…" class="input">
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Name</th><th>Phone</th><th>KRA PIN</th><th class="text-right">Credit limit</th><th class="text-right">Balance owed</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($customers as $customer)
                    <tr>
                        <td class="font-medium">{{ $customer->name }}</td>
                        <td>{{ $customer->phone ?? '—' }}</td>
                        <td>{{ $customer->kra_pin ?? '—' }}</td>
                        <td class="text-right">{{ number_format($customer->credit_limit, 2) }}</td>
                        <td class="text-right font-semibold {{ $customer->balance > 0 ? 'text-accent-600' : '' }}">{{ number_format($customer->balance, 2) }}</td>
                        <td><x-badge :color="$customer->is_active ? 'emerald' : 'slate'">{{ $customer->is_active ? 'Active' : 'Inactive' }}</x-badge></td>
                        <td class="text-right flex justify-end gap-1.5"><a href="{{ route('sales.customers.ledger', $customer) }}" class="btn-ghost btn-sm">Statement</a>@if($customer->balance > 0)<a href="{{ route('sales.customers.ledger', $customer) }}" class="btn-primary btn-sm">Clear dues</a>@endif</td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-ink-muted py-8">No customer accounts yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $customers->links() }}

    <x-modal id="new-customer" title="Add customer">
        <form method="POST" action="{{ route('sales.customers.store') }}" id="new-customer-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required></div>
            <div class="grid grid-cols-2 gap-3">
                <div><label class="field-label">Phone</label><input type="text" name="phone" class="input"></div>
                <div><label class="field-label">Email</label><input type="email" name="email" class="input"></div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div><label class="field-label">KRA PIN</label><input type="text" name="kra_pin" class="input"></div>
                <div><label class="field-label">Credit limit</label><input type="number" step="0.01" min="0" name="credit_limit" value="0" class="input"></div>
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="new-customer-form" class="btn-primary">Create customer</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection