@extends('layouts.dashboard')

@section('title', 'Customers')

@section('content')
    <div class="flex items-center justify-between mb-6 flex-wrap gap-2">
        <h1 class="font-display text-3xl">Customers</h1>
        @if (auth()->user()?->isOwner() || auth()->user()?->isSuperAdmin())
            <a href="{{ route('dashboard.customer-imports.create') }}" class="btn btn-outline !min-h-8 !py-1 text-sm">Import customers</a>
        @endif
    </div>

    <form method="GET" action="{{ route('dashboard.customers.index') }}" class="mb-4 max-w-sm">
        <input type="search" name="q" value="{{ $search }}" placeholder="Search name, company or email" class="input">
    </form>

    <div class="card p-4 overflow-x-auto">
        <table class="dashboard-table w-full">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Company</th>
                    <th>Type</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($customers as $customer)
                    <tr>
                        <td>{{ $customer->first_name }} {{ $customer->last_name }}</td>
                        <td>{{ $customer->company }}</td>
                        <td class="capitalize">{{ $customer->type->value }}</td>
                        <td>{{ $customer->email }}</td>
                        <td>{{ $customer->mobile }}</td>
                        <td class="text-right"><a href="{{ route('dashboard.customers.show', $customer) }}" class="underline">View</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection