@extends('layouts.app')

@section('title', 'Customers')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 fw-bold mb-0">Customers</h2>
    <div class="d-flex gap-2">
        <a href="{{ route('customers.import.step1') }}" class="btn btn-outline-secondary d-flex align-items-center rounded-pill px-3">
            <i class="fas fa-file-import me-2"></i> Import
        </a>
        <a href="{{ route('customers.create') }}" class="btn btn-primary d-flex align-items-center rounded-pill px-3">
            <i class="fas fa-plus me-2"></i> New Customer
        </a>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 py-3 text-muted small uppercase fw-bold">Name</th>
                        <th class="py-3 text-muted small uppercase fw-bold">Company Name</th>
                        <th class="py-3 text-muted small uppercase fw-bold">Type</th>
                        <th class="py-3 text-muted small uppercase fw-bold">Email</th>
                        <th class="py-3 text-muted small uppercase fw-bold">Phone</th>
                        <th class="py-3 text-muted small uppercase fw-bold">Currency</th>
                        <th class="pe-4 py-3 text-end text-muted small uppercase fw-bold">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $customer)
                        <tr>
                            <td class="ps-4 py-3">
                                <a href="{{ route('customers.show', $customer) }}" class="text-decoration-none fw-bold text-primary">
                                    {{ $customer->display_name ?: $customer->name }}
                                </a>
                            </td>
                            <td class="py-3">
                                <span class="text-muted small">
                                    {{ $customer->company_name ?: '---' }}
                                </span>
                            </td>
                            <td class="py-3">
                                <span class="badge {{ $customer->customer_type == 'Business' ? 'bg-primary-subtle text-primary' : 'bg-info-subtle text-info' }} rounded-pill px-3">
                                    {{ $customer->customer_type }}
                                </span>
                            </td>
                            <td class="py-3 text-muted small">{{ $customer->email }}</td>
                            <td class="py-3 text-muted small">{{ $customer->phone ?: '---' }}</td>
                            <td class="py-3">
                                <span class="badge bg-light text-dark border rounded-pill px-3">{{ $customer->currency }}</span>
                            </td>
                            <td class="pe-4 py-3 text-end">
                                <div class="btn-group">
                                    <a href="{{ route('customers.edit', $customer) }}" class="btn btn-link btn-sm text-decoration-none text-muted" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('customers.destroy', $customer) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this customer?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-link btn-sm text-decoration-none text-danger" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <div class="mb-3"><i class="fas fa-users fa-3x opacity-25"></i></div>
                                No customers found. <a href="{{ route('customers.create') }}" class="fw-bold">Add your first customer</a>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="mt-4 d-flex justify-content-center">
    {{ $customers->appends(request()->query())->links() }}
</div>

<style>
    .uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
    .bg-primary-subtle { background-color: #e7f1ff; }
    .bg-info-subtle { background-color: #e0f7fa; }
</style>
@endsection