@extends('layouts.main')

@section('title', 'Customers')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Customers</h2>
        <p class="text-gray-500 dark:text-gray-400">Manage your customer database</p>
    </div>
    <a href="{{ route('customers.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
        <i class="fas fa-plus mr-2"></i> Add Customer
    </a>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4 flex items-center">
        <i class="fas fa-check-circle mr-2"></i>
        {{ session('success') }}
    </div>
@endif

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                <th class="px-6 py-4 font-semibold">Name</th>
                <th class="px-6 py-4 font-semibold">Email</th>
                <th class="px-6 py-4 font-semibold">Phone</th>
                <th class="px-6 py-4 font-semibold">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @forelse($customers as $customer)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="h-10 w-10 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mr-3">
                            <span class="text-indigo-600 dark:text-indigo-400 font-semibold">{{ strtoupper(substr($customer->name, 0, 1)) }}</span>
                        </div>
                        <span class="font-medium text-gray-800 dark:text-white">{{ $customer->name }}</span>
                    </div>
                </td>
                <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ $customer->email ?? '-' }}</td>
                <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ $customer->phone ?? '-' }}</td>
                <td class="px-6 py-4">
                    <a href="{{ route('customers.edit', $customer) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <form action="{{ route('customers.destroy', $customer) }}" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300" onclick="return confirm('Are you sure?')">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-8 text-center">
                    <i class="fas fa-users text-gray-300 dark:text-gray-600 text-4xl mb-3"></i>
                    <p class="text-gray-500 dark:text-gray-400">No customers found</p>
                    <a href="{{ route('customers.create') }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 text-sm">Add your first customer</a>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection