@extends('layouts.app')
@section('title', $customer->name)
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4>{{ $customer->name }} @if($customer->shop_name) <small class="text-muted">({{ $customer->shop_name }})</small> @endif</h4>
    <div>
        <a href="{{ route('customers.pay', $customer) }}" class="btn btn-success btn-sm">Receive Payment</a>
        <a href="{{ route('customers.edit', $customer) }}" class="btn btn-outline-primary btn-sm">Edit</a>
        <a href="{{ route('customers.index') }}" class="btn btn-secondary btn-sm">Back</a>
    </div>
</div>

@if($customer->phone || $customer->address)
<div class="mb-3 text-muted">
    @if($customer->phone) Phone: {{ $customer->phone }} @endif
    @if($customer->address) | Address: {{ $customer->address }} @endif
</div>
@endif

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-start border-primary border-3">
            <div class="card-body py-2">
                <div class="text-muted small">Total Orders</div>
                <div class="fs-5 fw-bold">Rs. {{ number_format($customer->orders->sum('total'), 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-start border-success border-3">
            <div class="card-body py-2">
                <div class="text-muted small">Total Received</div>
                <div class="fs-5 fw-bold text-success">Rs. {{ number_format($customer->orders->sum('paid') + $customer->payments->sum('amount'), 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card border-start border-danger border-3">
            <div class="card-body py-2">
                <div class="text-muted small">Balance Due</div>
                <div class="fs-5 fw-bold text-danger">Rs. {{ number_format($customer->balance, 2) }}</div>
            </div>
        </div>
    </div>
</div>

{{-- Order History --}}
<div class="card mb-4">
    <div class="card-header">Order History</div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead><tr><th>#</th><th>Date</th><th>Items</th><th>Total</th><th>Received</th><th></th></tr></thead>
            <tbody>
            @forelse($customer->orders->sortByDesc('date') as $order)
                <tr>
                    <td>{{ $order->id }}</td>
                    <td>{{ $order->date->format('d M Y') }}</td>
                    <td>
                        @foreach($order->items as $item)
                            <small>{{ $item->product->category->name ?? '' }} {{ $item->product->weight->label ?? '' }} x{{ (int)$item->quantity }}</small>{{ !$loop->last ? ', ' : '' }}
                        @endforeach
                    </td>
                    <td>Rs. {{ number_format($order->total, 2) }}</td>
                    <td>Rs. {{ number_format($order->paid, 2) }}</td>
                    <td><a href="{{ route('orders.show', $order) }}" class="btn btn-sm btn-outline-info">View</a></td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center text-muted">No orders yet</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Payment History --}}
<div class="card">
    <div class="card-header">Payment History</div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead><tr><th>#</th><th>Date</th><th>Amount</th><th>Notes</th></tr></thead>
            <tbody>
            @forelse($customer->payments->sortByDesc('date') as $payment)
                <tr>
                    <td>{{ $payment->id }}</td>
                    <td>{{ $payment->date->format('d M Y') }}</td>
                    <td class="text-success fw-bold">Rs. {{ number_format($payment->amount, 2) }}</td>
                    <td>{{ $payment->notes ?: '-' }}</td>
                </tr>
            @empty
                <tr><td colspan="4" class="text-center text-muted">No payments received yet</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection