@extends('layouts.admin')

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

@section('content')
<div class="max-w-7xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-foreground">
                Customer Profile
            </h1>
            <p class="text-muted-foreground mt-1">
                Manage details, shipments, and rewards for this customer.
            </p>
        </div>

        <div class="flex items-center gap-3">
            <a href="{{ route('admin.customers.index') }}" class="px-4 py-2 rounded-xl border bg-muted hover:bg-muted/70 transition">
                Back to List
            </a>

            <a href="" class="px-4 py-2 rounded-xl bg-primary text-white shadow hover:shadow-md transition">
                + Add Shipment
            </a>
        </div>
    </div>

    <!-- Profile Card -->
    <div class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 md:p-8 shadow-lg">
        <div class="flex flex-col md:flex-row gap-8 items-start">

            <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center text-green-700 text-4xl font-bold shadow-lg">
    {{ strtoupper(substr($customer->name, 0, 1)) }}
</div>


            <div class="flex-1 space-y-4 w-full">

                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div>
                        <h2 class="text-2xl  font-bold">{{ $customer->name }}</h2>
                        <p class="text-muted-foreground">Customer ID: {{ $customer->id }}</p>
                    </div>

                    <div class="flex gap-2">
                        <span class="px-3 py-1 rounded-lg bg-primary/10 text-primary text-sm font-medium">
                            {{ ucfirst($customer->customer_type) }} Member
                        </span>
                        <span class="px-3 py-1 rounded-lg {{ $customer->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }} text-sm font-medium">
                            {{ $customer->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 pt-4 border-t">
                    <div>
                        <p class="text-xs text-muted-foreground uppercase">Phone</p>
                        <p class="font-medium">{{ $customer->phone }}</p>
                    </div>

                    <div>
                        <p class="text-xs text-muted-foreground uppercase">Email</p>
                        <p class="font-medium truncate">{{ $customer->email }}</p>
                    </div>

                    <div>
                        <p class="text-xs text-muted-foreground uppercase">Total Shipments</p>
                        <p class="font-bold text-primary">{{ $customer->shipments->count() }}</p>
                    </div>

                    <div>
                        <p class="text-xs text-muted-foreground uppercase">Reward Points</p>
                        <p class="font-bold">{{ number_format($customer->points ?? 0) }}</p>
                    </div>

                    <div>
                        <p class="text-xs text-muted-foreground uppercase">Renewal Date</p>
                        <p>{{ $customer->renewal_date ? $customer->renewal_date->format('M d, Y') : '-' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div x-data="{ tab: 'overview' }" class="space-y-6">
        <div class="flex gap-2 p-1 bg-muted rounded-2xl border w-fit">
            @foreach(['overview','shipments','invoices','rewards','activity'] as $t)
            <button @click="tab='{{ $t }}'" :class="tab==='{{ $t }}' ? 'bg-primary text-white shadow px-4 py-2 rounded-xl' : 'px-4 py-2 rounded-xl hover:bg-muted/70 capitalize'">
                {{ $t }}
            </button>
            @endforeach
        </div>

        <!-- Overview -->
        <div x-show="tab === 'overview'" x-transition class="grid md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 shadow-lg">
                <h3 class="text-lg font-semibold">Contact Information</h3>
                <div class="mt-3 space-y-2 text-sm">
                    <p><strong>Name:</strong> {{ $customer->name }}</p>
                    <p><strong>Phone:</strong> {{ $customer->phone }}</p>
                    <p><strong>Email:</strong> {{ $customer->email }}</p>
                    <p><strong>Address:</strong> {{ $customer->address ?? '-' }}</p>
                </div>
            </div>

            <div class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 shadow-lg">
                <h3 class="text-lg font-semibold">Points Summary</h3>
                <p class="text-4xl font-black text-primary mt-3">{{ number_format($customer->points ?? 0) }} pts</p>
                <p class="text-muted-foreground">Lifetime Earned: {{ number_format($customer->lifetime_points ?? 0) }}</p>
            </div>
        </div>

        <!-- Shipments -->
        <div x-show="tab === 'shipments'" x-transition class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 shadow-lg">
            <h3 class="text-lg font-semibold mb-4">Shipments</h3>

            <!-- Desktop Table -->
            <div class="overflow-x-auto hidden md:block">
                <table class="w-full border-collapse">
                    <thead class="bg-muted/60">
                        <tr class="text-left text-sm text-muted-foreground">
                            <th class="p-3">Tracking</th>
                            <th class="p-3">Weight</th>
                            <th class="p-3">Price</th>
                            <th class="p-3">Status</th>
                            <th class="p-3">Date</th>
                            <th class="p-3"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        @forelse($shipments as $shipment)
                        <tr class="hover:bg-muted/40 transition">
                            <td class="p-3 font-semibold">{{ $shipment->tracking_number }}</td>
                            <td class="p-3">{{ $shipment->weight }} kg</td>
                            <td class="p-3">₦{{ number_format($shipment->price, 2) }}</td>
                            <td class="p-3">
                                @php
                                    $statusColors = [
                                        'Delivered' => 'bg-green-100 text-green-700',
                                        'In Transit' => 'bg-blue-100 text-blue-700',
                                        'Pending' => 'bg-amber-100 text-amber-700',
                                        'Cancelled' => 'bg-red-100 text-red-700',
                                    ];
                                @endphp
                                <span class="px-2 py-1 rounded text-xs {{ $statusColors[$shipment->status] ?? 'bg-gray-200' }}">
                                    {{ $shipment->status }}
                                </span>
                            </td>
                            <td class="p-3">{{ $shipment->created_at->format('Y-m-d') }}</td>
                            <td class="p-3">
                                <a href="{{ route('admin.shipments.show', $shipment->id) }}" class="px-3 py-1 rounded border hover:bg-muted transition">
                                    View
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center p-6 text-muted-foreground">No shipments found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="grid gap-3 mt-4 md:hidden">
                @forelse($shipments as $shipment)
                <div class="rounded-2xl border bg-card shadow-sm p-4">
                    <div class="flex justify-between">
                        <p class="font-semibold">{{ $shipment->tracking_number }}</p>
                        <span class="px-2 py-1 rounded text-xs {{ $statusColors[$shipment->status] ?? 'bg-gray-200' }}">
                            {{ $shipment->status }}
                        </span>
                    </div>
                    <p class="text-sm text-muted-foreground mt-1">{{ $shipment->weight }} kg • ₦{{ number_format($shipment->price, 2) }}</p>
                    <div class="flex justify-between text-xs mt-3">
                        <span>{{ $shipment->created_at->format('Y-m-d') }}</span>
                        <a href="{{ route('admin.shipments.show', $shipment->id) }}" class="px-3 py-1 rounded-xl border hover:bg-muted">View</a>
                    </div>
                </div>
                @empty
                <p class="text-center text-muted-foreground">No shipments found.</p>
                @endforelse
            </div>

            @if($shipments->hasPages())
            <div class="p-4 border-t">
                {{ $shipments->links('pagination::tailwind') }}
            </div>
            @endif
        </div>
        <!-- Invoices -->
<div x-show="tab === 'invoices'" x-transition class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 shadow-lg">
    <h3 class="text-lg font-semibold mb-4">Invoices</h3>

    <!-- Desktop Table -->
    <div class="overflow-x-auto hidden md:block">
        <table class="w-full border-collapse">
            <thead class="bg-muted/60">
                <tr class="text-left text-sm text-muted-foreground">
                    <th class="p-3">Invoice #</th>
                    <th class="p-3">Amount</th>
                    <th class="p-3">Status</th>
                    <th class="p-3">Date</th>
                    <th class="p-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($invoices as $invoice)
                @php
                    $invoiceColors = [
                        'Paid' => 'bg-green-100 text-green-700',
                        'Pending' => 'bg-amber-100 text-amber-700',
                        'Overdue' => 'bg-red-100 text-red-700',
                    ];
                @endphp
                <tr class="hover:bg-muted/40 transition">
                    <td class="p-3 font-semibold">{{ $invoice->invoice_number }}</td>
                    <td class="p-3">₦{{ number_format($invoice->amount, 2) }}</td>
                    <td class="p-3">
                        <span class="px-2 py-1 rounded text-xs {{ $invoiceColors[$invoice->status] ?? 'bg-gray-200' }}">
                            {{ $invoice->status }}
                        </span>
                    </td>
                    <td class="p-3">{{ $invoice->created_at->format('Y-m-d') }}</td>
                    <td class="p-3">
                        <a href="{{ route('admin.invoices.show', $invoice->id) }}" class="px-3 py-1 rounded border hover:bg-muted transition">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center p-6 text-muted-foreground">No invoices found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Mobile Cards -->
    <div class="grid gap-3 mt-4 md:hidden">
        @forelse($invoices as $invoice)
        <div class="rounded-2xl border bg-card shadow-sm p-4">
            @php
                $invoiceColors = [
                    'Paid' => 'bg-green-100 text-green-700',
                    'Pending' => 'bg-amber-100 text-amber-700',
                    'Overdue' => 'bg-red-100 text-red-700',
                ];
            @endphp
            <div class="flex justify-between">
                <p class="font-semibold">{{ $invoice->invoice_number }}</p>
                <span class="px-2 py-1 rounded text-xs {{ $invoiceColors[$invoice->status] ?? 'bg-gray-200' }}">
                    {{ $invoice->status }}
                </span>
            </div>
            <p class="text-sm text-muted-foreground mt-1">₦{{ number_format($invoice->amount, 2) }}</p>
            <div class="flex justify-between text-xs mt-3">
                <span>{{ $invoice->created_at->format('Y-m-d') }}</span>
                <a href="{{ route('admin.invoices.show', $invoice->id) }}" class="px-3 py-1 rounded-xl border hover:bg-muted">View</a>
            </div>
        </div>
        @empty
        <p class="text-center text-muted-foreground">No invoices found.</p>
        @endforelse
    </div>

    @if($invoices->hasPages())
    <div class="p-4 border-t">
        {{ $invoices->links('pagination::tailwind') }}
    </div>
    @endif
</div>

<!-- Rewards -->
<div x-show="tab === 'rewards'" x-transition class="bg-gradient-to-r from-white/70 to-white/40 backdrop-blur-md rounded-2xl border p-6 shadow-lg">
    <h3 class="text-lg font-semibold mb-4">Reward Points History</h3>

    <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
        @forelse($rewards as $reward)
        <div class="rounded-2xl border bg-card shadow-sm p-4">
            <div class="flex justify-between">
                <p class="font-semibold">{{ $reward->type }}</p>
                <span class="text-sm text-muted-foreground">{{ $reward->created_at->format('Y-m-d') }}</span>
            </div>
            <p class="text-lg font-bold text-primary mt-2">{{ $reward->points }} pts</p>
            <p class="text-sm text-muted-foreground">{{ $reward->description ?? '-' }}</p>
        </div>
        @empty
        <p class="text-center text-muted-foreground">No reward points history found.</p>
        @endforelse
    </div>

    @if($rewards->hasPages())
    <div class="p-4 border-t">
        {{ $rewards->links('pagination::tailwind') }}
    </div>
    @endif
</div>

    </div>
</div>
@endsection