@extends('layouts.app')

@section('content')
<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="flex items-center space-x-2">
            <a href="{{ route('business.invoices.index', $currentBusiness->id) }}" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Invoice {{ $invoice->invoice_number }}</h1>
            @php
                $statusColors = [
                    'draft' => 'bg-gray-100 text-gray-700',
                    'sent' => 'bg-blue-100 text-blue-700',
                    'paid' => 'bg-green-100 text-green-700',
                    'overdue' => 'bg-red-100 text-red-700',
                    'cancelled' => 'bg-yellow-100 text-yellow-700',
                ];
            @endphp
            <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $statusColors[$invoice->status] ?? 'bg-gray-100 text-gray-700' }}">
                {{ ucfirst($invoice->status) }}
            </span>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-2">
            <button onclick="window.print()" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                Print / PDF
            </button>
            @if($invoice->status === 'draft' && auth()->user()->hasPermission($currentBusiness->id, 'can_edit_invoices'))
            <form method="POST" action="{{ route('business.invoices.send', [$currentBusiness->id, $invoice->id]) }}">
                @csrf
                <button type="submit" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Mark as Sent</button>
            </form>
            @endif
        </div>
    </div>

    <!-- Invoice Document -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 print:shadow-none print:border-none">
        <!-- Invoice Header -->
        <div class="flex justify-between items-start mb-8">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">INVOICE</h2>
                <p class="text-sm text-gray-500 mt-1">{{ $invoice->invoice_number }}</p>
            </div>
            <div class="text-right">
                <h3 class="font-semibold text-gray-900">{{ $currentBusiness->name }}</h3>
                @if($currentBusiness->address)
                    <p class="text-sm text-gray-500 mt-1">{{ $currentBusiness->address }}</p>
                @endif
                @if($currentBusiness->company_email)
                    <p class="text-sm text-gray-500">{{ $currentBusiness->company_email }}</p>
                @endif
                @if($currentBusiness->phone)
                    <p class="text-sm text-gray-500">{{ $currentBusiness->phone }}</p>
                @endif
            </div>
        </div>

        <!-- Dates & Client -->
        <div class="grid grid-cols-2 gap-8 mb-8">
            <div>
                <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">Bill To</h4>
                <p class="font-medium text-gray-900">{{ $invoice->client_name }}</p>
                @if($invoice->client_email)
                    <p class="text-sm text-gray-500">{{ $invoice->client_email }}</p>
                @endif
                @if($invoice->client_address)
                    <p class="text-sm text-gray-500 mt-1">{{ $invoice->client_address }}</p>
                @endif
            </div>
            <div class="text-right">
                <div class="space-y-1">
                    <p class="text-sm"><span class="text-gray-500">Issue Date:</span> <span class="font-medium text-gray-900">{{ $invoice->issue_date->format('d M Y') }}</span></p>
                    <p class="text-sm"><span class="text-gray-500">Due Date:</span> <span class="font-medium text-gray-900">{{ $invoice->due_date->format('d M Y') }}</span></p>
                </div>
            </div>
        </div>

        <!-- Line Items -->
        <table class="min-w-full mb-8">
            <thead>
                <tr class="border-b border-gray-200">
                    <th class="py-3 text-left text-xs font-semibold text-gray-500 uppercase">Description</th>
                    <th class="py-3 text-right text-xs font-semibold text-gray-500 uppercase">Qty</th>
                    <th class="py-3 text-right text-xs font-semibold text-gray-500 uppercase">Unit Price</th>
                    <th class="py-3 text-right text-xs font-semibold text-gray-500 uppercase">Total</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($invoice->items as $item)
                <tr>
                    <td class="py-3 text-sm text-gray-900">{{ $item->description }}</td>
                    <td class="py-3 text-sm text-gray-700 text-right">{{ $item->quantity }}</td>
                    <td class="py-3 text-sm text-gray-700 text-right">{{ $currentBusiness->currency_symbol }}{{ number_format($item->unit_price, 2) }}</td>
                    <td class="py-3 text-sm font-medium text-gray-900 text-right">{{ $currentBusiness->currency_symbol }}{{ number_format($item->quantity * $item->unit_price, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totals -->
        <div class="flex justify-end">
            <div class="w-64 space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">Subtotal</span>
                    <span class="text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($invoice->subtotal, 2) }}</span>
                </div>
                @if($invoice->tax_amount > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">Tax</span>
                    <span class="text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($invoice->tax_amount, 2) }}</span>
                </div>
                @endif
                @if($invoice->discount > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">Discount</span>
                    <span class="text-red-600">-{{ $currentBusiness->currency_symbol }}{{ number_format($invoice->discount, 2) }}</span>
                </div>
                @endif
                <div class="border-t border-gray-200 pt-2 flex justify-between">
                    <span class="font-semibold text-gray-900">Total</span>
                    <span class="font-bold text-lg text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($invoice->total, 2) }}</span>
                </div>
            </div>
        </div>

        <!-- Notes -->
        @if($invoice->notes)
        <div class="mt-8 pt-6 border-t border-gray-200">
            <h4 class="text-xs font-semibold text-gray-400 uppercase mb-2">Notes</h4>
            <p class="text-sm text-gray-600">{{ $invoice->notes }}</p>
        </div>
        @endif
    </div>
</div>
@endsection