@extends('layouts.app')
@section('title', 'Clients')

@section('content')
@php
    $pills = filter_pills([
        'status' => ['Status', ['active' => 'Active', 'inactive' => 'Inactive']],
        'city' => ['City'],
        'country' => ['Country', fn ($c) => \App\Support\Countries::name($c)],
        'balance' => ['Balance', ['owing' => 'Owes money']],
    ]);
    $chips = [[null, 'All', $counts['all']], ['active', 'Active', $counts['active']], ['inactive', 'Inactive', $counts['inactive']]];
    $filtered = count($pills) > 0 || request()->filled('q');
@endphp
<x-page-header title="Clients" subtitle="Customers who buy carpets from you">
    @can('data.export')
    <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-ghost"><i class="bi bi-download" aria-hidden="true"></i> Export</a>
    @endcan
    @can('clients.create')
    <a href="{{ route('clients.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i> Add client</a>
    @endcan
</x-page-header>

<div class="chip-row mb-3">
    @foreach ($chips as [$key, $label, $n])
        <a class="chip {{ request('status') == $key && ! request('balance') ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['status' => $key, 'balance' => null, 'page' => null]) }}">{{ $label }} <span class="n">{{ $n }}</span></a>
    @endforeach
    <a class="chip {{ request('balance') === 'owing' ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['status' => null, 'balance' => 'owing', 'page' => null]) }}"><i class="bi bi-hourglass-split" aria-hidden="true"></i> Owes money <span class="n">{{ $counts['owing'] }}</span></a>
</div>

<x-filter-bar placeholder="Search name, phone, contact, city, country…" :pills="$pills" :keep="['status', 'sort', 'dir', 'per_page']">
    <x-slot:panel>
        <div class="col-md-4">
            <label class="form-label" for="f-city">City</label>
            <select id="f-city" name="city" class="form-select">
                <option value="">All cities</option>
                @foreach ($cities as $c)<option value="{{ $c }}" @selected(request('city') === $c)>{{ $c }}</option>@endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label" for="f-country">Country</label>
            <select id="f-country" name="country" class="form-select" data-ts data-placeholder="Any country">
                <option value="">Any country</option>
                @foreach ($countries as $code => $countryName)<option value="{{ $code }}" @selected(request('country') === $code)>{{ $countryName }}</option>@endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label" for="f-balance">Balance</label>
            <select id="f-balance" name="balance" class="form-select">
                <option value="">Any</option>
                <option value="owing" @selected(request('balance') === 'owing')>Owes money</option>
            </select>
        </div>
    </x-slot:panel>
</x-filter-bar>

<div class="card">
    <div class="table-wrap">
        <table class="table table-modern table-cards align-middle">
            <thead><tr>
                <x-sort-th column="name" label="Client" :default="true" />
                <th scope="col">Contact</th>
                <x-sort-th column="city" label="Location" />
                <x-sort-th column="billed" label="Billed" num defaultDir="desc" />
                <x-sort-th column="received" label="Received" num defaultDir="desc" />
                <x-sort-th column="balance" label="Balance due" num defaultDir="desc" />
                <th scope="col"><span class="visually-hidden">Actions</span></th>
            </tr></thead>
            <tbody>
            @forelse ($clients as $c)
                <tr>
                    <td class="cell-title" data-label="Client">
                        <div class="d-flex align-items-center gap-3">
                            <x-avatar :name="$c->name" :size="36" />
                            <div class="min-w-0">
                                <a href="{{ route('clients.show', $c) }}" class="cell-main text-decoration-none">{{ $c->name }}</a>
                                @unless ($c->is_active)<span class="badge-soft badge-soft-secondary no-dot ms-1">Inactive</span>@endunless
                                @if ($c->email)<span class="cell-sub">{{ $c->email }}</span>@endif
                            </div>
                        </div>
                    </td>
                    <td data-label="Contact">{{ $c->contact_person ?: '—' }}<span class="cell-sub">{{ $c->phone }}</span></td>
                    <td data-label="Location">{{ $c->city ?: ($c->countryName() ?: '—') }}@if ($c->city && $c->countryName())<span class="cell-sub">{{ $c->countryName() }}</span>@endif</td>
                    <td class="num" data-label="Billed">{{ money($c->billed()) }}</td>
                    <td class="num" data-label="Received">{{ money($c->received()) }}</td>
                    <td class="num fw-semibold {{ $c->balance() > 0.004 ? 'text-danger' : 'text-success' }}" data-label="Balance due">
                        {{ money($c->balance()) }}
                        @if ($c->credit_limit > 0 && $c->balance() > $c->credit_limit)<span class="cell-sub text-danger">over credit limit</span>@endif
                    </td>
                    <td class="actions-col">
                        <x-row-actions :label="'Actions for '.$c->name">
                            <li><a class="dropdown-item" href="{{ route('clients.show', $c) }}"><i class="bi bi-eye"></i>View</a></li>
                            @can('clients.edit')
                            <li><a class="dropdown-item" href="{{ route('clients.edit', $c) }}"><i class="bi bi-pencil"></i>Edit</a></li>
                            @endcan
                            @can('orders.create')
                            <li><a class="dropdown-item" href="{{ route('orders.create', ['client_id' => $c->id]) }}"><i class="bi bi-bag-plus"></i>New order</a></li>
                            @endcan
                            @can('payments.create')
                            <li><a class="dropdown-item" href="{{ route('payments.create', ['direction' => 'received', 'client_id' => $c->id]) }}"><i class="bi bi-cash-coin"></i>Receive payment</a></li>
                            @endcan
                            @can('clients.delete')
                            <li><hr class="dropdown-divider"></li>
                            <li><x-delete-button item :action="route('clients.destroy', $c)" :title="'Delete '.$c->name.'?'" confirm="Clients with orders or payments can't be deleted — mark them inactive instead." /></li>
                            @endcan
                        </x-row-actions>
                    </td>
                </tr>
            @empty
                <tr class="empty-row"><td colspan="7">
                    <x-empty icon="people" title="No clients yet" text="Add the businesses and people you sell carpets to." :filtered="$filtered">
                        @can('clients.create')
                        <a href="{{ route('clients.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Add your first client</a>
                        @endcan
                    </x-empty>
                </td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <x-table-foot :paginator="$clients" />
</div>
@endsection