@extends('layouts.app')

@section('title', 'Invoice ' . $invoice->invoice_number)

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Invoice {{ $invoice->invoice_number }}</h1>
                <p class="text-gray-600">Created on {{ $invoice->created_at->format('M d, Y') }}</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('invoices.preview', $invoice) }}" target="_blank"
                    class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center">
                    <i class="fas fa-eye mr-2"></i> Preview
                </a>
                <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                    class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 flex items-center">
                    <i class="fas fa-file-pdf mr-2"></i> PDF
                </a>
                <a href="{{ route('invoices.edit', $invoice) }}"
                    class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center">
                    <i class="fas fa-edit mr-2"></i> Edit
                </a>
                <a href="{{ route('invoices.index') }}"
                    class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
            <!-- Invoice Header -->
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">{{ $invoice->company->name }}</h2>
                        <p class="text-gray-600 whitespace-pre-line">{{ $invoice->company->address }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-lg font-semibold">Invoice #: {{ $invoice->invoice_number }}</p>
                        <p class="text-gray-600">Date: {{ $invoice->invoice_date->format('M d, Y') }}</p>
                        <span
                            class="mt-2 inline-flex px-3 py-1 rounded-full text-sm font-semibold
                        {{ $invoice->status === 'paid'
                            ? 'bg-green-100 text-green-800'
                            : ($invoice->status === 'sent'
                                ? 'bg-blue-100 text-blue-800'
                                : ($invoice->status === 'overdue'
                                    ? 'bg-red-100 text-red-800'
                                    : 'bg-gray-100 text-gray-800')) }}">
                            {{ ucfirst($invoice->status) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Client and Payment Info -->
            <div class="p-6 border-b border-gray-200 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-3">Invoice To:</h3>
                    <p class="font-semibold">{{ $invoice->client->contact_person_name }}</p>
                    <p class="font-semibold">{{ $invoice->client->company_name }}</p>
                    <p class="text-gray-600 whitespace-pre-line">{{ $invoice->client->company_address }}</p>
                    @if ($invoice->client->email)
                        <p class="mt-2"><i class="fas fa-envelope mr-2"></i>{{ $invoice->client->email }}</p>
                    @endif
                    @if ($invoice->client->phone)
                        <p><i class="fas fa-phone mr-2"></i>{{ $invoice->client->phone }}</p>
                    @endif
                </div>
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-3">Payment Information:</h3>
                    <p><strong>Beneficiary Name:</strong> {{ $invoice->company->bank_account_name }}</p>
                    <p><strong>Account No:</strong> {{ $invoice->company->bank_account_number }}</p>
                    <p><strong>Bank:</strong> {{ $invoice->company->bank_name }}</p>
                </div>
            </div>

            <!-- Line Items -->
            <div class="p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Line Items</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Item</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Description</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Price</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    UOM</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Qty</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Total</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($invoice->lineItems as $item)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->item_number }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $item->item_name }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">{{ $item->description }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        ${{ number_format($item->price_per_unit, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->uom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->quantity }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">
                                        ${{ number_format($item->total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <td colspan="6" class="px-6 py-4 text-sm font-medium text-gray-900 text-right">Grand
                                    Total:</td>
                                <td class="px-6 py-4 text-sm font-bold text-gray-900 text-right">
                                    ${{ number_format($invoice->grand_total, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Notes and Terms -->
            @if ($invoice->notes || $invoice->company->terms_conditions)
                <div class="p-6 border-t border-gray-200 grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if ($invoice->notes)
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Notes:</h3>
                            <p class="text-gray-600 whitespace-pre-line">{{ $invoice->notes }}</p>
                        </div>
                    @endif
                    @if ($invoice->company->terms_conditions)
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Terms & Conditions:</h3>
                            <p class="text-gray-600 whitespace-pre-line">{{ $invoice->company->terms_conditions }}</p>
                        </div>
                    @endif
                </div>
            @endif
        </div>

        <!-- Quick Actions -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h3>
            <div class="flex flex-wrap gap-3">
                <form action="{{ route('invoices.duplicate', $invoice) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit"
                        class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center">
                        <i class="fas fa-copy mr-2"></i> Duplicate Invoice
                    </button>
                </form>

                <form action="{{ route('invoices.status.update', $invoice) }}" method="POST" class="inline">
                    @csrf
                    <select name="status" onchange="this.form.submit()"
                        class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="draft" {{ $invoice->status == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="sent" {{ $invoice->status == 'sent' ? 'selected' : '' }}>Sent</option>
                        <option value="paid" {{ $invoice->status == 'paid' ? 'selected' : '' }}>Paid</option>
                        <option value="overdue" {{ $invoice->status == 'overdue' ? 'selected' : '' }}>Overdue</option>
                    </select>
                </form>

                <form action="{{ route('invoices.destroy', $invoice) }}" method="POST" class="inline"
                    onsubmit="return confirm('Are you sure you want to delete this invoice?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 flex items-center">
                        <i class="fas fa-trash mr-2"></i> Delete Invoice
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection