@extends('layouts.layout-horizontal')

@section('title', ' Products')

@section('css')
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Create Product</h5>
                    <a href="{{ route('products.index') }}" class="btn btn-secondary">Back</a>
                </div>
                <form method="post" action="{{ route('products.store') }}" enctype="multipart/form-data">
                    <div class="card-body">
                        @csrf
                        @if(request('from_dropdown'))
                            <input type="hidden" name="from_dropdown" value="1">
                        @endif
                        @include('products._form')
                    </div>
                    <div class="card-footer">
                        <div class="d-flex gap-2 mt-3">
                            <button class="btn btn-primary" name="action" value="save">Save</button>
                            <button class="btn btn-outline-primary" name="action" value="save_and_new">Save & Create Another</button>
                            <a href="{{ route('products.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Existing Products <span class="badge bg-secondary">{{ count($existingProducts) }}</span></h5>
                    <small class="text-muted">Check before adding to avoid duplicates</small>
                </div>
                <div class="card-body p-0">
                    <div class="p-3 pb-0">
                        <input type="text" id="productSearch" class="form-control form-control-sm" placeholder="Search existing products...">
                    </div>
                    <div style="max-height: 500px; overflow-y: auto;" class="p-3">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Name</th>
                                    <th>HSN</th>
                                    <th>Unit</th>
                                </tr>
                            </thead>
                            <tbody id="existingProductsList">
                                @foreach($existingProducts as $ep)
                                    <tr>
                                        <td><a href="{{ route('products.edit', $ep->id) }}">{{ $ep->name }}</a></td>
                                        <td>{{ $ep->hsn ?? '-' }}</td>
                                        <td>{{ $ep->unit ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.getElementById('productSearch')?.addEventListener('input', function() {
    const q = this.value.toLowerCase();
    document.querySelectorAll('#existingProductsList tr').forEach(function(row) {
        row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
});

// Highlight matching product as user types product name
const nameInput = document.querySelector('input[name="name"]');
if (nameInput) {
    nameInput.addEventListener('input', function() {
        const val = this.value.toLowerCase().trim();
        let hasDuplicate = false;
        document.querySelectorAll('#existingProductsList tr').forEach(function(row) {
            const name = row.cells[0]?.textContent?.toLowerCase().trim();
            if (val && name && name.includes(val)) {
                row.classList.add('table-warning');
                hasDuplicate = true;
            } else {
                row.classList.remove('table-warning');
            }
        });
        // Show warning if potential duplicate found
        let warn = document.getElementById('duplicateWarning');
        if (hasDuplicate && val.length >= 2) {
            if (!warn) {
                warn = document.createElement('div');
                warn.id = 'duplicateWarning';
                warn.className = 'text-warning small mt-1';
                warn.innerHTML = '<i class="ph-duotone ph-warning"></i> Similar product(s) already exist. Check the list on the right.';
                nameInput.parentNode.appendChild(warn);
            }
        } else if (warn) {
            warn.remove();
        }
    });
}
</script>
@endpush