@extends('layouts.public')

@section('title', 'Invoice | Anywhere Phone Repair')

@section('content')
<div class="bg-zinc-50 py-16 flex-1">
    <div class="container mx-auto px-4 max-w-4xl">
        <div class="bg-white rounded-3xl border border-zinc-200 p-8 md:p-12 shadow-sm">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-zinc-100 pb-8 mb-8 gap-6">
                <div>
                    <h1 class="text-3xl font-black text-zinc-900">Invoice</h1>
                    <p class="text-zinc-500 font-medium mt-1">#INV-{{ $order->id }}-{{ \Carbon\Carbon::parse($order->created_at)->format('Y') }}</p>
                </div>
                <div class="text-left md:text-right">
                    <p class="font-bold text-zinc-900">Anywhere Phone Repair</p>
                    <p class="text-sm text-zinc-500">{{ $store->name ?? 'Headquarters' }}</p>
                    @if($store && $store->address)
                        <p class="text-sm text-zinc-500">{{ $store->address }}</p>
                    @endif
                </div>
            </div>
            
            <div class="flex flex-col md:flex-row justify-between gap-8 mb-12">
                <div>
                    <p class="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">Billed To</p>
                    <p class="font-bold text-zinc-900">{{ $customerName ?? 'Customer' }}</p>
                    @if($customerEmail)
                        <p class="text-sm text-zinc-500">{{ $customerEmail }}</p>
                    @endif
                    @if($customerPhone)
                        <p class="text-sm text-zinc-500">{{ $customerPhone }}</p>
                    @endif
                </div>
                <div class="text-left md:text-right">
                    <p class="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">Invoice Details</p>
                    <p class="text-sm text-zinc-500"><span class="font-medium text-zinc-900">Date:</span> {{ \Carbon\Carbon::parse($order->created_at)->format('M d, Y') }}</p>
                    <p class="text-sm text-zinc-500 mt-1"><span class="font-medium text-zinc-900">Order Ref:</span> {{ substr($order->tracking_code, 0, 8) }}</p>
                </div>
            </div>
            
            <div class="overflow-x-auto mb-8">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="border-b-2 border-zinc-200">
                            <th class="py-3 px-4 text-xs font-black text-zinc-500 uppercase tracking-wider">Description</th>
                            <th class="py-3 px-4 text-xs font-black text-zinc-500 uppercase tracking-wider text-right">Price</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100">
                        @php $subtotal = 0; @endphp
                        @if(isset($items) && count($items) > 0)
                            @foreach($items as $item)
                                @php 
                                    $subtotal += $item->price;
                                @endphp
                                <tr>
                                    <td class="py-4 px-4 font-medium text-zinc-900">{{ $item->service_name }}</td>
                                    <td class="py-4 px-4 text-zinc-600 text-right">${{ number_format($item->price, 2) }}</td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td class="py-4 px-4 font-medium text-zinc-900">Repair Service - {{ $order->device_description }}</td>
                                <td class="py-4 px-4 font-bold text-zinc-900 text-right">--</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            
            <div class="flex justify-end">
                <div class="w-full md:w-1/2 lg:w-1/3">
                    <div class="flex justify-between py-3 border-b border-zinc-100">
                        <span class="font-medium text-zinc-600">Subtotal</span>
                        <span class="font-bold text-zinc-900">${{ number_format($subtotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between py-4">
                        <span class="font-black text-lg text-zinc-900">Total</span>
                        <span class="font-black text-2xl text-primary">${{ number_format($subtotal, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection