{{-- resources/views/finance/client-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">
                    {{-- Client Avatar --}}
                    <div
                        class="h-16 w-16 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-2xl mr-4">
                        {{ strtoupper(substr($name, 0, 1)) }}
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">
                            {{ $name }}
                        </h1>
                        <div class="text-sm text-gray-500 flex items-center mt-2 space-x-3">
                            <span
                                class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded font-mono text-xs font-bold border border-blue-200">
                                {{ $totalProjects }} Total Projects
                            </span>
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $executionProjects > 0 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ $executionProjects }} Running
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    {{-- Back Button --}}
                    <a href="{{ url()->previous() }}"
                        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>

        {{-- Financial Summary Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {{-- Total Invoiced --}}
            <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($totalInvoiced, 2) }}
                </p>
            </div>

            {{-- Total Collected --}}
            <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 Collected</h3>
                <p class="text-3xl font-bold text-gray-900 mt-2">
                    Rs {{ number_format($totalCollected, 2) }}
                </p>
            </div>

            {{-- Balance Due --}}
            <div
                class="bg-white rounded-lg shadow p-6 border border-gray-200 border-t-4 {{ $balanceDue > 0 ? 'border-t-red-500' : 'border-t-gray-400' }}">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Total Balance Due</h3>
                <p class="text-3xl font-bold {{ $balanceDue > 0 ? 'text-red-600' : 'text-gray-900' }} mt-2">
                    Rs {{ number_format(max(0, $balanceDue), 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 Financial Activity</h2>
            </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">
                                Project ID</th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Reference / Detail</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>
                            {{-- NEW ACTION HEADER --}}
                            <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">
                        @php
                            $invoices = $clientProjects->flatMap->invoices;
                            $receivables = $clientProjects->flatMap->receivableSchedules;
                            $ledgerItems = collect()->concat($invoices)->concat($receivables)->sortByDesc('created_at');
                        @endphp

                        @forelse ($ledgerItems as $item)
                            @php
                                $modelType = class_basename($item);
                                $amount = $item->amount ?? $item->total_amount ?? $item->total ?? $item->grand_total ?? 0;

                                if ($modelType === 'Invoice') {
                                    $ref = $item->invoice_number ?? ('INV #' . $item->id);
                                } else {
                                    $scheduleName = $item->title ?? $item->name ?? $item->description ?? $item->milestone ?? ('Payment #' . $item->id);
                                    $ref = !empty($item->invoice_id) ? ($scheduleName . ' → For INV #' . $item->invoice_id) : $scheduleName;
                                }
                            @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 === 'Invoice')
                                        <span class="text-yellow-600 font-semibold"><i
                                                class="fas fa-file-invoice mr-1"></i>Invoice</span>
                                    @else
                                        <span class="text-green-600 font-semibold"><i class="fas fa-arrow-down mr-1"></i>Payment
                                            Received</span>
                                    @endif
                                </td>

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

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

                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium {{ $modelType === 'Invoice' ? 'text-gray-900' : 'text-green-600' }}">
                                    {{ $modelType === 'Invoice' ? '' : '+' }}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 ?? ''), ['paid', 'completed'])
                                        ? '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>

                                {{-- NEW VIEW BUTTON --}}
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    @if($modelType === 'Invoice')
                                        {{-- CHANGED HERE: finance.invoices.show --}}
                                        <a href="{{ route('finance.invoices.show', $item->id) }}" target="_blank"
                                            class="inline-flex items-center px-3 py-1.5 border border-yellow-200 text-xs font-medium rounded-md text-yellow-700 bg-yellow-50 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition-colors">
                                            <svg class="mr-1.5 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                            </svg>
                                            View PDF
                                        </a>
                                    @else
                                        {{-- If the payment is tied to an invoice, view the invoice. Otherwise, view the project
                                        --}}
                                        @if(!empty($item->invoice_id))
                                            {{-- CHANGED HERE: finance.invoices.show --}}
                                            <a href="{{ route('finance.invoices.show', $item->invoice_id) }}" target="_blank"
                                                class="inline-flex items-center px-3 py-1.5 border border-green-200 text-xs font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors">
                                                <svg class="mr-1.5 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                                </svg>
                                                View PDF
                                            </a>
                                        @else
                                            <a href="{{ route('finance.showProject', $item->project_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 Project
                                            </a>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                {{-- Updated colspan to 7 to account for the new column --}}
                                <td colspan="7" 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 client yet.</span>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection