@extends('layouts.app')
@section('title', $customer->customer_id . ' - ' . $customer->customer_name)
@section('content')
<div class="max-w-5xl mx-auto">
    <div class="mb-4">
        <a href="{{ route('customers.index') }}" class="inline-flex items-center text-sm text-gray-500 dark:text-dark-muted hover:text-gray-700 dark:hover:text-dark-text transition-colors">
            <svg class="w-4 h-4 mr-1" 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 Customers
        </a>
    </div>

    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border card-elevated overflow-hidden">
        <div class="px-6 lg:px-8 py-6 border-b border-gray-100 dark:border-dark-border flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-2xl gradient-primary flex items-center justify-center text-xl font-bold text-white shadow-lg shadow-primary-600/30">
                    {{ strtoupper(substr($customer->customer_name, 0, 2)) }}
                </div>
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-dark-text">{{ $customer->customer_id }} - {{ $customer->customer_name }}</h2>
                    <p class="text-sm text-gray-500 dark:text-dark-muted">{{ $customer->customer_id }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('customers.edit', $customer) }}" class="btn-ghost text-amber-600 hover:text-amber-700 hover:bg-amber-50 dark:hover:bg-dark-surface px-3 py-2">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    Edit
                </a>
                @if($customer->status)
                    <span class="badge badge-success">Active</span>
                @else
                    <span class="badge badge-danger">Inactive</span>
                @endif
            </div>
        </div>

        <div class="px-6 lg:px-8 py-6 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <h3 class="text-xs font-semibold text-gray-400 dark:text-dark-muted uppercase tracking-wider mb-4">Basic Info</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Customer ID</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5 font-mono">{{ $customer->customer_id }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Type</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text capitalize mt-0.5">
                            <span class="badge capitalize {{ $customer->customer_type === 'dealer' ? 'badge-purple' : ($customer->customer_type === 'shop' ? 'badge-info' : ($customer->customer_type === 'ecom' ? 'badge-success' : 'badge-primary')) }}">
                                {{ $customer->customer_type === 'dealer' ? 'Distributor' : ($customer->customer_type === 'shop' ? 'Shop' : ($customer->customer_type === 'ecom' ? 'Ecom' : ($customer->customer_type === 'customer' ? 'Customer' : ucfirst($customer->customer_type)))) }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Currency</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->currency }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Created</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->created_at->format('d M, Y h:i A') }}</dd>
                    </div>
                    @if($customer->creator)
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Created By</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->creator->name }}</dd>
                    </div>
                    @endif
                    @if($customer->updater && $customer->updater->id !== $customer->creator?->id)
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Last Updated By</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->updater->name }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            <div>
                <h3 class="text-xs font-semibold text-gray-400 dark:text-dark-muted uppercase tracking-wider mb-4">Tax Info</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Trade Name</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->trade_name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">GST Number</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->gst_number ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">PAN Number</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->pan_number ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Tax %</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->tax_percentage }}%</dd>
                    </div>
                </dl>
            </div>

            <div>
                <h3 class="text-xs font-semibold text-gray-400 dark:text-dark-muted uppercase tracking-wider mb-4">Contact</h3>
                <dl class="space-y-3">
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Email</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->email ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">WhatsApp Number</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->whatsapp_number ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400 dark:text-dark-muted">Alternate Number</dt>
                        <dd class="text-sm font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $customer->alternate_number ?? '—' }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <div class="border-t border-gray-100 dark:border-dark-border px-6 lg:px-8 py-6 grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <h3 class="text-xs font-semibold text-gray-400 dark:text-dark-muted uppercase tracking-wider mb-4">Billing Address</h3>
                @if($customer->billing_address || $customer->billing_district || $customer->billing_state || $customer->billing_pincode)
                    <div class="bg-gray-50 dark:bg-dark-surface rounded-xl p-4">
                        <p class="text-sm text-gray-900 dark:text-dark-text whitespace-pre-line">{{ $customer->billing_address }}</p>
                        <p class="text-sm text-gray-900 dark:text-dark-text mt-1">{{ $customer->billing_district }}{{ $customer->billing_district && $customer->billing_state ? ', ' : '' }}{{ $customer->billing_state }}</p>
                        <p class="text-sm text-gray-900 dark:text-dark-text">{{ $customer->billing_pincode }}{{ $customer->billing_pincode && $customer->billing_country ? ', ' : '' }}{{ $customer->billing_country }}</p>
                    </div>
                @else
                    <p class="text-sm text-gray-400 dark:text-dark-muted">—</p>
                @endif
            </div>
            <div>
                <h3 class="text-xs font-semibold text-gray-400 dark:text-dark-muted uppercase tracking-wider mb-4">Shipping Address</h3>
                @if($customer->shipping_same_as_billing)
                    <div class="bg-gray-50 dark:bg-dark-surface rounded-xl p-4">
                        <p class="text-sm text-gray-500 dark:text-dark-muted italic flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Same as Billing Address
                        </p>
                    </div>
                @elseif($customer->shipping_address || $customer->shipping_district || $customer->shipping_state || $customer->shipping_pincode)
                    <div class="bg-gray-50 dark:bg-dark-surface rounded-xl p-4">
                        <p class="text-sm text-gray-900 dark:text-dark-text whitespace-pre-line">{{ $customer->shipping_address }}</p>
                        <p class="text-sm text-gray-900 dark:text-dark-text mt-1">{{ $customer->shipping_district }}{{ $customer->shipping_district && $customer->shipping_state ? ', ' : '' }}{{ $customer->shipping_state }}</p>
                        <p class="text-sm text-gray-900 dark:text-dark-text">{{ $customer->shipping_pincode }}{{ $customer->shipping_pincode && $customer->shipping_country ? ', ' : '' }}{{ $customer->shipping_country }}</p>
                    </div>
                @else
                    <p class="text-sm text-gray-400 dark:text-dark-muted">—</p>
                @endif
            </div>
        </div>
    </div>

    @if($invoices->isNotEmpty())
        <div class="mt-8">
            <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text mb-4">Invoice History</h3>
            <div class="table-container dark:bg-dark-card dark:border-dark-border">
                <div class="overflow-x-auto scrollbar-thin">
                    <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
                        <thead>
                            <tr>
                                <th class="table-th dark:text-dark-muted">Invoice #</th>
                                <th class="table-th dark:text-dark-muted">Date</th>
                                <th class="table-th dark:text-dark-muted text-right">Amount</th>
                                <th class="table-th dark:text-dark-muted text-center">Status</th>
                                <th class="table-th dark:text-dark-muted text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                            @foreach($invoices as $invoice)
                            <tr class="table-row dark:hover:bg-dark-surface">
                                <td class="table-td font-medium text-primary-600 dark:text-dark-text">{{ $invoice->invoice_number }}</td>
                                <td class="table-td text-gray-500 dark:text-dark-muted">{{ $invoice->invoice_date->format('d M Y') }}</td>
                                <td class="table-td text-right font-semibold text-gray-900 dark:text-dark-text">₹{{ number_format($invoice->grand_total, 2) }}</td>
                                <td class="table-td text-center">
                                    @php
                                        $statusClasses = [
                                            'paid' => 'badge-success',
                                            'pending' => 'badge-warning',
                                            'overdue' => 'badge-danger',
                                            'cancelled' => 'badge-gray',
                                            'draft' => 'badge-info',
                                        ];
                                        $class = $statusClasses[$invoice->status] ?? 'badge-gray';
                                    @endphp
                                    <span class="badge capitalize {{ $class }}">{{ $invoice->status }}</span>
                                </td>
                                <td class="table-td text-right">
                                    <a href="{{ route('invoices.show', $invoice) }}" class="btn-ghost p-2">View</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="mt-4"><x-pagination :paginator="$invoices" /></div>
        </div>
    @else
        <div class="mt-8">
            <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-8 text-center card-elevated">
                <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No invoices yet</p>
                <p class="text-sm text-gray-500 dark:text-dark-muted mt-1">This customer has no invoice history.</p>
            </div>
        </div>
    @endif
</div>
@endsection