@extends('layouts.app')
@section('title', 'Vouchers')
@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Accounts' => route('cash.index'), 'Vouchers' => null]])
@endsection
@section('content')
<div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Vouchers</h1>
            <p class="text-sm text-slate-500 mt-1">All cash & bank transactions</p>
        </div>
        <div class="flex gap-2">
            <x-button variant="success" icon="plus-circle" :href="route('vouchers.create', ['type' => 'receipt'])">Receipt</x-button>
            <x-button variant="danger" icon="minus-circle" :href="route('vouchers.create', ['type' => 'payment'])">Payment</x-button>
        </div>
    </div>
    <x-card :padding="false">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200">
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase text-slate-500">Voucher</th><th>Date</th><th>Type</th><th>Party</th><th>Account</th><th class="text-right">Amount</th><th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($vouchers as $v)
                    <tr class="hover:bg-slate-50/50">
                        <td class="px-4 py-3 text-xs font-mono font-semibold">{{ $v->voucher_no }}</td>
                        <td class="px-4 py-3 text-xs text-slate-500">{{ $v->voucher_date->format('d M Y') }}</td>
                        <td class="px-4 py-3"><x-badge :variant="$v->type === 'receipt' ? 'success' : 'danger'">{{ ucfirst($v->type) }}</x-badge></td>
                        <td class="px-4 py-3 text-sm">{{ $v->party->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-xs text-slate-500">{{ $v->account->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right font-bold counter-num">৳{{ number_format($v->amount) }}</td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex justify-center gap-1">
                                <a href="{{ route('vouchers.show', $v->id) }}" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100"><i data-lucide="eye" class="w-4 h-4"></i></a>
                                <form action="{{ route('vouchers.destroy', $v->id) }}" method="POST" onsubmit="return confirm('Delete?')" class="inline">@csrf @method('DELETE')
                                    <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-red-50 text-slate-500 hover:text-red-600"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center py-8 text-slate-500">No vouchers found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($vouchers->hasPages())<div class="px-4 py-3 border-t">{{ $vouchers->withQueryString()->links() }}</div>@endif
    </x-card>
</div>
@endsection
