@extends('layouts.app')

@section('title', 'Dashboard Pelanggan')

@section('content')
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Dashboard Pelanggan</h1>
            <p class="text-gray-600">Selamat datang kembali, {{ Auth::user()->name }}!</p>
        </div>

        @if(session('success'))
            <div class="mb-6 rounded-lg bg-green-50 border border-green-200 p-4 text-green-800">
                {{ session('success') }}
            </div>
        @endif

        <!-- Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-sm font-bold">📦</span>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total Pesanan</dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {{ \App\Models\Order::where('customer_email', Auth::user()->email)->count() }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-sm font-bold">💰</span>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total Belanja</dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    Rp {{ number_format(\App\Models\Order::where('customer_email', Auth::user()->email)->sum('total_price'), 0, ',', '.') }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-sm font-bold">⭐</span>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Status Terbaru</dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    @php
                                        $latestOrder = \App\Models\Order::where('customer_email', Auth::user()->email)->latest()->first();
                                        echo $latestOrder ? ucfirst($latestOrder->status) : 'Belum ada pesanan';
                                    @endphp
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Checkout Menu -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900">Checkout Produk</h2>
                            <p class="mt-2 text-sm text-gray-600">Mulai proses checkout dengan mengisi data pesanan Anda.</p>
                        </div>
                        <div class="flex-shrink-0 h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
                            <span class="text-green-700 text-lg">🛒</span>
                        </div>
                    </div>

                    <div class="mt-6">
                        <a href="{{ route('orders.create') }}" class="inline-flex items-center justify-center w-full px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            Mulai Checkout
                        </a>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900">Riwayat Checkout</h2>
                            <p class="mt-2 text-sm text-gray-600">Lihat pesanan yang telah Anda buat sebelumnya.</p>
                        </div>
                        <div class="flex-shrink-0 h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
                            <span class="text-blue-700 text-lg">📦</span>
                        </div>
                    </div>

                    <div class="mt-6">
                        <a href="{{ route('orders.index') }}" class="inline-flex items-center justify-center w-full px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                            Lihat Riwayat Pesanan
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Orders -->
        <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Pesanan Terbaru
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Riwayat pesanan Anda yang terakhir
                </p>
            </div>

            <ul class="divide-y divide-gray-200">
                @forelse(\App\Models\Order::with('product')->where('customer_email', Auth::user()->email)->latest()->take(5)->get() as $order)
                    <li>
                        <div class="px-4 py-4 sm:px-6">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <img class="h-10 w-10 rounded-full object-cover" src="{{ $order->product->image ? asset('storage/' . $order->product->image) : 'https://via.placeholder.com/40x40?text=No+Image' }}" alt="{{ $order->product->name }}">
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $order->product->name }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ $order->quantity }} pcs • Rp {{ number_format($order->total_price, 0, ',', '.') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if($order->status == 'pending') bg-yellow-100 text-yellow-800
                                        @elseif($order->status == 'processing') bg-blue-100 text-blue-800
                                        @elseif($order->status == 'shipped') bg-purple-100 text-purple-800
                                        @elseif($order->status == 'delivered') bg-green-100 text-green-800
                                        @else bg-red-100 text-red-800 @endif">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                    <span class="text-sm text-gray-500">
                                        {{ $order->created_at->format('d M Y') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                @empty
                    <li>
                        <div class="px-4 py-8 sm:px-6 text-center">
                            <p class="text-gray-500">Belum ada pesanan. <a href="{{ route('products.index') }}" class="text-green-600 hover:text-green-500">Mulai berbelanja sekarang!</a></p>
                        </div>
                    </li>
                @endforelse
            </ul>

            @if(\App\Models\Order::where('customer_email', Auth::user()->email)->count() > 5)
                <div class="bg-gray-50 px-4 py-3 sm:px-6">
                    <div class="text-center">
                        <a href="{{ route('orders.index') }}" class="text-sm font-medium text-green-600 hover:text-green-500">
                            Lihat semua pesanan →
                        </a>
                    </div>
                </div>
            @endif
        </div>

        <!-- Account Information -->
        <div class="mt-8 bg-white shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Informasi Akun
                </h3>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Nama Lengkap</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ Auth::user()->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Email</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ Auth::user()->email }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Telepon</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ Auth::user()->phone ?: 'Belum diisi' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Alamat</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ Auth::user()->address ?: 'Belum diisi' }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection