@extends('layouts.app')

@section('content')
<div x-data="{ showAddModal: false, filter: 'all', showGuide: false }">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Petty Cash</h1>
            <p class="mt-1 text-sm text-gray-500">Manage petty cash funds, entries and top-ups.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            <select x-model="filter" class="rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                <option value="all">All Funds</option>
                <option value="active">Active</option>
                <option value="closed">Closed</option>
            </select>
            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
            <button @click="showAddModal = true" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                <svg class="w-4 h-4 mr-2" 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 Fund
            </button>
            @endif
        </div>
    </div>

    <!-- How it Works Guide -->
    <div class="mb-6">
        <button @click="showGuide = !showGuide" class="flex items-center space-x-2 text-sm text-indigo-600 hover:text-indigo-500 font-medium">
            <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span x-text="showGuide ? 'Hide Guide' : 'How does Petty Cash work?'"></span>
        </button>
        <div x-show="showGuide" x-transition class="mt-3 bg-indigo-50 border border-indigo-100 rounded-xl p-5" style="display: none;">
            <h3 class="text-base font-bold text-indigo-900 mb-3">How Petty Cash Works</h3>
            <p class="text-sm text-indigo-800 mb-4">Petty cash tracks small, day-to-day cash expenses. Instead of processing every small payment through the bank, you give someone a pot of cash to manage daily spending.</p>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-white rounded-lg p-3 border border-indigo-100">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        <span class="text-sm font-semibold text-gray-900">Create a Fund</span>
                    </div>
                    <p class="text-xs text-gray-600">Give someone (the holder) a set amount of cash for a specific purpose — e.g. "Rs100,000 for office groceries".</p>
                </div>
                <div class="bg-white rounded-lg p-3 border border-indigo-100">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        <span class="text-sm font-semibold text-gray-900">Log Expenses</span>
                    </div>
                    <p class="text-xs text-gray-600">Every time they spend from the pot, log it: what was bought, how much, from where, and attach a receipt photo.</p>
                </div>
                <div class="bg-white rounded-lg p-3 border border-indigo-100">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        <span class="text-sm font-semibold text-gray-900">Top Up When Low</span>
                    </div>
                    <p class="text-xs text-gray-600">When the balance runs low, top it up with more cash. Track where the top-up came from (bank, personal, etc).</p>
                </div>
                <div class="bg-white rounded-lg p-3 border border-indigo-100">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                        <span class="text-sm font-semibold text-gray-900">Close When Done</span>
                    </div>
                    <p class="text-xs text-gray-600">When the fund's purpose is complete, close it. You'll see a full audit trail of every payment made from that pot.</p>
                </div>
            </div>
            <div class="mt-4 p-3 bg-white rounded-lg border border-indigo-100">
                <p class="text-xs text-gray-600"><span class="font-semibold text-gray-900">Example:</span> You give Ahmed Rs200,000 for office equipment. He buys a laptop (Rs188,000), 6 RAMs (Rs192,000 from a different pot), etc. Every purchase is logged with receipts. You can see exactly where every rupee went, who spent it, and when — all in one place.</p>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    @php
        $allFunds = $funds ?? collect();
        $totalAllocated = $allFunds->sum('amount') + $allFunds->sum('total_top_up');
        $totalBalance = $allFunds->sum('balance');
        $totalSpent = $totalAllocated - $totalBalance;
        $activeFunds = $allFunds->filter(fn($f) => strtolower($f->status) === 'active')->count();
    @endphp
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase">Total Funds</p>
            <p class="mt-1 text-2xl font-bold text-gray-900">{{ $allFunds->count() }}</p>
            <p class="text-xs text-gray-400">{{ $activeFunds }} active &middot; {{ $allFunds->count() - $activeFunds }} closed</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase">Total Allocated</p>
            <p class="mt-1 text-2xl font-bold text-indigo-600">{{ $currentBusiness->currency_symbol }}{{ number_format($totalAllocated) }}</p>
            <p class="text-xs text-gray-400">initial + top-ups</p>
        </div>
        <div class="bg-white rounded-xl border border-red-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase">Total Spent</p>
            <p class="mt-1 text-2xl font-bold text-red-600">{{ $currentBusiness->currency_symbol }}{{ number_format($totalSpent) }}</p>
            <p class="text-xs text-gray-400">{{ $totalAllocated > 0 ? round($totalSpent / $totalAllocated * 100) : 0 }}% of allocated</p>
        </div>
        <div class="bg-white rounded-xl border border-green-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase">Total Balance</p>
            <p class="mt-1 text-2xl font-bold {{ $totalBalance > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $currentBusiness->currency_symbol }}{{ number_format($totalBalance) }}</p>
            <p class="text-xs text-gray-400">{{ $totalAllocated > 0 ? round($totalBalance / $totalAllocated * 100) : 0 }}% remaining</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase">Active Funds</p>
            <p class="mt-1 text-2xl font-bold text-green-600">{{ $activeFunds }}</p>
            <p class="text-xs text-gray-400">{{ $allFunds->sum('entries_count') ?? 0 }} total entries</p>
        </div>
    </div>

    <!-- Funds Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($allFunds as $fund)
        <div x-show="filter === 'all' || filter.toLowerCase() === '{{ strtolower($fund->status) }}'" x-transition>
            <a href="{{ route('business.petty-cash.show', [$currentBusiness->id, $fund->id]) }}"
               class="group block bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-lg hover:border-indigo-200 transition-all duration-300 overflow-hidden">
                <!-- Status bar -->
                <div class="h-1 w-full {{ strtolower($fund->status) === 'active' ? 'bg-green-500' : 'bg-gray-400' }}"></div>

                <div class="p-5">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1 min-w-0">
                            <h3 class="text-base font-bold text-gray-900 truncate group-hover:text-indigo-600 transition-colors">{{ $fund->name ?? $fund->holder }}</h3>
                            <p class="text-sm text-gray-500 truncate">{{ $fund->purpose ?? 'General' }}</p>
                        </div>
                        <span class="ml-2 inline-flex px-2 py-0.5 text-xs font-semibold rounded-full {{ strtolower($fund->status) === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                            {{ $fund->status }}
                        </span>
                    </div>

                    <!-- Fund Details -->
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Holder</span>
                            <span class="font-medium text-gray-900">{{ $fund->holder }}</span>
                        </div>
                        @if($fund->location)
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Location</span>
                            <span class="text-gray-700">{{ $fund->location }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Payment</span>
                            <span class="text-gray-700">{{ $fund->payment_method }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Date</span>
                            <span class="text-gray-700">{{ \Carbon\Carbon::parse($fund->date)->format('d M Y') }}</span>
                        </div>
                    </div>

                    <!-- Financial Summary -->
                    <div class="bg-gray-50 -mx-5 px-5 py-3 border-t border-gray-100">
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div>
                                <p class="text-xs text-gray-500">Initial</p>
                                <p class="text-sm font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($fund->amount) }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Top-ups</p>
                                <p class="text-sm font-bold text-blue-600">+{{ $currentBusiness->currency_symbol }}{{ number_format($fund->total_top_up) }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Balance</p>
                                <p class="text-sm font-bold {{ $fund->balance > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $currentBusiness->currency_symbol }}{{ number_format($fund->balance) }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    @php
                        $totalFund = $fund->amount + $fund->total_top_up;
                        $spent = $totalFund - $fund->balance;
                        $pct = $totalFund > 0 ? round(($fund->balance / $totalFund) * 100) : 0;
                    @endphp
                    <div class="mt-3">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Spent {{ $currentBusiness->currency_symbol }}{{ number_format($spent) }}</span>
                            <span>{{ $pct }}% left</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="{{ $pct > 25 ? 'bg-green-500' : ($pct > 10 ? 'bg-amber-500' : 'bg-red-500') }} h-2 rounded-full transition-all" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @empty
        <div class="col-span-full text-center py-16">
            <div class="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
            </div>
            <h3 class="text-base font-semibold text-gray-900">No petty cash funds</h3>
            <p class="mt-1 text-sm text-gray-500">Create a new fund to start tracking petty cash.</p>
        </div>
        @endforelse
    </div>

    <!-- Add Fund Modal -->
    <div x-show="showAddModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showAddModal = false"></div>
            <div class="relative bg-white rounded-xl shadow-xl max-w-lg w-full p-6">
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-lg font-bold text-gray-900">Create Petty Cash Fund</h3>
                    <button @click="showAddModal = false" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" 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>
                    </button>
                </div>
                <form method="POST" action="{{ route('business.petty-cash.store', $currentBusiness->id) }}">
                    @csrf
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Fund Name</label>
                                <input type="text" name="name" required placeholder="e.g. Monthly Groceries" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Holder</label>
                                <input type="text" name="holder" required placeholder="Person managing fund" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Amount ({{ $currentBusiness->currency_symbol }})</label>
                                <input type="number" name="amount" step="0.01" required placeholder="0.00" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Date</label>
                                <input type="date" name="date" required value="{{ date('Y-m-d') }}" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Location</label>
                                <input type="text" name="location" placeholder="e.g. Islamabad Office" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Payment Method</label>
                                <select name="payment_method" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                    <option value="Cash">Cash</option>
                                    <option value="Bank Transfer">Bank Transfer</option>
                                    <option value="Card">Card</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Received From</label>
                            <input type="text" name="received_from" placeholder="e.g. CEO, Director" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Purpose</label>
                            <input type="text" name="purpose" placeholder="e.g. Day to day operations" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Notes</label>
                            <textarea name="notes" rows="2" placeholder="Optional notes..." class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"></textarea>
                        </div>
                    </div>
                    <div class="mt-6 flex justify-end space-x-3">
                        <button type="button" @click="showAddModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Create Fund</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection