@extends('layouts.admin')

@section('title', 'Customer Profile — ' . $customer->name)

@section('content')
<div style="margin-bottom: 24px;">
    <a href="{{ route('admin.customers.index') }}" style="color: var(--text-muted); text-decoration: none; font-size: 13px;">← Back to Customer Directory</a>
    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 16px;">
        <div style="display: flex; align-items: center; gap: 16px;">
            <div style="width: 56px; height: 56px; border-radius: 50%; background: #186297; color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; text-transform: uppercase;">
                {{ substr($customer->name, 0, 1) }}
            </div>
            <div>
                <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a; display: flex; align-items: center; gap: 10px;">
                    <span>{{ $customer->name }}</span>
                    <span class="badge badge-active" style="font-size: 11px;">Active Customer</span>
                </h1>
                <div style="color: var(--text-muted); font-size: 13px; margin-top: 2px;">
                    Member since {{ $customer->created_at ? $customer->created_at->format('M d, Y') : 'Recent' }} &middot; Customer ID: #CUST-{{ $customer->id }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Customer Stats Row -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px;">
    <div class="admin-card" style="padding: 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Lifetime Value (Total Spent)</div>
        <div style="font-size: 26px; font-weight: 700; color: #186297; margin-top: 4px;">₹{{ number_format($totalSpent, 2) }}</div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">Cumulative purchases</div>
    </div>

    <div class="admin-card" style="padding: 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Total Orders Placed</div>
        <div style="font-size: 26px; font-weight: 700; color: #0f172a; margin-top: 4px;">{{ $ordersCount }} orders</div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">All-time order count</div>
    </div>

    <div class="admin-card" style="padding: 20px;">
        <div style="font-size: 12px; color: var(--text-muted); font-weight: 500;">Average Order Value (AOV)</div>
        <div style="font-size: 26px; font-weight: 700; color: #0f172a; margin-top: 4px;">₹{{ number_format($avgOrderValue, 2) }}</div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">Spend per order average</div>
    </div>
</div>

<!-- Customer Info & Address Grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">

    <div class="admin-card">
        <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Contact & Account Details</h3>
        
        <div style="display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: #334155;">
            <div>
                <span style="font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block;">Full Name</span>
                <strong style="color: #0f172a;">{{ $customer->name }}</strong>
            </div>

            <div>
                <span style="font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block;">Email Address</span>
                <a href="mailto:{{ $customer->email }}" style="color: #186297; text-decoration: none; font-weight: 500;">{{ $customer->email }}</a>
            </div>

            <div>
                <span style="font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block;">Mobile Phone</span>
                <strong style="color: #0f172a;">{{ $customer->phone ?: 'Not provided' }}</strong>
            </div>

            <div>
                <span style="font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block;">Registration Date</span>
                <span>{{ $customer->created_at ? $customer->created_at->format('F d, Y h:i A') : 'N/A' }}</span>
            </div>
        </div>
    </div>

    <div class="admin-card">
        <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Primary Shipping Address</h3>
        
        @if($recentAddress)
            <div style="font-size: 14px; line-height: 1.6; color: #334155; background: #f8faf9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
                <strong style="color: #0f172a; font-size: 15px;">{{ $recentAddress->customer_name }}</strong><br>
                {{ $recentAddress->shipping_address }}<br>
                {{ $recentAddress->city }}, {{ $recentAddress->state }} — <strong>{{ $recentAddress->pincode }}</strong><br>
                Phone: {{ $recentAddress->customer_phone }}
            </div>
        @else
            <div style="color: var(--text-muted); font-size: 13px; padding: 20px; background: #f8faf9; border-radius: 8px; text-align: center;">
                No saved shipping addresses found yet. Address will automatically populate upon first order checkout.
            </div>
        @endif
    </div>

</div>

<!-- Customer Order History Table -->
<div class="admin-card">
    <h3 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Order History</h3>
    
    @if($customer->orders->isEmpty())
        <div style="padding: 30px; text-align: center; color: var(--text-muted);">
            This customer has not placed any orders yet.
        </div>
    @else
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Order Date</th>
                        <th>Items Count</th>
                        <th>Total Amount</th>
                        <th>Payment Status</th>
                        <th>Order Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customer->orders as $ord)
                        <tr>
                            <td>
                                <a href="{{ route('admin.orders.show', $ord) }}" style="color: #186297; font-weight: 700; text-decoration: none;">
                                    #{{ $ord->order_number }}
                                </a>
                            </td>
                            <td>{{ $ord->created_at ? $ord->created_at->format('M d, Y H:i') : '—' }}</td>
                            <td>{{ $ord->items->sum('quantity') }} items</td>
                            <td><strong style="color: #0f172a;">₹{{ number_format($ord->total_amount, 2) }}</strong></td>
                            <td>
                                <span class="badge" style="background: #f1f5f9; color: #334155;">{{ strtoupper($ord->payment_method) }}</span>
                                <span style="font-size: 11px; color: {{ $ord->payment_status === 'paid' ? '#15803d' : '#b45309' }}; font-weight: 600; margin-left: 4px;">
                                    {{ ucfirst($ord->payment_status) }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ $ord->order_status }}">{{ ucfirst($ord->order_status) }}</span>
                            </td>
                            <td>
                                <div style="display: flex; gap: 6px;">
                                    <a href="{{ route('admin.orders.show', $ord) }}" class="btn-admin btn-secondary" style="padding: 5px 10px; font-size: 12px;">
                                        <i data-lucide="eye" style="width: 14px;"></i> Details
                                    </a>
                                    <a href="{{ route('admin.orders.invoice', $ord) }}" target="_blank" class="btn-admin btn-secondary" style="padding: 5px 10px; font-size: 12px; background: #e0eff9; color: #186297; border-color: #b9dff3;" title="Download Tax Invoice">
                                        <i data-lucide="file-text" style="width: 14px;"></i> Invoice
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection
