@extends('layouts.app')

@section('content')
<div x-data="{
    activeTab: 'in',
    showEntryModal: false,
    showTopUpModal: false,
    showAllocateModal: false,
    showTransferModal: false,
    headFilter: '',
}">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <div class="flex items-center space-x-3">
                <a href="{{ route('business.petty-cash.index', $currentBusiness->id) }}" class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                    <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="M15 19l-7-7 7-7"/></svg>
                </a>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ $fund->name ?? $fund->holder }}</h1>
                    <p class="text-sm text-gray-500">{{ $fund->purpose ?? 'General Fund' }} &middot; Held by <span class="font-medium text-gray-700">{{ $fund->holder }}</span></p>
                </div>
            </div>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-2">
            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
            <form method="POST" action="{{ route('business.petty-cash.update', [$currentBusiness->id, $fund->id]) }}">
                @csrf @method('PUT')
                <input type="hidden" name="status" value="{{ strtolower($fund->status) === 'active' ? 'Closed' : 'Active' }}">
                <input type="hidden" name="holder" value="{{ $fund->holder }}">
                <input type="hidden" name="amount" value="{{ $fund->amount }}">
                <input type="hidden" name="name" value="{{ $fund->name }}">
                <input type="hidden" name="date" value="{{ $fund->date }}">
                <button type="submit" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg border {{ strtolower($fund->status) === 'active' ? 'text-red-700 border-red-300 hover:bg-red-50' : 'text-green-700 border-green-300 hover:bg-green-50' }}">
                    {{ strtolower($fund->status) === 'active' ? 'Close Fund' : 'Reopen Fund' }}
                </button>
            </form>
            <button @click="showTopUpModal = true" class="inline-flex items-center px-3 py-2 text-sm font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add Cash In
            </button>
            <button @click="showEntryModal = true" class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Log Expense
            </button>
            @endif
        </div>
    </div>

    <!-- Fund Summary Cards -->
    @php
        $totalFund = $fund->amount + $fund->total_top_up;
        $spent = $totalFund - $fund->balance;
        $pct = $totalFund > 0 ? round(($fund->balance / $totalFund) * 100) : 0;
        $entryCount = ($entries ?? collect())->count();
        $topupCount = ($topups ?? collect())->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 tracking-wider">Initial Amount</p>
            <p class="mt-1 text-xl font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($fund->amount) }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Top-ups</p>
            <p class="mt-1 text-xl font-bold text-blue-600">+{{ $currentBusiness->currency_symbol }}{{ number_format($fund->total_top_up) }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Total Fund</p>
            <p class="mt-1 text-xl font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($totalFund) }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Spent</p>
            <p class="mt-1 text-xl font-bold text-red-600">{{ $currentBusiness->currency_symbol }}{{ number_format($spent) }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4 {{ $pct <= 10 ? 'border-red-200 bg-red-50' : '' }}">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</p>
            <p class="mt-1 text-xl font-bold {{ $fund->balance > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $currentBusiness->currency_symbol }}{{ number_format($fund->balance) }}</p>
            <div class="mt-2 w-full bg-gray-200 rounded-full h-1.5">
                <div class="{{ $pct > 25 ? 'bg-green-500' : ($pct > 10 ? 'bg-amber-500' : 'bg-red-500') }} h-1.5 rounded-full" style="width: {{ $pct }}%"></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">{{ $pct }}% remaining</p>
        </div>
    </div>

    <!-- Fund Info Banner -->
    <div class="bg-white rounded-xl border border-gray-200 p-4 mb-6">
        <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 text-sm">
            <div>
                <span class="text-gray-500">Status</span>
                <p class="font-medium">
                    <span class="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>
                </p>
            </div>
            <div>
                <span class="text-gray-500">Location</span>
                <p class="font-medium text-gray-900">{{ $fund->location ?? '-' }}</p>
            </div>
            <div>
                <span class="text-gray-500">Payment</span>
                <p class="font-medium text-gray-900">{{ $fund->payment_method }}</p>
            </div>
            <div>
                <span class="text-gray-500">Received From</span>
                <p class="font-medium text-gray-900">{{ $fund->received_from ?? '-' }}</p>
            </div>
            <div>
                <span class="text-gray-500">Approved By</span>
                <p class="font-medium text-gray-900">{{ $fund->approved_by ?? '-' }}</p>
            </div>
            <div>
                <span class="text-gray-500">Date Created</span>
                <p class="font-medium text-gray-900">{{ \Carbon\Carbon::parse($fund->date)->format('d M Y') }}</p>
            </div>
        </div>
        @if($fund->notes)
        <div class="mt-3 pt-3 border-t border-gray-100">
            <span class="text-xs text-gray-500">Notes:</span>
            <p class="text-sm text-gray-700">{{ $fund->notes }}</p>
        </div>
        @endif
    </div>

    <!-- Spending Head Cards -->
    @if(($heads ?? collect())->count() > 0)
    <div class="mb-6">
        <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider mb-3">Spending Heads</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
            @foreach($heads as $head)
            @php
                $headPct = $head->allocated > 0 ? round((($head->allocated - $head->balance) / $head->allocated) * 100) : 0;
            @endphp
            <button @click="activeTab = 'out'; headFilter = '{{ $head->id }}'" class="bg-white rounded-xl border border-gray-200 p-4 text-left hover:shadow-md transition-shadow cursor-pointer">
                <div class="flex items-center space-x-2 mb-2">
                    <div class="w-3 h-3 rounded-full" style="background-color: {{ $head->color }}"></div>
                    <span class="text-xs font-semibold text-gray-700 truncate">{{ $head->name }}</span>
                </div>
                <p class="text-lg font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($head->balance) }}</p>
                <p class="text-xs text-gray-500">Spent: {{ $currentBusiness->currency_symbol }}{{ number_format($head->total_out) }}</p>
                <div class="mt-2 w-full bg-gray-200 rounded-full h-1">
                    <div class="h-1 rounded-full" style="background-color: {{ $head->color }}; width: {{ min($headPct, 100) }}%"></div>
                </div>
            </button>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Tabs: In, Out, Remaining -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex space-x-8">
            <button @click="activeTab = 'in'" :class="activeTab === 'in' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-3 px-1 border-b-2 font-medium text-sm flex items-center">
                <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>
                In ({{ $topupCount }})
            </button>
            <button @click="activeTab = 'out'; headFilter = ''" :class="activeTab === 'out' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-3 px-1 border-b-2 font-medium text-sm flex items-center">
                <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Out ({{ $entryCount }})
            </button>
            <button @click="activeTab = 'remaining'" :class="activeTab === 'remaining' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="py-3 px-1 border-b-2 font-medium text-sm flex items-center">
                <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="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>
                Remaining
            </button>
        </nav>
    </div>

    <!-- ==================== IN TAB ==================== -->
    <div x-show="activeTab === 'in'">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-700">Cash Received / Top-ups</h3>
                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                <button @click="showTopUpModal = true" class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100">
                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Add Cash In
                </button>
                @endif
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($topups ?? [] as $topup)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ $topup->date->format('d M Y') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-right text-green-600">+{{ $currentBusiness->currency_symbol }}{{ number_format($topup->amount) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-900">{{ $topup->source ?? '-' }}</td>
                            <td class="px-4 py-3 text-sm text-gray-500">{{ $topup->notes ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-4 py-12 text-center">
                                <p class="text-sm text-gray-500">No cash received yet.</p>
                                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                                <button @click="showTopUpModal = true" class="mt-2 text-sm text-indigo-600 hover:text-indigo-500 font-medium">Add first cash in</button>
                                @endif
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    @if(($topups ?? collect())->count() > 0)
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td class="px-4 py-3 text-sm font-bold text-gray-900">Total Cash In</td>
                            <td class="px-4 py-3 text-sm font-bold text-right text-green-600">+{{ $currentBusiness->currency_symbol }}{{ number_format(($topups ?? collect())->sum('amount')) }}</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>

    <!-- ==================== OUT TAB ==================== -->
    <div x-show="activeTab === 'out'" style="display: none;">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <h3 class="text-sm font-semibold text-gray-700">Expenses</h3>
                    <!-- Head filter dropdown -->
                    <select x-model="headFilter" class="text-xs rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 py-1 px-2">
                        <option value="">All Heads</option>
                        @foreach($heads ?? [] as $head)
                        <option value="{{ $head->id }}">{{ $head->name }}</option>
                        @endforeach
                    </select>
                    <button x-show="headFilter !== ''" @click="headFilter = ''" class="text-xs text-gray-500 hover:text-gray-700 underline">Clear</button>
                </div>
                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                <button @click="showEntryModal = true" class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Log Expense
                </button>
                @endif
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Head</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paid To</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receipt</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($entries ?? [] as $entry)
                        <tr class="hover:bg-gray-50" x-show="headFilter === '' || headFilter === '{{ $entry->head_id }}'">
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ $entry->date->format('d M Y') }}</td>
                            <td class="px-4 py-3 text-sm text-gray-900 font-medium">
                                {{ $entry->description }}
                                @if($entry->category)
                                <span class="ml-1 inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-600">{{ $entry->category }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                @if($entry->head)
                                <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full text-white" style="background-color: {{ $entry->head->color }}">{{ $entry->head->name }}</span>
                                @else
                                <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ $entry->paid_to ?? '-' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                @if($entry->receipt_file)
                                <a href="{{ asset('storage/' . $entry->receipt_file) }}" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-500">
                                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                                    {{ $entry->receipt_file_name ?? 'View' }}
                                </a>
                                @elseif($entry->receipt_ref)
                                <span class="text-gray-500">{{ $entry->receipt_ref }}</span>
                                @else
                                <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-right text-red-600">-{{ $currentBusiness->currency_symbol }}{{ number_format($entry->amount) }}</td>
                            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                            <td class="px-4 py-3 whitespace-nowrap text-right">
                                <form method="POST" action="{{ route('business.petty-cash.entries.destroy', [$currentBusiness->id, $entry->id]) }}" onsubmit="return confirm('Delete this entry?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-400 hover:text-red-600">
                                        <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>
                                    </button>
                                </form>
                            </td>
                            @endif
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-4 py-12 text-center">
                                <svg class="mx-auto h-10 w-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
                                <p class="mt-2 text-sm text-gray-500">No expenses logged yet.</p>
                                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                                <button @click="showEntryModal = true" class="mt-2 text-sm text-indigo-600 hover:text-indigo-500 font-medium">Log first expense</button>
                                @endif
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    @if(($entries ?? collect())->count() > 0)
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td colspan="5" class="px-4 py-3 text-sm font-bold text-gray-900">Total Cash Out</td>
                            <td class="px-4 py-3 text-sm font-bold text-right text-red-600">-{{ $currentBusiness->currency_symbol }}{{ number_format(($entries ?? collect())->sum('amount')) }}</td>
                            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                            <td></td>
                            @endif
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>

    <!-- ==================== REMAINING TAB ==================== -->
    <div x-show="activeTab === 'remaining'" style="display: none;">
        @php
            $totalAllocated = ($heads ?? collect())->sum('allocated');
            $unallocated = $totalFund - $totalAllocated;
        @endphp

        <!-- Unallocated Pool -->
        <div class="bg-white rounded-xl border border-gray-200 p-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Unallocated Pool</p>
                    <p class="mt-1 text-2xl font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($unallocated) }}</p>
                    <p class="text-xs text-gray-500">Total Fund: {{ $currentBusiness->currency_symbol }}{{ number_format($totalFund) }} | Allocated: {{ $currentBusiness->currency_symbol }}{{ number_format($totalAllocated) }}</p>
                </div>
                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                <button @click="showAllocateModal = true" class="inline-flex items-center px-3 py-2 text-sm font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Allocate to Head
                </button>
                @endif
            </div>
        </div>

        <!-- Head Balance Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            @foreach($heads ?? [] as $head)
            @php
                $headSpent = $head->total_out;
                $headAllocated = $head->allocated;
                $headBalance = $head->balance;
                $headPctUsed = $headAllocated > 0 ? round(($headSpent / $headAllocated) * 100) : 0;
            @endphp
            <div class="bg-white rounded-xl border border-gray-200 p-5">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $head->color }}"></div>
                        <h4 class="text-sm font-bold text-gray-900">{{ $head->name }}</h4>
                    </div>
                    @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                    <div class="flex items-center space-x-1">
                        <button @click="showAllocateModal = true; $nextTick(() => { document.getElementById('allocate_head_id').value = '{{ $head->id }}' })" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium px-2 py-1 rounded hover:bg-indigo-50">Allocate</button>
                        <button @click="showTransferModal = true; $nextTick(() => { document.getElementById('transfer_from_head_id').value = '{{ $head->id }}' })" class="text-xs text-amber-600 hover:text-amber-800 font-medium px-2 py-1 rounded hover:bg-amber-50">Transfer</button>
                    </div>
                    @endif
                </div>
                <div class="grid grid-cols-3 gap-3 text-center mb-3">
                    <div>
                        <p class="text-xs text-gray-500">Allocated</p>
                        <p class="text-sm font-bold text-gray-900">{{ $currentBusiness->currency_symbol }}{{ number_format($headAllocated) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Spent</p>
                        <p class="text-sm font-bold text-red-600">{{ $currentBusiness->currency_symbol }}{{ number_format($headSpent) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Balance</p>
                        <p class="text-sm font-bold {{ $headBalance > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $currentBusiness->currency_symbol }}{{ number_format($headBalance) }}</p>
                    </div>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="h-2 rounded-full transition-all" style="background-color: {{ $head->color }}; width: {{ min($headPctUsed, 100) }}%"></div>
                </div>
                <p class="text-xs text-gray-500 mt-1 text-right">{{ $headPctUsed }}% used</p>
            </div>
            @endforeach
        </div>

        <!-- Transfer History -->
        @if(($headTransfers ?? collect())->count() > 0)
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-700">Transfer History</h3>
                @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
                <button @click="showTransferModal = true" class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-lg hover:bg-amber-100">
                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
                    Transfer Between Heads
                </button>
                @endif
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($headTransfers as $transfer)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ $transfer->date->format('d M Y') }}</td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                @if($transfer->fromHead)
                                <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full text-white" style="background-color: {{ $transfer->fromHead->color }}">{{ $transfer->fromHead->name }}</span>
                                @else - @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm">
                                @if($transfer->toHead)
                                <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full text-white" style="background-color: {{ $transfer->toHead->color }}">{{ $transfer->toHead->name }}</span>
                                @else - @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm font-bold text-right text-amber-600">{{ $currentBusiness->currency_symbol }}{{ number_format($transfer->amount) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-500">{{ $transfer->reason ?? '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @else
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
            <p class="text-sm text-gray-500">No head transfers yet.</p>
            @if(auth()->user()->hasPermission($currentBusiness->id, 'can_edit_petty_cash'))
            <button @click="showTransferModal = true" class="mt-2 text-sm text-indigo-600 hover:text-indigo-500 font-medium">Transfer between heads</button>
            @endif
        </div>
        @endif
    </div>

    <!-- ==================== LOG EXPENSE MODAL ==================== -->
    <div x-show="showEntryModal" 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="showEntryModal = 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">Log Expense</h3>
                    <button @click="showEntryModal = 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.entries.store', [$currentBusiness->id, $fund->id]) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Description *</label>
                            <input type="text" name="description" required placeholder="What was purchased?" 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 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">Paid To</label>
                                <input type="text" name="paid_to" placeholder="Vendor/Person" 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">Spending Head</label>
                                <select name="head_id" 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="">Select head</option>
                                    @foreach($heads ?? [] as $head)
                                    <option value="{{ $head->id }}">{{ $head->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Category</label>
                                <select name="category" 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="">Select category</option>
                                    <option>Office Supplies</option>
                                    <option>Fuel Expense</option>
                                    <option>Travel</option>
                                    <option>Meals & Entertainment</option>
                                    <option>Office Equipment</option>
                                    <option>Utilities</option>
                                    <option>Repair and maintenance</option>
                                    <option>Subscriptions</option>
                                    <option>Legal fee</option>
                                    <option>Labour & Wages</option>
                                    <option>Other</option>
                                </select>
                            </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>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Receipt Ref</label>
                                <input type="text" name="receipt_ref" placeholder="e.g. J-02-001" 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">Receipt Photo/PDF</label>
                                <input type="file" name="receipt_file" accept=".jpg,.jpeg,.png,.pdf,.webp" class="mt-1 block w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                            </div>
                        </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="showEntryModal = 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">Save Entry</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==================== ADD CASH IN (TOP-UP) MODAL ==================== -->
    <div x-show="showTopUpModal" 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="showTopUpModal = false"></div>
            <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-lg font-bold text-gray-900">Add Cash In</h3>
                    <button @click="showTopUpModal = 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.topup.store', [$currentBusiness->id, $fund->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">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>
                            <label class="block text-sm font-medium text-gray-700">Source</label>
                            <input type="text" name="source" required placeholder="e.g. CEO Personal account, Bank transfer" 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="showTopUpModal = 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">Add Cash In</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==================== ALLOCATE TO HEAD MODAL ==================== -->
    <div x-show="showAllocateModal" 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="showAllocateModal = false"></div>
            <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-lg font-bold text-gray-900">Allocate to Head</h3>
                    <button @click="showAllocateModal = 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.allocate', [$currentBusiness->id, $fund->id]) }}">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Select Head *</label>
                            <select name="head_id" id="allocate_head_id" required 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="">Choose spending head</option>
                                @foreach($heads ?? [] as $head)
                                <option value="{{ $head->id }}">{{ $head->name }} (Balance: {{ $currentBusiness->currency_symbol }}{{ number_format($head->balance) }})</option>
                                @endforeach
                            </select>
                        </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">
                                <p class="mt-1 text-xs text-gray-400">Unallocated: {{ $currentBusiness->currency_symbol }}{{ number_format($unallocated ?? 0) }}</p>
                            </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>
                    <div class="mt-6 flex justify-end space-x-3">
                        <button type="button" @click="showAllocateModal = 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">Allocate</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ==================== TRANSFER BETWEEN HEADS MODAL ==================== -->
    <div x-show="showTransferModal" 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="showTransferModal = false"></div>
            <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-lg font-bold text-gray-900">Transfer Between Heads</h3>
                    <button @click="showTransferModal = 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.transfer-heads', [$currentBusiness->id, $fund->id]) }}">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">From Head *</label>
                            <select name="from_head_id" id="transfer_from_head_id" required 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="">Select source head</option>
                                @foreach($heads ?? [] as $head)
                                <option value="{{ $head->id }}">{{ $head->name }} ({{ $currentBusiness->currency_symbol }}{{ number_format($head->balance) }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">To Head *</label>
                            <select name="to_head_id" required 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="">Select destination head</option>
                                @foreach($heads ?? [] as $head)
                                <option value="{{ $head->id }}">{{ $head->name }} ({{ $currentBusiness->currency_symbol }}{{ number_format($head->balance) }})</option>
                                @endforeach
                            </select>
                        </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>
                            <label class="block text-sm font-medium text-gray-700">Reason</label>
                            <textarea name="reason" rows="2" placeholder="Why are you transferring?" 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="showTransferModal = 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-amber-600 rounded-lg hover:bg-amber-700">Transfer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection