@extends('layouts.app')

@section('title', 'Proposals')

@section('content')
<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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Proposals</h1>
            <p class="text-sm text-slate-400 mt-0.5">
                {{ $totalProposals }} {{ Str::plural('proposal', $totalProposals) }}
                @if ($pendingCount > 0)
                    &middot; <span class="text-sky-700 font-medium">{{ $pendingCount }} pending</span>
                @endif
            </p>
        </div>
        @can('proposals.create')
        <a href="{{ route('proposals.create') }}"
           class="inline-flex items-center gap-2 bg-sky-700 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-90 transition-all duration-200 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="M12 4v16m8-8H4"/>
            </svg>
            New proposal
        </a>
        @endcan
    </div>

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

        {{-- Total --}}
        <div data-stat-card class="bg-slate-50 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total</p>
            <p class="text-2xl font-semibold text-slate-900">{{ $totalProposals }}</p>
        </div>

        {{-- Pending --}}
        <div data-stat-card class="bg-slate-50 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Pending</p>
            <p class="text-2xl font-semibold text-sky-700">{{ $pendingCount }}</p>
        </div>

        {{-- Approved --}}
        <div data-stat-card class="bg-slate-50 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Approved</p>
            <p class="text-2xl font-semibold text-emerald-600">{{ $approvedCount }}</p>
        </div>

        {{-- Overdue --}}
        <div data-stat-card class="bg-slate-50 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Overdue</p>
            <p class="text-2xl font-semibold text-red-600">{{ $overdueCount }}</p>
            @if ($overdueCount > 0)
                <p class="text-xs text-red-500 font-medium mt-0.5">requires action</p>
            @endif
        </div>

    </div>

    {{-- Proposals table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if ($proposals->isEmpty())
            <div class="py-20 text-center">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
                    <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              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>
                </div>
                <p class="text-sm font-medium text-slate-700">No proposals yet</p>
                <p class="text-sm text-slate-400 mt-1">Create your first proposal to get started.</p>
                @can('proposals.create')
                <a href="{{ route('proposals.create') }}"
                   class="inline-flex items-center gap-2 mt-5 bg-sky-700 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-90 transition-all duration-200 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="M12 4v16m8-8H4"/>
                    </svg>
                    New proposal
                </a>
                @endcan
            </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-wider">Client</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Project</th>
                        <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wider">Amount</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Status</th>
                        <th scope="col" class="px-5 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">Valid Until</th>
                        <th scope="col" class="px-5 py-3 text-right text-xs font-medium text-slate-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 bg-white">
                    @foreach ($proposals as $proposal)
                        @php
                            $sv = $proposal->status instanceof \App\Enums\ProposalStatus ? $proposal->status->value : $proposal->status;
                            $symbol = $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->symbol() : $proposal->currency;
                            $isOverdue = $proposal->valid_until->isPast() && in_array($sv, ['draft', 'sent']);
                            $badgeClass = match($sv) {
                                '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-700',
                                default    => 'bg-slate-100 text-slate-600',
                            };
                        @endphp
                        <tr data-table-row class="hover:bg-slate-50 transition-colors duration-150 cursor-pointer">
                            <td class="px-5 py-4 text-sm font-medium text-slate-900">
                                {{ $proposal->client->name }}
                            </td>
                            <td class="px-5 py-4 text-sm text-slate-500">
                                {{ $proposal->project->title }}
                            </td>
                            <td class="px-5 py-4 text-sm font-medium font-mono text-slate-900 text-right tabular-nums">
                                {{ $symbol }}&nbsp;{{ number_format((float) $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 {{ $badgeClass }}">
                                    {{ ucfirst($sv) }}
                                </span>
                            </td>
                            <td class="px-5 py-4 text-sm {{ $isOverdue ? 'text-red-500 font-medium' : 'text-slate-500' }}">
                                {{ $proposal->valid_until->format('d M Y') }}
                            </td>
                            <td class="px-5 py-4 text-right text-sm">
                                <a href="{{ route('proposals.show', $proposal) }}"
                                   class="text-sky-700 hover:underline">View</a>
                                @can('proposals.edit')
                                <span class="text-slate-300 mx-1">&middot;</span>
                                <a href="{{ route('proposals.edit', $proposal) }}"
                                   class="text-slate-500 hover:underline">Edit</a>
                                @endcan
                                @can('proposals.delete')
                                <span class="text-slate-300 mx-1">&middot;</span>
                                <form method="POST"
                                      action="{{ route('proposals.destroy', $proposal) }}"
                                      class="inline"
                                      onsubmit="return confirm('Delete this proposal? This cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="text-red-500 hover:underline cursor-pointer">Delete</button>
                                </form>
                                @endcan
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if ($proposals->hasPages())
                <div class="flex items-center justify-between px-5 py-4 border-t border-slate-100">
                    <p class="text-sm text-slate-400">
                        Showing {{ $proposals->firstItem() }}&ndash;{{ $proposals->lastItem() }} of {{ $proposals->total() }}
                    </p>
                    <div class="text-sm">
                        {{ $proposals->links() }}
                    </div>
                </div>
            @endif
        @endif

    </div>

</div>

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

  // Stat cards fade in together
  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' });
  }

  // Table rows stagger in sequentially
  var rows = document.querySelectorAll('[data-table-row]');
  if (rows.length) {
    Motion.animate(rows, { opacity: [0, 1], y: [8, 0] }, { delay: Motion.stagger(0.04, { start: 0.15 }), duration: 0.2, easing: 'ease-out' });
  }
})();
</script>
@endsection