@extends('layouts.admin')
@section('title', 'Items')
@section('page-title', 'Items & Services')

@section('content')
<div class="card billing-page-card">
    <div class="card-header align-items-center d-flex flex-wrap gap-2">
        <div class="flex-grow-1">
            <h4 class="card-title mb-1">Items & Services</h4>
            <p class="text-muted mb-0 small">Manage products with stock and billable services</p>
        </div>
        <a href="{{ route('admin.items.create') }}" class="btn btn-success">
            <i class="ri-add-line align-middle me-1"></i> New Item
        </a>
    </div>
    <div class="card-body">
        @include('partials.admin.list-toolbar', ['searchId' => 'items-search', 'placeholder' => 'Search by name, SKU, HSN...'])

        <div class="billing-table-wrap table-responsive">
            <table class="table table-hover align-middle mb-0" id="items-table">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Type</th>
                        <th>HSN / SAC</th>
                        <th>Unit</th>
                        <th>Sale</th>
                        <th>Purchase</th>
                        <th>Tax</th>
                        <th>Stock</th>
                        <th class="text-end" style="width:100px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($items as $item)
                    <tr data-search="{{ strtolower($item->name.' '.$item->sku.' '.$item->hsn_sac.' '.$item->type) }}">
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <span class="billing-avatar-sm billing-avatar-sm--{{ $item->type }}">
                                    {{ strtoupper(substr($item->name, 0, 1)) }}
                                </span>
                                <div>
                                    <div class="billing-item-name">{{ $item->name }}</div>
                                    @if($item->sku)
                                        <div class="billing-item-sub">SKU: {{ $item->sku }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-{{ $item->type === 'product' ? 'primary' : 'warning' }}-subtle text-{{ $item->type === 'product' ? 'primary' : 'warning' }} text-uppercase">
                                {{ $item->type }}
                            </span>
                        </td>
                        <td><code class="text-muted small">{{ $item->hsn_sac ?? '—' }}</code></td>
                        <td>{{ $item->unit }}</td>
                        <td>
                            <span class="text-success fw-medium">{{ $item->sale_currency ?? 'INR' }} {{ number_format($item->sale_rate, 2) }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ $item->purchase_currency ?? 'INR' }} {{ number_format($item->purchase_rate, 2) }}</span>
                        </td>
                        <td>{{ $item->taxRate?->name ?? '—' }}</td>
                        <td>
                            @if($item->type === 'product')
                                <span class="badge bg-light text-dark">{{ number_format($item->stock_qty, 3) }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <div class="d-flex gap-1 justify-content-end">
                                <a href="{{ route('admin.items.edit', $item) }}" class="btn btn-sm btn-soft-primary" title="Edit">
                                    <i class="ri-pencil-line"></i>
                                </a>
                                <form action="{{ route('admin.items.destroy', $item) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this item?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-soft-danger" title="Delete">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr class="no-results-row">
                        <td colspan="9">
                            <div class="billing-empty">
                                <div class="billing-empty__icon"><i class="ri-box-3-line"></i></div>
                                <h5 class="mb-2">No items yet</h5>
                                <p class="text-muted mb-3">Create your first product or service to use on invoices and bills.</p>
                                <a href="{{ route('admin.items.create') }}" class="btn btn-success">
                                    <i class="ri-add-line me-1"></i> Add New Item
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const search = document.getElementById('items-search');
    const rows = document.querySelectorAll('#items-table tbody tr[data-search]');
    if (!search || !rows.length) return;

    search.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        let visible = 0;
        rows.forEach(row => {
            const match = !q || row.dataset.search.includes(q);
            row.style.display = match ? '' : 'none';
            if (match) visible++;
        });
    });
});
</script>
@endpush