{{-- resources/views/invoice/show.blade.php --}}
@extends('layouts.app')

@section('title', 'Invoice #' . $order->id)

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Invoice Container -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-3xl font-bold flex items-center">
                            <span class="mr-2">🧾</span> INVOICE
                        </h1>
                        <p class="text-blue-100 mt-1">Dokumentasi Pemesanan Pelanggan</p>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold">Invoice #{{ $order->id }}</div>
                        <div class="text-blue-100">{{ now()->format('F j, Y') }}</div>
                    </div>
                </div>
            </div>

            <!-- Body -->
            <div class="p-8">
                <!-- Invoice Information Grid -->
                <div class="grid md:grid-cols-2 gap-8 mb-8">
                    <!-- Order Details -->
                    <div class="bg-gray-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <span class="mr-2">📋</span> Detail Pesanan
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Order ID:</span>
                                <span class="font-semibold">#{{ $order->id }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Order Date:</span>
                                <span class="font-semibold">{{ $order->order_date->format('F j, Y') }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-600">Status:</span>
                                <span class="px-3 py-1 rounded-full text-sm font-medium
                                    @if($order->status == 'completed') bg-green-100 text-green-800
                                    @elseif($order->status == 'pending') bg-yellow-100 text-yellow-800
                                    @elseif($order->status == 'processing') bg-blue-100 text-blue-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-600">Status Pembayaran:</span>
                                <span class="px-3 py-1 rounded-full text-sm font-medium
                                    @if($order->payment_status == 'paid') bg-green-100 text-green-800
                                    @elseif($order->payment_status == 'pending') bg-yellow-100 text-yellow-800
                                    @else bg-red-100 text-red-800
                                    @endif">
                                    {{ ucfirst($order->payment_status) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Customer Information -->
                    <div class="bg-gray-50 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <span class="mr-2">👤</span> Informasi Pelanggan
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Nama:</span>
                                <span class="font-semibold">{{ $order->user->name }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Email:</span>
                                <span class="font-semibold">{{ $order->user->email }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Items Table -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Item Pesanan</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <span class="mr-2">🍽️</span> Pesanan
                                    </th>
                                    <th class="px-6 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Jumlah
                                    </th>
                                    <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Harga
                                    </th>
                                    <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Total
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach($order->items as $menu)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4">
                                        <div class="font-medium text-gray-900">{{ $menu->item->name }}</div>
                                        @if($menu->item->description)
                                        <div class="text-sm text-gray-500 mt-1">{{ $menu->item->description }}</div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
                                            {{ $menu->quantity }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-right font-medium text-gray-900">
                                        Rp {{ number_format($menu->item->price, 0, ',', '.') }}
                                    </td>
                                    <td class="px-6 py-4 text-right font-bold text-gray-900">
                                        Rp {{ number_format($menu->item->price * $menu->quantity, 0, ',', '.') }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Total Section -->
                <div class="bg-gray-50 rounded-lg p-6 mb-8">
                    <div class="max-w-sm ml-auto space-y-3">
                        <div class="flex justify-between text-gray-600">
                            <span>Subtotal:</span>
                            <span class="font-semibold">Rp {{ number_format($subtotal, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600">
                            <span>Pajak (10%):</span>
                            <span class="font-semibold">Rp {{ number_format($tax, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600">
                            <span>Tip Layanan:</span>
                            <span class="font-semibold">Rp {{ number_format($serviceFee, 0, ',', '.') }}</span>
                        </div>
                        <div class="border-t pt-3">
                            <div class="flex justify-between text-lg font-bold text-gray-900">
                                <span>Total Harga:</span>
                                <span class="text-blue-600">Rp {{ number_format($grandTotal, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-8">
                    <h3 class="text-lg font-semibold text-green-900 mb-2 flex items-center">
                        <span class="mr-2">Pembayaran Di bawah</span> 
                    </h3>
                    <p class="text-green-700">1226774415 (BNI) 💳</p>
                </div>

                @if($order->description)
                <!-- Alamat -->
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 mb-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-2 flex items-center">
                        <span class="mr-2">📝</span> Alamat Pemesanan
                    </h3>
                    <p class="text-gray-700">{{ $order->description }}</p>
                </div>
                @endif

                <!-- Thank You Message -->
                <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-8">
                    <h3 class="text-lg font-semibold text-green-900 mb-2 flex items-center">
                        <span class="mr-2">🙏</span> Terima Kasih Telah Belanja Di Toko Ini!
                    </h3>
                    <p class="text-green-700">Kami Harap Anda Menikmati Hidangan Yang Kami Siapkan!</p>
                </div>

                <!-- Footer Actions -->
                <div class="flex flex-wrap gap-4 justify-center pt-6 border-t">
                    <button onclick="window.print()" 
                            class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm">
                        <span class="mr-2">🖨️</span> Print Invoice
                    </button>
                    
                    <form action="{{ route('invoice.email', $order->id) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" 
                                class="inline-flex items-center px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm">
                            <span class="mr-2">📧</span> Email Invoice
                        </button>
                    </form>
                    
                    
                    <a href="{{ route('home') }}" 
                       class="inline-flex items-center px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm">
                        <span class="mr-2">🏠</span> Back to Home
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    @media print {
        .bg-gradient-to-r { background: #2563eb !important; }
        .shadow-lg, .shadow-sm { box-shadow: none !important; }
        .hover\:bg-gray-50:hover { background-color: transparent !important; }
        .transition-colors { transition: none !important; }
        .print\:hidden { display: none !important; }
    }
</style>
@endsection