{{-- resources/views/finance/vendor-profile.blade.php --}}
@extends('layouts.finance.finance')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {{-- Header & Profile Info --}}
        <div class="bg-white rounded-lg shadow px-6 py-8 mb-8 border border-gray-200">
            <div class="flex justify-between items-start">
                <div class="flex items-center">
                    {{-- Vendor Avatar --}}
                    <div
                        class="h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-2xl mr-4">
                        {{ strtoupper(substr($vendor->company_name ?? $vendorUser->name, 0, 1)) }}
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">
                            {{ $vendor->company_name ?? $vendorUser->name }}
                        </h1>
                        <div class="text-sm text-gray-500 flex items-center mt-2 space-x-3">
                            <span
                                class="bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded font-mono text-xs font-bold border border-indigo-200">
                                V#{{ str_pad($vendor->id, 4, '0', STR_PAD_LEFT) }}
                            </span>
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                                {{ $vendorUser->email ?? 'N/A' }}
                            </span>
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                    </path>
                                </svg>
                                {{ $vendor->phone ?? 'N/A' }}
                            </span>
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ ($vendorUser->status == 'active') ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ ucfirst($vendorUser->status ?? 'Active') }}
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <a href="{{ route('finance.vendorsDetails') }}"
                        class="text-gray-600 hover:text-gray-900 border border-gray-300 rounded px-4 py-2 text-sm font-medium hover:bg-gray-50 transition">
                        &larr; Back to Directory
                    </a>
                </div>
            </div>
        </div>

        {{-- Aggregated Financial Summary --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {{-- Total Purchase Orders --}}
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200 border-t-4 border-t-blue-500">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Total Purchase Orders</h3>
                <p class="text-3xl font-bold text-gray-900 mt-2">
                    {{ $vendor->orders ? $vendor->orders->count() : 0 }}
                </p>
            </div>

            {{-- Total Invoiced (Payable) --}}
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200 border-t-4 border-t-yellow-500">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Total Invoiced Amount</h3>
                <p class="text-3xl font-bold text-gray-900 mt-2">
                    Rs{{ number_format($vendor->payments ? $vendor->payments->sum('total_amount') : 0, 2) }}
                </p>
            </div>

            {{-- Total Payments Made --}}
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200 border-t-4 border-t-green-500">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Total Payments Made</h3>
                <p class="text-3xl font-bold text-gray-900 mt-2">
                    Rs{{ number_format($vendor->payments ? $vendor->payments->sum('paid_amount') : 0, 2) }}
                </p>
            </div>
        </div>

        {{-- Ledger / Activity Table --}}
        <div class="bg-white rounded-lg shadow overflow-hidden border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-800">Recent Ledger Activity</h2>
                {{-- Optional feature to add later --}}
                <!-- <button class="text-sm text-indigo-600 font-medium hover:text-indigo-900">Export PDF</button> -->
            </div>

            <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Reference / ID</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Amount</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ml-4">
                            Status</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Action</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse ($ledgerItems as $item)
                        @php
                            $modelType = class_basename($item);

                            if ($modelType === 'Payment') {
                                $amount = $item->paid_amount ?? 0;
                            } else {
                                $amount = $item->amount ?? $item->total_amount ?? 0;
                            }

                            if ($modelType === 'Payment') {
                                $ref = 'PMT #' . $item->id . ($item->order_id ? ' → For PO #' . $item->order_id : '');
                            } elseif ($modelType === 'Order') {
                                $ref = 'PO #' . $item->id;
                            } else {
                                $ref = $item->reference_number ?? $item->invoice_number ?? ('#' . $item->id);
                            }
                        @endphp
                        <tr class="hover:bg-gray-50 transition-colors duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ \Carbon\Carbon::parse($item->created_at)->format('M d, Y - g:i A') }}
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                @if($modelType == 'Payment')
                                    <span class="text-green-600 font-semibold"><i class="fas fa-arrow-down mr-1"></i>Payment</span>
                                @elseif($modelType == 'Invoice')
                                    <span class="text-yellow-600 font-semibold"><i class="fas fa-file-invoice mr-1"></i>Invoice</span>
                                @else
                                    <span class="text-blue-600 font-semibold"><i class="fas fa-shopping-cart mr-1"></i>Purchase Order</span>
                                @endif
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">
                                {{ $ref }}
                            </td>

                            <td
                                class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium {{ $modelType === 'Payment' ? 'text-green-600' : 'text-gray-900' }}">
                                Rs{{ number_format($amount, 2) }}
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-sm ml-4">
                                @php 
                                                    $statusColor = in_array(strtolower($item->status ?? ''), ['completed', 'paid', 'delivered', 'accepted'])
                                    ? 'bg-green-100 text-green-800'
                                    : 'bg-gray-100 text-gray-800'; 
                                @endphp
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $statusColor }}">
                                    {{ ucfirst($item->status ?? 'Logged') }}
                                </span>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                @if($modelType === 'Order')
                                    <a href="{{ route('finance.orders.show', $item->id) }}"
                                        class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                        View PO
                                    </a>
                                @elseif($modelType === 'Payment' && $item->order_id)
                                    <a href="{{ route('finance.orders.show', $item->order_id) }}"
                                        class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                        View PO
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 whitespace-nowrap text-sm text-gray-500 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="h-12 w-12 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                    <span class="text-gray-500">No financial activity found for this vendor yet.</span>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            </div>
        </div>
    </div>
@endsection