@extends('layouts.app')
@section('title', 'Expenses')
@section('page-title', 'Expense Management')
@section('breadcrumb', 'Track all business expenses')

@section('content')
{{-- Summary Cards --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach([
        ['label'=>'Total Expenses','value'=>$summary['total'],'color'=>'red','icon'=>'💸'],
        ['label'=>'Salary & Wages','value'=>$summary['by_type']['salary'] ?? 0,'color'=>'indigo','icon'=>'👥'],
        ['label'=>'Utilities & Bills','value'=>($summary['by_type']['utility'] ?? 0) + ($summary['by_type']['bill'] ?? 0),'color'=>'yellow','icon'=>'⚡'],
        ['label'=>'This Month','value'=>$summary['this_month'] ?? 0,'color'=>'blue','icon'=>'📅'],
    ] as $card)
    <div class="card-sm">
        <div class="flex items-center justify-between mb-2">
            <span class="text-lg">{{ $card['icon'] }}</span>
            <span class="text-xs text-slate-400 font-medium">{{ $card['label'] }}</span>
        </div>
        <p class="text-xl font-bold text-slate-800">₹{{ number_format($card['value'], 2) }}</p>
    </div>
    @endforeach
</div>

{{-- Expense Type Quick Links --}}
<div class="flex flex-wrap gap-2 mb-4">
    <a href="{{ route('expenses.create') }}" class="btn-primary btn-sm">
        <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.5" d="M12 4v16m8-8H4"/></svg>
        Add Expense
    </a>
    <a href="{{ route('expenses.employees') }}" class="btn-secondary btn-sm">👥 Employees</a>
    <a href="{{ route('expenses.salary') }}" class="btn-secondary btn-sm">💰 Process Salary</a>
    <a href="{{ route('expenses.report.download') }}?from={{ request('from',now()->startOfMonth()->toDateString()) }}&to={{ request('to',now()->toDateString()) }}" class="btn-secondary btn-sm">
        <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"/></svg>
        PDF Report
    </a>
</div>

{{-- Filters --}}
<div class="card mb-4 p-4">
    <form method="GET" class="flex flex-wrap gap-3">
        <select name="type" class="form-input w-44 text-sm py-2">
            <option value="">All Types</option>
            @foreach($types as $key => $type)
            <option value="{{ $key }}" {{ request('type') === $key ? 'selected' : '' }}>{{ $type['icon'] }} {{ $type['label'] }}</option>
            @endforeach
        </select>
        <input type="date" name="from" value="{{ request('from', now()->startOfMonth()->toDateString()) }}" class="form-input w-36 text-sm py-2">
        <input type="date" name="to" value="{{ request('to', now()->toDateString()) }}" class="form-input w-36 text-sm py-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search description..." class="form-input flex-1 min-w-40 text-sm py-2">
        <button type="submit" class="btn-secondary btn-sm">Filter</button>
        @if(request()->hasAny(['type','from','to','search']))
        <a href="{{ route('expenses.index') }}" class="btn-secondary btn-sm">Clear</a>
        @endif
    </form>
</div>

{{-- Table --}}
<div class="card p-0 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="table-th">Date</th>
                    <th class="table-th">Type</th>
                    <th class="table-th">Description</th>
                    <th class="table-th">Vendor</th>
                    <th class="table-th">Payment</th>
                    <th class="table-th text-right">Amount</th>
                    <th class="table-th text-right">GST</th>
                    <th class="table-th text-right">Total</th>
                    <th class="table-th text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($expenses as $exp)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="table-td text-slate-500 text-xs">{{ \Carbon\Carbon::parse($exp->expense_date)->format('d M Y') }}</td>
                    <td class="table-td">
                        @php $t = $types[$exp->expense_type] ?? ['label'=>$exp->expense_type,'icon'=>'💸','color'=>'gray']; @endphp
                        <span class="badge badge-{{ $t['color'] ?? 'gray' }} text-xs">{{ $t['icon'] }} {{ $t['label'] }}</span>
                    </td>
                    <td class="table-td font-medium max-w-xs truncate">{{ $exp->description }}</td>
                    <td class="table-td text-slate-500">{{ $exp->vendor_name ?: '—' }}</td>
                    <td class="table-td">
                        <span class="badge-gray text-xs capitalize">{{ str_replace('_',' ',$exp->payment_mode) }}</span>
                    </td>
                    <td class="table-td text-right">₹{{ number_format($exp->amount, 2) }}</td>
                    <td class="table-td text-right text-slate-400 text-xs">{{ $exp->gst_amount > 0 ? '₹'.number_format($exp->gst_amount,2) : '—' }}</td>
                    <td class="table-td text-right font-semibold">₹{{ number_format($exp->total_amount, 2) }}</td>
                    <td class="table-td text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ route('expenses.edit', $exp) }}" class="p-1.5 text-slate-400 hover:text-brand-600 rounded-lg hover:bg-brand-50 transition-colors">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </a>
                            <form method="POST" action="{{ route('expenses.destroy', $exp) }}" onsubmit="return confirm('Delete this expense?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="p-1.5 text-slate-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-colors">
                                    <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="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>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="py-16 text-center">
                    <p class="text-slate-400 font-medium">No expenses recorded</p>
                    <a href="{{ route('expenses.create') }}" class="text-brand-600 text-sm hover:underline mt-1 inline-block">Add first expense</a>
                </td></tr>
                @endforelse
            </tbody>
            @if($expenses->count() > 0)
            <tfoot class="bg-slate-50 border-t border-slate-200">
                <tr>
                    <td colspan="7" class="px-4 py-3 text-sm font-semibold text-slate-600">Page Total</td>
                    <td class="px-4 py-3 text-right font-bold text-slate-800">₹{{ number_format($expenses->sum('total_amount'), 2) }}</td>
                    <td></td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
    @if($expenses->hasPages())
    <div class="p-4 border-t border-slate-100">{{ $expenses->links() }}</div>
    @endif
</div>
@endsection