@extends('layouts.aura-main')

@section('main-content')
<style>
    [x-cloak] { display: none !important; }
    /* Polished pagination styles */
    .pagination-container nav { display: flex; justify-content: space-between; align-items: center; }
    .pagination-container nav div:last-child { display: flex; gap: 5px; box-shadow: none !important; }
    .pagination-container nav div:last-child a, 
    .pagination-container nav div:last-child span[aria-current="page"] > span {
        height: 30px !important; min-width: 30px !important; display: inline-flex !important;
        align-items: center !important; justify-content: center !important; border-radius: 4px !important;
        font-size: 11px !important; font-weight: 700 !important; border: 1px solid #e2e8f0 !important;
    }
    .pagination-container nav div:last-child span[aria-current="page"] > span {
        background-color: #6366f1 !important; color: #ffffff !important; border-color: #6366f1 !important;
    }
    .pagination-container nav div:last-child a { color: #6366f1 !important; border-color: #6366f1 !important; background-color: #f5f7ff !important; }
    .pagination-container svg { width: 14px !important; height: 14px !important; }
    
    /* Pop Animation */
    .toast-enter { transform: translateY(-20px); opacity: 0; }
    .toast-enter-active { transition: all 0.3s ease-out; }
</style>

<div x-data="{ searchQuery: '', statusFilter: '', showImport: false }">

    <div class="fixed top-5 right-5 z-[9999] flex flex-col gap-3 w-80">
        @if(session('error'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" 
                 x-transition:enter="toast-enter-active toast-enter" 
                 class="bg-white border-l-4 border-rose-500 shadow-xl p-4 flex gap-3 items-start rounded-r-sm ring-1 ring-black ring-opacity-5">
                <svg class="w-5 h-5 text-rose-500 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"></path></svg>
                <div class="flex-grow">
                    <p class="text-[10px] font-black uppercase text-rose-500 tracking-widest">Error</p>
                    <p class="text-xs text-slate-600 font-medium mt-1">{{ session('error') }}</p>
                </div>
                <button @click="show = false" class="text-slate-300 hover:text-slate-500">&times;</button>
            </div>
        @endif

        @if(session('success'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" 
                 x-transition:enter="toast-enter-active toast-enter" 
                 class="bg-white border-l-4 border-emerald-500 shadow-xl p-4 flex gap-3 items-start rounded-r-sm ring-1 ring-black ring-opacity-5">
                <svg class="w-5 h-5 text-emerald-500 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"></path></svg>
                <div class="flex-grow">
                    <p class="text-[10px] font-black uppercase text-emerald-500 tracking-widest">Success</p>
                    <p class="text-xs text-slate-600 font-medium mt-1">{{ session('success') }}</p>
                </div>
                <button @click="show = false" class="text-slate-300 hover:text-slate-500">&times;</button>
            </div>
        @endif
    </div>

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Expenses</h1>
        <p class="text-slate-500 text-[11px] font-bold uppercase tracking-widest text-indigo-600 italic">Financial Outflow Control</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white border border-slate-200 p-5 rounded-sm shadow-sm relative overflow-hidden group">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Expenses</p>
            <p class="text-xl font-mono font-black text-slate-800 mt-1">K{{ number_format($stats['total'] ?? 0, 2) }}</p>
            <div class="absolute bottom-0 left-0 h-1 bg-slate-300 w-full opacity-20"></div>
        </div>

        <div class="bg-white border border-slate-200 p-5 rounded-sm shadow-sm border-t-4 border-t-emerald-500 relative">
            <p class="text-[10px] font-bold text-emerald-600 uppercase tracking-wider">Posted Transactions</p>
            <p class="text-xl font-mono font-black text-slate-800 mt-1">K{{ number_format($stats['posted'] ?? 0, 2) }}</p>
            <div class="mt-2 h-1 w-full bg-emerald-50 rounded-full overflow-hidden">
                <div class="h-full bg-emerald-500" style="width: {{ ($stats['total'] ?? 0) > 0 ? (($stats['posted'] ?? 0) / $stats['total']) * 100 : 0 }}%"></div>
            </div>
        </div>

        <div class="bg-white border border-slate-200 p-5 rounded-sm shadow-sm border-t-4 border-t-amber-500 relative">
            <p class="text-[10px] font-bold text-amber-600 uppercase tracking-wider">Draft Items</p>
            <p class="text-xl font-mono font-black text-slate-800 mt-1">K{{ number_format($stats['draft'] ?? 0, 2) }}</p>
            <div class="mt-2 h-1 w-full bg-amber-50 rounded-full overflow-hidden">
                <div class="h-full bg-amber-500" style="width: {{ ($stats['total'] ?? 0) > 0 ? (($stats['draft'] ?? 0) / $stats['total']) * 100 : 0 }}%"></div>
            </div>
        </div>

        <div class="bg-white border border-slate-200 p-5 rounded-sm shadow-sm border-t-4 border-t-rose-500 relative">
            <p class="text-[10px] font-bold text-rose-600 uppercase tracking-wider">Reversed (Void)</p>
            <p class="text-xl font-mono font-black text-slate-800 mt-1">K{{ number_format($stats['reversed'] ?? 0, 2) }}</p>
            <div class="mt-2 h-1 w-full bg-rose-50 rounded-full overflow-hidden">
                <div class="h-full bg-rose-500" style="width: {{ ($stats['total'] ?? 0) > 0 ? (($stats['reversed'] ?? 0) / $stats['total']) * 100 : 0 }}%"></div>
            </div>
        </div>
    </div>

    <div class="mb-8 border-b border-slate-200 pb-6 flex flex-col xl:flex-row xl:items-center justify-between gap-4">
        <div class="flex flex-wrap md:flex-nowrap items-center gap-3 w-full xl:w-auto">
            <button x-show="searchQuery !== '' || statusFilter !== ''" @click="searchQuery = ''; statusFilter = ''" x-cloak class="text-[10px] font-bold text-rose-500 uppercase hover:text-rose-700 px-2 transition">Reset Filters</button>

            <a href="{{ route('suppliers.expenses.export') }}" class="bg-emerald-600 text-white px-3 py-2 rounded text-[10px] font-bold shadow-sm hover:bg-emerald-700 transition h-9 flex items-center gap-2 uppercase tracking-tighter">
                <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"></path></svg> Export
            </a>

            <a href="{{ route('suppliers.expenses.template') }}" class="bg-amber-50 border border-amber-200 text-amber-700 px-3 py-2 rounded text-[10px] font-bold shadow-sm hover:bg-amber-100 transition h-9 flex items-center gap-2 uppercase tracking-tighter">
                <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="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg> Template
            </a>

            <button @click="showImport = !showImport" class="bg-white border border-slate-300 text-slate-600 px-3 py-2 rounded text-[10px] font-bold shadow-sm hover:bg-slate-50 transition h-9 flex items-center gap-2 uppercase tracking-tighter">
                <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="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg> Import
            </button>

            <select x-model="statusFilter" class="bg-white border border-slate-300 rounded px-3 py-2 text-[10px] font-bold text-slate-600 uppercase h-9 outline-none focus:border-indigo-500 shadow-sm">
                <option value="">All Statuses</option>
                <option value="posted">Posted</option>
                <option value="draft">Draft</option>
                <option value="reversed">Reversed</option>
            </select>

            <div class="relative flex-grow md:w-64">
                <input type="text" x-model="searchQuery" placeholder="Search reference or supplier..." class="w-full bg-white border border-slate-300 rounded px-3 py-2 pl-9 text-xs focus:border-indigo-500 h-9 outline-none shadow-sm">
                <svg class="absolute left-3 top-2.5 h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
            </div>

            <a href="{{ route('suppliers.expenses.create') }}" class="bg-indigo-600 text-white px-4 py-2 rounded text-[11px] font-bold shadow-sm hover:bg-indigo-700 h-9 flex items-center gap-2 uppercase tracking-tighter whitespace-nowrap">
                <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="M12 4v16m8-8H4"></path></svg> Record Expense
            </a>
        </div>
    </div>

    <div x-show="showImport" x-cloak x-transition class="mb-6 p-6 bg-slate-50 border border-dashed border-slate-300 rounded-sm">
        <form action="{{ route('suppliers.expenses.import') }}" method="POST" enctype="multipart/form-data" class="flex items-end gap-4">
            @csrf
            <div class="flex-grow">
                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-2">Select CSV/Excel File</label>
                <input type="file" name="file" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-[10px] file:font-bold file:uppercase file:bg-indigo-50 file:text-indigo-700" required>
            </div>
            <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded text-[11px] font-bold uppercase h-9 flex items-center gap-2">Upload Batch</button>
        </form>
    </div>

    <div class="bg-white border border-slate-300 rounded-sm overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-slate-300 text-[10px] font-bold text-slate-500 uppercase">
                <tr>
                    <th class="px-4 py-3 border-r border-slate-200">Date</th>
                    <th class="px-4 py-3 border-r border-slate-200">Reference</th>
                    <th class="px-4 py-3 border-r border-slate-200">Supplier</th>
                    <th class="px-4 py-3 border-r border-slate-200 text-center">Status</th>
                    <th class="px-4 py-3 border-r border-slate-200">Method</th>
                    <th class="px-4 py-3 border-r border-slate-200 text-right">Amount</th>
                    <th class="px-4 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-xs">
                @forelse($expenses as $expense)
                <tr class="border-b border-slate-200 hover:bg-slate-50 transition" 
                    x-show="(statusFilter === '' || '{{ strtolower($expense->status) }}' === statusFilter) && 
                            (searchQuery === '' || '{{ strtolower($expense->supplier->name ?? '') }}'.includes(searchQuery.toLowerCase()) || '{{ strtolower($expense->reference_no) }}'.includes(searchQuery.toLowerCase()))">
                    <td class="px-4 py-3 border-r border-slate-200 whitespace-nowrap">{{ \Carbon\Carbon::parse($expense->payment_date)->format('d F, Y') }}</td>
                    <td class="px-4 py-3 border-r border-slate-200 font-mono text-indigo-600 font-bold uppercase">{{ $expense->reference_no ?? 'N/A' }}</td>
                    <td class="px-4 py-3 border-r border-slate-200 font-bold text-slate-800">{{ $expense->supplier->name ?? 'Casual Payee' }}</td>
                    <td class="px-4 py-3 border-r border-slate-200 text-center">
                        @php $color = ['posted' => 'emerald', 'draft' => 'amber', 'reversed' => 'rose'][$expense->status] ?? 'slate'; @endphp
                        <span class="bg-{{ $color }}-50 text-{{ $color }}-700 px-2 py-0.5 rounded text-[9px] font-black uppercase border border-{{ $color }}-100">{{ $expense->status }}</span>
                    </td>
                    <td class="px-4 py-3 border-r border-slate-200 uppercase text-[10px] text-slate-500">{{ $expense->payment_method }}</td>
                    <td class="px-4 py-3 border-r border-slate-200 text-right font-mono font-bold tracking-tighter">{{ number_format($expense->total_amount, 2) }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex justify-end gap-3 font-bold text-[10px] uppercase items-center">
                            <a href="{{ route('suppliers.expenses.show', $expense->id) }}" class="text-indigo-600 hover:text-indigo-800 transition">View</a>
                            @if($expense->status === 'draft')
                                <div class="w-px h-3 bg-slate-200"></div>
                                <a href="{{ route('suppliers.expenses.edit', $expense->id) }}" class="text-slate-500 hover:text-indigo-600">Edit</a>
                                <div class="w-px h-3 bg-slate-200"></div>
                                <form action="{{ route('suppliers.expenses.destroy', $expense->id) }}" method="POST">@csrf @method('DELETE')<button type="submit" class="text-red-400 hover:text-red-600" onclick="return confirm('Delete this draft?')">Delete</button></form>
                            @elseif($expense->status === 'posted')
                                <div class="w-px h-3 bg-slate-200"></div>
                                <a href="{{ route('suppliers.expenses.reverse', $expense->id) }}" class="text-rose-600 hover:text-rose-800">Reverse</a>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="p-12 text-center italic text-slate-400 font-bold uppercase text-[10px]">No records found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-8 pagination-container">
        {{ $expenses->links() }}
    </div>
</div>
@endsection