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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="mb-0 fw-bold"><i class="bi bi-people text-primary me-2"></i>Customers</h4>
        <p class="text-muted mb-0 small">{{ $customers->total() }} total customers</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('customers.export') }}" class="btn btn-outline-success btn-sm"><i class="bi bi-download me-1"></i>Export</a>
        <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Customer</a>
    </div>
</div>

{{-- Filters --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Name, code, mobile, VAT..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="customer_type" class="form-select form-select-sm">
                    <option value="">All Types</option>
                    <option value="business" {{ request('customer_type') == 'business' ? 'selected' : '' }}>Business</option>
                    <option value="retail"   {{ request('customer_type') == 'retail'   ? 'selected' : '' }}>Retail</option>
                    <option value="cash"     {{ request('customer_type') == 'cash'     ? 'selected' : '' }}>Cash</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="text" name="city" class="form-control form-control-sm" placeholder="City..." value="{{ request('city') }}">
            </div>
            <div class="col-md-2">
                <select name="credit_customer" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="1" {{ request('credit_customer') == '1' ? 'selected' : '' }}>Credit Customers</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary btn-sm w-100" type="submit"><i class="bi bi-search me-1"></i>Search</button>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-dense mb-0">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Mobile</th>
                        <th>City</th>
                        <th>VAT No.</th>
                        <th class="text-end">Credit Limit</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $customer)
                    <tr>
                        <td class="font-monospace small fw-semibold">{{ $customer->customer_code }}</td>
                        <td>
                            <a href="{{ route('customers.show', $customer) }}" class="fw-semibold text-decoration-none text-accent">{{ $customer->name_en }}</a>
                            <div class="text-muted small" dir="rtl">{{ $customer->name_ar }}</div>
                        </td>
                        <td>
                            <span class="badge bg-{{ $customer->customer_type == 'business' ? 'primary' : ($customer->customer_type == 'cash' ? 'secondary' : 'info') }}-subtle text-{{ $customer->customer_type == 'business' ? 'primary' : ($customer->customer_type == 'cash' ? 'secondary' : 'info') }}">
                                {{ ucfirst($customer->customer_type) }}
                            </span>
                        </td>
                        <td class="small">{{ $customer->mobile ?? $customer->phone ?? '—' }}</td>
                        <td class="small">{{ $customer->city_en ?? '—' }}</td>
                        <td class="small font-monospace">{{ $customer->vat_number ?? '—' }}</td>
                        <td class="text-end small">
                            @if($customer->credit_allowed)
                                <span class="text-success fw-semibold">{{ number_format($customer->credit_limit, 0) }} SAR</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge {{ $customer->status == 'active' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">{{ ucfirst($customer->status) }}</span>
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('customers.show', $customer) }}" class="btn btn-xs btn-outline-secondary" title="View account"><i class="bi bi-eye"></i></a>
                                <a href="{{ route('customers.edit', $customer) }}" class="btn btn-xs btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                                <a href="{{ route('customers.statement', $customer) }}" class="btn btn-xs btn-outline-info" title="Statement"><i class="bi bi-journal-text"></i></a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-people display-6 d-block mb-2"></i>
                            No customers found. <a href="{{ route('customers.create') }}">Create one</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($customers->hasPages())
    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center">
        <small class="text-muted">{{ $customers->firstItem() }}–{{ $customers->lastItem() }} of {{ $customers->total() }}</small>
        {{ $customers->links() }}
    </div>
    @endif
</div>

<style>.btn-xs{padding:.15rem .45rem;font-size:.75rem;}</style>
@endsection