@extends('layouts.admin')

@section('title', 'Customers')
@section('subtitle', 'Manage and track customer profile records')

@section('content')
<div x-data="{ showInvoicesModal: false, modalCustomerName: '', modalInvoices: [] }">
    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-xl flex items-center justify-between">
            <div class="flex items-center gap-2">
                <span>✅</span>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
            <button type="button" class="text-green-500 hover:text-green-700 font-bold" onclick="this.parentElement.remove()">×</button>
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200">
        {{-- Search and Actions --}}
        <div class="p-6 border-b border-slate-200 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <form action="{{ route('admin.customers.index') }}" method="GET" class="flex-1 flex gap-2">
                <input type="text" name="search" value="{{ $search }}" placeholder="Search by name, phone or company..."
                    class="flex-1 px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
                <button type="submit"
                    class="px-6 py-2 bg-slate-800 text-white rounded-xl font-medium hover:bg-slate-700 transition">
                    Search
                </button>
            </form>
            <div>
                <a href="{{ route('admin.customers.create') }}"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition shadow-sm">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Add Customer
                </a>
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
                        <th class="px-6 py-4 font-medium">Customer Name</th>
                        <th class="px-6 py-4 font-medium">Phone</th>
                        <th class="px-6 py-4 font-medium">Shop / Company</th>
                        <th class="px-6 py-4 font-medium">Address</th>
                        <th class="px-6 py-4 font-medium text-center">Sales Count</th>
                        <th class="px-6 py-4 font-medium text-right">Total Spent</th>
                        <th class="px-6 py-4 font-medium text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    @forelse($customers as $customer)
                        <tr class="border-b border-slate-100 hover:bg-slate-50">
                            <td class="px-6 py-4 font-medium text-slate-800">{{ $customer->name }}</td>
                            <td class="px-6 py-4 text-slate-600">{{ $customer->phone ?? '-' }}</td>
                            <td class="px-6 py-4 text-slate-700 font-semibold">{{ $customer->company ?? '-' }}</td>
                            <td class="px-6 py-4 text-slate-500">{{ Str::limit($customer->address, 50) ?? '-' }}</td>
                            <td class="px-6 py-4 text-center">
                                @if($customer->invoices_count > 0)
                                    <button type="button" 
                                        @click="modalCustomerName = '{{ addslashes($customer->name) }}'; modalInvoices = {{ json_encode($customer->invoices->map(function($inv) { return [ 'invoice_number' => $inv->invoice_number, 'date' => $inv->created_at->format('Y-m-d H:i'), 'total' => number_format($inv->total, 2), 'status' => ucfirst($inv->status), 'url' => route('admin.invoices.show', $inv->id) ]; })) }}; showInvoicesModal = true;"
                                        class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-xs font-bold transition">
                                        {{ $customer->invoices_count }} Bills
                                    </button>
                                @else
                                    <span class="text-slate-400 font-bold">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-right font-bold text-green-600">LKR {{ number_format($customer->total_spent, 2) }}</td>
                            <td class="px-6 py-4 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('admin.customers.edit', $customer->id) }}"
                                        class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Edit">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                                        </svg>
                                    </a>
                                    <form action="{{ route('admin.customers.destroy', $customer->id) }}" method="POST"
                                        onsubmit="return confirm('Are you sure you want to delete this customer record?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="Delete">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-slate-400">
                                <p class="text-4xl mb-2">👥</p>
                                <p>No customers found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($customers->hasPages())
            <div class="p-6 border-t border-slate-200">
                {{ $customers->links() }}
            </div>
        @endif
    </div>

    {{-- Invoice History Modal --}}
    <div x-show="showInvoicesModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/55" x-transition>
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl p-6 m-4" @click.outside="showInvoicesModal = false">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4 mb-4">
                <h3 class="text-lg font-bold text-slate-800">
                    🧾 Bill History: <span class="text-blue-600" x-text="modalCustomerName"></span>
                </h3>
                <button @click="showInvoicesModal = false" class="text-slate-400 hover:text-slate-600 text-2xl font-semibold leading-none">&times;</button>
            </div>
            
            <div class="overflow-x-auto max-h-[350px]">
                <table class="w-full text-left text-sm">
                    <thead>
                        <tr class="border-b border-slate-200 text-slate-500 font-medium">
                            <th class="pb-2">Invoice Number</th>
                            <th class="pb-2">Date</th>
                            <th class="pb-2 text-right">Total Amount</th>
                            <th class="pb-2 text-center">Status</th>
                            <th class="pb-2 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="inv in modalInvoices" :key="inv.invoice_number">
                            <tr class="border-b border-slate-100 hover:bg-slate-50">
                                <td class="py-2.5 font-mono text-slate-800 font-bold" x-text="inv.invoice_number"></td>
                                <td class="py-2.5 text-slate-600 text-xs" x-text="inv.date"></td>
                                <td class="py-2.5 text-right font-bold text-slate-900" x-text="'LKR ' + inv.total"></td>
                                <td class="py-2.5 text-center">
                                    <span class="inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold"
                                        :class="inv.status === 'Completed' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'"
                                        x-text="inv.status"></span>
                                </td>
                                <td class="py-2.5 text-center">
                                    <a :href="inv.url" class="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 font-medium" target="_blank">
                                        <span>View</span>
                                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                    </a>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            
            <div class="flex justify-end pt-4 border-t border-slate-100 mt-4">
                <button @click="showInvoicesModal = false" class="px-5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition font-medium text-xs">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection