@extends('layouts.app')

@section('title', 'Customer: ' . $posCustomer->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <a href="{{ route('pos-customers.index') }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 flex items-center gap-1 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back to POS Customers
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Customer Info Card -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Customer Details</h2>
                    <a href="{{ route('pos-customers.edit', $posCustomer) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 text-sm">Edit</a>
                </div>
                <div class="px-6 py-4">
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Name</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->name }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->phone }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->email ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Registered Location</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->registeredWarehouse->name ?? 'Unknown' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Address</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->address ?? '-' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Registered On</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->created_at->format('d M Y, H:i') }}</dd>
                        </div>
                        @if($posCustomer->notes)
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Notes</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $posCustomer->notes }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>

            <!-- Purchase History -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg mt-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Purchases</h2>
                </div>
                @if($posCustomer->sales->count() > 0)
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Receipt #</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Location</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Date</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($posCustomer->sales as $sale)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                    <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-white">{{ $sale->receipt_number }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $sale->warehouse->name ?? '-' }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $sale->created_at->format('d M Y, H:i') }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-900 dark:text-white text-right">RM {{ number_format($sale->total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                        No purchases yet
                    </div>
                @endif
            </div>
        </div>

        <!-- Stats & Actions Card -->
        <div class="space-y-6">
            <!-- Stats -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Statistics</h2>
                </div>
                <div class="px-6 py-4 space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Loyalty Points</span>
                        <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ number_format($posCustomer->loyalty_points) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Total Purchases</span>
                        <span class="text-lg font-semibold text-gray-900 dark:text-white">{{ number_format($posCustomer->total_purchases) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Total Spent</span>
                        <span class="text-lg font-semibold text-gray-900 dark:text-white">RM {{ number_format($posCustomer->total_spent, 2) }}</span>
                    </div>
                    @if($posCustomer->last_purchase_at)
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Last Purchase</span>
                        <span class="text-sm text-gray-900 dark:text-white">{{ $posCustomer->last_purchase_at->diffForHumans() }}</span>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Manage Points -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Manage Points</h2>
                </div>
                <div class="px-6 py-4 space-y-4">
                    <form method="POST" action="{{ route('pos-customers.add-points', $posCustomer) }}" class="flex gap-2">
                        @csrf
                        <input type="number" name="points" min="1" placeholder="Points" class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm">Add</button>
                    </form>
                    <form method="POST" action="{{ route('pos-customers.redeem-points', $posCustomer) }}" class="flex gap-2">
                        @csrf
                        <input type="number" name="points" min="1" max="{{ $posCustomer->loyalty_points }}" placeholder="Points" class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                        <button type="submit" class="px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 text-sm">Redeem</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection