@extends('layouts.app')

@section('title', 'Recycle Bin')

@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Recycle Bin' => null]])
@endsection

@section('content')
<div x-data="{ tab: '{{ request('type', 'purchase') }}' }">
    <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">Recycle Bin</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Restore or permanently delete removed records</p>
        </div>
    </div>

    <div class="border-b border-slate-200 dark:border-slate-800 mb-6 overflow-x-auto">
        <nav class="flex gap-1">
            @foreach([
                ['id' => 'purchase', 'label' => 'Deleted Purchases', 'icon' => 'shopping-cart', 'count' => $counts['purchase']],
                ['id' => 'sales', 'label' => 'Deleted Sales', 'icon' => 'receipt', 'count' => $counts['sales']],
                ['id' => 'supplier', 'label' => 'Deleted Suppliers', 'icon' => 'truck', 'count' => $counts['supplier']],
                ['id' => 'customer', 'label' => 'Deleted Customers', 'icon' => 'users', 'count' => $counts['customer']],
            ] as $t)
                <button @click="tab = '{{ $t['id'] }}'"
                    :class="tab === '{{ $t['id'] }}' ? 'border-primary-500 text-primary-600' : 'border-transparent text-slate-500 hover:text-slate-700'"
                    class="flex items-center gap-2 px-4 py-3 text-sm font-semibold border-b-2 transition whitespace-nowrap">
                    <i data-lucide="{{ $t['icon'] }}" class="w-4 h-4"></i>
                    {{ $t['label'] }}
                    <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{{ $t['count'] }}</span>
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Purchases Tab --}}
    <div x-show="tab === 'purchase'">
        <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 dark:border-slate-800">
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Voucher</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Supplier</th>
                            <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Amount</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Deleted At</th>
                            <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-500">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @forelse($deletedPurchases as $p)
                            <tr class="hover:bg-slate-50/50">
                                <td class="px-4 py-3 text-xs font-mono text-rose-600 font-semibold">{{ $p->voucher_no }}</td>
                                <td class="px-4 py-3 text-sm">{{ $p->party->name ?? '—' }}</td>
                                <td class="px-4 py-3 text-right text-sm font-semibold counter-num">৳{{ number_format($p->grand_total) }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $p->deleted_at->format('M d, Y h:i A') }}</td>
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center justify-center gap-1">
                                        <form action="{{ route('recycle.purchase.restore', $p->id) }}" method="POST" class="inline">
                                            @csrf
                                            <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 dark:bg-emerald-500/10 rounded-lg transition">
                                                <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Restore
                                            </button>
                                        </form>
                                        <form action="{{ route('recycle.purchase.destroy', $p->id) }}" method="POST" class="inline" onsubmit="return confirm('Permanently delete? Stock ledger entries will also be removed.')">
                                            @csrf @method('DELETE')
                                            <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-rose-700 bg-rose-50 hover:bg-rose-100 dark:bg-rose-500/10 rounded-lg transition">
                                                <i data-lucide="trash-2" class="w-3 h-3"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center py-8 text-sm text-slate-500">No deleted purchases.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>

    {{-- Sales Tab --}}
    <div x-show="tab === 'sales'" x-cloak>
        <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 dark:border-slate-800">
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Voucher</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Customer</th>
                            <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Amount</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Deleted At</th>
                            <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-500">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @forelse($deletedSales as $s)
                            <tr class="hover:bg-slate-50/50">
                                <td class="px-4 py-3 text-xs font-mono text-emerald-600 font-semibold">{{ $s->voucher_no }}</td>
                                <td class="px-4 py-3 text-sm">{{ $s->party->name ?? '—' }}</td>
                                <td class="px-4 py-3 text-right text-sm font-semibold counter-num">৳{{ number_format($s->grand_total) }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $s->deleted_at->format('M d, Y h:i A') }}</td>
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center justify-center gap-1">
                                        <form action="{{ route('recycle.sale.restore', $s->id) }}" method="POST" class="inline">
                                            @csrf
                                            <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 dark:bg-emerald-500/10 rounded-lg transition">
                                                <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Restore
                                            </button>
                                        </form>
                                        <form action="{{ route('recycle.sale.destroy', $s->id) }}" method="POST" class="inline" onsubmit="return confirm('Permanently delete?')">
                                            @csrf @method('DELETE')
                                            <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-rose-700 bg-rose-50 hover:bg-rose-100 dark:bg-rose-500/10 rounded-lg transition">
                                                <i data-lucide="trash-2" class="w-3 h-3"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center py-8 text-sm text-slate-500">No deleted sales.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>

    {{-- Suppliers Tab --}}
    <div x-show="tab === 'supplier'" x-cloak>
        <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 dark:border-slate-800">
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Name</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Phone</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Deleted At</th>
                            <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-500">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @forelse($deletedSuppliers as $s)
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium">{{ $s->name }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $s->phone }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $s->deleted_at->format('M d, Y') }}</td>
                                <td class="px-4 py-3 text-center">
                                    <form action="{{ route('recycle.party.restore', $s->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition">
                                            <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Restore
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center py-8 text-sm text-slate-500">No deleted suppliers.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>

    {{-- Customers Tab --}}
    <div x-show="tab === 'customer'" x-cloak>
        <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 dark:border-slate-800">
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Name</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Phone</th>
                            <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Deleted At</th>
                            <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-500">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @forelse($deletedCustomers as $c)
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium">{{ $c->name }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $c->phone }}</td>
                                <td class="px-4 py-3 text-xs text-slate-500">{{ $c->deleted_at->format('M d, Y') }}</td>
                                <td class="px-4 py-3 text-center">
                                    <form action="{{ route('recycle.party.restore', $c->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition">
                                            <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Restore
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center py-8 text-sm text-slate-500">No deleted customers.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>
</div>
@endsection
