@extends('layouts.app')

@section('title', __('dashboard.invoice_details'))

@section('content')
<div class="container mx-auto px-4 py-12">
    <div class="mb-8">
        <div class="flex justify-between items-center">
            <h1 class="text-3xl font-bold text-white">{{ __('dashboard.invoice') }} #{{ $invoice->invoice_number }}</h1>
            <div class="flex space-x-3">
                <a href="{{ route('invoices.download', [app()->getLocale(), $invoice->id]) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
                    <i class="fas fa-download mr-2"></i> {{ __('dashboard.download_pdf') }}
                </a>
                <a href="{{ route('invoices', app()->getLocale()) }}" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg">
                    <i class="fas fa-arrow-left mr-2"></i> {{ __('dashboard.back_to_invoices') }}
                </a>
            </div>
        </div>
    </div>

    <div class="bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
        <!-- Invoice Header -->
        <div class="flex justify-between mb-8">
            <div>
                <img src="/img/logo.png" alt="JMHP.pro" class="h-12 mb-4">
                <p class="text-gray-300">JMHP.pro</p>
                <p class="text-gray-300">Trois-Rivières, Québec, Canada</p>
                <p class="text-gray-300">contact@jmhp.pro</p>
            </div>
            <div class="text-right">
                <h2 class="text-2xl font-bold text-white mb-2">{{ __('dashboard.invoice') }}</h2>
                <p class="text-gray-300">{{ __('dashboard.invoice_number') }}: <span class="text-white">{{ $invoice->invoice_number }}</span></p>
                <p class="text-gray-300">{{ __('dashboard.date') }}: <span class="text-white">{{ $invoice->created_at->format('Y-m-d') }}</span></p>
                <p class="text-gray-300">{{ __('dashboard.due_date') }}: <span class="text-white">{{ $invoice->due_date->format('Y-m-d') }}</span></p>
                <p class="text-gray-300 mt-2">
                    {{ __('dashboard.status') }}: 
                    @if($invoice->status == 'paid')
                        <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.paid') }}</span>
                    @elseif($invoice->status == 'pending')
                        <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.pending') }}</span>
                    @else
                        <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.failed') }}</span>
                    @endif
                </p>
            </div>
        </div>

        <!-- Bill To -->
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-white mb-2">{{ __('dashboard.bill_to') }}</h3>
            <p class="text-gray-300">{{ $invoice->user->name }}</p>
            @if($invoice->user->company_name)
                <p class="text-gray-300">{{ $invoice->user->company_name }}</p>
            @endif
            @if($invoice->user->address)
                <p class="text-gray-300">{{ $invoice->user->address }}</p>
            @endif
            <p class="text-gray-300">{{ $invoice->user->email }}</p>
        </div>

        <!-- Invoice Items -->
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-white mb-4">{{ __('dashboard.invoice_items') }}</h3>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-gray-400 border-b border-gray-700">
                            <th class="pb-3">{{ __('dashboard.description') }}</th>
                            <th class="pb-3">{{ __('dashboard.quantity') }}</th>
                            <th class="pb-3">{{ __('dashboard.unit_price') }}</th>
                            <th class="pb-3 text-right">{{ __('dashboard.amount') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoice->items as $item)
                            <tr class="border-b border-gray-700">
                                <td class="py-4 text-white">{{ $item->description }}</td>
                                <td class="py-4 text-white">{{ $item->quantity }}</td>
                                <td class="py-4 text-white">${{ number_format($item->unit_price, 2) }}</td>
                                <td class="py-4 text-white text-right">${{ number_format($item->amount, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Invoice Summary -->
        <div class="flex justify-end">
            <div class="w-full md:w-1/3">
                <div class="flex justify-between py-2">
                    <span class="text-gray-300">{{ __('dashboard.subtotal') }}</span>
                    <span class="text-white">${{ number_format($invoice->subtotal, 2) }}</span>
                </div>
                @if($invoice->tax_amount > 0)
                    <div class="flex justify-between py-2">
                        <span class="text-gray-300">{{ __('dashboard.tax') }} ({{ $invoice->tax_rate }}%)</span>
                        <span class="text-white">${{ number_format($invoice->tax_amount, 2) }}</span>
                    </div>
                @endif
                <div class="flex justify-between py-2 border-t border-gray-700 font-bold">
                    <span class="text-gray-300">{{ __('dashboard.total') }}</span>
                    <span class="text-white">${{ number_format($invoice->amount, 2) }}</span>
                </div>
            </div>
        </div>

        <!-- Payment Information -->
        @if($invoice->status == 'paid')
            <div class="mt-8 p-4 bg-gray-700 rounded-lg">
                <h3 class="text-lg font-semibold text-white mb-2">{{ __('dashboard.payment_information') }}</h3>
                <p class="text-gray-300">{{ __('dashboard.payment_date') }}: <span class="text-white">{{ $invoice->paid_at->format('Y-m-d') }}</span></p>
                <p class="text-gray-300">{{ __('dashboard.payment_method') }}: <span class="text-white">{{ $invoice->payment_method }}</span></p>
                <p class="text-gray-300">{{ __('dashboard.transaction_id') }}: <span class="text-white">{{ $invoice->transaction_id }}</span></p>
            </div>
        @elseif($invoice->status == 'pending')
            <div class="mt-8 p-4 bg-yellow-900 bg-opacity-30 rounded-lg">
                <h3 class="text-lg font-semibold text-white mb-2">{{ __('dashboard.payment_pending') }}</h3>
                <p class="text-gray-300">{{ __('dashboard.payment_instructions') }}</p>
                <div class="mt-4">
                    <a href="{{ route('invoices.pay', [app()->getLocale(), $invoice->id]) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
                        {{ __('dashboard.pay_now') }}
                    </a>
                </div>
            </div>
        @endif

        <!-- Notes -->
        @if($invoice->notes)
            <div class="mt-8">
                <h3 class="text-lg font-semibold text-white mb-2">{{ __('dashboard.notes') }}</h3>
                <p class="text-gray-300">{{ $invoice->notes }}</p>
            </div>
        @endif
    </div>
</div>
@endsection