@extends('layouts.app')

@section('title', $client->name)

@section('content')

@php
    $hasOutstanding = !empty($outstandingByCurrency);
@endphp

<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Delete error --}}
    @if ($errors->has('delete'))
        <div class="mb-4 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ $errors->first('delete') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-start justify-between mb-8" data-header>
        <div>
            <h1 class="text-xl font-semibold text-slate-900">{{ $client->name }}</h1>
            <p class="text-sm text-slate-400 mt-0.5">{{ $client->email }}</p>
        </div>
        <div class="flex items-center gap-3">
            @can('clients.manage')
            <a href="{{ route('clients.edit', $client) }}"
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 hover:border-slate-300 text-slate-700 text-sm font-medium rounded-lg transition-colors duration-150">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 13l6.5-6.5a2 2 0 112.83 2.83L11.83 15.83 9 16l.17-2.83z"/>
                </svg>
                Edit
            </a>
            <form method="POST" action="{{ route('clients.destroy', $client) }}"
                  onsubmit="return confirm('Permanently delete this client? This cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-red-200 hover:border-red-300 text-red-600 text-sm font-medium rounded-lg transition-colors duration-150 cursor-pointer">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    Delete
                </button>
            </form>
            @endcan
            @can('proposals.create')
            <a href="{{ route('proposals.create', ['client_id' => $client->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                New Proposal
            </a>
            @endcan
        </div>
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-4 gap-4 mb-8">

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Proposals</p>
            <p class="text-2xl font-semibold {{ $totalProposals > 0 ? 'text-sky-700' : 'text-slate-300' }}">
                {{ $totalProposals }}
            </p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Billed</p>
            @if (empty($totalBilledByCurrency))
                <p class="text-2xl font-semibold text-slate-300">&mdash;</p>
            @else
                @foreach ($totalBilledByCurrency as $cur => $amount)
                    <p class="text-2xl font-semibold text-emerald-600">
                        {{ $currencySymbols[$cur] ?? $cur }}&nbsp;{{ number_format($amount, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Paid</p>
            @if (empty($totalPaidByCurrency))
                <p class="text-2xl font-semibold text-slate-300">&mdash;</p>
            @else
                @foreach ($totalPaidByCurrency as $cur => $amount)
                    <p class="text-2xl font-semibold text-emerald-600">
                        {{ $currencySymbols[$cur] ?? $cur }}&nbsp;{{ number_format($amount, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Outstanding</p>
            @if (!$hasOutstanding)
                <p class="text-2xl font-semibold text-emerald-600">Settled</p>
            @else
                @foreach ($outstandingByCurrency as $cur => $amount)
                    <p class="text-2xl font-semibold text-amber-600">
                        {{ $currencySymbols[$cur] ?? $cur }}&nbsp;{{ number_format($amount, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

    </div>

    {{-- Three-column grid --}}
    <div class="grid grid-cols-3 gap-6">

        {{-- LEFT: col-span-2 --}}
        <div class="col-span-2 space-y-6">

            {{-- Recent Proposals card --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-panel>
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-50">
                    <p class="text-sm font-semibold text-slate-900">Recent Proposals</p>
                    <a href="{{ route('proposals.index') }}"
                       class="text-xs text-sky-700 hover:underline">View all &rarr;</a>
                </div>

                @if ($recentProposals->isEmpty())
                    <div class="py-10 text-center">
                        <p class="text-sm text-slate-400">No proposals yet</p>
                    </div>
                @else
                    <table class="w-full">
                        <thead class="bg-slate-50 border-b border-slate-100">
                            <tr>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Title / Project</th>
                                <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Amount</th>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Status</th>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Valid Until</th>
                                <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wide"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($recentProposals as $proposal)
                                @php
                                    $propCur = $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->value : $proposal->currency;
                                    $propSv  = $proposal->status instanceof \App\Enums\ProposalStatus ? $proposal->status->value : $proposal->status;
                                    $propBadge = match($propSv) {
                                        'draft'    => 'bg-slate-100 text-slate-600',
                                        'sent'     => 'bg-sky-50 text-sky-700',
                                        'approved' => 'bg-emerald-50 text-emerald-700',
                                        'rejected' => 'bg-red-50 text-red-600',
                                        'expired'  => 'bg-amber-50 text-amber-600',
                                        default    => 'bg-slate-100 text-slate-600',
                                    };
                                @endphp
                                <tr class="hover:bg-slate-50 transition-colors duration-150">
                                    <td class="px-5 py-4 text-sm font-medium text-slate-900">
                                        {{ $proposal->title ?? $proposal->project->title ?? '&mdash;' }}
                                    </td>
                                    <td class="px-5 py-4 text-sm text-right font-mono font-medium text-slate-900 tabular-nums">
                                        {{ $currencySymbols[$propCur] ?? $propCur }}&nbsp;{{ number_format($proposal->amount, 2) }}
                                    </td>
                                    <td class="px-5 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $propBadge }}">
                                            {{ ucfirst($propSv) }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4 text-sm text-slate-500">
                                        {{ $proposal->valid_until->format('d M Y') }}
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a href="{{ route('proposals.show', $proposal) }}"
                                           class="text-xs text-sky-700 hover:underline">View &rarr;</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>

            {{-- Recent Invoices card --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-panel>
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-50">
                    <p class="text-sm font-semibold text-slate-900">Recent Invoices</p>
                    <a href="{{ route('invoices.index') }}"
                       class="text-xs text-sky-700 hover:underline">View all &rarr;</a>
                </div>

                @if ($recentInvoices->isEmpty())
                    <div class="py-10 text-center">
                        <p class="text-sm text-slate-400">No invoices yet</p>
                    </div>
                @else
                    <table class="w-full">
                        <thead class="bg-slate-50 border-b border-slate-100">
                            <tr>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Invoice #</th>
                                <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Amount</th>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Status</th>
                                <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Due Date</th>
                                <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wide"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($recentInvoices as $invoice)
                                @php
                                    $invSv     = $invoice->status instanceof \App\Enums\InvoiceStatus ? $invoice->status->value : $invoice->status;
                                    $invSymbol = $invoice->currency instanceof \App\Enums\Currency ? $invoice->currency->symbol() : (string) $invoice->currency;
                                    $invBadge  = match($invSv) {
                                        'unpaid'  => 'bg-amber-50 text-amber-700',
                                        'partial' => 'bg-sky-50 text-sky-700',
                                        'paid'    => 'bg-emerald-50 text-emerald-700',
                                        default   => 'bg-slate-100 text-slate-600',
                                    };
                                    $invLabel  = match($invSv) {
                                        'unpaid'  => 'Unpaid',
                                        'partial' => 'Partial',
                                        'paid'    => 'Paid',
                                        default   => ucfirst($invSv),
                                    };
                                    $invOverdue = $invoice->due_date->isPast() && $invSv === 'unpaid';
                                @endphp
                                <tr class="hover:bg-slate-50 transition-colors duration-150">
                                    <td class="px-5 py-4 text-sm font-mono font-medium text-slate-600">
                                        {{ $invoice->invoice_number }}
                                    </td>
                                    <td class="px-5 py-4 text-sm text-right font-mono font-medium text-slate-900 tabular-nums">
                                        {{ $invSymbol }}&nbsp;{{ number_format($invoice->amount, 2) }}
                                    </td>
                                    <td class="px-5 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $invBadge }}">
                                            {{ $invLabel }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4 text-sm {{ $invOverdue ? 'text-red-500 font-semibold' : 'text-slate-500' }}">
                                        {{ $invoice->due_date->format('d M Y') }}
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a href="{{ route('invoices.show', $invoice) }}"
                                           class="text-xs text-sky-700 hover:underline">View &rarr;</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>

        </div>

        {{-- RIGHT: col-span-1 --}}
        <div class="col-span-1 space-y-6">

            {{-- Contact Information card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Contact Information</p>

                <div class="space-y-3">

                    <div>
                        <p class="text-xs font-medium text-slate-400 mb-0.5">Name</p>
                        <p class="text-sm font-semibold text-slate-900">{{ $client->name }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-medium text-slate-400 mb-0.5">Email</p>
                        <a href="mailto:{{ $client->email }}"
                           class="text-sky-700 hover:underline text-sm">{{ $client->email }}</a>
                    </div>

                    <div>
                        <p class="text-xs font-medium text-slate-400 mb-0.5">Phone</p>
                        <p class="text-sm text-slate-600">{{ $client->phone ?? '&mdash;' }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-medium text-slate-400 mb-0.5">Address</p>
                        @if ($client->address)
                            <p class="text-sm text-slate-600 whitespace-pre-line">{{ $client->address }}</p>
                        @else
                            <p class="text-sm text-slate-400">&mdash;</p>
                        @endif
                    </div>

                    @if ($client->notes)
                        <div class="pt-2 border-t border-slate-50">
                            <p class="text-xs font-medium text-slate-400 mb-0.5">Internal Notes</p>
                            <p class="text-sm text-slate-500 italic">{{ $client->notes }}</p>
                        </div>
                    @endif

                </div>

                <div class="mt-4 pt-4 border-t border-slate-50">
                    <a href="{{ route('clients.edit', $client) }}"
                       class="inline-flex items-center gap-1.5 text-xs text-sky-700 hover:underline font-medium">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 13l6.5-6.5a2 2 0 112.83 2.83L11.83 15.83 9 16l.17-2.83z"/>
                        </svg>
                        Edit contact
                    </a>
                </div>
            </div>

            {{-- Projects card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Projects</p>

                @if ($client->projects->isEmpty())
                    <p class="text-sm text-slate-400">No projects yet</p>
                @else
                    <div class="space-y-2">
                        @foreach ($client->projects as $project)
                            @php
                                $projectSv = $project->status instanceof \App\Enums\ProjectStatus ? $project->status->value : $project->status;
                                $projectBadge = match($projectSv) {
                                    'active'    => 'bg-emerald-50 text-emerald-700',
                                    'completed' => 'bg-sky-50 text-sky-700',
                                    'on_hold'   => 'bg-amber-50 text-amber-600',
                                    'cancelled' => 'bg-red-50 text-red-600',
                                    default     => 'bg-slate-100 text-slate-600',
                                };
                            @endphp
                            <div class="flex items-center justify-between py-1.5 border-b border-slate-50 last:border-b-0">
                                <p class="text-sm text-slate-700 font-medium truncate pr-2">{{ $project->title }}</p>
                                <span class="inline-flex items-center shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {{ $projectBadge }}">
                                    {{ ucfirst(str_replace('_', ' ', $projectSv)) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Activity card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Activity</p>

                <div class="space-y-3">

                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Member since</p>
                        <p class="text-xs font-medium text-slate-700">{{ $client->created_at->format('d M Y') }}</p>
                    </div>

                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Proposals</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $totalProposals }} {{ $totalProposals !== 1 ? 'proposals' : 'proposal' }}
                        </p>
                    </div>

                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Invoices</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $totalInvoices }} {{ $totalInvoices !== 1 ? 'invoices' : 'invoice' }}
                        </p>
                    </div>

                    <div class="flex items-start justify-between pt-2 border-t border-slate-50">
                        <p class="text-xs text-slate-400">Last proposal</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $client->proposals->sortByDesc('created_at')->first()?->created_at?->diffForHumans() ?? '&mdash;' }}
                        </p>
                    </div>

                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Last payment</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $client->invoices->flatMap->payments->sortByDesc('paid_at')->first()?->paid_at?->diffForHumans() ?? '&mdash;' }}
                        </p>
                    </div>

                </div>
            </div>

        </div>

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    var header = document.querySelector('[data-header]');
    if (header) {
        Motion.animate(header, { opacity: [0, 1], y: [12, 0] }, { duration: 0.25, easing: 'ease-out' });
    }

    var cards = document.querySelectorAll('[data-stat-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    var panels = document.querySelectorAll('[data-panel]');
    if (panels.length) {
        Motion.animate(panels, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.06, { start: 0.2 }), duration: 0.25, easing: 'ease-out' });
    }
})();
</script>

@endsection