@extends('layouts.app')
@section('title', $client->name)

@section('content')
@php
    $balance = $client->balance();
    $limit = (float) $client->credit_limit;
    $usePct = $limit > 0 ? min(100, round(max(0, $balance) / $limit * 100)) : 0;
@endphp
<div class="card mb-3">
    <div class="card-body d-flex flex-wrap align-items-center gap-3">
        <x-avatar :name="$client->name" lg />
        <div class="flex-grow-1 min-w-0">
            <h1 class="h4 mb-1">{{ $client->name }}</h1>
            <div class="text-muted small d-flex flex-wrap gap-x-3 gap-2">
                @if ($client->location())<span><i class="bi bi-geo-alt me-1"></i>{{ $client->location() }}</span>@endif
                @if ($client->phone)<span><i class="bi bi-telephone me-1"></i>{{ $client->phone }}</span>@endif
                @if ($client->email)<span><i class="bi bi-envelope me-1"></i>{{ $client->email }}</span>@endif
                <span class="badge-soft badge-soft-{{ $client->is_active ? 'success' : 'secondary' }}">{{ $client->is_active ? 'Active' : 'Inactive' }}</span>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            @can('orders.create')
            <a href="{{ route('orders.create', ['client_id' => $client->id]) }}" class="btn btn-primary"><i class="bi bi-bag-plus" aria-hidden="true"></i> New order</a>
            @endcan
            @can('payments.create')
            <a href="{{ route('payments.create', ['direction' => 'received', 'client_id' => $client->id]) }}" class="btn btn-outline-success"><i class="bi bi-cash-coin" aria-hidden="true"></i> Receive payment</a>
            @endcan
            @can('clients.edit')
            <a href="{{ route('clients.edit', $client) }}" class="btn btn-ghost"><i class="bi bi-pencil" aria-hidden="true"></i> Edit</a>
            @endcan
            @can('clients.delete')
            <x-delete-button :action="route('clients.destroy', $client)" label="" :title="'Delete '.$client->name.'?'" confirm="Clients with orders or payments can't be deleted — mark them inactive instead." />
            @endcan
        </div>
    </div>
</div>

<div class="row g-3 mb-3 stagger">
    <div class="col-sm-4"><div class="card card-body"><div class="d-flex align-items-center gap-3"><span class="icon-chip"><i class="bi bi-receipt"></i></span><div><div class="stat-label">Total billed</div><div class="stat-value">{{ money($client->billed()) }}</div></div></div></div></div>
    <div class="col-sm-4"><div class="card card-body"><div class="d-flex align-items-center gap-3"><span class="icon-chip chip-success"><i class="bi bi-cash-coin"></i></span><div><div class="stat-label">Received</div><div class="stat-value text-success">{{ money($client->received()) }}</div></div></div></div></div>
    <div class="col-sm-4"><div class="card card-body">
        <div class="d-flex align-items-center gap-3"><span class="icon-chip {{ $balance > 0.004 ? 'chip-danger' : 'chip-success' }}"><i class="bi bi-hourglass-split"></i></span>
            <div><div class="stat-label">Balance due</div><div class="stat-value {{ $balance > 0.004 ? 'text-danger' : 'text-success' }}">{{ money($balance) }}</div></div></div>
        @if ($limit > 0)
            <div class="mt-2"><div class="mini-progress {{ $usePct >= 100 ? 'is-unpaid' : ($usePct >= 80 ? 'is-partial' : '') }}" role="progressbar" aria-valuenow="{{ $usePct }}" aria-valuemin="0" aria-valuemax="100" aria-label="Credit used"><span style="width: {{ $usePct }}%"></span></div>
                <div class="small text-muted mt-1">{{ $usePct }}% of {{ money($limit) }} credit limit</div></div>
        @endif
    </div></div>
</div>

<ul class="nav nav-tabs-line" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" role="tab" type="button">Overview</button></li>
    @can('orders.view')
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-orders" role="tab" type="button">Orders <span class="count">{{ $orders->count() }}</span></button></li>
    @endcan
    @can('payments.view')
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-payments" role="tab" type="button">Payments <span class="count">{{ $payments->count() }}</span></button></li>
    @endcan
    @can('payments.view')
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-statement" role="tab" type="button">Statement</button></li>
    @endcan
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
        <div class="row g-3">
            <div class="col-lg-5">
                <div class="card h-100"><div class="card-header"><span class="card-title">Details</span></div><div class="card-body">
                    <dl class="dl-grid">
                        <dt>Contact</dt><dd>{{ $client->contact_person ?: '—' }}</dd>
                        <dt>Tax ID</dt><dd>{{ $client->tax_number ?: '—' }}</dd>
                        <dt>Billing</dt><dd>{!! nl2br(e($client->billing_address ?: '—')) !!}</dd>
                        <dt>Shipping</dt><dd>{!! nl2br(e($client->shipping_address ?: '—')) !!}</dd>
                        @if ($client->notes)<dt>Notes</dt><dd>{!! nl2br(e($client->notes)) !!}</dd>@endif
                    </dl>
                </div></div>
            </div>
            @can('orders.view')
            <div class="col-lg-7">
                <div class="card h-100"><div class="card-header"><span class="card-title">Recent orders</span><a href="#tab-orders" class="small" data-bs-toggle="tab" data-bs-target="#tab-orders">View all</a></div>
                    <ul class="list-rows">
                        @forelse ($orders->take(5) as $o)
                            <li>
                                <div class="grow"><a href="{{ route('orders.show', $o) }}" class="title text-decoration-none">{{ $o->order_no }}</a><span class="sub">{{ $o->order_date->format('d M Y') }}</span></div>
                                <x-order-status :order="$o" />
                                <div class="num fw-semibold" style="min-width:90px">{{ money($o->total) }}</div>
                            </li>
                        @empty
                            <li class="justify-content-center text-muted py-4">No orders yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>
            @endcan
        </div>
    </div>

    @can('orders.view')
    <div class="tab-pane fade" id="tab-orders" role="tabpanel">
        <div class="card"><div class="table-wrap"><table class="table table-modern table-cards align-middle">
            <thead><tr><th>Order</th><th>Date</th><th>Delivery</th><th>Status</th><th class="num">Total</th><th>Payment</th><th class="num">Due</th></tr></thead>
            <tbody>
            @forelse ($orders as $o)
                <tr>
                    <td class="cell-title" data-label="Order"><a href="{{ route('orders.show', $o) }}" class="cell-main text-decoration-none">{{ $o->order_no }}</a></td>
                    <td data-label="Date">{{ $o->order_date->format('d M Y') }}</td>
                    <td data-label="Delivery">{{ $o->delivery_date?->format('d M Y') ?? '—' }}</td>
                    <td data-label="Status"><x-order-status :order="$o" /></td>
                    <td class="num" data-label="Total">{{ money($o->total) }}</td>
                    <td data-label="Payment"><x-pay-status :total="$o->total" :paid="$o->paid()" :cancelled="$o->isCancelled()" /></td>
                    <td class="num fw-semibold" data-label="Due">{{ $o->isCancelled() ? '—' : money($o->due()) }}</td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="7"><x-empty icon="bag-check" title="No orders yet" text="Orders for this client will show up here."><a href="{{ route('orders.create', ['client_id' => $client->id]) }}" class="btn btn-primary btn-sm">New order</a></x-empty></td></tr>
            @endforelse
            </tbody>
        </table></div></div>
    </div>

    @endcan
    @can('payments.view')
    <div class="tab-pane fade" id="tab-payments" role="tabpanel">
        <div class="card"><div class="table-wrap"><table class="table table-modern table-cards align-middle">
            <thead><tr><th>Date</th><th>Against</th><th>Method</th><th>Reference</th><th class="num">Amount</th></tr></thead>
            <tbody>
            @forelse ($payments as $p)
                <tr>
                    <td class="cell-title" data-label="Date"><a href="{{ route('payments.edit', $p) }}" class="cell-main text-decoration-none">{{ $p->paid_on->format('d M Y') }}</a></td>
                    <td data-label="Against">@if ($p->order)<a href="{{ route('orders.show', $p->order) }}">{{ $p->order->order_no }}</a>@else<span class="text-muted">On account</span>@endif</td>
                    <td data-label="Method">{{ \App\Models\Payment::METHODS[$p->method] ?? $p->method }}</td>
                    <td data-label="Reference">{{ $p->reference ?: '—' }}</td>
                    <td class="num fw-semibold money-in" data-label="Amount">+{{ money($p->amount) }}</td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="5"><x-empty icon="cash-coin" title="No payments yet" text="Payments received from this client will show up here."><a href="{{ route('payments.create', ['direction' => 'received', 'client_id' => $client->id]) }}" class="btn btn-success btn-sm">Receive payment</a></x-empty></td></tr>
            @endforelse
            </tbody>
        </table></div></div>
    </div>

    @endcan
    @can('payments.view')
    <div class="tab-pane fade" id="tab-statement" role="tabpanel">
        <div class="card">
            <div class="card-header"><span class="card-title">Account statement</span><span class="card-sub">From the general ledger · every line is a journal entry</span></div>
            <div class="table-wrap"><table class="table table-modern table-cards table-sm align-middle mb-0">
            <thead><tr><th>Date</th><th>Entry</th><th>Reference</th><th>Description</th><th class="num">Billed</th><th class="num">Received</th><th class="num">Balance</th></tr></thead>
            <tbody>
            @forelse ($statement as $r)
                <tr>
                    <td class="cell-title" data-label="Date">{{ $r['date']->format('d M Y') }}</td>
                    <td data-label="Entry"><a href="{{ $r['entry_url'] }}" class="tabular">{{ $r['entry'] }}</a></td>
                    <td data-label="Reference"><a href="{{ $r['url'] }}">{{ $r['ref'] }}</a></td>
                    <td data-label="Description"><span class="cell-clip" style="max-width:300px">{{ $r['desc'] }}</span></td>
                    <td class="num" data-label="Billed">{{ $r['debit'] ? money($r['debit']) : '' }}</td>
                    <td class="num money-in" data-label="Received">{{ $r['credit'] ? money($r['credit']) : '' }}</td>
                    <td class="num fw-semibold" data-label="Balance">{{ money($r['balance']) }}</td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="7"><x-empty icon="journal-text" title="No transactions yet" /></td></tr>
            @endforelse
            </tbody>
            @if ($statement->isNotEmpty())<tfoot><tr><td colspan="6">Balance due</td><td class="num">{{ money($statement->last()['balance']) }}</td></tr></tfoot>@endif
        </table></div></div>
    </div>
    @endcan
</div>
@endsection