@extends('layouts.app')

@section('title', 'Customers')
@section('page', 'Customers')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-2">
        <div class="h-10 w-1 bg-brand-500 rounded-full"></div>
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Customers</h1>
            <p class="text-gray-500 text-sm">Manage your customers</p>
        </div>
    </div>
    <div class="flex gap-2">
        @can('create_customers')
        <button onclick="document.getElementById('importModal').classList.remove('hidden')" class="bg-brand-600 text-white px-4 py-2.5 rounded-lg hover:bg-brand-700 flex items-center gap-2 text-sm font-medium shadow-sm">
            <i class="fas fa-file-import"></i> Import
        </button>
        <a href="{{ route('customers.create') }}" class="bg-gray-900 text-white px-4 py-2.5 rounded-lg hover:bg-gray-800 flex items-center gap-2 text-sm font-medium shadow-sm">
            <i class="fas fa-plus"></i> Add Customer
        </a>
        @endcan
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Phone</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Branch</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Purchases</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                    @canany(['edit_customers', 'delete_customers'])
                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                    @endcanany
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($customers as $customer)
                    <tr class="hover:bg-brand-50/30 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="h-8 w-8 rounded-full bg-brand-100 flex items-center justify-center text-brand-700 text-sm font-semibold">
                                    {{ strtoupper(substr($customer->name, 0, 1)) }}
                                </div>
                                <a href="{{ route('customers.show', $customer) }}" class="text-sm font-medium text-gray-900 hover:text-brand-600 transition-colors">{{ $customer->name }}</a>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $customer->phone ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $customer->email ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $customer->branch?->name ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-right">
                            <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-700 rounded-full">{{ $customer->sales_count }}</span>
                        </td>
                        <td class="px-6 py-4 text-center">
                            @if($customer->is_active)
                                <span class="px-2 py-0.5 text-xs font-medium bg-emerald-100 text-emerald-700 rounded-full">Active</span>
                            @else
                                <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 rounded-full">Inactive</span>
                            @endif
                        </td>
                        @canany(['edit_customers', 'delete_customers'])
                        <td class="px-6 py-4 text-right text-sm font-medium">
                            @can('edit_customers')
                            <a href="{{ route('customers.edit', $customer) }}" class="text-brand-600 hover:text-brand-800 mr-2 p-1 hover:bg-brand-100 rounded transition-colors"><i class="fas fa-edit"></i></a>
                            @endcan
                            @can('delete_customers')
                            <form action="{{ route('customers.destroy', $customer) }}" method="POST" class="inline" onsubmit="return confirm('Delete this customer?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 p-1 hover:bg-red-100 rounded transition-colors"><i class="fas fa-trash"></i></button>
                            </form>
                            @endcan
                        </td>
                        @endcanany
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-6 py-12 text-center">
                        <i class="fas fa-users text-gray-300 text-4xl mb-3"></i>
                        <p class="text-gray-500">No customers found</p>
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4 border-t border-gray-200 bg-gray-50">
        {{ $customers->links() }}
    </div>
</div>

{{-- Import Modal --}}
<div id="importModal" class="hidden fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden">
        <div class="flex items-center justify-between p-5 border-b border-gray-200 bg-gradient-to-r from-brand-500 to-brand-600">
            <h3 class="text-lg font-semibold text-white flex items-center gap-2">
                <i class="fas fa-file-import"></i> Import Customers
            </h3>
            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="text-white/80 hover:text-white transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>

        <div class="p-6">
            <div class="mb-4">
                <a href="{{ route('customers.template') }}" class="flex items-center gap-3 p-4 border-2 border-dashed border-brand-300 rounded-xl hover:bg-brand-50 transition-colors group cursor-pointer">
                    <div class="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center group-hover:bg-brand-200 transition-colors">
                        <i class="fas fa-download text-brand-600"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-brand-700">Download CSV Template</p>
                        <p class="text-xs text-brand-500">Pre-formatted sample file with examples</p>
                    </div>
                    <i class="fas fa-chevron-right text-brand-400 ml-auto text-sm"></i>
                </a>
            </div>

            <div class="bg-brand-50 border border-brand-200 rounded-lg p-4 mb-6">
                <div class="flex gap-3">
                    <i class="fas fa-info-circle text-brand-500 mt-0.5"></i>
                    <div>
                        <p class="text-sm font-medium text-brand-900">CSV Format Required</p>
                        <p class="text-xs text-brand-700 mt-1">Header row must include: <code class="bg-brand-100 px-1.5 py-0.5 rounded text-brand-800">name</code>, <code class="bg-brand-100 px-1.5 py-0.5 rounded text-brand-800">phone</code>, <code class="bg-brand-100 px-1.5 py-0.5 rounded text-brand-800">email</code>, <code class="bg-brand-100 px-1.5 py-0.5 rounded text-brand-800">address</code></p>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('customers.import') }}" enctype="multipart/form-data" id="importForm">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Upload CSV File</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-10 text-center hover:border-brand-400 transition-colors cursor-pointer bg-gray-50 hover:bg-brand-50/30" onclick="document.getElementById('importFile').click()">
                        <div class="w-12 h-12 bg-brand-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-cloud-upload-alt text-xl text-brand-600"></i>
                        </div>
                        <p class="text-sm text-gray-600 font-medium">Click to browse or drag & drop</p>
                        <p class="text-xs text-gray-400 mt-1">CSV files only, max 2MB</p>
                        <input type="file" name="file" id="importFile" accept=".csv" class="hidden" required>
                    </div>
                    <p id="fileName" class="text-sm text-gray-700 mt-3 hidden">
                        <i class="fas fa-file-csv text-brand-500 mr-1"></i>
                        <span id="fileNameText" class="font-medium"></span>
                    </p>
                </div>
            </form>
        </div>

        <div class="flex justify-end gap-3 p-5 border-t border-gray-200 bg-gray-50">
            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors font-medium">
                Cancel
            </button>
            <button type="submit" form="importForm" class="px-5 py-2 text-sm bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium shadow-sm">
                <i class="fas fa-upload mr-1"></i> Import
            </button>
        </div>
    </div>
</div>

<script>
document.getElementById('importFile').addEventListener('change', function() {
    const fileName = this.files[0]?.name;
    if (fileName) {
        document.getElementById('fileName').classList.remove('hidden');
        document.getElementById('fileNameText').textContent = fileName;
    }
});
</script>
@endsection